<html>  	<head> 		<meta name="keywords" content="GoLive, Cyb, Cyberstudio, Forum, Liste de discussion"> 		<meta name="Description" content="Go-CYB l'atelier des utilisateurs francophones de GoLive"> 		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1"> 		<title>Kataplasme sur la toile</title> 		<meta name="Author" content="Didier Laget, didier@lpce.com"> 		<!--Start GoLive Include--><!--End GoLive Include--> 		<csactionitem name="B55AB86C1"> 		<csactions> 				<csaction name="B55AB86C1" class="CSS Write" type="onparse" val0="cyb-style_mac_ns.css" val1="cyb-style_win_ns.css" val2="cyb-style_mac_ie.css" val3="cyb-style_win_ie.css" val4="cyb-style_mac_ie5.css" val5="true" val6="cyb-style_other.css"> 			</csactions> 		<csscriptdict import> 			<script language="JavaScript1.2" src="scripts/lib.js"></script> 		</csscriptdict> 		<csactiondict> 			<script><!-- CSAct[/*CMP*/ 'B55AB86C1'] = new Array(doCSSWrite,/*URL*/ 'cyb-style_mac_ns.css',/*URL*/ 'cyb-style_win_ns.css',/*URL*/ 'cyb-style_mac_ie.css',/*URL*/ 'cyb-style_win_ie.css',/*URL*/ 'cyb-style_mac_ie5.css',true,/*URL*/ 'cyb-style_other.css'); CSAction(new Array(/*CMP*/ 'B55AB86C1'));  // --></script> 		</csactiondict> 	</head>  	<body bgcolor="#ffe472" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" background="nav/bg.gif"> 		<div align=center> 			<a name="Top"></a><img height="76" width="585" src="nav/cybtopnav2.gif" border="0" usemap="#cybnav" alt="GO-CYB.com le forum des utilisateurs de GoLive"><map name="cybnav"> <area href="gocyb_plan.shtml" onmouseover="window.status=' La structure du site ';return true" coords="471,61,511,73" shape="rect" title="La structure du site"> <area href="http://www.go-cyb.com/forums/forum.pl"  onmouseover="window.status='Forum ';return true" coords="156,61,202,73" shape="rect" title="Forum : on y parle de GoLive" alt="go-CYB.com le forum des utilisateurs de GoLive"> <area href="liste.shtml" onmouseover="window.status='Liste de discussion ';return true" coords="210,61,254,73" shape="rect" title="Liste de discussion" alt="go-CYB.com le forum des utilisateurs de GoLive"> <area href="ressources_index.shtml" onmouseover="window.status='Ressources, sites et liens';return true" coords="318,60,397,73" shape="rect" title="Ressources, sites et liens" alt="go-CYB.com le forum des utilisateurs de GoLive"> <area href="mailto:cyb@go-cyb.com" onmouseover="window.status='Courriel ';return true"  coords="520,59,564,72" shape="rect" title="Courriel" alt="go-CYB.com le forum des utilisateurs de GoLive"> <area href="truc_index.shtml" onmouseover="window.status='Trucs et astuces';return true" coords="259,60,310,73" shape="rect" title="Trucs et astuces" alt="go-CYB.com le forum des utilisateurs de GoLive"> <area href="outils_index.shtml" onmouseover="window.status='Tools ';return true" coords="415,60,457,72" shape="rect" title="Tools" alt="go-CYB.com le forum des utilisateurs de GoLive"> <area href="index.shtml" onmouseover="window.status='Home ';return true" coords="99,60,150,72" shape="rect" title="Accueil" alt="go-CYB.com le forum des utilisateurs de GoLive"></map></div>  		<div align=center> 			<br><A HREF="http://lpce.com/cgi-bin/general/ads_CYBall.pl?banner=NonSSI;page=41"><IMG SRC="http://lpce.com/cgi-bin/general/ads_CYBall.pl?page=41" border="0"><br>Pub!</a></div><br> 		<div align=center> 			<table border="0" cellpadding="0" cellspacing="0" width="585" bgcolor="#ffce00"> 				<tr> 					<td><img height="16" width="135" src="nav/separation.gif" alt="GO-CYB"></td> 					<td><img height="16" width="15" src="nav/separation.gif" alt="GO-CYB"></td> 					<td><a href="ressources_index.shtml"><img height="16" width="435" src="nav/ressources_rub.gif" border="0"></a></td> 				</tr> 			</table> 		</div>  		<div align=center> 			<table border="0" cellpadding="0" cellspacing="0" width="585" bgcolor="#ffce00"> 				<tr> 					<td width="135"><img height="11" width="135" src="nav/vide.gif"></td> 					<td width="15" background="nav/separation_verticale.gif"><img height="11" width="15" src="nav/vide.gif"></td> 					<td width="420"><img height="11" width="420" src="nav/vide.gif"></td> 					<td width="15" background="nav/separation_verticale_droite.gif"><img height="11" width="15" src="nav/vide.gif"></td> 				</tr> 				<tr> 					<td width="135" valign="top" colspan="4"><a href="http://www.kataplasme.net"><img src="images/images_sites/kataplasme.jpg" width="585" height="226" alt="Kataplasme" border="0"></a></td> 				</tr> 			</table> 			<table border="0" cellpadding="0" cellspacing="0" width="585" bgcolor="#ffce00"> 				<tr> 					<td width="135"><a href="#Top" onmouseover="window.status=' E N  H A U T ';return true"><img height="11" width="135" src="nav/gotop.gif" border="0" vspace="6" alt="En Haut"></a></td> 					<td width="15" background="nav/separation_verticale.gif"><img height="1" width="15" src="nav/separation.gif" vspace="11" alt="GO-CYB"></td> 					<td width="420"><img height="1" width="420" src="nav/separation.gif" vspace="11" alt="GO-CYB"></td> 					<td width="15" background="nav/separation_verticale_droite.gif"><img height="1" width="15" src="nav/separation.gif" vspace="11" alt="GO-CYB"></td> 				</tr> 			</table> 			<table border="0" cellpadding="0" cellspacing="0" width="585" bgcolor="#ffce00"> 				<tr> 					<td width="135" valign="top">&nbsp;<img src="images/images_sites/20000700_02.jpg" width="132" height="94" alt="Pascal Obispo"></td> 					<td width="15" background="nav/separation_verticale.gif">&nbsp;</td> 					<td width="420"><b> Ton parcours en quelques dates.<br> 						</b><br>Parcours un peu tortueux ma foi, j'ai entrepris mon parcours de formation artistique apr&egrave;s une 3e chaotique dans l'enseignement traditionnel... 3 ans et demi plus tard mes &eacute;tudes non termin&eacute;es je d&eacute;croche un emploi comme d&eacute;corateur chez Disney.nous sommes en 1992, je d&eacute;croche mon dipl&ocirc;me d'art graphique et fini mes &eacute;tudes tout en gravissant les marches de la hi&eacute;rarchie chez Disney pour finir &agrave; l'imagineering (conception et d&eacute;veloppement des Parcs Disney). De cette p&eacute;riode je tire une grande fiert&eacute; du fait de mon jeune age et d'avoir fait sortir de terre des attractions comme le Temple du P&eacute;ril&#153; et Space Mountain&#153;. Crise Oblige je quitte Disney un an et demi plus tard pour me tourner vers un milieu que je connais mal : le Pr&eacute;-presse. J'apprends la cha&icirc;ne graphique, la photogravure et la mise en page sur le tas mais tr&egrave;s vite je m'ennui, heureusement le mot magique pointe son nez : multim&eacute;dia. De ce fait je persuade la direction de la boite ou je me trouvais &agrave; l'&eacute;poque de cr&eacute;er un d&eacute;partement Multim&eacute;dia dont je prends les rennes : au programme cr&eacute;ation de CD-Rom et les balbutiements d'internet. De boite de communication en agence, me voici aujourd'hui au sein de FKGB comme DA web et web designer et a la recherche de nouvelles aventures... 						<p><b>Tu es graphiste ou d&eacute;veloppeur?</b></p> 						<p>D&eacute;finitivement graphiste, plus pr&eacute;cis&eacute;ment designer d'interactivit&eacute; et accessoirement Directeur Artistique orient&eacute; web....</p> 						 						</td> 					<td width="15" background="nav/separation_verticale_droite.gif">&nbsp;</td> 				</tr> 				<tr> 					<td width="135"><a href="#Top" onmouseover="window.status=' E N  H A U T ';return true"><img height="11" width="135" src="nav/gotop.gif" border="0" vspace="6" alt="En Haut"></a></td> 					<td width="15" background="nav/separation_verticale.gif"><img height="1" width="15" src="nav/separation.gif" vspace="11" alt="GO-CYB"></td> 					<td width="420"><img height="1" width="420" src="nav/separation.gif" vspace="11" alt="GO-CYB"></td> 					<td width="15" background="nav/separation_verticale_droite.gif"><img height="1" width="15" src="nav/separation.gif" vspace="11" alt="GO-CYB"></td> 				</tr> 			</table> 			<table border="0" cellpadding="0" cellspacing="0" width="585" bgcolor="#ffce00"> 				<tr> 					<td width="135" valign="top">&nbsp;<img src="images/images_sites/20000700_03.jpg" width="132" height="70" alt="Zaziz Online"></td> 					<td width="15" background="nav/separation_verticale.gif">&nbsp;</td> 					<td width="420"> 						<p><b>Tu viens de mettre en ligne la deuxi&egrave;me version de Kataplasme. La  premi&egrave;re &eacute;tait tr&egrave;s impressionante mais  on sentait les rouages, alors que celle ci est &eacute;l&eacute;gante et &quot;souple&quot;, plut&ocirc;t &quot;aquatique&quot;. Comment  expliques tu cette diff&eacute;rence? </b></p> 						<p>A vrai dire, kataplasme en est a sa 4e version... La version 1 etait tr&egrave;s webzine avec un scroll en hauteur d'une longueur &eacute;pouvantable, la 2eme version avait une orientation plus magazine avec graphisme plus pouss&eacute; et une nav rationalis&eacute;e ainsi que des scrolls automatis&eacute;s pour facilite la lecture. La 3e version inachev&eacute;e n'est jamais sortie pour le grand public du fait de gros probl&egrave;me de cross-browser, seul quelques personnes ont pu y'avoir acc&egrave;s. La version actuelle (4e) est un r&eacute;sultat de l'ensemble des r&eacute;flexions et des probl&egrave;mes rencontr&eacute;s lors du d&eacute;veloppement des versions pr&#233;c&#233;dentes. A ce titre la navigation est vraiment intuitive et est con&ccedil;ue de mani&egrave;re a faire ressortir le sentiment que vous regardez un magazine papier, le design a volontairement &eacute;t&eacute; &eacute;pur&eacute; pour renforcer ce sentiment de souplesse et adjoindre une pointe d'&eacute;l&eacute;gance au tout... Le r&eacute;sultat parait simple et &eacute;vident mais le tout est le fruit d'une mure r&eacute;flexion.</p> 						<p><b> Technique : j'ai cru reconnaitre &quot;page fade&quot; de Matt Ridley qu'en est-il du tremblement de fen&ecirc;tre? </b></p> 						<p>Effectivement, j'utilise des actions ext&eacute;rieur &agrave; Golive d&eacute;velopp&eacute;es par des passionn&eacute;s ceci pour deux raisons : leur facilit&eacute; d'emploi et le fait que cela m'&eacute;vite de d&eacute;velopper moi-m&ecirc;me ces fonctions. Le tremblement de fen&ecirc;tre en revanche est un script que nous avions d&eacute;velopp&eacute; chez FKGB pour les besoins du mini-site du jeu Syphon Filter, il fallait simuler un impact de balle sur la fen&ecirc;tre su navigateur lors du clic...</p> 						<p><b>Pas de Flash sur Kataplasme, une raison particuli&egrave;re pour ce choix? </b></p> 						<p>Pour &ecirc;tre franc la technologie flash m'ennui &agrave; mourir ! Le d&eacute;veloppement est trop contraignant a mon go&ucirc;t du fait de l'interface trop bord&eacute;lique de ce soft, d&eacute;faut propre a la gamme des produits Macromedia. De plus je trouve que les sites d&eacute;velopp&eacute;s en flash sont assez semblable. Je ne suis pas pour un site enti&egrave;rement sous flash. A mon avis flash doit &ecirc;tre utilis&eacute; comme un soutient, comme on utilise un Quicktime par exemple... En toute modestie, des site comme kataplasme sont la pour prouver qu'avec un peu d'astuce et de reflexion on peut obtenir un site hautement multim&eacute;dia sans flash...</p> 						<p><b> Kataplasme est la version luxe de macplus. Comment envisages-tu les mises-&agrave;jour de kataplamse avec tant de DHTML ?</b></p> 						<p>Il est vrai que kataplasme regorge de Dhtml, contrairement a ce que pense beaucoup de gens cette technologie est simple a mettre en oeuvre, en outre, elle demmande une grande organisation dans la conception. Kataplasme a &eacute;t&eacute; con&ccedil;u comme un magazine a sortie mensuel, le remplacement de ses images et de son texte ont donc &eacute;t&eacute; pens&eacute;s dans ce sens... le processus de mise &agrave; jour a donc &eacute;t&eacute; d&eacute;velopp&eacute; et pens&eacute; dans ce sens...</p> 						<p><b>La musique : Qui l'a sign&eacute;?</b></p> 						<p>il s'agit de musique achet&eacute;e au &quot;kilometre&quot; donc libre de droit...</p> 						<p><b>Ecoutes tu de la musique en bossant?</b></p> 						<p>Oui beaucoup... mes go&ucirc;ts sont tr&egrave;s &eacute;clectiques, cela va de la 5e de<br> 							Beethoven en passant par Aznavour pour arriver a Michael Jackson en faisant<br> 							un d&eacute;tour par Miles Davis et Laurent Garnier...</p> 						<p><b>Les manequins : Des copines? une agence? des images stock ou des photos prisent &agrave; cette occasion?</b></p> 						<p>Il y'a des amies dans le lot et le reste provient de stock...</p> 					</td> 					<td width="15" background="nav/separation_verticale_droite.gif">&nbsp;</td> 				</tr> 				<tr> 					<td width="135"><a href="#Top" onmouseover="window.status=' E N  H A U T ';return true"><img height="11" width="135" src="nav/gotop.gif" border="0" vspace="6" alt="En Haut"></a></td> 					<td width="15" background="nav/separation_verticale.gif"><img height="1" width="15" src="nav/separation.gif" vspace="11" alt="GO-CYB"></td> 					<td width="420"><img height="1" width="420" src="nav/separation.gif" vspace="11" alt="GO-CYB"></td> 					<td width="15" background="nav/separation_verticale_droite.gif"><img height="1" width="15" src="nav/separation.gif" vspace="11" alt="GO-CYB"></td> 				</tr> 			</table> 			<table border="0" cellpadding="0" cellspacing="0" width="585" bgcolor="#ffce00"> 				<tr> 					<td width="135">&nbsp;</td> 					<td width="15" background="nav/separation_verticale.gif">&nbsp;</td> 					<td width="420"> 						<p><b> Des sites que tu as d&eacute;velopp&eacute; </b></p> 						<p>Waow ! Il y'en a plus de trente a ce jour... Je les aime bien tous et je suis bien embarrass&eacute; de ne pouvoir tous les citer, il y'a entre autre <a href="http://www.zazieonline.com">Zazie</a>, <a href="http://www.pascalobispo.com">Pascal Obispo</a>, <a href="http://http://www.patriciakaas.net">Patricia Kaas</a>, <a href="http://www.playstation.tm.fr">Playstation France</a> , <a href="http://www.sleepyhollow-lefilm.com">Sleepy Hollow </a>et beaucoup d'autre encore comme Mariah Carey, Ally McBeal etc... Comme tu le vois ma sp&eacute;cialit&eacute; est bas&eacute; sur le secteur de l'entertainment, j'ai cependant r&eacute;alis&eacute; des site plus s&eacute;rieux comme le portail <a href="http://www.unilevercity.com">Unilever</a>, plantes et jardin ou encore l'ancienne version du Conseil r&eacute;gional d'Ile de France... et bien sur les l&eacute;gendaires <a href="http://www.macplus.net/">Macplus</a> et <a href="http://www.kataplame.net">Kataplasme</a> :-)</p> 						<p></p> 					</td> 					<td width="15" background="nav/separation_verticale_droite.gif">&nbsp;</td> 				</tr> 				<tr> 					<td width="135"><a href="#Top" onmouseover="window.status=' E N  H A U T ';return true"><img height="11" width="135" src="nav/gotop.gif" border="0" vspace="6" alt="En Haut"></a></td> 					<td width="15" background="nav/separation_verticale.gif"><img height="1" width="15" src="nav/separation.gif" vspace="11" alt="GO-CYB"></td> 					<td width="420"><img height="1" width="420" src="nav/separation.gif" vspace="11" alt="GO-CYB"></td> 					<td width="15" background="nav/separation_verticale_droite.gif"><img height="1" width="15" src="nav/separation.gif" vspace="11" alt="GO-CYB"></td> 				</tr> 			</table> 			<table border="0" cellpadding="0" cellspacing="0" width="585" bgcolor="#ffce00"> 				<tr> 					<td width="135" valign="top">&nbsp;<img src="images/images_sites/20000700_04.jpg" width="132" height="90" alt="Sleepy Hollow"></td> 					<td width="15" background="nav/separation_verticale.gif">&nbsp;</td> 					<td width="420"> 						<p><b>Cite 5 sites que tu aimes.</b></p> 						<p>&#149; <a href="http://www.Praktica.net ">www.Praktica.net </a>pour sa richesse et son ton...<br> 							<br> 							&#149; <a href="http://www.mjnet.com">www.mjnet.com</a> pour son concept de nav et le c&ocirc;t&eacute; d&eacute;cal&eacute; du site par rapport au personnage...<br><br> 							&#149; <a href="http://www.porte-voix.com">www.porte-voix.com </a>pour son graphisme, son c&ocirc;t&eacute; tendance et sa ressemblance avec kataplasme<br><br>&#149;  							<a href="http://www.pixel-industries.de">www.pixel-industries.de</a> pour sa purete graphique, son concept et sa navigation<br><br>&#149;  							<a href="http://www.bazworld.com/jps/">www.bazworld.com/jps/</a>  pour la crise rire ! 							 							</p> 					</td> 					<td width="15" background="nav/separation_verticale_droite.gif">&nbsp;</td> 				</tr> 				<tr> 					<td width="135"><a href="#Top" onmouseover="window.status=' E N  H A U T ';return true"><img height="11" width="135" src="nav/gotop.gif" border="0" vspace="6" alt="En Haut"></a></td> 					<td width="15" background="nav/separation_verticale.gif"><img height="1" width="15" src="nav/separation.gif" vspace="11" alt="GO-CYB"></td> 					<td width="420"><img height="1" width="420" src="nav/separation.gif" vspace="11" alt="GO-CYB"></td> 					<td width="15" background="nav/separation_verticale_droite.gif"><img height="1" width="15" src="nav/separation.gif" vspace="11" alt="GO-CYB"></td> 				</tr> 			</table> 			<table border="0" cellpadding="0" cellspacing="0" width="585" bgcolor="#ffce00"> 				<tr> 					<td width="135" align="center"> 						<div align=center> 							&nbsp;Pour plus d'info lire le <a href="http://www.kataplasme.net/cv" target="_blank">CV</a></div> 					</td> 					<td width="15" background="nav/separation_verticale.gif">&nbsp;</td> 					<td width="420"> 						<p><b>L'avenir, tu le vois WEBOBJECT, XML, FLASH, SVG, HTML,?</b> 						<p>D&eacute;finitivement WebObject. Cette technologie est impressionante de possibilt&eacute;<br> 							et fait preuve d'une grande souplesse au niveau de la cr&eacute;ation. 						<p><b>Tes outils de travail.</b> 						<p>Rien de bien original. Photoshop, Image Ready et Illustrator pour l'image, Golive pour le montage, le tout sur un G3/300. 						<p><b>Le plus gros d&eacute;faut de GoLive</b> 						<p>Sa gourmandise en m&eacute;moire vive et son manuel... 						<p><b>Ce que tu aimes le plus dans GoLive</b> 						<p>Sa simplicit&eacute; d'utilisation et le fait qu'il ne bride pas la creativit&eacute;. 					 						<p><b>J'avais une derni&egrave;re question a poser, mais je sais plus laquelle...</b> 						<p>Quand tu t'en souviens, envoie moi un mail : <a href="mailto:kataplasme@mac.com">kataplasme@mac.com</a>. 						<div align=right> 							<p><a href="mailto:didier@lpce.com">Didier Laget<br> 								</a>23/06/00 								 						</div> 					</td> 					<td width="15" background="nav/separation_verticale_droite.gif">&nbsp;</td> 				</tr> 				<tr> 					<td width="135"><a href="#Top" onmouseover="window.status=' E N  H A U T ';return true"><img height="11" width="135" src="nav/gotop.gif" border="0" vspace="6" alt="En Haut"></a></td> 					<td width="15" background="nav/separation_verticale.gif"><img height="1" width="15" src="nav/separation.gif" vspace="11" alt="GO-CYB"></td> 					<td width="420"><img height="1" width="420" src="nav/separation.gif" vspace="11" alt="GO-CYB"></td> 					<td width="15" background="nav/separation_verticale_droite.gif"><img height="1" width="15" src="nav/separation.gif" vspace="11" alt="GO-CYB"></td> 				</tr> 			</table> 		</div> 		<div align=center> 			<!--Start GoLive base --><br>  <div align=center> 		<table border="0" cellpadding="0" cellspacing="0" width="585" bgcolor="#ffce00"> 			<tr> 				<td width="135"><img height="11" width="135" src="nav/vide.gif"></td> 				<td width="15" ><img height="11" width="15" src="nav/vide.gif"></td> 				<td width="420"><img height="11" width="420" src="nav/vide.gif"></td> 				<td width="15"><img height="11" width="15" src="nav/vide.gif"></td> 			</tr> 			<tr> 				<td valign="top" align="center" colspan="4">[ <a href="http://go-cyb.com">Home</a> | <a href="http://www.go-cyb.com/forums/forum.pl">Forum</a> | <a href="http://go-cyb.com/liste.shtml">Liste</a> | <a href="http://go-cyb.com/truc_index.shtml">Trucs</a> | <a href="http://go-cyb.com/ressources_index.shtml">Ressources</a> | <a href="http://go-cyb.com/outils_index.shtml">Outils</a> | <a href="http://go-cyb.com/gocyb_plan.shtml">Plan</a> | <a href="mailto:cyb@go-cyb.com">Email</a> ]<br> 					[ <a href="http://go-cyb.com/credit.shtml">Credits</a> ]<br> 					Copyright 1997/2001 : <a href="http://www.eurienta.com">eurienta</a></td> 			</tr> 		</table> </div><!--End GoLive base --></div> 		<div align=center></div> 	</body>  </html> 
