Site responsive [Résolu]

Signaler
Messages postés
105
Date d'inscription
mardi 5 août 2008
Statut
Membre
Dernière intervention
26 mai 2020
-
Messages postés
105
Date d'inscription
mardi 5 août 2008
Statut
Membre
Dernière intervention
26 mai 2020
-
Bonjour,



Configuration: Windows / Internet Explorer 11.0


J'ai finalisé il y a peu, un Site en utilisant "Microsoft Expression Web 4" pour le construire, et souhaiterai le convertir en Site "responsive" !.

Est-ce possible ?!.

Si "oui", comment procéder ?!.

Merci par avance de vos solutions.

Bien cordialement,
Jean Maurice

5 réponses

Messages postés
5806
Date d'inscription
mercredi 30 octobre 2013
Statut
Membre
Dernière intervention
26 mai 2020
1 021
bonjour

c'est possible à partir du moment où tu as accès au code source (ce qui est forcément le cas sur un éditeur) puisqu'on ajoute des css spécifiques pour chaque type d'écran par contre il n'y a pas de code magique tout prêt, tu va devoir apprendre les css et adapter ton site tout seul.


Messages postés
5795
Date d'inscription
mercredi 19 janvier 2005
Statut
Contributeur
Dernière intervention
26 mai 2020
1 214
Bonjour,

Sur le site AlsaCreations.com, il y a un tutoriel pour créer une feuille de styles de base pour le Web mobile :

https://www.alsacreations.com/astuce/lire/1177-une-feuille-de-styles-de-base-pour-le-web-mobile.html

Messages postés
27
Date d'inscription
mardi 9 août 2011
Statut
Membre
Dernière intervention
21 mai 2020
2
Bonsoir, Jean Maurice,

moi je fais quelque chose comme cela :
<?php

$cav = 2;

for( $px = 200, $curseur_1 = 9, $curseur_2 = 5.55, $curseur_3 = 3.125, $curseur_4 = 3.125, $curseur_5 = 25, $curseur_6 = 3; $px < 2000; $px += 100 ) 
{
echo "\n\n@media (min-width:$px"."px) 
{ 
body { line-height:$curseur_6"."ex; } 
menu { line-height:$curseur_4"."ex; }
h1, #tresse { font-size:$curseur_1"."vw; } 
#logo { width:$curseur_5"."vw } */
#page { font-size:$curseur_2"."vw; } 
footer { line-height:$curseur_3"."ex; }
" ;

$curseur_1 = number_format( $curseur_1 * .925, $cav ) ; 
$curseur_2 = number_format( $curseur_2 * .85, $cav ) ; 
$curseur_3 = number_format( $curseur_3 * .99, $cav ) ; 
$curseur_4 = number_format( $curseur_4 * 1.05, $cav ) ; 
$curseur_5 = number_format( $curseur_5 * .92, $cav ) ; 
$curseur_6 = number_format( $curseur_6 * 1.02, $cav ) ; 
}

?>
Messages postés
1189
Date d'inscription
dimanche 7 octobre 2007
Statut
Membre
Dernière intervention
21 mai 2020
427
Quelle est cette horrible chose ? Quel est le but ?
Messages postés
27
Date d'inscription
mardi 9 août 2011
Statut
Membre
Dernière intervention
21 mai 2020
2 >
Messages postés
1189
Date d'inscription
dimanche 7 octobre 2007
Statut
Membre
Dernière intervention
21 mai 2020

Bonjour à tous !

Qu'est-ce qui ne te plait pas, dans cette proposition ???
Messages postés
1189
Date d'inscription
dimanche 7 octobre 2007
Statut
Membre
Dernière intervention
21 mai 2020
427 >
Messages postés
27
Date d'inscription
mardi 9 août 2011
Statut
Membre
Dernière intervention
21 mai 2020

tout ?

Générer du CSS en PHP, ce qui implique de balancer du CSS directement dans les balises <style> et de désordonner les feuilles de style.

Si tu veux faire quelque chose du genre, pourquoi ne pas utiliser un préprocesseur de CSS comme SASS ?
https://sass-lang.com/documentation/at-rules/control/for
Tu peux également utilisé un framwork, Bootstrap par exemple
Messages postés
105
Date d'inscription
mardi 5 août 2008
Statut
Membre
Dernière intervention
26 mai 2020
>
Messages postés
5795
Date d'inscription
mercredi 19 janvier 2005
Statut
Contributeur
Dernière intervention
26 mai 2020

Bonjour Dugenou :

Ok, je viens de faire ce que vous m'avez préconisé, mais j'ai du louper quelque chose d'important, car cela ne change rien du tout par rapport au web !.

Peut-être que c'est par rapport à ça (Je vous copie-colle !) :

"/* fixer une largeur maximale de 100% aux éléments potentiellement problématiques */
img,
table,
td,
blockquote,
code,
pre,
textarea,
input,
iframe,
object,
embed," ?.

Question : FAUT-IL que je mettes des "100%" partout en lieux et places de toutes les "tailles en px" contenues dans les 775 Pages et plus de 5000 Photos ?!.

Mais fort heureusement, mon Site marche encore aussi bien qu'avant !.

A bientôt de vous lire,

Bien cordialement,
Jean Maurice
Messages postés
5795
Date d'inscription
mercredi 19 janvier 2005
Statut
Contributeur
Dernière intervention
26 mai 2020
1 214 >
Messages postés
105
Date d'inscription
mardi 5 août 2008
Statut
Membre
Dernière intervention
26 mai 2020

Bonjour,

Il est tout à fait normal que l'affichage sur un écran d'ordinateur soit le même, puisque les modifications ne concernent que l'affichage sur un écran de smartphone ou de tablette. Il faut tester l'affichage sur ce type d'écran.

J'ai testé ton site avec la vue adaptative des outils de développement Web de Firefox, il n'y a effectivement pas de changement sur un écran de mobile.

Ce code CSS "responsive" est une bonne base pour concevoir un site adapté aux écrans de mobiles et de tablettes. Il peut être suffisant en l'état, mais il peut aussi être adapté, selon les besoins.

Je l'utilise sur certains de mes sites avec peu de modifications, seulement pour l'entête, avec une bannière réduite, mieux adaptée aux mobiles, et un menu "accordéon" à la place de la barre de navigation horizontale.

Tout ce qui concerne l'affichage sur mobile doit être placé, dans le fichier _style1.css au-dessous de :

@media (max-width: 640px) {

et au-dessus de :

@media (max-device-width:768px) and (orientation: landscape) {

Il faut quand même que la conception du site soit adaptée aux différents écrans d'ordinateur, par exemple en évitant les images trop larges et l'utilisation de la totalité de l'écran pour afficher le site (penser aux écrans de 13 ou 14" des ultra-portables). Avec les modifications que tu proposes, c'est à dire changer les dimensions en pixel, par des dimensions en pourcentage, ça peut être une solution pour certains écrans d'ordinateur, mais pas pour rendre le site adapté aux écrans mobiles ("responsive"). Il peut aussi être judicieux de limiter l'affichage du site à une certaine dimension pour ne pas utiliser la totalité des très grands écrans.
Messages postés
105
Date d'inscription
mardi 5 août 2008
Statut
Membre
Dernière intervention
26 mai 2020
>
Messages postés
5795
Date d'inscription
mercredi 19 janvier 2005
Statut
Contributeur
Dernière intervention
26 mai 2020

Bonsoir Dugenou.

Ok, pas de possibilités, donc.

Merci pour votre tentative d'aide.

Pour ma part, je n'irai pas plus avant, de peur de reperdre mon Site sur la toile, comme il y a quelques mois !.

Bien cordialement,
Jean Maurice
Messages postés
5795
Date d'inscription
mercredi 19 janvier 2005
Statut
Contributeur
Dernière intervention
26 mai 2020
1 214 >
Messages postés
105
Date d'inscription
mardi 5 août 2008
Statut
Membre
Dernière intervention
26 mai 2020

En fait, il faut penser à l'affichage du site sur tous types d'écran lors de sa conception, sinon il peut être très difficile de l'adapter par la suite.

Dans le fichier _style1.css, la largeur de ton site est de 1420px (body, container, etc), ça me semble trop, il faudrait la réduire à 1024px et proportionnellement pour les autres éléments.

Par ailleurs, les images (bannière, barres de titre ou de séparation) sont également trop larges (1400px et 1380px). Il faudrait, soit les réduire à 1024px, soit utiliser un pourcentage. Idem pour l'image de la page d'accueil, il faudrait la réduire en conséquence.

Tu auras quand même un problème avec la barre de navigation horizontale dans un tableau, il faudrait réfléchir à un menu mieux adapté aux écrans des smartphones, par exemple en accordéon. C'est beaucoup de travail.
Messages postés
105
Date d'inscription
mardi 5 août 2008
Statut
Membre
Dernière intervention
26 mai 2020
>
Messages postés
5795
Date d'inscription
mercredi 19 janvier 2005
Statut
Contributeur
Dernière intervention
26 mai 2020

Re, Dugenou.
C'est pour cela que j'abandonnes !.
Pas assez de compétences pour cela, et de loin !.
Car ce qui est pour vous une broutille reste pour moi la muraille de Chine !.
Et ce n'est pas à 71 ans que je vais me lancer dans un apprentissage conséquent, qui plus est, en constante (r)évolution !.
Bien cordialement,
Jean Maurice
J'anime un webinaire vingtomadaire : Introduction au développement web. La prochaine séance aura lieu samedi 30 mai, de 14 heures à 18 heures.

Les thèmes disponibles sont les suivants :

Mon premier site web, première partie : le moteur
mon premier site web, seconde partie : la personnalisation
introduction au langage PHP : l'exemple de la création du site web
le langage JavaScript : quelques applications
un élément ubiquitaire : le formulaire (Php, Html, Css, JavaScript)
un objet ubiquitaire : le requêteur
introduction aux Cascading Style Sheets, le langage de style du web
le site à navigation différenciée, ou single-page website
Messages postés
105
Date d'inscription
mardi 5 août 2008
Statut
Membre
Dernière intervention
26 mai 2020

Bonjour Sacapuss2 :

Mon Site est totalement terminé, est publié depuis peu, et marche impeccablement.

Je veux juste "modifier" le nécessaire afin de le rendre "regardable" via une majorité de Médias actuels.

Pour le moment, je n'ai pas trop la "Santé" pour "apprendre" à créer quelque chose de nouveau ou de trop complexe.
Et à la lecture de votre Post, je vois que cela me serai difficile actuellement.
Mais je vous remercie pour ce dernier, et le garde sous le coude, pour le cas où !.

Merci encore.
Bien cordialement,
Jean Maurice
Salut,
c'est curieux l'ordre de vos thèmes...voire le nom de vos leçons.
  • CSS à la fin? Je suppose que c'est déjà décrit dans "la personnalisation" même si ça veut pas dire grand chose personnaliser un site...un site peut-il ne pas être personnel ou personnalisé?
  • PHP , je suppose que vous parlez des bases de données avec. Curieux aussi de mettre ça avant le JavaScript nettement plus abordable pour commencer la programmation.
  • Vos termes son mal choisit et prêtent à confusion: requêteur? ubiquitaire(il me semble qu'un terme plus juste serait agrégat ou regroupement parce que l'ubiquité c'est être partout à la fois en même temps ce qui n'est pas le cas des technologies qui sont soient serveur soient client )? expliquer HTML en parlant de moteur alors qu'un moteur en informatique c'est tout à fait autre(ça 'tourne' ou ça avance en tout cas, ce que ne fait pas HTML).

"navigation différencié" c'est pas tellement explicite(en fait ça veut rien dire) peut-être vous parlez d'AJAX le bon terme serait alors plutôt "asynchrone" ou "désynchronisé". ça semble beaucoup quand même pour une première session avec AJAX dans le lot.

Je vous conseille d'éprouver un peu vos cours, voire de vous inspirer de ceux existants destinés au débutant.
Un formateur informatique ;)