[Votre avis]Design d'un site

Design d'un site [Votre avis] - Web design - Graphisme

Marsh Posté le 16-03-2009 à 15:40:00    

Ayant a peu près fini le site ci dessous, j'aurais souhaité avoir votre avis sur le résultat, histoire d'engranger quelques remarques pour une future refonte du site si besoin.
 
Le site en question
 
Merci d'avance pour vos critiques ( constructives ) .
 
 
P.S. Le contenu ci-dessous recouvrait un problème technique lors de la réalisation ( sur une question de gestion de div en JS ) . A lire si la solution peut vous interesser.
 
 
 
######################################
 
 
Bonjour,
 
étant en train de m'arracher les cheveux sur ce problème, je me résigne a le soumettre aux codeurs qui règnent ici en maître...
 
Voici le principe : je dispose d'une page principale nommée index.html
 
Je souhaite séparer cette page en deux parties : la partie gauche qui constituera mon menu, et la partie droite qui affichera le contenu du site.
J'ai opté pour la création d'une iframe dans la partie droite, ou se chargera les differentes pages html de mon site
 
Mon menu est constitué de trois animations flashs, correspondants aux trois rubriques principales de mon site.
 
Voici ci dessous un exemple avec encadré en rouge le menu en flash et en vert l'iframe
http://img15.imageshack.us/img15/9476/exemple1.jpg
 
LE PROBLEME
 
Lorsque je tente d'appeler une nouvelle page html dans mon iframe a partir de mes boutons flash, cet abruti de @$!m$ de ¤{|@ de machin me charge ma page html dans un nouvel onglet au lieu de me le charger dans mon iframe.
 
MA QUESTION  
 
Existe-t-il un moyen pour que mes boutons flash renvoie bien la page html dans l'iframe de ma page principale
OU existe-t-il un moyen d'obtenir un resultat similaire en se passant de la fonction iframe ?  
 
Merci d'avance.
 
Voici le code que j'ai utilisé dans Flash
 

Code :
  1. on (press) {
  2. getURL("presentation.html", "data" );}


 
Voici le code html de ma page index
 

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Document sans nom</title>
  6. <link href="style.css" rel="stylesheet" type="text/css" />
  7. <script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
  8. </head>
  10. <body>
  11. <div id="cadre1024">
  13.   <div id="partiegauche">
  14.     <div id="arc-haut"><img src="img/images/arc_haut.jpg" class="floatright" /></div> 
  15.      <div id="Presentation">
  16.       <script type="text/javascript">
  17. AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','210','height','116','wmode','transparent','src','../../2-Work/Sources/presentation','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','../../2-Work/Sources/presentation' ); //end AC code
  18. </script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="210" height="116">
  19.         <param name="movie" value="../../2-Work/Sources/presentation.swf" />
  20.         <param name="wmode" value="transparent" />
  21.         <param name="quality" value="high" />
  22.         <embed src="../../2-Work/Sources/presentation.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="210" height="116"></embed>
  23.       </object>
  24.     </noscript></div>
  25.     <div id="arc-middle"><img src="img/images/arc_middle.jpg" class="floatright" /></div>
  26.    
  27.     <div id="professionnel">
  28.       <script type="text/javascript">
  29. AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','210','height','116','wmode','transparent','src','../../2-Work/Sources/espacepro','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','../../2-Work/Sources/espacepro' ); //end AC code
  30. </script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="210" height="116">
  31.         <param name="movie" value="../../2-Work/Sources/espacepro.swf" />
  32.         <param name="wmode" value="transparent" />
  33.         <param name="quality" value="high" />
  34.         <embed src="../../2-Work/Sources/espacepro.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="210" height="116"></embed>
  35.       </object>
  36.     </noscript></div>
  37.    
  38.    
  39.     <div id="particulier">
  40.      <div id="contact"><img src="img/images/contact.jpg" /></div>
  41.       <script type="text/javascript">
  42. AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','210','height','116','wmode','transparent','src','../../2-Work/Sources/espacepart','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','../../2-Work/Sources/espacepart' ); //end AC code
  43. </script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="210" height="116">
  44.         <param name="movie" value="../../2-Work/Sources/espacepart.swf" />
  45.         <param name="wmode" value="transparent" />
  46.         <param name="quality" value="high" />
  47.         <embed src="../../2-Work/Sources/espacepart.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="210" height="116"></embed>
  48.       </object>
  49.     </noscript>
  50.     </div>
  51.     <div id="arc-bas"><img src="img/images/arc_bas.jpg" class="floatright" /></div>
  52.     <div id="arc-basfin"><img src="img/images/arc-basfin.jpg" class="floatright" /></div>
  53. </div>
  55.   <div id="texte"><iframe name="data" src="presentation.html" width="410" height="496" class="floatleft">
  56. </iframe></div>
  57. </div>
  58. </body>
  59. </html>


Message édité par eurys le 20-03-2009 à 13:54:00

---------------
Don't worry, you won't feel anythin' ... but an excruciating pain.
Reply

Marsh Posté le 16-03-2009 à 15:40:00   

Reply

Marsh Posté le 16-03-2009 à 23:12:51    

Bon,
 
histoire que ceux qui cherche une solution identique a la mienne ne meurent pas de vieillesse en attendant de trouver une solution satisfaisante sur le waib, je vous livre ici la solution a laquelle je suis parvenu.
 
Il semble que l'utilisation des frames soit dépassée, et soit dit en passant, tant mieux :o. Une alternative efficace est l'utilisation de l'AJAX, autrement dit en termes barbares, le Asynchronous JavaScript And XML.  
 
N'ayant moi-même que quelques maigres connaissances en php, et aucune en java ( enfin pas encore ), je suis quand même parvenu au résultat voulu, a savoir un contenu de page qui change partiellement selon le menu sélectionné.  
 
Tout est expliqué dans ce blog, par ailleurs très pratique car il contient de nombreux et utiles tutoriaux.
 
Sur ce bon dodo :p


---------------
Don't worry, you won't feel anythin' ... but an excruciating pain.
Reply

Marsh Posté le 17-03-2009 à 04:23:07    

C'est marrant comme c'est souvent les débutants qui cherchent les solutions les plus alambiquées ! :ouch:
 
Faire un menu en 3 anims flash c'est pas top :/
Les Iframe, en effet, c'est dépassé.
 
La solution que tu as trouvé a l'air pas mal. Par contre Java != JavaScript.


---------------
Jeu de simulation Boursière - Version BETA - https://www.facebook.com/wildstocks
Reply

Marsh Posté le 17-03-2009 à 07:19:48    

Oui, et tu raisonne comme moi à mes débuts ! Tu te dis  
"Il y a qu'une partie du site qui change, donc, frame !"  
...Mais non, le mieux reste de faire des pages distinct, et le fait de remettre le menu dans chaque pages n'a rien de sale...
Donc, vu que ton site n'est pas dynamique, je te suggère de faire ta page en XHTML/CSS , l'AJAX, c'est pas si simple et pas forcément utile ici (en faite, pas du tout)
Bref, avance étapes par étapes.

Message cité 1 fois

---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
Reply

Marsh Posté le 17-03-2009 à 10:37:07    

abais a écrit :

Oui, et tu raisonne comme moi à mes débuts ! Tu te dis  
"Il y a qu'une partie du site qui change, donc, frame !"  
...Mais non, le mieux reste de faire des pages distinct, et le fait de remettre le menu dans chaque pages n'a rien de sale...


 
T'as devine, j'en suis effectivement a mes débuts :D
 
En fait, je voulais éviter qu'en cliquant sur un bouton la page se recharge, et je voulais éviter aussi d'avoir un fichier flash trop gros pour le menu a gauche.
 
Ca donne ca au niveau rendu  
http://etudiants.cohl.fr/modules2009/mapperce/arnaud/
 
Quels auraient été vos choix pour arriver a un résultat a peu près similaire ? ( si vous pouviez rentrer un peu dans le détail, ca m'interesse :) )  

Message cité 1 fois

---------------
Don't worry, you won't feel anythin' ... but an excruciating pain.
Reply

Marsh Posté le 17-03-2009 à 11:12:12    

eurys a écrit :

Quels auraient été vos choix pour arriver a un résultat a peu près similaire ? ( si vous pouviez rentrer un peu dans le détail, ca m'interesse :) )  


Pas de Flash. Tout en image.
Prendre Flash pour faire ca, ca revient a aller faire ses courses en camion.

Message cité 1 fois

---------------
Jeu de simulation Boursière - Version BETA - https://www.facebook.com/wildstocks
Reply

Marsh Posté le 17-03-2009 à 11:15:38    

Zedlefou a écrit :


Pas de Flash. Tout en image.
Prendre Flash pour faire ca, ca revient a aller faire ses courses en camion.


Ah bon? même pour faire des menus un peu plus décorés ? ( ils sont pas finalisés la )


Message édité par eurys le 17-03-2009 à 11:16:00

---------------
Don't worry, you won't feel anythin' ... but an excruciating pain.
Reply

Marsh Posté le 17-03-2009 à 11:20:16    

Alors, étant donné que ton référencement est d'office pourri par l'utilisation des frames, on peu penser au full-flash pour la simplicité.
Une solution propre serait de faire une seule page HTML, avec une div différente par page (j'entend par là la partie droite), par défaut invisible (en CSS), et javascript qui rend visible la div intéressé...
EDIT : Tu peux garder ton menu en flash avec cette solution

Message cité 1 fois
Message édité par abais le 17-03-2009 à 11:23:42

---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
Reply

Marsh Posté le 17-03-2009 à 12:45:09    

abais a écrit :

Alors, étant donné que ton référencement est d'office pourri par l'utilisation des frames, on peu penser au full-flash pour la simplicité.
Une solution propre serait de faire une seule page HTML, avec une div différente par page (j'entend par là la partie droite), par défaut invisible (en CSS), et javascript qui rend visible la div intéressé...
EDIT : Tu peux garder ton menu en flash avec cette solution


 
ah donc en fait tu veux dire un javascript qui fasse switcher la css en fonction du menu selectionné c'est ca ?


---------------
Don't worry, you won't feel anythin' ... but an excruciating pain.
Reply

Marsh Posté le 17-03-2009 à 13:14:43    

oui, enfin, non pas "Le", mais une portion du CSS...
En gros, tte les Div seront superposé et transparente via l'attribue display:none, et le JS se chargera de le mettre display:block à la div en question.


---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
Reply

Marsh Posté le 17-03-2009 à 13:14:43   

Reply

Marsh Posté le 18-03-2009 à 09:35:20    

Aurais tu le bout de code AS 2.0 qu'il faut pour les boutons flash stp  ?  
Je suis parvenu a trouver ce qu'il me fallait en js pour le changement du display des pages, mais pas la commande flash
 
ps le code js que j'ai trouvé
 

Code :
  1. <script type="text/javascript">
  2.       function catsel(sel) {
  3.         //if (sel.value=="-1" ) return;
  4.         var opt=sel.getElementsByTagName("option" );
  5.         for (var i=0; i<opt.length; i++) {
  6.           var x=document.getElementById(opt[i].value);
  7.           if (x) x.style.display="none";
  8.         }
  9.         var cat = document.getElementById(sel.value);
  10.         if (cat) cat.style.display="block";
  11.       }
  12.     </script>


---------------
Don't worry, you won't feel anythin' ... but an excruciating pain.
Reply

Marsh Posté le 18-03-2009 à 10:20:54    

getURL("javascript:catsel(sel)" );
 
En remplaçant bien sûre "sel" par l'ID de la Div visée...
ça peut merder en local, donc test sur un FTP direct aussi !


---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
Reply

Marsh Posté le 18-03-2009 à 11:00:14    

nope ca semble pas marcher avec le getURL :/
 
J'ai placé un selecteur de choix en haut de la page ca semble marcher correctement , mais pas quand je passe par le menu flash


---------------
Don't worry, you won't feel anythin' ... but an excruciating pain.
Reply

Marsh Posté le 18-03-2009 à 17:44:59    

Bon ben Finalement je suis retourné sur l'option développée avec le bout d'ajax, n'étant pas parvenu a faire fonctionner l'autre ( c'est rageant ! )
 
Enfin comme disant papy, l'important, hein, .... :p


---------------
Don't worry, you won't feel anythin' ... but an excruciating pain.
Reply

Marsh Posté le 18-03-2009 à 19:54:17    

Post dans la catégorie ActionScript sinon...
essaye un :
getURL("javascript:alert('you clicked me')" );
pour voir si c'est ta fonction qu'il n'apprécie pas, ou le JS en général...


---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
Reply

Marsh Posté le 20-03-2009 à 13:56:19    

[:valentinorossi]
 
Edition du premier post de la page + placement d'un sondage.


---------------
Don't worry, you won't feel anythin' ... but an excruciating pain.
Reply

Marsh Posté le 20-03-2009 à 15:20:45    

Et bien maintenant que tu as des notions en JS/Ajax, fais le même menu sans flash !
Si tu es aussi nul et fainéant que moi, utilise JQuery (par exemple).

Message cité 1 fois

---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
Reply

Marsh Posté le 20-03-2009 à 16:26:51    

Salut
ben oué pourquoi faire simple quand on peut faire compliqué  :D
pas besoin de flash, pour faire des menus plus décorés  :D  juste un bon graphiste (aïe pas tapé  :p donc pas moi  :D )
 
http://www.alsacreations.com/stati [...] us/g04.htm => full hml/css
 
Un menu "énooooooooorme" par rapport au contenu. Attention donc aux internautes avec de petites résolutions.
évite les "mailto" fais plutôt un formulaire de contact.
Sinon le reste est assez clair.
 
j'aime bien le logo


---------------
http://manooweb.fr  http://manoo.fr
Reply

Marsh Posté le 20-03-2009 à 21:58:53    

abais a écrit :

Et bien maintenant que tu as des notions en JS/Ajax, fais le même menu sans flash !
Si tu es aussi nul et fainéant que moi, utilise JQuery (par exemple).


 
Vais laisser tel quel pour le moment , mais avec du recul, le menu est probablement la prochaine chose que je modifierais :p
A voir si j'ai du temps cette semaine ...
 
Merci m@noo pour les remarques, et la proposition de menu :)


---------------
Don't worry, you won't feel anythin' ... but an excruciating pain.
Reply

Marsh Posté le 20-03-2009 à 23:39:37    

Bon, a  moi d'y mettre mon grain de sel  :bounce:  :D  
 
J'ai voté pas terrible:
 
-Il n y a pas vraiment de design a proprement parlé. c'est un peu trop simple a mon goût. J'aurai bien vu un petit fond pour un peu égayer le tout, car  du blanc partout comme ca c'est triste quoi.
 
- Tout est confiner sur la droite, ca  réduit énormément l'espace et c'est dommage. 1/3 de l'espace est a gauche et ne sert a rien.
 
 
- Je trouve qu'il n y a pas besoin de mettre du flash, pour un menu aussi simple.
 
 
Sinon, j'aime bien la typo du menu, elle est jolie et bien lisible.
 
 
Bonne continuation

Reply

Sujets relatifs:

Leave a Replay

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