Creer une interface extensible autour de vidéos embed

Bonjour, je débute sur ce forum.

Merci d'avance de vos réponses

Voila, j'aimerais mettre en place pour un forum qui utilise un system passive de reconnaissance d'url du type youtube, google, vidéo, etc... et les traduit directement en lecteur embed, ce qui permet une fois le topic posté de voir la vidéo sans même utilisé de bbcode.

Je peu personnalisé ces vidéos, en faite le contour. moi j'ai créé une interface graphique pour avoir un meilleur design qu'un simple lecteur en flash traditionnel comme youtube par exemple, cette interface je l'ai découper comme il le faut il me semble, ma découpe a 4 sections en plus de chaque coté pour que mon interface soit extensible selon la vidéo posté, car les lecteur non pas tous la même résolution en largeur ou hauteur.

Je vous join un screenshot d'un exemple d'interface qui a la même découpe, dans cet exemple j'ai fait super simple et vite fait je vous rassure :d disons que le trait noir c'est mon design qui entour le carré blanc au centre qui sera l'emplacement de mes lecteurs vidéos, il y a 13 decoupe sur cette interface, je vous ai surlignez les quatre découpe qui jouerons le role de repaet X ou Y selon l'emplacement via le css...


Mon soucis c'est que meme a l'aide de dreamweaver je n'arrive pas a faire en sorte que mon interface entour comme il faut le lecteur vidéo, soit le haut est correct, mais pas le bas selon ce que j'essaye avec mes peu de connaissances, et la hauteur reste fixe et n'est pas extensible quand cela le devrait, alors que j'ai essayer du repeat-y avec du height 100% ou en px meme.

Je vous joint mon code, qui ne doit pas etre bon

<style type="text/css">
<!--
.embed01 {
	background-image: url(images/interface/images/image01.png);
	background-repeat: no-repeat;
	height: 73px;
	width: 108px;
}
.embed02 {
	background-image: url(images/interface/images/image02.png);
	background-repeat: repeat-x;
	height: 73px;
	width: 100%;
}
.embed03 {
	background-image: url(images/interface/images/image03.png);
	background-repeat: no-repeat;
	height: 73px;
	width: 434px;
}
.embed04 {
	background-image: url(images/interface/images/image04.png);
	background-repeat: no-repeat;
	height: 75px;
	width: 63px;
}
.embed05 {
	background-color: #000000;
	background-repeat: repeat;
}
.embed06 {
	background-image: url(images/interface/images/image06.png);
	background-repeat: no-repeat;
	height: 75px;
	width: 62px;
}
.embed07 {
	background-image: url(images/interface/images/image07.png);
	background-repeat: repeat-y;
	height: 100%;
	width: 63px;
}
.embed08 {
	background-image: url(images/interface/images/image08.png);
	background-repeat: repeat-y;
	height: 100%;
	width: 62px;
}
.embed09 {
	background-image: url(images/interface/images/image09.png);
	background-repeat: no-repeat;
	height: 344px;
	width: 63px;
}
.embed10 {
	background-image: url(images/interface/images/image10.png);
	background-repeat: no-repeat;
	height: 344px;
	width: 62px;
}
.embed11 {
	background-image: url(images/interface/images/image11.png);
	background-repeat: no-repeat;
	height: 72px;
	width: 203px;
}
.embed12 {
	background-image: url(images/interface/images/image12.png);
	background-repeat: repeat-x;
	height: 72px;
	width: 100%;
}
.embed13 {
	background-image: url(images/interface/images/image13.png);
	background-repeat: no-repeat;
	height: 72px;
	width: 211px;
}
-->
</style>

<center><table id="Tableau_01" width="551" height="501" border="0" cellpadding="0" cellspacing="0">
  <tr>
		
    <td class="embed01" colspan="2">&nbsp; </td>
		<td class="embed02"></td>
		<td class="embed03" colspan="4"></td>
		<td>
			<img src="images/interface/images/spacer.gif" width="1" height="73" alt=""></td>
	</tr>
	<tr>
		<td class="embed04"></td>
		<td class="embed05" colspan="5" rowspan="3"><center>$PASSIVEEMBED</center></td>
		<td class="embed06"></td>
		<td>
			<img src="images/interface/images/spacer.gif" width="1" height="75" alt=""></td>
	</tr>
	<tr>
		<td class="embed07"></td>
		<td class="embed08"></td>
		<td>
			<img src="images/interface/images/spacer.gif" width="1" height="8" alt=""></td>
	</tr>
	<tr>
		<td class="embed09" rowspan="2"></td>
		<td class="embed10" rowspan="2"></td>
		<td>
			<img src="images/interface/images/spacer.gif" width="1" height="272" alt=""></td>
	</tr>
	<tr>
		
    <td colspan="3" class="embed11"></td>
		
    <td class="embed12"></td>
		<td class="embed13"></td>
		<td>
			<img src="images/interface/images/spacer.gif" width="1" height="72" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/interface/images/spacer.gif" width="63" height="1" alt=""></td>
		<td>
			<img src="images/interface/images/spacer.gif" width="45" height="1" alt=""></td>
		<td>
			<img src="images/interface/images/spacer.gif" width="8" height="1" alt=""></td>
		<td>
			<img src="images/interface/images/spacer.gif" width="150" height="1" alt=""></td>
		<td>
			<img src="images/interface/images/spacer.gif" width="11" height="1" alt=""></td>
		<td>
			<img src="images/interface/images/spacer.gif" width="211" height="1" alt=""></td>
		<td>
			<img src="images/interface/images/spacer.gif" width="62" height="1" alt=""></td>
		<td></td>
	</tr>
</table></center>

Ma question est, cela est il possible avec un contenu en flash, et si oui comment? merci d'avance.

Bonsoir,

Houlà, que cela est compliqué!
Il y a sans doute moyen de simplifier. Ceci dit, on aura forcément un truc assez lourd au final, car les cadres décorés extensibles en hauteur et en largeur c'est pas hyper évident à faire non plus.

Première question: on parle bien ici de quelque chose qui doit être extensible aussi bien en hauteur qu'en largeur (car on suppose qu'on ne connait pas les dimensions finales des vidéos)?

On pourrait jeter un oeil par ici:
http://web.covertprestige.info/test/35-boites-fluides-bords-coins-en-images.html

À vue de nez, je conseillerais de faire un tableau à 9 cellules ici, pour ne pas se prendre la tête. 9 cellules, mais pas 13 ou 15 non plus, hein. Attention aux propositions de découpe un peu loufoques des outils graphiques (ImageReady, Fireworks...).

Titanesk a écrit :
cela est il possible avec un contenu en flash

Oui, comme avec n'importe quel autre contenu.

Titanesk a écrit :
et si oui comment?

De X manières différentes, en fonction du design exact (et pas d'un mock-up censé le représenter), des contraintes utilisables pour simplifier le code HTML, etc. Mais la base la plus efficace et techniquement simple dans les cas complexes est le tableau à 9 cellules (trois par trois).

Bonjour, merci pour tes réponses pour ta question, oui il doit etre extensible en hauteur et largeur, malheureusement, il me faut absolument ces 13 section, car mon design fait que ce n'ets pas un carré tout simple il y a des formes dessus qui ne peuvent pas etre répéter pour le coté extensible en faite

quand tu dis le coter de découpe loufoque de imageready, c est a dire? car moi j'ai fait ma découpe avec photoshop, et pares repris et optimisé avec imageready qui en plus me sort le code html, que bien sur je repasse sous dreamweaver pour ajouter mon CSS et les class

Sinon avec quel logiciel puis je découper mes images?

Les vidéos qui seront lus a l intérieur on a peu prêt la même dimension en résolution, sauf qu'elle change selon les site qui les propose, comme stage6 et youtube on des résolutions differents.

Je vais me pencher sur le lien donner, merci.

Je suis plus doué en design que en codage

Titanesk a écrit :
malheureusement, il me faut absolument ces 13 section, car mon design fait que ce n'ets pas un carré tout simple il y a des formes dessus qui ne peuvent pas etre répéter pour le coté extensible en faite

Un scoop: un intégrateur HTML/CSS compétent te trouvera un moyen de faire ça sans 13 blocs juxtaposés. On n'est pas obligé de répéter une image de fond pour remplir une zone.

Là encore, impossible de proposer quoi que ce soit de concret sans voir le design exact à intégrer.

Titanesk a écrit :
quand tu dis le coter de découpe loufoque de imageready, c est a dire? car moi j'ai fait ma découpe avec photoshop, et pares repris et optimisé avec imageready qui en plus me sort le code html, que bien sur je repasse sous dreamweaver pour ajouter mon CSS et les class

Oui, c'est le super combo deluxe pour avoir un code ingérable. Ça va bien pour faire un petit site plaquette où le design de chaque page est figé, mais pas pour quelque chose d'adaptable à différentes situations.

Titanesk a écrit :
Sinon avec quel logiciel puis je découper mes images?

C'est plus une question d'expérience de l'intégration que de logiciel. Pour le logiciel, n'importe quel logiciel qui gère des images bitmap peut faire l'affaire: Photoshop (avec ou sans ImageReady, qui est en partie inclus à Photoshop il me semble sous la forme d'une fonctionnalité d'export pour le Web), Fireworks, The Gimp, etc. J'ai une tendresse particulière pour The Gimp que je trouve plutôt bon pour fignoler des exports image par image, tandis que Fireworks et ImageReady, s'ils sont bien utilisés, permettent de faire des exports de plusieurs images à la fois, en appliquant des paramètres d'export à plusieurs images à la fois.

Le code HTML et CSS sera par contre rédigé «à la mimine».

Titanesk a écrit :
Je suis plus doué en design que en codage

Auquel cas il faut, au choix:
1. trouver un intégrateur HTML/CSS;
2. se former à l'intégration HTML/CSS;
3. faire un design plus simple pour limiter les difficultés d'intégration.
(Ces trois choix sont tous valables et dépendront du temps disponible, éventuellement des envies, du budget, etc.)

Je vais me pencher la dessus et surtout sur la page en lien donné, si jamais vous me revoyez ne m'en voulais pas

J'apprends vite mais il faut m'expliquer longtemps des fois

Bonjour, j'ai beau lire la page du lien que vous m'avez donné, je ne m'en sort pas lors de la mise en place du code, en faite je ne comprend pas le concept, je suis rester sur un system de cadre avec les images qui ne se répètes pas, et certaines qui le peuvent, et d'après ce que j'ai cru comprendre là on parle d'autres chose

Car dans mon interface qui doit englober les vidéo (flash) il y a des formes qui fait que je ne peu pas faire répétés n'importe quelle partie, et je ne peu pas la faire plus simple, sinon je perdrais le style que ça doit donner.

Merci de votre aide
Modifié par Titanesk (03 May 2008 - 08:05)

Titanesk a écrit :
Bje suis rester sur un system de cadre avec les images qui ne se répètes pas, et certaines qui le peuvent, et d'après ce que j'ai cru comprendre là on parle d'autres chose

Oui, là on parle d'un système ou AUCUNE image n'est répétée.
Par exemple si tu prends cette partie:
http://web.covertprestige.info/test/35-boites-fluides-bords-coins-en-images.html#tableau

L'image utilisée est la suivante:
http://web.covertprestige.info/test/data/35-boite1.png
C'est une image de 887 x 1191px, qui est utilisée comme image de fond sans être répétée.

Connais-tu bien les propriétés background- en CSS? Notamment background-repeat et background-position? As-tu étudié le code des exemples donnés dans le tutoriel que j'ai indiqué, en l'explorant à l'aide d'un outil comme Firebug par exemple?

Bonsoir,

Je test cela demain et je te tiens au courant, merci encore

[EDIT] je n'ai pas eu le temps ce week end je verrais cela dés que possible
Modifié par Titanesk (05 May 2008 - 20:36)