Pour ce dernier défi, je devais faire une recherche sur les composantes techniques de notre blogue en faisant des expérimentations et en relevant des notes sur celles-ci.
Je devais, plus précisément, déterminer un élément que j'aimerais modifier ou ajouter à mon blogue ce qui me permettrait de mieux comprendre le fonctionnement de celui-ci.
Après plusieurs recherches, j'ai opté pour un petit outil que j'ai ajouté sur mon blogue et qui permettra à quiconque effectuant la lecture de celui-ci, d'entamer une recherche sur l'un des moteurs de recherche les plus utilisés: GOOGLE s'il le désire. Étant moi-même une grande utilisatrice de ce moteur de recherche, je le trouvais donc très intéressant.
Je vous expliquerai comment je m'y suis prise pour l'insérer, comment modifier certains éléments du code mais je vous expliquerai également les différentes lignes de codes (afin de faciliter la compréhension de celui-ci aux autres étudiants de notre groupe).
Insérer le code dans mon blogue
J'ai commencé par me demander où serait l'emplacement idéal pour celui-ci. J'ai finalement opté pour le placer dans la barre de navigation qui se trouve à droite dans mon blogue mais plus précisément sous la section Archives.
Étapes:
- Me connecter à mon blogue
- Aller dans PERSONNALISER
- Cliquer sur l'onglet MODÈLE
- Cliquer sur le lien MODIFIER LE CODE HTML
- Rechercher l'emplacement de la section ARCHIVES
- Positionner mon curseur à la fin de cette section
- Faire quelques retours afin d'aérer le tout
- Inscrire le code suivant :
Modifier le code
Ceci est très intéressant afin de personnaliser le code en fonction de la langue utilisée pour votre blogue. Dans le code ci-haut, le terme inscrit sur le bouton afin de lancer la recherche est inscrit en français. Cependant, si mon blogue était en anglais, il serait beaucoup plus approprié de l'y indiquer en anglais. La même situation se produit pour le moteur de recherche utilisé. Dans le code ci-haut, j'ai utilisé le moteur google.ca mais vous pourriez très bien utiliser google.com.
Ceci est très intéressant afin de personnaliser le code en fonction de la langue utilisée pour votre blogue. Dans le code ci-haut, le terme inscrit sur le bouton afin de lancer la recherche est inscrit en français. Cependant, si mon blogue était en anglais, il serait beaucoup plus approprié de l'y indiquer en anglais. La même situation se produit pour le moteur de recherche utilisé. Dans le code ci-haut, j'ai utilisé le moteur google.ca mais vous pourriez très bien utiliser google.com.
Afin de simplifier le tout, nous examinerons le code et je vous indiquer les différents éléments à modifier.
- Un commentaire indiquant le début du code pour l'outil de recherche Google
- La balise form indique le début d'un formulaire
- L'attribut method indique sous quelle forme seront envoyées les réponses
- Valeur get correspond à un envoi des données codées dans l'URL
- L'attribut action envoie à l'adresse indiquée
- Valeur http://... correspond à l'adresse du moteur de recherche. Vous pouvez changer cette valeur afin d'y indiquer google.com si vous préférez
- L'attribut target indique l'emplacement d'affichage de la ressource en l'occurrence google.ca
- Valeur top correspond à l'emplacement d'affichage soit dans le haut de la page où sera affiché le résultat de la recherche
- La balise table indique la création d'un tableau pour positionner les éléments de l'outil de recherche Google
- L'attribut bgcolor permet de modifier la couleur d'arrière-plan du tableau
- La valeur #ffffff indique que l'arrière-plan du tableau est blanc. Vous pouvez changer cette valeur afin d'insérer le code correspondant à l'arrière-plan de votre page
- La balise tr indique la création d'un rang dans le tableau
- La balise td indique la création d'une colonne dans le tableau
- L'attribut nowrap désactive le retour à la ligne automatique dans une cellule
- La valeur nowrap conforme la désactivation du retour à la ligne automatique dans une cellule
- L'attribut valign permet d'indiquer l'alignement vertical désiré dans la cellule
- La valeur top indique un alignement vertical dans le haut de la cellule. Cette valeur peut être modifiée selon votre besoin
- L'attribut align permet d'indiquer l'alignement horizontal désiré dans la cellule
- La valeur left indique un alignement horizontal à gauche dans la cellule. Cette valeur peut être modifiée selon votre besoin
- L'attribut height indique la hauteur désirée pour la cellule
- La valeur 32 indique une hauteur de 32 pixels pour la cellule. Cette valeur peut être modifié selon votre besoin
- La balise a indique un ancre
- L'attribut href indique un lien hypertexte
- La valeur http://... indique l'adresse du site pour le lien. Cette valeur doit être modifiée afin d'être identique à l'attribut action décrit plus haut
- La balise img indique l'insertion d'une image
- L'attribut src permet d'indiquer la source de l'image
- La valeur http://... indique l'emplacement de l'image utilisée pour identifier l'outil de recherche Google dans le blogue. Il est à noter que vous pouvez modifier l'adresse de google.ca pour google.com afin de garder une constance dans votre code. Il est à noter que l'image porte exactement le même nom sur le site google.ca que sur le site google.com
- L'attribut border permet d'indiquer si vous désirez une bordure à l'image
- La valeur 0 indique qu'il n'y a pas de bordure. Cette valeur peut être modifiée selon votre besoin
- L'attribut alt permet d'indiquer ce qui doit apparaître lorsqu'un utilisateur pointe le logo
- La valeur Google sera celle vue par l'utilisateur s'il pointe le logo
- L'attribut align permet d'indiquer l'alignement horizontal désiré pour l'image
- La valeur middle indique que l'alignement horizontal de l'image est centré. Cette valeur peut être modifié selon votre besoin
- Balise de fermeture img indique la fin de la balise img de l'image
- Balise de fermeture a indique la fin de la balise a pour l'ancre
- La balise input sert à construire le formulaire qui selon les valeurs de certains paramètres, donnera un objet graphique de saisie
- L'attribut type permet d'ajouter un paramètre afin d'indiquer le type d'objet graphique de saisie
- La valeur text indique que l'objet graphique de saisie est de type texte permettant une ligne de saisie de texte
- L'attribut name permet d'ajouter un nom afin de d'identifier l'objet graphique de saisie ajouté
- La valeur texte_recherche représente le nom que j'ai donné à mon objet. Cette valeur peut être modifiée au besoin
- L'attribut size permet d'indiquer la taille de l'objet graphique de saisie
- La valeur 28 indique une largeur de 28 pixels pour l'objet graphique de saisie. Cette valeur peut être modifiée selon votre besoin
- L'attribut maxlength permet d'indiquer la quantité maximale de caractères possible de saisir dans l'objet graphique de saisie
- La valeur 255 indique qu'un maximum de 255 caractères est possible dans l'objet graphique de saisie
- L'attribut value permet d'inscrire une valeur par défaut dans l'objet
- La valeur "" indique qu'aucune information par défaut ne sera inscrite dans l'objet graphique de saisie
- Balise de fermeture td indique la fin de la balise td de la cellule
- Balise de fermeture tr indique la fin de la balise tr pour le rang
- La balise td indique la création d'un nouveau rang
- La balise td indique la création d'une nouvelle cellule
- L'attribut valign permet d'indiquer l'alignement vertical désiré dans la cellule
- La valeur top indique un alignement vertical dans le haut de la cellule. Cette valeur peut être modifiée selon votre besoin
- L'attribut align permet d'indiquer l'alignement horizontal désiré dans la cellule
- La valeur left indique un alignement horizontal à gauche dans la cellule. Cette valeur peut être modifiée selon votre besoin
- La balise input sert à construire le formulaire qui selon les valeurs de certains paramètres, donnera un objet graphique de saisie
- L'attribut type permet d'ajouter un paramètre afin d'indiquer le type d'objet graphique de saisie
- La valeur submit indique que l'objet graphique de saisie est de type bouton permettant de soumettre l'information
- L'attribut name permet d'ajouter un nom afin de d'identifier l'objet graphique de saisie ajouté
- La valeur bouton_soumettre représente le nom que j'ai donné à mon objet. Cette valeur peut être modifiée au besoin
- L'attribut value permet de modifier le texte inscrit sur l'objet graphique de saisie
- La valeur Recherche Google permet d'identifier facilement l'action de l'objet graphique de saisieCette valeur peut être modifié selon votre besoin
- Balise de fermeture td indique la fin de la balise td de la cellule
- Balise de fermeture tr indique la fin de la balise tr pour le rang
- Balise de fermeture table indique la fin de la balise table pour le tableau
- Balise de fermeture form indique la fin de la balise form du formulaire
- Un commentaire indiquant le début du code pour l'outil de recherche Google
Pour ce qui est de ma recherche sur les composantes techniques, voici les informatiques que j'ai notées :
Dans son fonctionnement, Blogger sépare le code en deux : le code du modèle et le code de chacun des messages.
Pour le code du modèle, Blogger utilise le XHTML et le CSS cependant, il utilise également plusieurs balises personnalisées nécessaires en raison de leur éditeur de mise en page qui fonctionne par glisser-déplacer permettant d’ajouter et de réorganiser les éléments à la page, et avec le sélecteur de couleurs et de polices.
Pour le code de chacun des messages, Blogger utilise le HTML. L’utilisateur connaissant le HTML a la possibilité de contrôler la disposition de chacun des messages.
Lorsque vous ajoutez des images, celles-ci doivent être enregistrées soit sur le serveur de Blogger (ce qui se fait automatiquement quand vous optez pour cette technique) mais vous pouvez décider d’enregistrer vos images sur un autre serveur. Cette façon de faire offre plus de flexibilité à l’utilisateur. Lorsqu’il désire modifier une image (sans pour autant changer son nom), il modifie l’image sur le serveur en question sans devoir intervenir dans son blogue.
Pour le code du modèle, Blogger utilise le XHTML et le CSS cependant, il utilise également plusieurs balises personnalisées nécessaires en raison de leur éditeur de mise en page qui fonctionne par glisser-déplacer permettant d’ajouter et de réorganiser les éléments à la page, et avec le sélecteur de couleurs et de polices.
Pour le code de chacun des messages, Blogger utilise le HTML. L’utilisateur connaissant le HTML a la possibilité de contrôler la disposition de chacun des messages.
Lorsque vous ajoutez des images, celles-ci doivent être enregistrées soit sur le serveur de Blogger (ce qui se fait automatiquement quand vous optez pour cette technique) mais vous pouvez décider d’enregistrer vos images sur un autre serveur. Cette façon de faire offre plus de flexibilité à l’utilisateur. Lorsqu’il désire modifier une image (sans pour autant changer son nom), il modifie l’image sur le serveur en question sans devoir intervenir dans son blogue.
