SOMMAIRE
1. Développement de site web
2. Administration et développement du site ginetteferland.com
3. Opérations étape par étape
1. Développement de site web
1.1. Développement à l'aide de programmation HTML, JAVASCRIPT et CSS
Les développeurs et administrateurs maîtrisant les connaissances techniques informatiques peuvent créer des site complexes et personnalisés. Pour se faire ils doivent maîtriser trois langages de programmation complémentaires et interdépendants :
1. HTML HyperText Markup Language : le langage de balisage qui permet de créer la structure d'une page;
2. JavaScript : le langage de programmation de scripts ou de commandes qui permet de lancer des requêtes sur un site interactif et entre les serveurs;
3. CSS Cascading Style Sheet ou Feuilles de style en cascade : un code qui permet de déterminer l'apparence des éléments d'une page.
1.2. Développement à l'aide d'un système de gestion de contenu CMS, comme Squarespace
Les sites web peuvent être créés à l'aide de systèmes de gestion de contenu ou Content Management Systems CMS, le plus connu étant Wordpress. Squarespace est le CMS dans lequel est hébergé le site ginetteferland.com.
Squarespace présente des avantages et des inconvénients sur ses concurrents. Il présente notamment l'avantage suivant : l'hébergement chez Squarespace ne nécessite pas la gestion de l'hébergement sur un serveur tiers, contrairement à Wordpress.org. Il n'est pas nécessaire de transférer les pages web vers un serveur et d'assurer la synchronisation et la mise en ligne des pages. L'administration, le développement et la mise en ligne se font simplement en se accédant au site de Squarespace. Il s'agit donc d'un logiciel en tant que service ou en mode SaaS Software as a Service.
Pour en savoir plus sur les avantages et inconvénients de Squarespace :
- Squarespace Review 2016 | Top 10 Things You Should Know
- Wix vs Squarespace vs Virb vs Weebly vs Jimdo vs WordPress Theme Builders
- Squarespace vs WordPress | Top 5 Differences You Should Know 2016
2. Administration et développement du site ginetteferland.com
2.1. Le tableau de bord dans Squarespace
Avec Squarespace, l'administration et la mise en forme du site ne requièrent aucune connaissance informatique. L'administration et le développement se font à partir d'un tableau de bord d'apparence constante qui présente toujours un menu de navigation à gauche et une fenêtre de visualisation à droite.
Toutes les options de gestion du site se trouvent en navigant à travers les six principales sections du menu HOME :
PAGES : créer et éditer les pages et leur contenu : textes, liens, images, etc.
DESIGN : déterminer le design, l'apparence des éléments
COMMERCE : choisir les options de site e-commerce
ANALYTICS : analyser les opérations sur le site
SETTINGS : gérer les paramètres du site
HELP : aide
2.2. HOME / PAGES Gestion de la structure et du contenu des pages
Squarespace se distingue par un développement qui se fait en insérant, glissant et déposant, Drag and Drop, des éléments qui peuvent composer une page : des blocs de texte, des images, des espaces, des filets, des galeries, etc. Les opérations d'édition des éléments sont instantanément visibles dans la fenêtre de visualisation, une caractéristique que l'on nomme communément le WYSIWYG What You See Is What You Get.
Attention : Pour être enregistrées les modifications affichées doivent être enregistrées ou ignorées à l'aide des actions : SAVE ou CANCEL.
2.3. HOME / DESIGN / Style Editor Gestion de l'apparence
La section DESIGN comprend 10 sous-sections. C'est dans la section Style Editor qu'il est possible de déterminer l'apparence des composantes du site : la hauteur et la largeur de la navigation, la taille des polices de caractère de différents styles, le contenu du Footer, etc.
La section STYLE (abréviation de Style Editor) est subdivisée en huit sections :
Site wide
Header
Navigation
Main content
Footer
Social Icons
Blog
Button Block (Small)
Attention : Ne pas confondre l'option Show All (qui permet de montrer la totalité des options) et l'option Reset All to Defaults (qui efface tous les paramètres personnalisés et qui rétabli les options par défaut).
2.4. HOME / SETTINGS Gestion des paramètres du site
L'administration des paramètres, Settings, du site est divisée en trois sections : GENERAL, WEBSITE et COMMERCE.
Les paramètres généraux, GENERAL, comprennent deux sections importantes : Permissions pour l'administration des permissions (des différents droits des utilisateurs) et Billing & Account pour la gestion de la facturation et du compte.
GENERAL
Bussiness information : inscrire l'information générale au sujet de l'entreprise
Regional : géolocalisation
Permissions : déterminer les différents droits des utilisateurs
Billing & Account : gérer la facturation, le compte et les options d'abonnement
Attention : Il importe de naviguer, de parcourir et de connaître toutes les sous-sections de Billing & Account, car elle présente des paramètres importants.
La section Billing & Account et subdivisée en quatre sections, dont la plus importante est Billing qui est elle-même divisée en deux sections :
Payment information : gérer les informations relatives à la carte de crédit
Subscriptions : gérer les plans d'abonnement, le type de paiement, la facturation et les domaines, etc.
La section Payment information ne concerne strictement que les informations relatives à la carte de crédit liée au compte.
C'est dans la section Subscriptions qu'il est possible de changer le cycle de paiement, de permettre ou non le renouvellement, de connaître la date du prochain paiement, etc.
Voici les composantes de la section Subscriptions :
Website
Online Since
Plan
Billing Cycle
CHANGE PLAN Upgrade or downgrade your plan
CHANGE BILLING CYCLE Choose between monthly and annually
CANCEL WEBSITE SUBSCRIPTION
Take your website offline
Auto-Renew
2.5. HOME / SETTINGS / WEBSITE / MARKETING / SEO Favoriser le référencement par les moteurs de recherche
Il est possible d'optimiser le référencement du site par les moteurs de recherche en inscrivant de l'information pertinente dans la section SEO du Marketing.
Pour en savoir plus sur l'Optimisation pour les moteurs de recherche.
3. Opérations diverses étape par étape
3.1 Création d'une galerie d'images de haute résolution
Dans son ordinateur
1. Compresser les images enregistrées dans l'ordinateur.
Sur la pateforme Squarespace
2. Insérer un bloc de contenu GALLERY de type Grid à l'endroit désiré (en faisant afficher une «goutte» délimitant l'espace de saisie).
3. Dans la fenêtre GALLERY qui s'ouvre alors, cliquer sur le bouton Upload images.
4. Télécharger les images (non compressées) une à une. Elles s'afficheront automatiquement en format réduit dans la fenêtre.
5. Survoler l'image réduite. Un menu contextuel offrant 3 opérations s'affiche au dessus de l'imagette.
Cliquer sur la première icône : un engrenage.
6. Dans la fenêtre qui s'ouvre EDIT IMAGE, cliquer dans la boîte de saisie d'URL à : Click to add URL...
7. La boîte de saisie se déploie vers le bas et affiche trois onglets. Cliquer sur l'onglet FILES.
8. La fenêtre se déploie et affiche deux onglets. Dans l'onglet NEW FILE, cliquer sur le bouton Add a file.
9. Télécharger le fichier compressé. Une fois bien téléchargé, il apparaîtra en caractères gras en haut de la liste de fichiers.
Assurez-vous de cliquer sur SAVE dans la fenêtre EDIT IMAGE.
10. Lorsque chaque fichier compressé a été lié à l'image correspondante,
cliquer sur le bouton APPLY en bas à droite dans la fenêtre GALLERY.
11. Enregistrer la création de la galerie en cliquant sur le bouton SAVE en haut de l'écran à gauche.
3.2 Insertion d’un lien dans du texte (clic sur un ou plusieurs mots)
3.2.1 Insertion d’un lien vers un document (File)
1. Insérer un bloc de texte et y saisir le texte. Pour se faire, survoler l’endroit où on désire saisir du texte jusqu’à ce qu’une goutte prolongée d’une ligne noire apparaisse. Cliquer sur cette goutte. Dans la fenêtre pop-up qui s’ouvre, sélectionner la première option en haut à gauche : a Text.
Note : Il est préférable d’écrire tout le texte de la section avant d’y insérer des liens. Par exemple, écrire : Fiche technique (saut de ligne) Revue de presse.
2. Avec le curseur, sélectionner le texte dans lequel sera ajouté l’hyperlien.
3. Dans la barre d’outils de traitement de texte, appuyer sur le bouton d’hyperlien. Il s’agit du 5e bouton à partir de la gauche montrant l’icône de deux maillons.
4. Dans la fenêtre pop-up qui s’ouvre, sélectionner l’option Files : deuxième option en haut à droite.
5. Dans la fenêtre pop-up qui s’ouvre cliquer sur le bouton Add File.
6. Dans la nouvelle fenêtre pop-up qui s’ouvre sélectionner l’option Open in New Windows, cliquer sur OK et cliquer sur ADD LINK.
7. Le texte contenant l’hyperlien s’affiche maintenant en grisé.
8. Pour supprimer ou éditer le lien : insérer le curseur n’importe où dans le texte contenant l’hyperlien. Une fenêtre pop-up s’ouvrira automatiquement montrant le lien et les boutons : REMOVE et EDIT.
