[SI-LINDER-PARTNER-2][OSC] - Refonte du site Internet pour supporter le Responsive Design
/*
ATTENTION - le design du site ne peut pas être passé en doctype html (html 5) dans la révision 1 du design.
bien qu'une révision 2 sera instanciée plus tard (l'année prochaine), il faudra se contenter de nombreux workaround en restant en HTML TRANSITIONAL 4.01
Du fait du nombre massif des éléments DE CETTE PAGE (et de ce qui en découlerait) qui seront à revoir pour transformer le design en design responsive..
.. il est alors plus judicieux de globaliser un TAG unique pour cette tâche pour ne pas alourdir de commentaires le code déjà suffisemment alourdi comme cela!
En gros, ici, pour cette méga-tâche, je vais utiliser un format maison de commentaires pour cette tâche précise:
--> pour en comprendre les méandres, voir le fichier /[!] - Saphyra-Interactive-TaskList-Explanations/[SI-LINDER-PARTNER-2][OSC]--semantic.php
A.
Si l'on souhaite faire bénéficier d'autres pages (racines ou pas) du site qui servent comme page visuelles, il faut utiliser le modèle de design responsive désormais prévu à cet effet
- NOTE IMPLEMENTATIONS PAR ETAPES (
note: étapes
.. basez-vous sur la page /index.php (éditez-la et comprenez son fonctionnement) à l'aide du guide d'implémentation suivant:
.. 1: implémentez le bloc identifié
... en CODETAG [RESPONSIVE_DESIGN_2020_IMPLEMENTATION_CARDBOARD_2020_SAPHYRA_INTERACTIVE_ETAPE_1]
.... n'oubliez pas de renommer '/index.php' en le nom et chemin relatif de la page (relatif à partir de la racine du site, pas du serveur ftp). ( exemple: /login.php )
.... sous
.. 2: ajoutez les classes CSS à l'identique au bloc identifié
... en CODETAG [RESPONSIVE_DESIGN_2020_IMPLEMENTATION_CARDBOARD_2020_SAPHYRA_INTERACTIVE_ETAPE_2]
.... puis modifiez 'isPage--Index' en le nom de la page (ou un nom vous perméttant plus tard de l'identifier dans le code CSS). ( exemple: isPage--Login )
.... sous
.. 3: modifiez à l'identique le bloc identifié
... en CODETAG [RESPONSIVE_DESIGN_2020_IMPLEMENTATION_CARDBOARD_2020_SAPHYRA_INTERACTIVE_ETAPE_3]
.... n'oubliez pas de remplacer 'BOX_WIDTH' en valeur fixée par les besoins du design, et ce n'est actuellement que ça de valide: 350
.... sous
.. 4: modifiez à l'identique le bloc identifié
... en CODETAG [RESPONSIVE_DESIGN_2020_IMPLEMENTATION_CARDBOARD_2020_SAPHYRA_INTERACTIVE_ETAPE_3]
.... n'oubliez pas de remplacer 'BOX_WIDTH' en valeur fixée par les besoins du design, et ce n'est actuellement que ça de valide: 350
.... sous
..
..
.. puis allez éditer la page /--SI--2020DesignInitializer.php (éditez-la et comprenez son fonctionnement) à l'aide du guide d'implémentation suivant:
.. 5: implémentez un nouveau cas pour le switch PHP via le bloc identifié
... en CODETAG [RESPONSIVE_DESIGN_2020_IMPLEMENTATION_CARDBOARD_2020_SAPHYRA_INTERACTIVE_ETAPE_4]
.... lors de l'ajout de votre cas (case)
..... n'oubliez pas de modifier le chemin en le nom et chemin relatif de la page (relatif à partir de la racine du site, pas du serveur ftp).
...... ajoutez un cas '/login.php' sous '/index.php' ou crééz un nouveau cas, mais nommez le à l'identique de ce que vous aurez choisi à l'étape 1:
...... au CODETAG [RESPONSIVE_DESIGN_2020_IMPLEMENTATION_CARDBOARD_2020_SAPHYRA_INTERACTIVE_ETAPE_1]
)
<>
B.
Usage de cette façon de commenter
- NOTE UNIQUEMENT POUR LES SIMPLES LIGNES UNIQUE DE CODE (
note: utilisez un éditeur de code qui peut vous aider à restyliser les TAGS:
.. comme par exemple BEGIN et END
... moi j'utilise Kate, éditeur de code dans Manjaro KDE, mais Atom Editor fera l'affaire aussi, n'oubliez pas d'ajouter les tags à votre liste de tags à surligner!
)
[SI-LINDER-PARTNER-2][OSC][SimpleTaskDescription]:{" explication(s) rapide "}
C.
Usage de cette façon de commenter
- NOTE UNIQUEMENT POUR LIGNES QUI PRECISENT QUE L'ON A AJOUTE UNE CLASSE CSS A L'ELEMENT HTML SUIVANT LE COMMENTAIRE ! (
note: utilisez un éditeur de code qui peut vous aider à restyliser les TAGS:
.. comme par exemple BEGIN et END
... moi j'utilise Kate, éditeur de code dans Manjaro KDE, mais Atom Editor fera l'affaire aussi, n'oubliez pas d'ajouter les tags à votre liste de tags à surligner!
)
[SI-LINDER-PARTNER-2][OSC][AddClassDescription(nomdeclassecss)]:{" explication(s) rapide optionnelle(s) de ce qu'elle fait "}
D.
Usage de cette façon de commenter
- NOTE UNIQUEMENT POUR LES MULTIPLES PORTIONS DE CODES DANS UN BLOC PRECIS AFIN D'EVITER LA REDONDANCE DE COMMENTAIRES (
note: utilisez un éditeur de code qui peut vous aider à restyliser les TAGS:
.. comme par exemple BEGIN et END
... moi j'utilise Kate, éditeur de code dans Manjaro KDE, mais Atom Editor fera l'affaire aussi, n'oubliez pas d'ajouter les tags à votre liste de tags à surligner!
)
************************************************************************
[SI-LINDER-PARTNER-2][OSC][MultiTaskDescriptions]:{
- 1/ définition des actions 1, une seule ligne de code
- 2/ définition des actions 2, plusieurs lignes de codes, pas qu'une seule
etc..
}
// ([1])-->BEGIN[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END
code de l'action 1
// ([2])-->[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN
code de l'action 2
// ([2])-->[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END
// etc..
[SI-LINDER-PARTNER-2][OSC][MultiTaskDescriptions]
************************************************************************
*/
// <- [SI-LINDER-PARTNER-2][OSC] - Refonte du site Internet pour supporter le Responsive Design
?>