Rendu esthétique (HTML / CSS / JAVA)

superseb · 22 Mars 2012

Bonjour,
je viens de tomber sur ce site et je suis très curieux d'avoir votre éclairage sur la technique employé pour aboutir à ce travail ?

http://www.ringvemedia.com/

- J'aimerais que vous m'expliquiez comment obtenir une image de fond en Full Frame (avec Dreamweaver !) ? C'est une chose que je sais parfaitement faire quand il s'agit d'un objet en Flash ou quand il y a un objet dans une balise ! Mais j'ai pas saisi comment procéder pour une image de fond !

- J'aimerais que vous m'expliquiez comment la balise texte est géré (avec son effet de transparence sur le fond) ?

- Et plus compliqué, j'aimerais savoir comment fonctionne l'animation souris (lorsque l'on se dirige vers le centre de l'image, le curseur change avec une disparition du menu !).

Merci par avance pour vos précieuses explications.

momo-fr · 23 Mars 2012

En premier lieu je te fait remarquer que le code source est très simple (j'ai viré les parties tracking Google) :

Bloc de code:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>GOTOCHINA</title>
<link rel="stylesheet" media="screen" type="text/css" href="g/a.css" />
<script type="text/javascript" src="g/mootools.js"></script>
<script type="text/javascript" src="g/core.js"></script>
<!--[if IE]><meta http-equiv="imagetoolbar" content="no" /><meta http-equiv="X-UA-Compatible" content="IE=8" /><![endif]-->
<!--Site by Eirik Backer-->
</head>
<body>
<div id="menu">
  <h1><a href="http://www.ringvemedia.com"><b>GOTO</b>CHINA</a></h1>
  <div>
    <ul>
      <li><a href="introduction">INTRODUCTION</a></li>
      <li><a href="shanghai">SHANGHAI</a></li>
      <li><a href="beijing">BEIJING</a></li>
      <li><a href="traveling">TRAVELING</a></li>
    </ul>
  </div>
</div>
<div id="cont">
  <div class="box large left">
    <h2><b>GOTO</b>CHINA</h2>
    This website is the result of a study-trip to Shanghai and Beijing, made by 17 
    Norwegian students in February 2008. We hope this site can be helpful for others 
    visiting China. Through this website we will give a presentation of our trip, 
    and share tips and knowledge we gained when traveling. </div>
</div>
<div id="bg">
  <div>
    <table cellpadding="0" cellspacing="0">
      <tr>
        <td><img alt="" src="server//bg.jpg" /></td>
      </tr>
    </table>
  </div>
</div>
</body>
</html>

superseb a dit:
- J'aimerais que vous m'expliquiez comment obtenir une image de fond en Full Frame (avec Dreamweaver !) ? C'est une chose que je sais parfaitement faire quand il s'agit d'un objet en Flash ou quand il y a un objet dans une balise ! Mais j'ai pas saisi comment procéder pour une image de fond !

De qu'elle image de fond parles-tu ?
L'image que tu vois en grand n'est pas en background mais elle est présente dans le tableau de la div "bg". L'effet de mise à l'échelle est un truc obtenu avec la librairie Mootools et son core.js qui contient les effets, pour l'image je pense que c'est la fonction "kina".

superseb a dit:
- J'aimerais que vous m'expliquiez comment la balise texte est géré (avec son effet de transparence sur le fond) ?

Classique avec une valeur d'opacité sur la div conteneur parente du menu (pas celle qui contient le texte du menu) :

Bloc de code:

#menu div {
	height:56px;
	background:#000;
	opacity:0.6;
	filter:alpha(opacity=60);
	padding:7px 0 0 7px
}

superseb a dit:
- Et plus compliqué, j'aimerais savoir comment fonctionne l'animation souris (lorsque l'on se dirige vers le centre de l'image, le curseur change avec une disparition du menu !).

Ok, j'ai trouvé dans qu'elle page tu as cet effet, c'est bien dans le core.js, la partie en bas des fonctions est dédiée à la galerie photo (<div id="photos">), ça efface le menu et affiche les liens avec flèches au bout du curseur… pas mal, mais déroutant au départ.

Cette page galerie est bien foutue, gestion efficace du cache, pour une page de 2,75 Mo elle s'affiche plutôt vite chez moi, le truc c'est de mettre en première image un truc léger et certaines pèsent moins de 70 Ko pour du 1024x683… gloups, bonjour la compression.

---------- Nouveau message ajouté à 02h57 ---------- Le message précédent a été envoyé à 02h10 ----------

Bon j'épluche un peu le core.js (note que j'y connais pas grand chose en programmation Javascript, j'ai juste un peu l'habitude de décrypter comment c'est écrit et repérer les ID ou autre classe qui peuvent être planquées dans le code et certaines valeurs que l'on peut modifier parfois) :

Bloc de code:

function $E(tag,el){return $(el||document).getElement(tag)}

window.addEvents({
	domready:function(){
		$extend(kina,{bg:$E('img',$E('#bg',db=$(document.body))),timer:(Browser.Engine.gecko||Browser.Engine.webkit)?null:setInterval(kina.fix,200),menu:$('menu')});gal.call(gal);
		if($$('dl')[0]){var hs=$$('dt'),fx=hs.map(function(el){return new Fx.Morph(el,{wait:false})});new Accordion(hs,hs.getNext(),{opacity:false,onActive:function(head,box){if($chk(this.active))fx[this.active].start({'color':'#000','backgroundColor':'#fff'});fx[this.active=this.togglers.indexOf(head)].start({'color':'#fff','backgroundColor':'#000'})}})}
	},
	keypress:function(e){var e=new Event(e);if(e.key=='down'||e.key=='right')e.stop()}
});

kina={
	doc:{x:0,y:0},
	fix:function(){if(kina.bg.complete&&(db.offsetWidth!=kina.doc.x||db.offsetHeight!=kina.doc.y||kina.fix.src!=kina.bg.src)){var bg=kina.bg.getSize();kina.doc={x:db.offsetWidth,y:db.offsetHeight};kina.fix.src==kina.bg.src||$extend(kina.fix,{p:bg.x/bg.y,src:kina.bg.src});kina.bg.setStyles({width:(bg.y=kina.doc.x>(bg.x=Math.round(kina.doc.y*kina.fix.p)))?kina.doc.x:bg.x,height:bg.y?Math.round(kina.doc.x/kina.fix.p):kina.doc.y})}}
}

$extend(gal=function(){
	if(gal.el=$('photos')){$extend(this,{fx:new Fx.Tween(kina.menu,'bottom'),float:$('float').addEvent('click',gal.key)}).el.getElements('a').addEvent('click',this.swap)[0].addClass('cur');document.addEvents({mousemove:gal.mouse,keydown:gal.key})}
},{
	mouse:function(e){var w=db.offsetWidth/2,x=e.client.x,y=db.offsetHeight-e.client.y,el=gal.float;if(y<(gal.menu?85:20)){$clear(gal.timer);gal.menu||(gal.menu=gal.fx.start(20))}else{if(gal.menu)gal.menu=!(gal.timer=setTimeout(function(){gal.fx.start(-55)},700));else{if(y<85&&el.className)el.className=el.style.display='';else if(y>85){if(!el.className)el.style.display='block';if(x>w&&el.className!='nxt')el.className='nxt';else if(x<w&&el.className!='prv')el.className='prv';with(el.style){left=x-20+'px';top=e.client.y-10+'px'}}}}},
	swap:function(){$E('.cur',gal.el).removeClass('cur');kina.bg.src=this.addClass('cur').getElement('img').src},
	key:function(e){var nxt=e.key?(e.code==39):(gal.float.className=='nxt');return (e.key&&e.code!=37&&e.code!=39)?false:gal.swap.call($E('.cur',gal.el)[nxt?'getNext':'getPrevious']()||gal.el[nxt?'getFirst':'getLast']())},
	menu:true
});

L'effet pour l'agrandissement de l'image et le Morph appliqué à la balise id="bg", bon après c'est très obscur, il y a des tas de fonctions pour l'effacement du menu avec un timer dans la tas, un pro du Javascript te décrypterait ça de manière plus évidente.

superseb · 23 Mars 2012

Merci pour tes précieuses informations.
Ce qui est bien, c'est que ça me permet de me mettre un peu à jour sur certains standards de la création numérique.

J'ai une autre question. Je me suis amusé à copier certains éléments, et il y en a un que je n'ai pas compris. Comment gère t-on l'emplacement des blocs textes pour les avoir à certains endroits exactement par ex. (placer le texte à mi-hauteur sur la droite ?) !

Je sens que je vais bien m'amuser ce week end !

---------- Nouveau message ajouté à 10h55 ---------- Le message précédent a été envoyé à 09h34 ----------

Des fois, je me sens bête, à force de tester les rendus sur les navigateurs, j'en oublie de vider les caches ! Ce qui nous amène à dire que la question du dessus, n'est pas très constructive ! haha.

---------- Nouveau message ajouté à 12h53 ---------- Le message précédent a été envoyé à 10h55 ----------

Une question qui pourra vous paraître bête, mais je ne comprends pas ce qui se passe (ni pourquoi) lorsque l'on veux classer les rubriques les liens et surtout la mise-en -page se perds ! :

par ex. au lieux d'avoir tout les liens rattachés au dossier racine du site [SITE -> PROJET ->index.html] (ce qui marche très bien !)

mais si je veux classer ce lien en rajoutant un dossier par ex.
[SITE -> PROJET -> PRESENTATION ->index.html] (c'est la catastrophe !)

J'ai beau réparer les liens mais je ne comprends pas pourquoi les mises en formes ne suivent pas !:rose:

Merci par avance de vos précieuses explications.

Niconemo · 23 Mars 2012

Je ne comprend pas grand chose à tout ça : "classer les liens", "réparer un lien", "SITE -> PROJET -> PRESENTATION ->index.html", etc. (probablement à cause du fait que tu utilises apparemment Dreamweaver sans connaitre les bases et le vocabulaire du HTML et des CSS) mais c'est peut être dû à un lien relatif vers une CSS externe qui se retrouve brisé si tu déplaces le fichier.

Le problème avec Dreamweaver, c'est qu'on finit immanquablement par se rendre compte qu'on ne peut pas faire ce qu'on veut sans des connaissances minimum en HTML/CSS en plus de la connaissance du mode d'emploi de Dreamweaver. Le problème c'est que quand on a ces connaissances en HTML/CSS, on n'a plus du tout besoin de Dreamweaver et que c'est même un sacré boulet.

superseb · 23 Mars 2012

Je suis pas un programmateur ! J'ai longtemps travaillé en Flash et me débrouillait avec ! Le HTML, je l'ai appris quand j'étais en formation professionnelle il y a des années. Et l'illogisme de dreamweaver m'avait toujours rebuté. Cependant, je suis parfaitement capable de comprendre et de lire le HTML mais, je ne suis pas un trans-codeur dans l'âme !

Mais de ma dernière question, il s'agit juste d'une question de logique ! J'aimerais juste comprendre ce qui casse plutôt que de devoir enchainer une centaine de dossier à la racine zéro du site !

Niconemo · 23 Mars 2012

il y a probablement simplement un lien (une url) qui est brisée.

Une url n'est pas forcément un lien hypertexte, il y a des url vers des images, mais aussi vers des fichiers externes comme du javascript (et pas du "Java") des fichiers de mise en forme (css), etc.

Si il y a dans l'entête (<head>) d'un fichier xxx.htm un lien en chemin relatif (à partir de xxx.htm) vers une CSS ou un JS qui influe sur la mise en forme. Le fait de placer ce fichier xxx.htm dans un autre dossier brisera ce lien. Il vaut alors mieux mettre ce lien en chemin absolu (à partir le la racine du site). Si tu as récupéré du code HTML que tu bidouille en Wysiwyg avec Dreamweaver, il est probable que le logiciel n'y reconnaisse pas ses petits et ne sache pas comment gérer et corriger ces url.

Mais ça on ne pourra te le dire que si tu nous montres une exemple précis en live, ou au minimum,du code.

superseb · 23 Mars 2012

Niconemo a dit:
il y a probablement simplement un lien (une url) qui est brisée.

Une url n'est pas forcément un lien hypertexte, il y a des url vers des images, mais aussi vers des fichiers externes comme du javascript (et pas du "Java") des fichiers de mise en forme (css), etc.

Si il y a dans l'entête (<head>) d'un fichier xxx.htm un lien en chemin relatif (à partir de xxx.htm) vers une CSS ou un JS qui influe sur la mise en forme. Le fait de placer ce fichier xxx.htm dans un autre dossier brisera ce lien. Il vaut alors mieux mettre ce lien en chemin absolu (à partir le la racine du site). Si tu as récupéré du code HTML que tu bidouille en Wysiwyg avec Dreamweaver, il est probable que le logiciel n'y reconnaisse pas ses petits et ne sache pas comment gérer et corriger ces url.

Mais ça on ne pourra te le dire que si tu nous montres une exemple précis en live, ou au minimum,du code.

Mais nous y sommes, mon cher !

Niconemo · 23 Mars 2012

Exemples d'URL relatives trouvées dans le code du site qui t'inspires (en rouge).
Si on veux déplacer ce fichier html, on doit soit déplacer avec ces 3 fichiers (a.css, mootools.js et core.js) ou plus précisément le dossier "g" qui les contient tous les trois avec le fichier html.

Bloc de code:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>GOTOCHINA</title>
<link rel="stylesheet" media="screen" type="text/css" href="[B][COLOR=DarkRed]g/a.css[/COLOR][/B]" />
<script type="text/javascript" src="[COLOR=DarkRed][B]g/mootools.js[/B][/COLOR]"></script>
<script type="text/javascript" src="[COLOR=DarkRed][B]g/core.js[/B][/COLOR]"></script>
<!--[if IE]><meta http-equiv="imagetoolbar" content="no"   /><meta http-equiv="X-UA-Compatible" content="IE=8"   /><![endif]-->
<!--Site by Eirik Backer-->
</head>

Si on veut les laisser là où ils sont (pour qu'ils servent à plusieurs pages sans avoir à les dupliquer, par exemple), il faut refaire les 3 liens pour les pointer à nouveau vers le dossier "g" à partir du document (relatif) ou de la racine du site (absolu) la 2e méthode étant alors à privilégier.

Sur le web, les url absolues (dans le code, pas dans l'url affichée dan la barre d'adresse qui est toujours absolue) commencent généralement par "http://www.domaine.com/" ou par "/" qui revient techniquement au même.

superseb · 23 Mars 2012

Donc, voilà ce qui marche !
et je vous donne en exemple, mon projet en cours ! http://www.sebastien-moitrot.com/NEW-2012/index.html (faut bien tester !).

Ce que j'ai actuellement c'est ce type d'écriture sur l'onglet code.

Bloc de code:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>MOITROT SÉBASTIEN - CURRICULUM VITAE</title>
	<meta name="verify-v1" content="8Fcv4zU4kEpmqFt1JgX8TNobfjaWLWwA7/MpesGh5B4=" />
	<link rel="stylesheet" media="screen" type="text/css" href="../g/a.css" />
	<script type="text/javascript" src="../g/mootools.js"></script><script type="text/javascript" src="../g/core.js"></script>
	<!--[if IE]><meta http-equiv="imagetoolbar" content="no" /><meta http-equiv="X-UA-Compatible" content="IE=8" /><![endif]-->
	<!--Site by Eirik Backer-->
</head>
<body>
	<div id="menu">
		<h1><a href="http://forums.macg.co/index.html"><b>MOITROT</b> SÉBASTIEN</a></h1>
		<div>
			<ul>
				<li class="cur"><a href="/curriculum-vitae/index.html">CURRICULUM VITAE</a></li>
				<li><a href="http://forums.macg.co/films/index.html">FILMS</a></li>
				<li><a href="http://forums.macg.co/editions/index.html">EDITIONS</a></li>
				<li><a href="http://forums.macg.co/photographies/index.html">PHOTOGRAPHIES</a></li>
			</ul>
            <ul>
				<li><a href="http://forums.macg.co/curriculum-vitae-contact/index.html">CONTACT</a></li>
				<li><a href="http://forums.macg.co/curriculum-vitae-formation/index.html">FORMATION</a></li>
				<li><a href="http://forums.macg.co/curriculum-vitae-expositions/index.html">EXPOSITIONS</a></li>
                <li><a href="http://forums.macg.co/curriculum-vitae-liens/index.html">LIENS</a></li>
			</ul>
		</div>
	</div>
		<div id="cont"></div>	<div id="bg"><div><table cellpadding="0" cellspacing="0"><tr><td><img alt="" src="http://forums.macg.co/server/curriculum-vitae-images/bg.jpg" /></td></tr></table></div></div>
	<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
	<script type="text/javascript">_uacct="UA-1834402-4";urchinTracker();</script>
</body>
</html>
<!-- Localized -->

et l'idée c'est d'éviter cette sur-accumulation de dossier !

---------- Nouveau message ajouté à 15h37 ---------- Le message précédent a été envoyé à 15h29 ----------

Pour les src="../g/mootools.js"> & src="../g/core.js">

Quel serait alors l'orthographe à adopter pour indiquer le chemin d'accès ?

Niconemo · 23 Mars 2012

Ben, si tu rajoutes une profondeur de dossier :
"../../g/mootools.js" (on remonte de 2 dossiers par "../../" et on redescend dans "g/mootools.js")
ça c'est en relatif, c'est à dire que ça va forcément changer selon où se trouve ton document.

Le mieux, c'est d'utiliser un lien absolu depuis la racine du site (qui restera valable partout du coup). Si le dossier que tu nous montres est le dossier racine, le lien absolu sera :
"/g/mootools.js" (on remonte à la racine du site par "/" et on redescend dans "g/mootools.js")

superseb · 23 Mars 2012

Niconemo a dit:
Ben, si tu rajoutes une profondeur de dossier :
"../../g/mootools.js" (on remonte de 2 dossiers par "../../" et on redescend dans "g/mootools.js")
ça c'est en relatif, c'est à dire que ça va forcément changer selon où se trouve ton document.

Le mieux, c'est d'utiliser un lien absolu depuis la racine du site (qui restera valable partout du coup). Si le dossier que tu nous montres est le dossier racine, le lien absolu sera :
"/g/mootools.js" (on remonte à la racine du site par "/" et on redescend dans "g/mootools.js")

Fabuleux ! Deux petits points et un slash ont rayonné ma journée !

ça marche nickel !

Tu permet que je t'embrasse !

---------- Nouveau message ajouté à 16h43 ---------- Le message précédent a été envoyé à 15h56 ----------

J'ai peut-être parlé un peu vite !

Autant, si j'ai bien compris "la leçon du jour" à propos des ../ (une fonction qui permet de se déplacer dans l'arborescence du dossier.)

Alors, ça m'a permis de conserver l'ensemble des liens (liés aux fichiers .js) par contre, je ne comprends plus comment faire fonctionner correctement les liens hypertexts !

Un coup ça marche et l'autre pas ! :mouais:

---------- Nouveau message ajouté à 17h58 ---------- Le message précédent a été envoyé à 16h43 ----------

Finalement, avec un peu de repos, je suis revenu à l'exercice et ai trouvé comment corriger tout les liens morts !

Un très grand merci à toi, niconemo, pour l'astuce et la leçon technique que tu m'a donné. :zen:

momo-fr · 23 Mars 2012

Alors, avec Dreamweaver, si tu utilises l'onglet fichier pour créer/copier/coller/déplacer/supprimer des fichiers les liens relatifs sont modifiés automatiquement (après validation de la demande de modification) c'est un des plus de Dreamweaver (ça le fait dans les feuilles de styles itou).

Autre chose, tu trouveras un vérificateur de liens dans le menu "Site", de quoi lancer des récupérations en masse si tu as merdé à un moment donné (franchement ce genre d'outil est pas mal pour les "débutants").

Le rangement chez moi c'est simple :

Racine = index.php ou html
Dossier html = toutes les autres pages
Dossier js = toutes les librairies avec leurs CSS et leurs images
Dossier css = les styles du site
Etc…
Les liens relatifs sont simples à gérer comme ça. :siffle:

:rateau:

superseb · 23 Mars 2012

momo-fr a dit:
Alors, avec Dreamweaver, si tu utilises l'onglet fichier pour créer/copier/coller/déplacer/supprimer des fichiers les liens relatifs sont modifiés automatiquement (après validation de la demande de modification) c'est un des plus de Dreamweaver (ça le fait dans les feuilles de styles itou).

Autre chose, tu trouveras un vérificateur de liens dans le menu "Site", de quoi lancer des récupérations en masse si tu as merdé à un moment donné (franchement ce genre d'outil est pas mal pour les "débutants").

Le rangement chez moi c'est simple :

Racine = index.php ou html
Dossier html = toutes les autres pages
Dossier js = toutes les librairies avec leurs CSS et leurs images
Dossier css = les styles du site
Etc…
Les liens relatifs sont simples à gérer comme ça. :rateau:

Merci pour ces précieuses aides qui ravit ma journée et qui a été productive. Je reviendrais vers vous pour de nouvelles questions ! S'il y a lieu !

momo-fr · 23 Mars 2012

Un autre truc qui aide quand on découvre un template ou une solution HTML pompée sur la toile c'est de commenter le code.

Tu appliques le formatage du code (menu Commande -> Appliquer le format source) pour bien le présenter et tu rajoutes les commentaires qui conviennent pour délimiter les conteneurs, les éléments, etc… ça aide bien pour toutes les futures évolutions.

Enfin le plug-in Firebug installé dans Firefox pour appliquer les CSS en direct "Live" et débuguer tout ça… :up:

superseb · 24 Mars 2012

momo-fr a dit:
Un autre truc qui aide quand on découvre un template ou une solution HTML pompée sur la toile c'est de commenter le code.

Tu appliques le formatage du code (menu Commande -> Appliquer le format source) pour bien le présenter et tu rajoutes les commentaires qui conviennent pour délimiter les conteneurs, les éléments, etc… ça aide bien pour toutes les futures évolutions.

Enfin le plug-in Firebug installé dans Firefox pour appliquer les CSS en direct "Live" et débuguer tout ça…

Tu as tout à fait raison. Et il est important de comprendre ce que l'on fait et comment on le fait !

---------- Nouveau message ajouté à 09h39 ---------- Le message précédent a été envoyé à 09h37 ----------

J'ai une nouvelle question (mais peut être que c'est pas possible là !) : Comment faire pour que ce nouveau site, puisse être lu sur un iPhone ou iPad sans qu'il paraisse désorganisé dans la mise-en-page ?

---------- Nouveau message ajouté à 10h38 ---------- Le message précédent a été envoyé à 09h39 ----------

Dans un autre genre plus simple (mes excuses si vous avez l'impression que ma question est bête !),

Je ne comprends pas vraiment, comment ne pas appliquer une couleur sans que cela n'ai d'incidence sur le reste du CSS ?

Rendu esthétique (HTML / CSS / JAVA)

superseb

Membre actif

momo-fr

Ancien Aveyronnais

superseb

Membre actif

Niconemo

Modo (toujours vivant !)

superseb

Membre actif

Niconemo

Modo (toujours vivant !)

superseb

Membre actif

Niconemo

Modo (toujours vivant !)

superseb

Membre actif

Niconemo

Modo (toujours vivant !)

superseb

Membre actif

momo-fr

Ancien Aveyronnais

superseb

Membre actif

momo-fr

Ancien Aveyronnais

superseb

Membre actif

Sujets similaires