Site qui s'adapte a chaque résolution d'écran

Site qui s'adapte a chaque résolution d'écran - Web design - Graphisme

Marsh Posté le 02-05-2017 à 14:59:37    

Hello, j'ai décidé de refaire entièrement mon site, j'utilise "Microsoft FrontPage 2000" comme à l'époque, mais j'ai un petit souci, mon site ne s'adapte pas à toutes les résolutions d'écrans., j'aimerais qu'il s'adapte à la taille de chaque résolution, c-a-d qu'il s'affiche entièrement aussi bien sûr du 1920x1080 que sur du 1280x800 voire même du mobile, voici l'URL de mon site en reconstruction www.space-sheriff.net
 
PS: je n'y connais pas grand-chose en HTML etc... ca date


Message édité par micmey le 02-05-2017 à 15:00:18

---------------
Mon site: http://space-sheriff.net/
Reply

Marsh Posté le 02-05-2017 à 14:59:37   

Reply

Marsh Posté le 02-05-2017 à 15:19:40    

Bonjour,
 
Le plus simple serait de laisser tomber FrontPage, qui est complètement dépassé et d'opter pour un CMS genre Wordpress avec un thème (= design pour CMS) responsive comme il en existe des dizaines de milliers.


---------------
Besoin de graphisme de qualité à prix raisonnable ? --> http://www.grafimages.com - Le site de mon groupe : https://closedown.fr - Mes tutoriaux Cubase : https://www.youtube.com/playlist?li [...] L6o4xYawhc
Reply

Marsh Posté le 02-05-2017 à 15:49:53    

Salut, ba j'ai toujours connu que FrontPage, pour les thèmes, je préfère le faire moi même c'est pour moi tout l’intérêt de crée un site, c'est de crée soit même son thème sous Photoshop. Un site déjà tout fait avec des thèmes  :pfff:
 
De chez moi en 1920x1080 il s'affiche bien, mais chez un ami qui lui es en 1280x800 c'est moins bien
 
en 1920x1080 OK
https://img15.hostingpics.net/thumbs/mini_911164Sanstitre.jpg
 
en 1280x800 boff
https://img15.hostingpics.net/thumbs/mini_28953018236551102075991642518531128374939o.jpg


Message édité par micmey le 02-05-2017 à 16:15:31

---------------
Mon site: http://space-sheriff.net/
Reply

Marsh Posté le 03-05-2017 à 15:28:20    

Oulà.... Bon, on va reprendre depuis le début : l'intérêt d'un site responsive, c'est qu'il puisse s'afficher sur les écrans des tablettes et smartphones.
 
Quant à créer un design sous Photoshop, ce n'est qu'une partie de la création d'un site.
Il faut ensuite intégrer la maquette sous forme de template HTML/CSS qui servira de base pour créer le site.
 
Ca, c'est pour les bases.
 
Maintenant, pour faire du responsive, on va devoir :
1) créer les déclinaisons de la maquette en points de rupture responsive (pour des largeurs d'écran de 768, 640 et 480 pixels)
2) utiliser les media queries pour générer le rendu sur les écrans correspondants et gérer les largeurs intermédiaires (exemple : 680 pixels)
 
Pour Wordpress, un thème peut très bien être créé de A à Z du moment qu'on a quelques bases en HTML/CSS/Js et webdesign (des bases solides quand même).
Une autre solution est de personnaliser un thème existant en remplaçant images, couleurs et logo.
 
Enfin, Frontpage n'est plus mis à jour depuis 2003. Or, depuis, on est passé au HTML4/CSS, puis au XHTML, puis au HTML5/CSS3 et on a remplacé la mise en page en tableaux par la mise en page en CSS. Autant que faire un site responsive sous FrontPage est illusoire ;)


---------------
Besoin de graphisme de qualité à prix raisonnable ? --> http://www.grafimages.com - Le site de mon groupe : https://closedown.fr - Mes tutoriaux Cubase : https://www.youtube.com/playlist?li [...] L6o4xYawhc
Reply

Marsh Posté le 03-05-2017 à 23:00:57    

Ok, ok, j'ai créé mon site sous Frontpage 2000 qui date de 1999, car je ne connais que ce logiciel et l'interface est simple, y a-t-il moyen que je retravaille mon site créé sous Frontpage directement sur un logiciel plus récent et assez simple.
 
Les seuls soucis que je rencontre avec Frontpage et que j'aimerais réglé:
 

  • le site ne s'affiche pas chez les autres comme chez moi a cause de résolutions d'écran différente, du coup l'interface es toute chamboulé  
  • Impossible de bloquer le site pour qu'il puisse ne plus bougé, exemple je veux une interface qui face 1000 pixels sur 1000 pixels, que mes images ne soient pas zoomé ou dézoomé si on rabaisse ou augmente la résolution de l'écran
  • Impossible de bloquer le contenu pour qu'on ne puisse pas enregistrer ou faire un copier-coller des images etc.
  • Impossible d'ajouté des animations en flash etc.


 
J'aimerais un programme d'actualité et super simple, facile  (sur PC pas en ligne) tout en continuant a crée mon interface enfin le design sous Photoshop.
 
 
 
Merci ;)


Message édité par micmey le 03-05-2017 à 23:03:48

---------------
Mon site: http://space-sheriff.net/
Reply

Marsh Posté le 04-05-2017 à 00:17:26    

Hi hi... j'attendais avec délectation la réponse de Grafimages !  :)  
 
Résumé > Frontpage c'est mort. Code balises/obsolète. Aucun des problèmes que tu listes ne sera résolu.
 
1- le site ne s'affiche pas chez les autres comme chez moi a cause de résolutions d'écran différente, du coup l'interface es toute chamboulé
Normal il n'est pas responsif (assez énorme le coup de l'image en guise de menu… ) par sa construction et les possibilités de Frontpage.
2- Impossible de bloquer le site pour qu'il puisse ne plus bougé, exemple je veux une interface qui face 1000 pixels sur 1000 pixels, que mes images ne soient pas zoomé ou dézoomé si on rabaisse ou augmente la résolution de l'écran
C'est justement l'intérêt du RD > adaptation sur tout type d'écran.
3- Impossible de bloquer le contenu pour qu'on ne puisse pas enregistrer ou faire un copier-coller des images etc.
C'est tendu pour éviter l'extraction du contenu en web. Je ne me suis jamais posé la question, mais on peut récupérer les textes verouillés en éditant le code source et les images en les capturant. La vraie sécurité doit se concentrer sur la protection d'un site.
4- Impossible d'ajouté des animations en flash etc.
Je me demande si il est pertinent de fonder de grands espoirs sur ce format dont on ne cesse d'annoncer la fin.
 
 
J'aimerais un programme d'actualité et super simple, facile  (sur PC pas en ligne) tout en continuant a crée mon interface enfin le design sous Photoshop.
Merci ;)

Grafimages a été sibyllin : vu tes connaissances, tournes-toi vers Wordpress (moyennant quelques connaissances html/css) : un thème collera certainement à ton souhait.
Il sera responsif, intégrera les dernières fonctionnalités, sera compatible tout navigateur (ordi, téléphones) et pourra tout de même le personnaliser à ta sauce.
Des plugins te permettront de rajouter des fonctionnalités (empêcher l'extraction du contenu si ça existe et bien d'autres trucs).
C'est la solution gratos. Après il y a des thèmes 'premium'...
 
Sinon il existe bien un soft qui pourrait répondre à ta question (d'actualité, simple), mais c'est sur Mac et c'est payant (80 $).
Il est puissant et se nomme Blocs : https://blocsapp.com/index.html
Présentation en français : https://www.jonathan-menet.fr/blog/ [...] r-au-code/
 
Edit : rajouts


Message édité par Harrybeau1 le 04-05-2017 à 00:59:47

---------------
Panem et circenses. Nihil novi sub sole.
Reply

Marsh Posté le 04-05-2017 à 01:34:48    

Citation :

3- Impossible de bloquer le contenu pour qu'on ne puisse pas enregistrer ou faire un copier-coller des images etc.
C'est tendu pour éviter l'extraction du contenu en web. Je ne me suis jamais posé la question, mais on peut récupérer les textes verouillés en éditant le code source et les images en les capturant. La vraie sécurité doit se concentrer sur la protection d'un site.


On peut même aller plus loin : le seul moyen de protéger le contenu d'un site est de ne pas le publier sur le Web. D'autant plus qu'il y a des plugins pour navigateurs (dont l'excellent WebDeveloper) qui permettent de récupérer toutes les images d'une page ou récupérer le code source même si le clic droit est interdit...
 

Citation :

4- Impossible d'ajouté des animations en flash etc.
Je me demande si il est pertinent de fonder de grands espoirs sur ce format dont on ne cesse d'annoncer la fin.


Soyons clair : à part en tant que langage de programmation pour certaines applications spécifiques et pour la plupart des jeux sur navigateur, le flash, c'est mort.
Les animations se font maintenant en HTML5/CSS3/Js, parfois (de plus en plus souvent) avec du SVG.
 
Pour le reste, Harrybeau a parfaitement résumé la situation :)


---------------
Besoin de graphisme de qualité à prix raisonnable ? --> http://www.grafimages.com - Le site de mon groupe : https://closedown.fr - Mes tutoriaux Cubase : https://www.youtube.com/playlist?li [...] L6o4xYawhc
Reply

Marsh Posté le 04-05-2017 à 02:30:08    

Wordpress c'est pas mal mais le souci c'est que j'ai déjà un espace de stockage et un nom de domaine www.space-sheriff.net et qu'il est impossible de travailler hors du site wordpress.com ni même d'en faire une sauvegarde sur son PC pour pouvoir le mettre sur son espace perso.


---------------
Mon site: http://space-sheriff.net/
Reply

Marsh Posté le 04-05-2017 à 02:42:32    

Bonsoir Grafimages !
 
Oui je n'osais pas le dire aussi brutalement : pour rien ne se faire "piquer" sur le net, il ne faut rien y publier.
Le contenu me semble "insécurisable" par nature. En revanche là il faut blinder c'est sur la sécurité...
 
Flash se nomme Animate CC aujourd'hui.
J'ai l'ai redécouvert il y peu : l'interface (très spéciale) n'a pas changé des masses depuis la version 4 et n'est pas des plus simple en prendre en main.
 
 

Citation :

J'aimerais un programme d'actualité et super simple, facile  (sur PC pas en ligne) tout en continuant a crée mon interface enfin le design sous Photoshop.


Sinon j'ai beau relire le post de Micmey, c'est vraiment vers Wordpress (et les plugins) qu'il aura sa solution et arrivera rapidement à ses fins.
Pour le "pas en ligne", pas de souci avec (exemple) wampserver pour faire son site en local.
http://www.wampserver.com/


---------------
Panem et circenses. Nihil novi sub sole.
Reply

Marsh Posté le 04-05-2017 à 03:20:52    

@Harrybeau1, Merci je vais toujours essayer Wampserver, je ne cherche pas à faire un gros site non plus, c'est juste du texte et des images et si possible quelques petites animations mais arrangé à ma façon, c'est bien dommage que Frontpage n'est plus, il était si simple c'est juste que le rendu final en ligne part souvent en couille.
 
Je laisse tombé Wampserver, je ne sais même pas comment ouvrir et édité mes pages avec, mais merci quand même ;)


Message édité par micmey le 04-05-2017 à 12:43:26

---------------
Mon site: http://space-sheriff.net/
Reply

Marsh Posté le 04-05-2017 à 03:20:52   

Reply

Marsh Posté le 04-05-2017 à 23:26:37    

Citation :

Je laisse tombé Wampserver, je ne sais même pas comment ouvrir et édité mes pages avec, mais merci quand même ;)

 


Heu...  :whistle:

 

Juste que Wamp tout seul sert à rien, ça émule juste un serveur...
Il faut faire un child (dossier enfant du thème Wordpress) et importer la base de données Wordpress dedans pour créer des pages en local.

 

Je ne connais pas ton niveau micmey, mais là, il te manque des connaissances...  :sweat:

 

Je l'ai constaté en regardant ton site (enfin ta page d'accueil "en maintenance" ), c'est vraiment amateur (fautes : accueil/acceuil)
et surtout le menu et le footer sont des images .jpg.  :ouch:

 

Il ne risque pas d'être responsive design ton site...

 


Message édité par Harrybeau1 le 05-05-2017 à 00:57:47

---------------
Panem et circenses. Nihil novi sub sole.
Reply

Marsh Posté le 05-05-2017 à 02:30:07    

Ba je n'y connais rien, j'essaye juste de changer le design de mon ancien site qui date de 2001 c'est un petit site personnel, à l’époque les menus étaient en images .jpg, aujourd'hui je ne sais pas comment c'est, j'ai essayé plein de programme MAGIX Web, Dreamweaver, etc. mais je n'y comprends rien, pas grave je continuerais comme avant. Au pire il y a des tutos sur youtube avec photoshop CC 2017 etc.
 
C'est quoi sinon le problème avec le .jpg  :??:

Message cité 1 fois
Message édité par micmey le 05-05-2017 à 07:19:26

---------------
Mon site: http://space-sheriff.net/
Reply

Marsh Posté le 05-05-2017 à 15:39:29    

Salult,

micmey a écrit :

Ba je n'y connais rien, j'essaye juste de changer le design de mon ancien site qui date de 2001 c'est un petit site personnel, à l’époque les menus étaient en images .jpg, aujourd'hui je ne sais pas comment c'est


Aujourd'hui, c'est en HTML5/CSS3 (Javascript en option pour certaines animations), comme depuis une bonne dizaine d'années...
 

micmey a écrit :

j'ai essayé plein de programme MAGIX Web, Dreamweaver, etc. mais je n'y comprends rien, pas grave je continuerais comme avant. Au pire il y a des tutos sur youtube avec photoshop CC 2017 etc.


Si tu ne connais pas au moins les bases du HTML/CSS, tu ne comprendras rien aux logiciels tels que Dreamweaver. Quant aux tutos Photoshop, c'est très bien, mais ce n'est qu'une partie du travail (la plus agréable : la création ^^).
L'autre partie, c'est d'apprendre à "traduire" ta maquette Photoshop en langage Web... Et j'ai bien l'impression que c'est ton problème majeur.  
 
Le plus simple serait donc de commencer par la base : apprendre le HTML/CSS.
 

micmey a écrit :

C'est quoi sinon le problème avec le .jpg  :??:


Le .jpg en tant que tel ne pose pas de problème. C'est son utilisation comme élément de navigation qui va poser problème, notamment sur les supports mobiles (sauf à faire du redimensionnement à la volée, et encore... Ce n'est pas du vrai responsive).
Parce que le responsive ne consiste pas seulement à réduire la taille des éléments, c'est surtout, en fait, adapter le site et son contenu à l'écran d'affichage pour le meilleur confort de lecture possible.
 
Par exemple, ton menu comporte 12 éléments.
En mode desktop, on peut tout afficher sur une ligne.
Mais en mode tablette verticale (768 pixels de large) et au-dessous, ça passera sur 2 lignes, voire 3 ou 4 en 480 pixels. Et ça, ce n'est ni pratique, ni esthétique. Donc, pour éviter ça, on cache généralement le menu derrière une icône "hamburger" (3 barres horizontales superposées) : au clic ou au touché, le menu est dévoilé (il y a diverses manières de faire).
Dans ton cas, je préconiserais un menu vertical (12 liens l'un en dessous de l'autre).
En HTML/CSS, c'est facile à coder.
En image, il va falloir que tu prévoies au minimum 2 versions du menu (horizontale et verticale), puis que tu spécifies dans quel cas chaque version doit s'afficher (ce qu'on fait facilement en HTML/CSS via les media queries, qui récupèrent le format de l'écran d'affichage pour sélectionner automatiquement le format)...
 
Le tout sans compter bien sûr qu'en format mobile, on évite au maximum les images pour éviter de trop bouffer de bande passante... C'est là tout l'intérêt de la tendance Webdesign actuelle (flat/material design), qui est basée sur des formes géométriques simples de couleurs unies (ou avec un léger dégradé, voire des ombres pour certains boutons), ce qu'on sait parfaitement faire en CSS et qui est bien plus léger qu'une image :)


---------------
Besoin de graphisme de qualité à prix raisonnable ? --> http://www.grafimages.com - Le site de mon groupe : https://closedown.fr - Mes tutoriaux Cubase : https://www.youtube.com/playlist?li [...] L6o4xYawhc
Reply

Marsh Posté le 06-05-2017 à 09:52:21    

@Grafimages, ba quand tu dis "évite au maximum les images pour éviter de trop bouffer de bande passante" ., C'est un site sur de vieilles séries télé des années 80 du coup il y a une bonne centaine d'images avec des interviews écrites + des anecdotes :(


Message édité par micmey le 06-05-2017 à 10:39:53

---------------
Mon site: http://space-sheriff.net/
Reply

Marsh Posté le 06-05-2017 à 15:21:42    

Je parlais plus des images du design que du contenu. Si tu optimises le poids de tes images, ça devrait faire l'affaire quand même.


---------------
Besoin de graphisme de qualité à prix raisonnable ? --> http://www.grafimages.com - Le site de mon groupe : https://closedown.fr - Mes tutoriaux Cubase : https://www.youtube.com/playlist?li [...] L6o4xYawhc
Reply

Marsh Posté le 09-05-2017 à 23:43:44    

http://www.bldt.net/Om/spip.php?action=acceder_document&arg=2744&cle=03ce938c606d19425ffa22cce1aad4faf3d7ee3b&file=jpg%2Fcomete.jpg
 
 
Après la comète de Halley, la comète de Micmey !  :)  
Il repasse tous les 7 ans pour reposer la même question et on lui répond la même chose !
 
Pour le poids des images, comme l'indique Grafy, tu ne capte pas : les images de tes affiches de films vintage resteront toujours des images (.jpg ou .png par exemple),
moyennant de les optimiser (pas balourder du 300 ppp cmjn print) pour que tes pages ne mettent pas deux plombes à s'afficher (> bande passante/débit).
Lui t'explique qu'il ne faut pas concevoir tes <nav>, <footer> sous Photoshop !
Y'a Html5 (structure)/Css3 (mise en forme) pour faire ça : ensuite tu pourra causer responsive design.
Là, tu mélanges contenant (structure/mise en forme) et contenu (textes/images qui vont évoluer) !
 
Mais comme on te dit depuis 2007, arrête avec ton Frontpage paléolithique et passe sur Wordpress, tu touchera pas une ligne de code !!
Et si tu as besoin de changer un truc ou deux, va (c'est gratos) sur : https://openclassrooms.com/courses/ [...] l5-et-css3
 
Déjà fais l'effort de démarrer un truc, ensuite on pourra t'aider utilement. ;)  
Sans ça, ton projet restera ad vitam eternam au fond d'un carton. :(
 
 
PS : D'ici 7 ans, je sais pas si hfr sera encore là et surtout je sais même pas comment sera le net !!! loll !!!
 
Edit : Ortho


Message édité par Harrybeau1 le 10-05-2017 à 00:44:07

---------------
Panem et circenses. Nihil novi sub sole.
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed