Modèles d'insertion des documents en HTML5, avec figure et figcaption

git-svn-id: svn://zone.spip.net/spip-zone/_plugins_/figure@102660 ac52e18a-acf5-0310-9fe8-c4428f23b10a
6 years ago · dcc5fcb68a
11 changed files with 149 additions and 131 deletions
--- a/modeles/application.html
+++ b/modeles/application.html
@ -11,37 +11,41 @@
 (#ENV{controls}=={PositionSlider}|?{#SET{hauteur,25},''})][
 (#ENV{controls}=={PositionSlider}|?{#SET{largeur,#GET{largeur}|moins{40}},''})
 ][(#INCLUS|=={embed}|?{[(#ENV{controls,''}|non)
-<div class='spip_document_#ID_DOCUMENT spip_document_application spip_documents[ spip_documents_(#ENV{align})]'[
+<figure class='spip_document_#ID_DOCUMENT spip_document_application spip_documents[ (#ENV{align})]'[
 style='[(#ENV{align}|match{^(left|right)$}|oui)float:#ENV{align};] (#ENV{align,center}|=={center}|non)[width:(#GET{largeur}|max{120})px]']>
 ]})
 ][(#EXTENSION|=={swf}|oui)
-<object classid='clsid:d27cdb6e-ae6d-11cf-96b8-444553540000' 
- codebase='http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=#ENV{version,'6,0,0,0'}' 
- width='#GET{largeur}' height='#GET{hauteur}'>
-	<param name='movie' value='#URL_DOCUMENT' />
-	[(#ENV{quality,''}|non)<param name="quality" value="high" />]
-	[(#ENV*|env_to_params)]
-	<!--#EVAL**{chr(91)}if !IE#EVAL**{chr(93)}> <-->
-	<object data="#URL_DOCUMENT" width='#GET{largeur}' height='#GET{hauteur}' type="application/x-shockwave-flash">
-		[(#ENV{quality,''}|non)<param name="quality" value="high" />]
+	<object classid='clsid:d27cdb6e-ae6d-11cf-96b8-444553540000' 
+	 codebase='http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=#ENV{version,'6,0,0,0'}' 
+	 width='#GET{largeur}' height='#GET{hauteur}'>
+		<param name='movie' value='#URL_DOCUMENT'>
+		[(#ENV{quality,''}|non)<param name="quality" value="high">]
 		[(#ENV*|env_to_params)]
-		<param name="pluginurl" value="http://www.macromedia.com/go/getflashplayer" />
+		<!--#EVAL**{chr(91)}if !IE#EVAL**{chr(93)}> <-->
+		<object data="#URL_DOCUMENT" width='#GET{largeur}' height='#GET{hauteur}' type="application/x-shockwave-flash">
+			[(#ENV{quality,''}|non)<param name="quality" value="high">]
+			[(#ENV*|env_to_params)]
+			<param name="pluginurl" value="http://www.macromedia.com/go/getflashplayer">
+		</object>
+		<!--> <!#EVAL**{chr(91)}endif#EVAL**{chr(93)}-->
 	</object>
-	<!--> <!#EVAL**{chr(91)}endif#EVAL**{chr(93)}-->
-</object>
-#SET{done,1}
-][(#GET{done,0}|non)
-[(#INCLUS|=={embed}|oui)
-<object width='#GET{largeur}' height='#GET{hauteur}'>
-<param name='movie' value='#URL_DOCUMENT' />
-<param name='src' value='#URL_DOCUMENT' />
-[(#ENV*|env_to_params)]
-<embed src='#URL_DOCUMENT' [(#ENV*|env_to_attributs)] width='#GET{largeur}' height='#GET{hauteur}'></embed></object>
+	#SET{done,1}
+	][(#GET{done,0}|non)
+	[(#INCLUS|=={embed}|oui)
+	<object width='#GET{largeur}' height='#GET{hauteur}'>
+	<param name='movie' value='#URL_DOCUMENT'>
+	<param name='src' value='#URL_DOCUMENT'>
+	[(#ENV*|env_to_params)]
+	<embed src='#URL_DOCUMENT' [(#ENV*|env_to_attributs)] width='#GET{largeur}' height='#GET{hauteur}'></embed></object>

-][(#INCLUS|=={image}|oui)
-[(#INCLURE{fond=modeles/img}{id_document}{align=#ENV{align}}{embed=oui}{lien=#ENV{lien}}{lien_class=#ENV{lien_class}})]
-]
-][(#INCLUS|=={embed}|oui)[(#ENV{controls,''}|non)
-[<div class='#EDIT{titre} spip_doc_titre'><strong>(#TITRE)</strong></div>][<div class='#EDIT{descriptif} spip_doc_descriptif'>(#DESCRIPTIF|PtoBR)[(#NOTES|PtoBR)]</div>]</div>
+	][(#INCLUS|=={image}|oui)
+	[(#INCLURE{fond=modeles/img}{id_document}{align=#ENV{align}}{embed=oui}{lien=#ENV{lien}}{lien_class=#ENV{lien_class}})]
+	]
+	][(#INCLUS|=={embed}|oui)[(#ENV{controls,''}|non)
+	<figcaption class='#EDIT{descriptif} spip_doc_descriptif'>[
+		<strong class='#EDIT{titre} spip_doc_titre'>(#TITRE)</strong>]
+		[(#DESCRIPTIF|PtoBR)[(#NOTES|PtoBR)]
+	]</figcaption>
+</figure>
 ]]
-</BOUCLE_tous>
+</BOUCLE_tous>
--- a/modeles/audio.html
+++ b/modeles/audio.html
@ -1,21 +1,23 @@
 <BOUCLE_tous (DOCUMENTS types_documents) {id_document=#ID} {tout}>
 #SET{largeur,#ENV{largeur, #LARGEUR|?{#LARGEUR,400}}|max{120}}
-<div	class='spip_document_#ID_DOCUMENT spip_document_audio spip_documents[ spip_documents_(#ENV{align})]'
+<figure class='spip_document_#ID_DOCUMENT spip_document_audio spip_documents[ (#ENV{align})]'
 	style='[(#ENV{align}|match{^(left|right)$}|oui)float:#ENV{align};][width:(#GET{largeur})px]'>
 	[(#LOGO_DOCUMENT{vignette}|image_reduire{#GET{largeur},0}|vider_attribut{class})]
-<div class="audio-wrapper"[ style='width:(#GET{largeur})px;max-width:100%;']>
-	<audio class="mejs mejs-#ID_DOCUMENT [ mejs-(#ENV{skin})]"
-	       data-id="[(#VAL{mejs-#ID_DOCUMENT}|concat{#ENV{skin}}|md5)]"
-	       src="#FICHIER"
-	       type="#MIME_TYPE"
-	       data-mejsoptions='{"alwaysShowControls": true[,"loop":(#ENV{loop}|?{true,false})],"audioWidth":"100%"[,"audioHeight":"(#ENV{hauteur})"][,"startVolume":"(#ENV{volume})"]}'
-	       controls="controls"
-				 [autoplay="autoplay"(#ENV{autoplay}|oui)]></audio>
-</div>
-[<div class='#EDIT{titre} spip_doc_titre'><strong>(#TITRE)</strong></div>]
-[<div class='#EDIT{descriptif} spip_doc_descriptif'>(#DESCRIPTIF|PtoBR)[(#NOTES|PtoBR)]</div>]
-[<script>/*<!\[CDATA\[*/var mejspath='[(#CHEMIN{lib/mejs/mediaelement-and-player.min.js}|timestamp)]',mejscss='[(#CHEMIN{lib/mejs/mediaelementplayer.min.css}|timestamp)]';
-(#INCLURE{javascript/mejs-init.min.js})/*\]\]>*/</script>]
-[(#ENV{skin}|oui)[<style>(#INCLURE{#CHEMIN{css/mejs-skin-#ENV{skin}.css}|sinon{#CHEMIN{lib/mejs/mejs-skins.css}}|url_absolue_css})</style>]]
-</div>
+	<div class="audio-wrapper"[ style='width:(#GET{largeur})px;max-width:100%;']>
+		<audio class="mejs mejs-#ID_DOCUMENT [ mejs-(#ENV{skin})]"
+			data-id="[(#VAL{mejs-#ID_DOCUMENT}|concat{#ENV{skin}}|md5)]"
+			src="#FICHIER"
+			type="#MIME_TYPE"
+			data-mejsoptions='{"alwaysShowControls": true[,"loop":(#ENV{loop}|?{true,false})],"audioWidth":"100%"[,"audioHeight":"(#ENV{hauteur})"][,"startVolume":"(#ENV{volume})"]}'
+			controls="controls"
+			[autoplay="autoplay"(#ENV{autoplay}|oui)]></audio>
+	</div>
+	<figcaption class='#EDIT{descriptif} spip_doc_descriptif'>[
+		<strong class='#EDIT{titre} spip_doc_titre'>(#TITRE)</strong>]
+		[(#DESCRIPTIF|PtoBR)[(#NOTES|PtoBR)]
+	]</figcaption>
+	[<script>/*<!\[CDATA\[*/var mejspath='[(#CHEMIN{lib/mejs/mediaelement-and-player.min.js}|timestamp)]',mejscss='[(#CHEMIN{lib/mejs/mediaelementplayer.min.css}|timestamp)]';
+	(#INCLURE{javascript/mejs-init.min.js})/*\]\]>*/</script>]
+	[(#ENV{skin}|oui)[<style>(#INCLURE{#CHEMIN{css/mejs-skin-#ENV{skin}.css}|sinon{#CHEMIN{lib/mejs/mejs-skins.css}}|url_absolue_css})</style>]]
+</figure>
 </BOUCLE_tous>
--- a/modeles/doc.html
+++ b/modeles/doc.html
@ -35,14 +35,16 @@
 ]
 [(#SET{title,[(#TYPE_DOCUMENT) - [(#TAILLE|taille_en_octets)]]})]
 [(#MEDIA|=={image}|oui) #SET{title,#TITRE|sinon{#GET{title}}]
-<dl class='spip_document_#ID_DOCUMENT spip_documents[ spip_documents_(#ENV{align})][ (#ENV{class})] spip_lien_ok'[
+<figure class='spip_document_#ID_DOCUMENT spip_documents[ (#ENV{align})][ (#ENV{class})] spip_lien_ok'[
 	style='float:(#ENV{align}|match{left|right});']>
-<dt>[<a href="(#GET{url})"[
-	class="(#ENV{lien_class})"] title='[(#GET{title}|attribut_html)]'[
-	(#ENV{lien}|?{'',type="#MIME_TYPE"})]>]<img src='#GET{fichier}' width='#GET{width}' height='#GET{height}' alt='#TYPE_DOCUMENT - [(#TAILLE|taille_en_octets|texte_backend)]' />[(#GET{url}|?{</a>})]</dt>[
-<dt class='#EDIT{titre} spip_doc_titre'[ style='width:(#GET{width}|min{350}|max{120})px;']><strong>(#TITRE)</strong></dt>][
-<dd class='#EDIT{descriptif} spip_doc_descriptif'[ style='width:(#GET{width}|min{350}|max{120})px;']>(#DESCRIPTIF|PtoBR)[(#NOTES|PtoBR)]</dd>]
-</dl>
+	[<a href="(#GET{url})"[
+		class="(#ENV{lien_class})"] title='[(#GET{title}|attribut_html)]'[
+		(#ENV{lien}|?{'',type="#MIME_TYPE"})]>]<img src='#GET{fichier}' width='#GET{width}' height='#GET{height}' alt='#TYPE_DOCUMENT - [(#TAILLE|taille_en_octets|texte_backend)]'>[(#GET{url}|?{</a>})]
+	<figcaption class='#EDIT{descriptif} spip_doc_descriptif'[ style='width:(#GET{width}|min{350}|max{120})px;']>[
+		<strong class='#EDIT{titre} spip_doc_titre'>(#TITRE)</strong>]
+		[(#DESCRIPTIF|PtoBR)[(#NOTES|PtoBR)]
+	]</figcaption>
+</figure>

 </BOUCLE_doc>
 #FILTRE{trim}
--- a/modeles/doc_legende.html
+++ b/modeles/doc_legende.html
@ -1,9 +1,6 @@
 <BOUCLE_doc (DOCUMENTS) {id_document} {tout}>
 [(#REM)

-	Modele pour <doc> en dl/dt/dd
-	cf. http://pompage.net/pompe/listesdefinitions/
-
 	La largeur de la legende est egale a la largeur de l'image
 	avec un minimum de 120px, et un maximum de 350px.

@ -27,12 +24,14 @@
 #SET{height,#GET{fichier}|hauteur}
 #SET{fichier,#GET{fichier}|extraire_attribut{src}}
 ]
-<dl class='spip_document_#ID_DOCUMENT spip_documents_legende[ spip_documents_(#ENV{align})][ (#ENV{class})] spip_lien_ok'[ style='float:(#ENV{align}|match{left|right});']>
-[<dt class='#EDIT{titre} titre'>(#TITRE|sinon{#FICHIER})</dt>]
-<dd class='vignette'>[<a href="(#GET{url})"[ class="(#ENV{lien_class})"] title='#TYPE_DOCUMENT - [(#TAILLE|taille_en_octets|texte_backend)]'[ (#ENV{lien}|?{'',type="#MIME_TYPE"})]>]<img src='#GET{fichier}' width='#GET{width}' height='#GET{height}' alt='' />[(#GET{url}|?{</a>})]</dd>
-<dd class='type'>#TYPE_DOCUMENT</dd>
-<dd class='taille'>[(#LARGEUR|ou{#HAUTEUR}|oui)[
-(#VAL{info_largeur_vignette}|_T{#ARRAY{largeur_vignette,#LARGEUR,hauteur_vignette,#HAUTEUR}})
-] - ][(#TAILLE|taille_en_octets|texte_backend)]</dd>
-</dl>
-</BOUCLE_doc>
+<figure class='spip_document_#ID_DOCUMENT spip_documents_legende[ (#ENV{align})][ (#ENV{class})] spip_lien_ok'[ style='float:(#ENV{align}|match{left|right});']>
+	<span class='vignette'>[<a href="(#GET{url})"[ class="(#ENV{lien_class})"] title='#TYPE_DOCUMENT - [(#TAILLE|taille_en_octets|texte_backend)]'[ (#ENV{lien}|?{'',type="#MIME_TYPE"})]>]<img src='#GET{fichier}' width='#GET{width}' height='#GET{height}' alt=''>[(#GET{url}|?{</a>})]</span>
+	<ficaption>
+		[<strong class='#EDIT{titre} titre'>(#TITRE|sinon{#FICHIER})</strong>]
+		<span class='type'>#TYPE_DOCUMENT</span>
+		<span class='taille'>[(#LARGEUR|ou{#HAUTEUR}|oui)[
+		(#VAL{info_largeur_vignette}|_T{#ARRAY{largeur_vignette,#LARGEUR,hauteur_vignette,#HAUTEUR}})
+		] - ][(#TAILLE|taille_en_octets|texte_backend)]</span>
+	</ficaption>
+</figure>
+</BOUCLE_doc>
--- a/modeles/image.html
+++ b/modeles/image.html
@ -3,14 +3,14 @@
 (#REM) Cas <imageXX>	: equivalent a <imgXX> pour une image en mode image

 ][(#INCLUS|=={image}|et{#ENV{emb,''}|non}|oui)
-<span class='spip_document_#ID_DOCUMENT spip_documents[ spip_documents_(#ENV{align})][ (#ENV{class})] spip_lien_ok'[
+<span class='spip_document_#ID_DOCUMENT spip_documents[ (#ENV{align})][ (#ENV{class})] spip_lien_ok'[
 	 style='float:(#ENV{align}|match{left|right});']>[
 	<a href="(#ENV{lien})"[
 		class="(#ENV{lien_class})"]>]<img src='#URL_DOCUMENT'[
 		width="(#LARGEUR|?{#LARGEUR})"][
 		height="(#HAUTEUR|?{#HAUTEUR})"][
 		title="(#TITRE|attribut_html)"]
-		alt="[(#TITRE|attribut_html)]" />[(#ENV{lien}|?{</a>})]</span>
+		alt="[(#TITRE|attribut_html)]">[(#ENV{lien}|?{</a>})]</span>
 ][

 (#REM) Cas <embXX> : on est appele ici avec emb=' ' : on veut la legende
@ -21,29 +21,32 @@ equivalent a un <docXX> pour une image en mode image
 #SET{width,#LARGEUR}
 #SET{height,#HAUTEUR}
 #SET{url,#ENV{lien}}
-<dl class='spip_document_#ID_DOCUMENT spip_documents[ spip_documents_(#ENV{align})][ (#ENV{class})] spip_lien_ok'[
-			style='float:(#ENV{align}|match{left|right});[width:(#GET{width}|max{120})]px;']>
-<dt>[<a href="(#GET{url})"[ class="(#ENV{lien_class})"] title='#TYPE_DOCUMENT - [(#TAILLE|taille_en_octets|texte_backend)]'[ type="(#ENV{lien}|?{#ENV{lien_mime},#MIME_TYPE})"]>]<img src='#GET{fichier}' width='#GET{width}' height='#GET{height}' alt='#TYPE_DOCUMENT - [(#TAILLE|taille_en_octets|texte_backend)]' />[(#GET{url}|?{</a>})]</dt>[
-<dt class='#EDIT{titre} spip_doc_titre'[ style='width:(#GET{width}|min{350}|max{120})px;']><strong>(#TITRE)</strong></dt>][
-<dd class='#EDIT{descriptif} spip_doc_descriptif'[ style='width:(#GET{width}|min{350}|max{120})px;']>(#DESCRIPTIF|PtoBR)[(#NOTES|PtoBR)]</dd>]
-</dl>
+<figure class='spip_document_#ID_DOCUMENT spip_documents[ (#ENV{align})][ (#ENV{class})] spip_lien_ok'[
+	style='float:(#ENV{align}|match{left|right});[width:(#GET{width}|max{120})]px;']>
+	[<a href="(#GET{url})"[ class="(#ENV{lien_class})"] title='#TYPE_DOCUMENT - [(#TAILLE|taille_en_octets|texte_backend)]'[ type="(#ENV{lien}|?{#ENV{lien_mime},#MIME_TYPE})"]>]<img src='#GET{fichier}' width='#GET{width}' height='#GET{height}' alt='#TYPE_DOCUMENT - [(#TAILLE|taille_en_octets|texte_backend)]'>[(#GET{url}|?{</a>})]
+	<figcaption class='#EDIT{descriptif} spip_doc_descriptif'[ style='width:(#GET{width}|min{350}|max{120})px;']>[
+		<strong class='#EDIT{titre} spip_doc_titre'>(#TITRE)</strong>]
+		[(#DESCRIPTIF|PtoBR)[(#NOTES|PtoBR)]
+	]</figcaption>
+</figure>
 ][

 (#REM) Cas des images qu'il faut embed (svg)
 ][
 (#INCLUS|=={embed}|oui)
-<div class='spip_document_#ID_DOCUMENT spip_documents[ spip_documents_(#ENV{align})]'[
+<figure class='spip_document_#ID_DOCUMENT spip_documents[ (#ENV{align})]'[
 style='[(#ENV{align}|match{^(left|right)$}|?{' '})float:#ENV{align};] (#ENV{align,center}|=={center}|?{'',' '})']>
-<object	data='#URL_DOCUMENT' 
-	type='#MIME_TYPE'[
-	width='(#ENV{largeur}?{'', #LARGEUR})'][
-	height='(#ENV{hauteur}?{'', #HAUTEUR})']
-	[(#ENV*|env_to_attributs)] >
-	<param name='src' value='#URL_DOCUMENT' />
-	[(#ID_DOCUMENT|appliquer_filtre{#MIME_TYPE})]
-</object>[
-<div class='#EDIT{titre} spip_doc_titre'><strong>(#TITRE)</strong></div>
-][
-<div class='#EDIT{descriptif} spip_doc_descriptif'>(#DESCRIPTIF|PtoBR)[(#NOTES|PtoBR)]</div>
-]</div>]
-</BOUCLE_tous>
+	<object data='#URL_DOCUMENT' 
+		type='#MIME_TYPE'[
+		width='(#ENV{largeur}?{'', #LARGEUR})'][
+		height='(#ENV{hauteur}?{'', #HAUTEUR})']
+		[(#ENV*|env_to_attributs)] >
+		<param name='src' value='#URL_DOCUMENT'>
+		[(#ID_DOCUMENT|appliquer_filtre{#MIME_TYPE})]
+	</object>
+	<figcaption class='#EDIT{descriptif} spip_doc_descriptif'>[
+		<strong class='#EDIT{titre} spip_doc_titre'>(#TITRE)</strong>]
+		[(#DESCRIPTIF|PtoBR)[(#NOTES|PtoBR)]
+	]</figcaption>
+</figure>]
+</BOUCLE_tous>
--- a/modeles/img.html
+++ b/modeles/img.html
@ -36,9 +36,9 @@
 	(#REM) image complete ?

 ][(#GET{image})
-<span class='spip_document_#ID_DOCUMENT spip_documents[ spip_documents_(#ENV{align})][ (#ENV{class})] spip_lien_ok'[
+<span class='spip_document_#ID_DOCUMENT spip_documents[ (#ENV{align})][ (#ENV{class})] spip_lien_ok'[
 style='float:(#ENV{align}|match{left|right});']>
-[<a href="(#ENV{lien})"[ class="(#ENV{lien_class})"]>]<img src='#URL_DOCUMENT'[ width="(#LARGEUR)"][ height="(#HAUTEUR)"] alt="[(#TITRE|texte_backend)]"[ title="(#TITRE|texte_backend)"] />[(#ENV{lien}|?{</a>})]</span>
+[<a href="(#ENV{lien})"[ class="(#ENV{lien_class})"]>]<img src='#URL_DOCUMENT'[ width="(#LARGEUR)"][ height="(#HAUTEUR)"] alt="[(#TITRE|texte_backend)]"[ title="(#TITRE|texte_backend)"]>[(#ENV{lien}|?{</a>})]</span>
 ][

 	(#REM) sinon logo document + lien + alt + title etc
@ -47,7 +47,7 @@
 	[(#SET{fichier,[(#LOGO_DOCUMENT|extraire_attribut{src})]})]
 	[(#SET{width,[(#LOGO_DOCUMENT|extraire_attribut{width})]})]
 	[(#SET{height,[(#LOGO_DOCUMENT|extraire_attribut{height})]})]
-<span class='spip_document_#ID_DOCUMENT spip_documents[ spip_documents_(#ENV{align})][ (#ENV{class})] spip_lien_ok'[
+<span class='spip_document_#ID_DOCUMENT spip_documents[ (#ENV{align})][ (#ENV{class})] spip_lien_ok'[
 style='float:(#ENV{align}|match{left|right});[ width:(#GET{width})px;]']><a href="[(#ENV{lien}|sinon{#URL_DOCUMENT})]"[
- (#ENV{lien}|?{'',type="#MIME_TYPE"})][ title="(#TITRE|texte_backend)"]><img src='#GET{fichier}' width='#GET{width}' height='#GET{height}' alt='[(#TITRE|strlen|?{#TITRE {#TYPE_DOCUMENT},#TYPE_DOCUMENT}|attribut_html)]' /></a></span>
-]</BOUCLE_document>
+ (#ENV{lien}|?{'',type="#MIME_TYPE"})][ title="(#TITRE|texte_backend)"]><img src='#GET{fichier}' width='#GET{width}' height='#GET{height}' alt='[(#TITRE|strlen|?{#TITRE {#TYPE_DOCUMENT},#TYPE_DOCUMENT}|attribut_html)]'></a></span>
+]</BOUCLE_document>
--- a/modeles/text.html
+++ b/modeles/text.html
@ -1,6 +1,9 @@
 <BOUCLE_tous (DOCUMENTS types_documents) {id_document=#ID} {tout}
-	>[<div class='spip_document_#ID_DOCUMENT spip_documents[ spip_documents_(#ENV{align})]'
+	>[<figure class='spip_document_#ID_DOCUMENT spip_documents[ (#ENV{align})]'
 ><pre>(#FICHIER|contenu_document{#ENV{charset,auto}}|echapper_tags)</pre>
-[<div class='#EDIT{titre} spip_doc_titre'><strong>(#TITRE)</strong></div>][<div class='#EDIT{descriptif} spip_doc_descriptif'>(#DESCRIPTIF|PtoBR)[(#NOTES|PtoBR)]</div>]
-</div>
-]</BOUCLE_tous>
+	<figcaption class='#EDIT{descriptif} spip_doc_descriptif'>[
+		<strong class='#EDIT{titre} spip_doc_titre'>(#TITRE)</strong>]
+		[(#DESCRIPTIF|PtoBR)[(#NOTES|PtoBR)]
+	]</figcaption>
+</figure>
+]</BOUCLE_tous>
--- a/modeles/text_csv.html
+++ b/modeles/text_csv.html
@ -1,3 +1,3 @@
 <BOUCLE_tous (DOCUMENTS types_documents) {id_document=#ID} {tout}
 	>[(#FICHIER|contenu_document{#ENV{charset,auto}}|appliquer_filtre{#MIME_TYPE}
-)]</BOUCLE_tous>
+)]</BOUCLE_tous>
--- a/modeles/text_html.html
+++ b/modeles/text_html.html
@ -1,6 +1,9 @@
 <BOUCLE_tous (DOCUMENTS types_documents) {id_document=#ID} {tout}
-	>[<div class='spip_document_#ID_DOCUMENT spip_documents[ spip_documents_(#ENV{align})]'
+	>[<figure class='spip_document_#ID_DOCUMENT spip_documents[ (#ENV{align})]'
 ><object data="(#URL_DOCUMENT)" width="100%" height="400"><a href="#URL_DOCUMENT">#FICHIER</a></object>
-[<div class='#EDIT{titre} spip_doc_titre'><strong>(#TITRE)</strong></div>][<div class='#EDIT{descriptif} spip_doc_descriptif'>(#DESCRIPTIF|PtoBR)[(#NOTES|PtoBR)]</div>]
-</div>
-]</BOUCLE_tous>
+	<figcaption class='#EDIT{descriptif} spip_doc_descriptif'>[
+		<strong class='#EDIT{titre} spip_doc_titre'>(#TITRE)</strong>]
+		[(#DESCRIPTIF|PtoBR)[(#NOTES|PtoBR)]
+	]</figcaption>
+</figure>
+]</BOUCLE_tous>
--- a/modeles/video.html
+++ b/modeles/video.html
@ -1,4 +1,4 @@
-<BOUCLE_tous(DOCUMENTS types_documents) {id_document=#ID} {tout}>[
+<BOUCLE_tous (DOCUMENTS types_documents) {id_document=#ID} {tout}>[
 (#REM) on trouvera plusieurs variable de hauteur/largeur
 - les balises #HAUTEUR et #LARGEUR
 - #ENV{hauteur} et {largeur} correspondant <emb|hauteur=xx...>
@ -7,41 +7,43 @@
 ]
 #SET{largeur,#ENV{largeur, #LARGEUR|?{#LARGEUR,480}}|max{120}}
 #SET{hauteur,#ENV{hauteur, #HAUTEUR|?{#HAUTEUR,300}}|max{75}}
-<div class='spip_document_#ID_DOCUMENT spip_document_video spip_documents[ spip_documents_(#ENV{align})]'
+<figure class='spip_document_#ID_DOCUMENT spip_document_video spip_documents[ (#ENV{align})]'
 	style='[(#ENV{align}|match{^(left|right)$}|oui)float:#ENV{align};][width:(#GET{largeur})px]'>
-<div class="video-intrinsic-wrapper" style='height:0;width:100%;padding-bottom:[(#GET{hauteur}|div{#GET{largeur}}|mult{100}|round{2})]%;position:relative;'>
-	<div class="video-wrapper" style="position: absolute;top:0;left:0;width:100%;height:100%;">
-		<video class="mejs mejs-#ID_DOCUMENT[ mejs-(#ENV{skin})]"
-				data-id="[(#VAL{mejs-#ID_DOCUMENT}|concat{#ENV{skin}}|md5)]"
-				data-mejsoptions='{"alwaysShowControls": true,"pluginPath":"[(#CHEMIN{lib/mejs/flashmediaelement.swf}|dirname)/]"[,"loop":(#ENV{loop}|?{true,false})],"videoWidth":"100%","videoHeight":"100%"[,"startVolume":"(#ENV{volume})"]}'
-				width="100%"
-				height="100%"
-				poster="[(#LOGO_DOCUMENT{vignette}|image_reduire{#GET{largeur},0}|extraire_attribut{src})]"
-				controls="controls"
-				preload="none"[
-				autoplay="autoplay"(#ENV{autoplay}|oui)]
-			>
-			<source type="[(#EXTENSION|in_array{#LISTE{mp4,webm,ogv}}|?{[(#MIME_TYPE|replace{application/,video/})],#MIME_TYPE})]" src="#FICHIER" />
-			[(#REM)
+	<div class="video-intrinsic-wrapper" style='height:0;width:100%;padding-bottom:[(#GET{hauteur}|div{#GET{largeur}}|mult{100}|round{2})]%;position:relative;'>
+		<div class="video-wrapper" style="position: absolute;top:0;left:0;width:100%;height:100%;">
+			<video class="mejs mejs-#ID_DOCUMENT[ mejs-(#ENV{skin})]"
+					data-id="[(#VAL{mejs-#ID_DOCUMENT}|concat{#ENV{skin}}|md5)]"
+					data-mejsoptions='{"alwaysShowControls": true,"pluginPath":"[(#CHEMIN{lib/mejs/flashmediaelement.swf}|dirname)/]"[,"loop":(#ENV{loop}|?{true,false})],"videoWidth":"100%","videoHeight":"100%"[,"startVolume":"(#ENV{volume})"]}'
+					width="100%"
+					height="100%"
+					poster="[(#LOGO_DOCUMENT{vignette}|image_reduire{#GET{largeur},0}|extraire_attribut{src})]"
+					controls="controls"
+					preload="none"[
+					autoplay="autoplay"(#ENV{autoplay}|oui)]
+				>
+				<source type="[(#EXTENSION|in_array{#LISTE{mp4,webm,ogv}}|?{[(#MIME_TYPE|replace{application/,video/})],#MIME_TYPE})]" src="#FICHIER">
+				[(#REM)

-				Flash fallback for non-HTML5 browsers without JavaScript
+					Flash fallback for non-HTML5 browsers without JavaScript

-			]<object width="#GET{largeur}" height="#GET{hauteur}" type="application/x-shockwave-flash" data="#CHEMIN{lib/mejs/flashmediaelement.swf}">
-				<param name="movie" value="#CHEMIN{lib/mejs/flashmediaelement.swf}" />
-				<param name="flashvars" value="controls=true&amp;file=#FICHIER" />
-				[(#REM) 
+				]<object width="#GET{largeur}" height="#GET{hauteur}" type="application/x-shockwave-flash" data="#CHEMIN{lib/mejs/flashmediaelement.swf}">
+					<param name="movie" value="#CHEMIN{lib/mejs/flashmediaelement.swf}">
+					<param name="flashvars" value="controls=true&amp;file=#FICHIER">
+					[(#REM) 

-					Image as a last resort
+						Image as a last resort

-				][(#LOGO_DOCUMENT|image_reduire{#GET{largeur},0}|vider_attribut{class}|inserer_attribut{alt,'Impossible de lire la video'})]
-		  </object>
-		</video>
+					][(#LOGO_DOCUMENT|image_reduire{#GET{largeur},0}|vider_attribut{class}|inserer_attribut{alt,'Impossible de lire la video'})]
+			  </object>
+			</video>
+		</div>
 	</div>
-</div>
-[<div class='#EDIT{titre} spip_doc_titre'><strong>(#TITRE)</strong></div>]
-[<div class='#EDIT{descriptif} spip_doc_descriptif'>(#DESCRIPTIF|PtoBR)[(#NOTES|PtoBR)]</div>]
-[<script>/*<!\[CDATA\[*/var mejspath='[(#CHEMIN{lib/mejs/mediaelement-and-player.min.js}|timestamp)]',mejscss='[(#CHEMIN{lib/mejs/mediaelementplayer.min.css}|timestamp)]';
-(#INCLURE{javascript/mejs-init.min.js})/*\]\]>*/</script>]
-[(#ENV{skin}|oui)[<style>(#INCLURE{#CHEMIN{css/mejs-skin-#ENV{skin}.css}|sinon{#CHEMIN{lib/mejs/mejs-skins.css}}|url_absolue_css})</style>]]
-</div>
+	<figcaption class='#EDIT{descriptif} spip_doc_descriptif'>[
+		<strong class='#EDIT{titre} spip_doc_titre'>(#TITRE)</strong>]
+		[(#DESCRIPTIF|PtoBR)[(#NOTES|PtoBR)]
+	]</figcaption>
+	[<script>/*<!\[CDATA\[*/var mejspath='[(#CHEMIN{lib/mejs/mediaelement-and-player.min.js}|timestamp)]',mejscss='[(#CHEMIN{lib/mejs/mediaelementplayer.min.css}|timestamp)]';
+	(#INCLURE{javascript/mejs-init.min.js})/*\]\]>*/</script>]
+	[(#ENV{skin}|oui)[<style>(#INCLURE{#CHEMIN{css/mejs-skin-#ENV{skin}.css}|sinon{#CHEMIN{lib/mejs/mejs-skins.css}}|url_absolue_css})</style>]]
+</figure>
 </BOUCLE_tous>
--- a/plugin.xml
+++ b/plugin.xml
@ -3,7 +3,7 @@
 <prefix>figure</prefix>
 <icon>figure.png</icon>

-<version>0.0.2</version>
+<version>0.1.0</version>
 <etat>dev</etat>
 <categorie>multimedia</categorie>