[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 */ // <- [SI-LINDER-PARTNER-2][OSC] - Refonte du site Internet pour supporter le Responsive Design ?>[SI-LINDER-PARTNER-2][OSC][MultiTaskDescriptions]:{ - 1/ on développe désormais un système dynamique de chargement de fichiers requis au bon fonctionnement du design pourquoi dynamique? ainsi, on peut charger différents fichiers selon le nom de la page le nom d'identification de la page est inclu dans la variable $_SI__NewDesign['pageFilepath'] cette variable est déclarée dans chaque fichier AVANT l'inclusion du fichier /includes/header.php, et ce dans chaque fichier où c'est requis variable qui est vérifiée dans un switch et qui contiendra différentes déclarations de fichiers à charger. - 2/ on créé une variable sous forme de tableau à noms associatifs: $_SI__FilepathAsset cette variable ne servira qu'à contenir chaque noms de fichiers à charger, (histoire de pas avoir à chaque fois des dixaines de mots à tapper..) chaque index du tableau contiendra un fichier, tout bêtement car certaines pages (comme définies en [1]), risqueraient d'avoir des besoins différents, et puis, comme ça, tout le chargeur du design est centralisé en un seul endroit, ICI dans les sous-tâches suivantes, on va donc définir des chemins de fichiers, utiles au design - 3/ ajout de la balise meta de viewport, cette balise sert à spécifier aux périphériques mobiles (tablettes, téléphones, etc) que le site est un site MOBILE donc, usage des media-queries responsives! maximum-scale=1" pourrait empêcher le zoom au double-tappage, c'est plutôt appréciable donc de l'utiliser pour le responsive.. mais cela peut embêter les visiteurs, donc on garde au chaud mais on n'utilise pas - 4/ introduction des fichiers qui vont aider à la transformation rapide en Responsive sur des supports variés, il s'agit d'une solution qui n'utilise pas de framework spécifique - 5/ introduction du FrameworkJavascript/CSS - uiKit v3.2.1, et mode CSS/JS précompilé custom (uikit-linder-partner-custom.css) pour le site, car le site supporterait très mal LESS en realtime les fichiers sont inclus dans l'ordre de leur modification - 6/ introduction des fichiers qui vont aider à overrider les éléments non-désirés ou à modifier dans uiKit pour matcher le design du site avec ce qui est demandé et non avec les paramètres par défaut de uiKit - 7/ introduction du FrameworkJavascript/CSS - CodyHouse: Accordion Menu Multi-Level v1.0, afin de donner un bon coup de jeune au menu de listing des catégories. le script ...getElementsByTagName()... ajoutera juste la classe 'js' à la balise HTML, c'est requis pour le bon fonctionnement du framework ! les deux autres scripts permettent de charger le framework en ce qui concerne son code Javascript le terrain est préparé pour le futur pour l'instant n'est implémenté QUE le strict minimum, et on ne s'en sert pas spécialement tout de suite dans le sens où, le menu généré par OSCommerce se fait LIEN PAR LIEN et non BOUCLE DE LIENS PAR BOUCLES DE BLOCS DE LIENS! de fait, on le garde au chaud - 8/ introduction des styles CSS qui vont aider à overrider les éléments non-désirés de l'ancien design éventuellement aussi pour modifier dans CodyHouse: Accordion Menu Multi-Level afin de matcher le design du site avec ce qui est demandé et non avec les paramètres par défaut de CodyHouse: Accordion Menu Multi-Level. - 9/ implémentation des WebFonts utiles au nouveau design du site - 10/ implémentation de la merveilleuse WebFont Material Design Icons de Google utile pour remplacer certains icones récalcitrants du nouveau design du site (en effet, certains icones créés à partir d'entité XML étaient parfait sous Linux mais complètement différents sous Windows/Android/iOS, voir, carrément illisibles parfois..) cette plaie... tout ce qui est magnifique souvent en développement web ça se résume à ne fonctionner que sur certains supports et pas d'autres, enfin, vous connaissez la chanson: "puisque ça ne fonctionne pas ainsi.. faisons donc autrement!" et c'est là que m'est venu l'idée d'utiliser les icones provenant de Google Material Design UI (je n'ai aucune empathie pour le Material Design, je trouve que ça restreint la liberté des développeurs avec des normes très très lourdes), (en réalité, j'apprécie énormément le framework de Google, Material Design UI, mais, j'ai peur qu'à terme on soit forcé de n'utiliser que ça, donc, je fais partis des irréductibles Gaulois qui résistent encore et toujours à l'envahisseur, hahaha..), mais, on peut avouer que les icones de Google Material Design UI sont juste salvateurs pour ce projet où intégrer font Awesome serait un très mauvais choix, surtout depuis que font Awesome a décidé de brider ses icones outlined dérrière une license pro, coûtant bonbon. ce qu'il y a de bien, avec Google Material Design Icons, c'est que c'est aussi avec une balise qu'on peut afficher des icones (comme font Awesome). ce qu'il y a de bien, aussi avec Google Material Design Icons, c'est que nous n'avons pas besoin du framework "UI" de Google (à savoir Material Design UI au complet), et donc, on peut s'en passer! (parfait!) vous ne connaissiez pas? voici quelques liens: - dépôt github de la webfont contenant les icones: https://github.com/google/material-design-icons/tree/master/iconfont - téléchargement de la webfont contenant les icones: https://github.com/google/material-design-icons (gardez juste le dossier iconfont), ajoutez la feuille de style .css à votre projet.. et c'est parti! - aide et descriptif de la liste des icones et comment s'en servir: https://material.io/resources/icons/?style=baseline https://github.com/google/material-design-icons/blob/master/iconfont/codepoints https://google.github.io/material-design-icons/ https://google.github.io/material-design-icons/#icon-font-for-the-web [VTAB-TEAM-LINDER-PARTNER-1][OSC][MultiTaskDescriptions] - Revue de la charte Graphique: - 1/ implémentation des WebFonts utiles correspondant à la revue de la charte graphique sous égide de l'équipe VTAB, dont je fais partie. - 2/ on force le rafraichissement du cache .css pour les navigateurs en ajoutant un paramètre arbitraire, 'v', qui contiendra la version du fichier. bien que ce paramètre ne soit pas utilisé par le serveur, il le sera par le cache des navigateurs qui rafraichiront leur cache lorsque la valeur de 'v' changera } */ // ([1])-->[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN // ([2])-->[VTAB-TEAM-LINDER-PARTNER-1][OSC][SubTaskDescription]::BEGIN $MY_CACHE_VERSION="20241201"; if (!empty($_SI__NewDesign['pageFilepath'])) { // ([2])-->[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN $_SI__NewDesignFilepathAsset = array( // ([3])-->[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN 'MetaNameIncluder:Viewport::WidthAndScale:::Type{1}' => '' . "\n", // ([3])-->[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END // ([4])-->[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN 'StylesheetIncluder:Location::ResponsiveOverrides:::si_css-ro-_mainMediaQueriesForScreens.css' =>'' . "\n", // ([4])-->[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END // ([5])-->[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN 'FrameworkIncluder:Location::CssJSFrameworks:::uikit-linder-partner-custom.css,uikit.js,uikit-icon.js' =>'' . "\n" . '' . '', // ([5])-->[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END // ([6])-->[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN 'FrameworkModifier:Location::CssJSFrameworks:::si_css-cjfro-_allOverridesAndMainUIKITOverridesDescriptionsForDevelopper.css' =>'' . "\n", // ([6])-->[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END // ([7])-->[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN 'JavaScriptIncluder:Location::CssJSFrameworks:::codyhouse-js-main,util.js' =>'' . "\n" . '' . "\n" . '' . "\n", // ([7])-->[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END // ([8])-->[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN 'StylesheetIncluder:Location::ResponsiveOverrides:::si_css-ro-_mainStylesheet.css' =>'' . "\n", // ([8])-->[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END // ([9])-->[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN 'StylesheetIncluder:Location::WebFonts:::noto-sans-stylesheet.css' =>'' . "\n", 'StylesheetIncluder:Location::WebFonts:::monaco-stylesheet.css' =>'' . "\n", // ([1])-->[VTAB-TEAM-LINDER-PARTNER-1][OSC][SubTaskDescription]::BEGIN 'StylesheetIncluder:Location::WebFonts:::robotoslab-stylesheet.css' =>'' . "\n", // ([1])-->[VTAB-TEAM-LINDER-PARTNER-1][OSC][SubTaskDescription]::END // ([9])-->[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END // ([1])-->[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN 'StylesheetIncluder:Location::WebFonts:::material-icons.css' =>'' . "\n", // ([1])-->[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END ); // ([2])-->[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END // ([2])-->[VTAB-TEAM-LINDER-PARTNER-1][OSC][SubTaskDescription]::END // [RESPONSIVE_DESIGN_2020_IMPLEMENTATION_CARDBOARD_2020_SAPHYRA_INTERACTIVE_ETAPE_5] switch($_SI__NewDesign['pageFilepath']) { case '/index.php': case '/login.php': case '/create_account.php': case '/account_edit.php': case '/account_history_info.php': case '/account_history.php': case '/account_newsletters.php': /*inutilisé: case '/account_notifications.php':*/ case '/account_password.php': case '/account.php': case '/commission_history.php': case '/address_book.php': case '/address_book_process.php': case '/advanced_search_result.php': case '/advanced_search.php': case '/checkout_confirmation.php': case '/checkout_fail.php': case '/checkout_payment_address.php': case '/checkout_payment.php': case '/checkout_shipping_address.php': case '/checkout_shipping.php': case '/checkout_success.php': case '/conditions.php': case '/contact_us.php': case '/cookie_usage.php': case '/create_account_success.php': case '/extra_info_pages.php': /*inutilisé: case '/info_shopping_cart.php':*/ /*inutilisé: case '/invoice.php':*/ case '/logoff.php': case '/password_forgotten.php': case '/privacy.php': case '/product_info.php': /*inutilisé: case '/product_reviews_info.php':*/ /*inutilisé: case '/product_reviews_write.php':*/ case '/product_reviews.php': case '/products_new.php': case '/reviews.php': case '/shipping.php': case '/shopping_cart.php': case '/specials.php': case '/ssl_check.php': /*inutilisé: case '/tell_a_friend.php':*/ echo $_SI__NewDesignFilepathAsset['StylesheetIncluder:Location::WebFonts:::noto-sans-stylesheet.css']; echo $_SI__NewDesignFilepathAsset['StylesheetIncluder:Location::WebFonts:::monaco-stylesheet.css']; // ([1])-->BEGIN[VTAB-TEAM-LINDER-PARTNER-1][OSC][SubTaskDescription]::END echo $_SI__NewDesignFilepathAsset['StylesheetIncluder:Location::WebFonts:::robotoslab-stylesheet.css']; echo $_SI__NewDesignFilepathAsset['StylesheetIncluder:Location::WebFonts:::material-icons.css']; echo $_SI__NewDesignFilepathAsset['MetaNameIncluder:Viewport::WidthAndScale:::Type{1}']; echo $_SI__NewDesignFilepathAsset['FrameworkIncluder:Location::CssJSFrameworks:::uikit-linder-partner-custom.css,uikit.js,uikit-icon.js']; echo $_SI__NewDesignFilepathAsset['FrameworkModifier:Location::CssJSFrameworks:::si_css-cjfro-_allOverridesAndMainUIKITOverridesDescriptionsForDevelopper.css']; echo $_SI__NewDesignFilepathAsset['JavaScriptIncluder:Location::CssJSFrameworks:::codyhouse-js-main,util.js']; echo $_SI__NewDesignFilepathAsset['StylesheetIncluder:Location::ResponsiveOverrides:::si_css-ro-_mainStylesheet.css']; echo $_SI__NewDesignFilepathAsset['StylesheetIncluder:Location::ResponsiveOverrides:::si_css-ro-_mainMediaQueriesForScreens.css']; break; default: die('
'.TITLE.'
pageFilepath == incorrect .. at #85
from SI-2020DesignInitializer .. at #'.__LINE__.'
Services can\'t reach interface .. at #'.__LINE__.'

' ); break; } } // ([1])-->[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END /* [SI-LINDER-PARTNER-2][OSC][MultiTaskDescriptions] ************************************************************************/ ?>