Laisser un commentaire

SOMMAIRE

I.Introduction
II La fenêtre de visualisation des projets pour créer ou ouvrir vos projets
III Configuration de votre projet
IV Ajouter des pages à votre site Web
V Le choix du thème
VI La barre latérale de configuration de votre site
VII Visualisation des pages dans Rapidweaver
VIII Définir une destination de publication
IX Conclusion

I Introduction

Dans ce tuoriel nous allons voir comment créer un petit site web avec la nouvelle version de Rapidweaver. Nous allons en profiter pour faire un petit tour d'horizon de l'interface utilisateur et voir les fondamentaux pour commencer votre site web.

II La fenêtre de visualisation des projets pour créer ou ouvrir vos projets

Comme dans les versions précédentes vous pouvez créer un projet à partir de la fenêtre de visualisation des projets qui s'ouvre en général au démarrage de l'application et qui ressemble à ceci :

Vous pouvez éviter l'affichage de cette fenêtre en décochant l'option "Show this windows when Rapidweaver launches". Sur cette page vous verrez aussi vos futurs projets dans la colonne de droite comme vous pouvez le constater.

Vous avez aussi des liens vers les forums Rapidweaver si vous avez besoin d'aide dans vos futurs projets. Vous pouvez aussi ouvrir un projet créer avec une version antérieure de Rapidweaver en cliquant sur le lien "Open another project…" la conversion se passera bien si vos addons sont compatibles avec cette nouvelle version.

A partir de cette fenêtre on peut donc créer un nouveau projet de site web en cliquant sur le lien "Create a new Rapidweaver project".

Une fois le lien cliqué une nouvelle fenêtre d'édition s'ouvre à l'écran vous proposant de visionner une première vidéo qui pourra vous donner quelques informations précises si vous êtes anglophone.

Pour valider la création de votre projet il faut le sauvegarder sur votre ordinateur. Pour ce faire il suffit de cliquer sur le menu "File" et ensuite sur la commande "Save As…" ou bien "Save.." la boîte de dialogue "Save As " s'ouvre alors vous demandant de donner un nom à votre fichier projet. Les fichiers projet Rapidweaver 8 ont tous le type RW8. Vous devez aussi choisir un emplacement comme ceci :

Normalement si vous fermez votre fenêtre de projets Rapidweaver ainsi que l'application et la relancez vous devriez voir apparaître votre projet dans la fenêtre de visualisation des projets dans la colonne de droite.

Voila vous êtes prêt à commencer votre site web, nous allons maintenant voir comment on ajoute des pages à notre site web et comment les paramétrer. Nous allons commencer par configurer quelques paramètres pour votre projet avant de pouvoir éditer vos pages.

III Configuration de votre projet

Avant tout il faut configurer quelques paramètres avant de pouvoir commencer. Les principaux paramètres à éditer se trouvent dans la fenêtre des Préférences de Rapidweaver. Ceux-ci vous permmettront de personnaliser quelques aspects de votre environnment de développement. Pour afficher cette fenêtre il vous suffit de cliquer sur le menu Rapidweaver 8 -> Preferences. Cette fenêtre s'affiche alors : Comme on peut le constater la fenêtre contient plusieurs onglets. Naturellement le focus est donné au premier onglet nommé "Genneral". Dans celui-ci vous trouverez des paramètres qui vous permettront de personnaliser certains aspects de votre environnement de développement et de l'application. C'est dans celui-ci que vous pourrez décider de'ouvrir ou non la fenêtre de projet que l'on vient de voir dans la partie précédente. L'essentiel des paramètres se trouvent dans la section "Advanced". Vous pourrez ainsi activer ou non les outils de développements Web qui vous aideront dans vos futurs développements, activer le rendu des pages PHP si vous souhaitez utiliser du code PHP afin de dynamiser votre site, activer la complétion du code ceci est une fonctionnalité très utile si vous éditez votre propre code. D'autres paramètres vous permettent aussi de faire apparaître des notifications pour chaque action réaliser par l'environnement comme par exemple lors d'un transfert de fichiers vers votre serveur web. Les autres onglets vous permettent de gérer les mises à jours de l'application. Vous pourrez faire en sorte que le l'application vérifie à chaque démarrage s'il y a des mises à jours disponibles sur le serveur de Rapidweaver. Dans l'onglet Addons vous trouverez tous les modules, thèmes, Stacks complémentaires que vous aurez ajoutés à l'application. Vous pourrez ainsi les afficher dans le finde ou les exporter pour les importer sur un autre ordinateur par exemple.

IV Ajouter des pages à votre site Web

Pour pouvoir ajouter une page à votre site web, il suffit de cliquer sur le bouton "Add" dans la barre d'outils du haut de Rapidweaver. Une fenêtre déroulante s'affiche montrant tous les types de pages pouvant être ajouté: Là encore de nouveaux types de pages pourront être ajoutés en achetant des addons sur le site de Rapidweaver ou le site des développeurs de addons, comme par exemple le type de page Stacks que nous verrons dans un prochain article. De base Rapidweaver fournit ces types de page :

• Blog : ce type vous permet de mettre en place un blog pour votre site. Rapidweaver se charge de la génération des pages. Vous n'avez qu'à créer vos posts;
• Contact Form : vous prmet de créer une page avec un formulaire de contact basique. Celui-ci ne gère pas les captcha par exemple;
• File Sharing : vous permet de créer une page de téléchargement de fichiers. Si vous voulez mettre à la disposition de vos visiteurs des pdf ou tout autre type de fichier ce type de page peut être utilisé.
• Code : ce type est utilisé par ceux qui ont des connaissances en développement et qui veulent personnaliser le contenu de leur page avec leur propre code.
• Markdown : ce type permet d'utiliser le langage simplifié Markdown pour insérer du contenu dans vos pages.
• Photo Album : ce type permet de générer une gallerie de photo simplifiée.
• Sitemap : ce type permet de fournir au visiteur l'arborescence des pages de votre site Web.
• Styled Text : ce type permet de créer une page comme si vous utilisiez un traitement de texte.

Normalement avec les types de page fournit en standard vous avez toutes les options disponibles pour commencer votre projet dans de bonnes conditions. Mais au fur et à mesure que votre projet avancera dans les temps il est fort probable que vous aurez besoin d'autres types de pages que l'on appelle "Plugins" dans le monde de Rapidweaver. Vous en avez trois exemples dans l'image : Stacks, FormLoom et Rapidblog. Ce sont des versions énormément améliorées des types de pages blog et Contact. Stacks permet de créer des pages dans lesquelles on peut insérer des modules. Normalement on commence toujours un site Web par la page d'accueil du site. Imaginons que nous avons choisi le type de page "Styled Text". L'édietur de contenu s'ouvre dans la partie centrale une barre latérale s'ouvre à droite permettant de paramétrer votre page Web. Dans la barre latérale de gauche s'affiche l'arborescence des pages de votre projet. La nouvelle page s'affiche alors avec le nom "Untitled page". Vous pouvez lui donner le nom "Accueil" par exemple en double cliquant dessus ou cliquant droit et en sélectionnant la commande "Rename". Dans cet espace vous pourrez par exemple dupliquer une page, en supprimer, la déposer directement sur votre serveur FTP par exemple grâce aux commandes du menu contextuel. Dans la partie "inspector" (barre latérale de droite), nous allons nous intéresser à l'onglet General Settings dans ce tutoriel. Une page peut être incluse ou non dans le menu de navigation. Pour qu'elle le soit il faut que l'option "Show in navigation" soit cochée. Vous avez aussi la possibilité d'ouvrir la page dans un nouvel onglet en cochant l'option "Open in a new window". La partie "Metadata" est la plus importante car ces informations vont être intégrée dans le fichier de code source généré par Rapidweaver :

• Browser Title : permet de donner un titre qui sera afficher dans l'onglet du navigateur.
• Folder : permet de ranger vos fichiers selon arborescence adaptée. Par exemple Racine du site -> Tutoriels Conception Web -> Tuto Rapidweaver, vous allez ranger votre page dans le dossier "/Tutoriels Conception Web". Ceci permet aux moteurs de recherche de grouper les pages par catégories
• Filename : donne le nom du fichier associé à la page Web. Dans notre cas : index.html ou index.php (nom donné à la page d'accueil du site).
• Encoding : permet d'associer un type d'encodage au fichier source : laissez la valeur par défaut UTF-8. Il gère un grand nombre de caractères spéciaux (caractères accentués par exemple).

Dans notre cas la page d'accueil sera placée à la racine du projet Donc vous pouvez donner la valeur "/" à l'option folder. Il est possible aussi de modifier certaines parties de la page par rapport aux options de thèmes par défaut, comme par exeple le Titre queoi apparaît dans la banniére de titre par exemple, le slogan ou encore le pied de page par exemple. La partie centrale permet l'édition du contenu. Elle met à votre disposition différents outils pour formater votre texte : Vous pourrez donc agir sur le texte que vous allez éditer en le formatant en italique, en gras, ou en souligné. Vous pouvez également changer de fonte en cliquant sur le bouton "A". Vous pouvez aussi aligner le texte à gauche ou à droite ou encore le centrer. Le bouton "<>" vous permet de formater vos titres, de paramémtrer le positionnement d'une image par rapport à un texte. De formater aussi du contenu spécial comme du code ou des citations. De créer aussi des paragraphes. Vous avez maintenant les bases nécessaires pour éditer de nouvelles pages pour votre site et mener à bien votre projet. Un dernier mot sur la gestion des ressources, car vous aurez toujours besoin d'ajouter des fichiers images par exemple dans votre page. Pour ce faire un moyen simple est le "drag and drop", vous faites glisser une image de votre bureau sur votre espace de contenu central par exemple celle-ci va être immédiatement associée à votre page et au fichier. Ces ressources sont visualisables dans le dossier "files/". Le gestionnaire de ressources a été revu avec cette nouvelle version et permet de configurer plus finement celles-ci. Pour accéder au gestionnaire de ressources il suffit de cliquer sur le bouton "Resources" dans la barre d'outils en haut de Rapidweaver. C'est dans cette fenêtre que vous retrouverez tous les fichiers ajoutés dans vos pages Rapidweaver. Plus vous aurez de pages et plus vous aurez de ressources. Il est bon de créer des dossiers associés au nom de la page pour pouvoir les retrouver plus facilement. Dans cet espace vous pourrez bénéficier d'images gratuites issues de "Unsplash" que vous pourrez utiliser dans votre projet. Vous avez aussi accès à vos images importées avec l'application Photos d'Apple. Tout cela est disponible dans la partie "Sources" de la barre latérale de la fenêtre. Vous pouvez ajouter des images directement dans cette fenêtre en cliquant sur le bouton "+" dans la barre d'outils de la fenêtre. Vous pouvez ainsi créer un dossier pour vos images relatives à une page, exemple "Index" ou "Accueil dans notre cas. Il vous est possible aussi d'ajouter une image d'un autre emplacement local ou réseau.

V Le choix du thème

Il est temps d'associer un thème à l'ensemble de nos pages. Rapidweaver facilite cette opération en fournissant un grand nombre de thème avec l'application. Si aucun des des thèmes fournis ne vous convient il va falloir en aquérir un auprès des sociétés qui développent des addons, mais cela sera payant bien entendu. Ceci nous fait gagner un temps certain qui nous évite de coder une grande partie des éléments de la page. Cette fonctionnalité est très intéressante aussi pour ceux qui n'ont pas de connaissances en webdesign ou qui n'ont que très peu de temps à consacrer à cette tâche et préfèrent consacrer leur temps sur le contenu. Les thèmes sont accessibles par l'intermédiaire de la barre d'outils en haut de l'application. Il suffit de cliquer sur le bouton "Themes". Une fenêtre déroulante apparaît avec un aperçu des différents thèmes disponibles : Un outil de recherche est aussi disponible si vous connaissez le nom du thème à appliquer. Vous pouvez trier les thèmes par leur auteur, la version de l'application Rapidweaver. Par défaut tous les thèmes sont affichés. Il vous suffit de cliquer sur le thème choisi pour l'appliquer à l'ensemble des pages de votre projet de site Web. Ce paramètre n'est pas non plus figé et vous pourrez changer de thème tout au long du cycle de vie de votre projet. Tous ces thèmes peuvent être personnalisés, mais il faut savoir que certains thèmes offrent très peu d'option de personnalisation. Pour des sites professionnels mieux vaut aquérir des thèmes payants qui vous offriront des options plus étendues.

VI La barre latérale de configuration de votre site

Une autre partie importante pour paramétrer plus finement cette fois ci le contenu de votre projet de site web est la section Settings dans la barre latérale située à gauche dans l'application. Pour le moment les paramètres "General", "Advanced" vont nous intéresser. C'est la section "General" que vous allez par exemple paramétrer le titre de votre site Web, le slogan, le pied de page. Vous pourrez paramétrer aussi votre adresse mail pour que les internautes puissent vous contacter, mais aussi la langue du site, ou encore le logo du site. Dans le pied de page il est possible d'introduire du code HTML personnalié et vous pouvez même introduire du code PHP. Dans la partie "Advanced", vous allez pouvoir configurer des paramètres un peu plus avancées concernant le design de vos pages par exemple pour afficher ou non un fil d'ariane (breadcrumb trail) pour faciliter la navigation de vos visiteurs. Mais aussi vous avez la possibilité de sécuriser votre adresse mail pour qu'elle n'apparaîsse pas en clair. Une option importante pour votre site, si vous voulez qu'il soit correctement référencer sur les moteurs de rechercher, est "Generate Search Engine Sitemap". Les moteurs de recherche s'appuye sur le fichier généré pour référencer vos pages web. Même si celle-ci n'est qu'une étape dans le référencement, elle est primordiale. N'oubliez pas de la cocher. Après il y a tout un tas d'options vous permettant d'agir sur les feuilles de styles produites par Rapidweaver ou celles que vous ajouterez dans le futur pour ajouter de nouvelles fonctionnalités à vos pages, cela vaut aussi pour vos scripts fichiers Javascript. Leurs poids risquent d'augmenter et le chargement de vos pages peut s'en trouver affecter. Pour pallier à ce problème vous pourrez utiliser l'option "Minify CSS and Javascript". Une chose importante pour la suite du projet est de donner le type d'extension que vous donnerez à vos pages. Si vous souhaitez utiliser principalement les technologies HTML/Javascript/CSS alors vous pouvez attribuer l'extension "html" à vos pages. Dans le cas où vous souhaitez intégrer du code PHP afin de requêter une base de données par exemple vous aurez peut-être besoin de l'extension "php". Ce paramètre n'étant pas figé il est modifiable durant toute la vie du projet. Mais c'est bon de la savoir dès le début. Si vous voulez visualiser vos pages php à l'intérieur de Rapidweaver il vous suffit d'utiliser l'option "Start Web Server" en donnant le numéro de port de votre serveur Web qui devrait être 80 par exemple si c'est un serveur Apache. Vous pouvez démarrer le serveur Web lorsque vous souhaiter visualiser une page en cochant l'option "Automatically start Web Server on document open". Personnellement je préfère voir le résultat de mes pages directement dans un navigateur donc je ne la coche pas. Afin de personnliser un thème il faut aller dans la barre latérale de rapidweaver et dans les "Settings" cliquer sur le menu "Master Style". Une page avec des options modifiables apparaît alors. Dans la barre latérale à droite s'affichent tous les paramètres modifiables, comme la largeur de votre page, ou bien gérer une barre latérale ou non. Suivant les options disponibles vous pourrez aussi modifier les images de banniéres. Certains thèmes en proposent plusieurs par défaut. Mais vous pourrez aussi utiliser vos propres images en déposant leur fichier dans le dossier du thème de votre site. Cette dernière option sera vue dans un autre tutoriel. D'autres options essentiels sont disponibles pour gérer les couleurs de vos fontes, le type de fonte utiliser. Bien sûr de nombreux éléments vont pouvoir être surchargés aussi via l'éditeur de CSS que nous verrons aussi dans un prochain tutoriel. Il faut noter aussi que la plupart des thèmes sont Responsive Design c'est-à-dire qu'ils gèrent pour vous cette fonctionnalité qui permet de géné rer des pages qui s'affichent sur tous les supports (smartphaones, desktop, tablettes, etc…). Nous allons maintenant voir comment ajouter de nouvelles pages à notre projet de site web pour ajouter du contenu.

VII Visualisation des pages dans Rapidweaver

Une fois que vous avez créé votre page et vous lui avez associer un thème il est indispensable de le prévisualiser avant de le publier sur votre espace FTP et de rendre visible pour vos visiteurs. Rapidweaver 8 vous propose plusieurs options dans la barre d'outils pour pouvoir prévisualiser vos pages. Au milieu de la barre d'outils vous avez l'icône en forme d'oeil qui vous permet de transformer la page de contenu de votre fenêtre d'édition en mode de prévisualisation. Une autre fonctionnalité qui a fait son apparition avec Rapidweaver 8 est le mode de simulation qui vous permet de tester votre suivant plusieurs types de supports.

VIII Définir une destination de publication

Nous allons voir maintenant quelles sont les options pour publier votre site Web par l'intermédaire du menu Publishing. Rapidweaver est livré avec une fonctionnalité de publication FTP. Vous pourrez donc directement publier les fichiers de votre site sur l'espace FTP de votre hébergeur. Vous avez aussi la possibilité de faire une copie locale de vos fichiers sur votre ordinateur, afin de par exemple éditer les fichiers dans une autre application de développement Web par exemple. Tout ceci se réalise dans cette fenêtre : Dans le cas d'un emplacement local vous devez juste définir le dossier où seront copiés les fichiers du projet. Vous pouvez aussi donner un nom à vos différentes destinations créés ce qui vous aidera à retrouver la bonne destination lorsque vous aurez plusieurs projets à gérer. sauvegardez les destinations créées en cliquant sur le bouton "Add to Bookmarks". Il est possible de planifier des backup de vos projets suivant des ériodes bien définies (une fois par jour, à chaque fois que vous publiez une mise à jour, une fois par semiane). Vous voyez que vous pouvez aussi éditer le fichier .htaccess. Celui-ci est très intéressant par exemple pour rediriger les connexions de http vers https. Ce qui est primordial ces derniers temps car les navigateurs et les moteurs de recherche privilégie les sites sécurisés. Si vous regarder le dossier généré dans le Finder vous devriez voir une arborescence comme celle-ci : On retrouve bien notre fichier "index.html" à la racine et nos ressources. Dans le dossier "rw_common" on retrouve tous les fichiers concernant la gestion du thème appliqué, les différents fichiers Javascript, CSS. A la racine on peut voir aussi le fichier "sitemap.xml qui sera utilisé par les moteurs de recherche pour référencer vos fichiers. Pour une destination FTP les paramètres à définir sont plus nombreux mais Rapidweaver est sensé vous faciliter la vie, vous devrez renseigner le nom d'hôte de votre serveur FTP, le login et le mot de passe de votre compte. Rapidweaver se charge du reste. Si la connexion n'est pas établi vous pouvez toujours accéder au formulaire plus complet en cliquant sur le bouton "Configure Manually". Il vous sera demandé de fournir d'autres renseignements comme le mode de connexion (FTP, FTPS(sécurisé), ou SFTP).

IX Conclusion

Ce tutoriel vous a montré les différentes phases de création d'un projet avec l'application Rapidweaver. Il vous a donné quelques fondements pour commencer à réaliser vos projets de site web. Rapidweaver permet de concevoir tout type de site web. Cependant la version de base est assez limitée en fonctionnalité, il vous sera obligé à un momemnt ou un autre d'acheter de nouveaux plug-ins pour rajouter de nouvelles fonctionnalités. A moins que vous vouliez coder le contenu de votre site par vous-même. Nous avons vu que quelques fonctiuonnalités de cette application, nous verrons dans de nouveaux tutoriels à paraître prochainement les nombreuses autres qui en font une application largement prisée dans l'univers Mac OS X.