figure-examples - Revision history

Tantek: fix deadname

2018-06-21T00:51:58Z

fix deadname

← Older revision		Revision as of 00:51, 21 June 2018
Line 14:		Line 14:
	== Participants ==		== Participants ==
	* [[User:Chris_Messina \| Chris Messina]]		* [[User:Chris_Messina \| Chris Messina]]
	* ~~[[User:EdwardOConnor \| Edward~~ O'Connor]]		* Theresa O'Connor
	* [[User:AaronGustafson \| Aaron Gustafson]]		* [[User:AaronGustafson \| Aaron Gustafson]]
	* ...		* ...
Line 139:		Line 139:
	* includes the classes <code>float-left</code> or <code>float-right</code> for aligning figures		* includes the classes <code>float-left</code> or <code>float-right</code> for aligning figures

	=== [http://~~edward~~.oconnor.cx/ ~~Edward~~ O'Connor's blog] ===		=== [http://theresa.oconnor.cx/ Theresa O'Connor's blog] ===

	* POSH figure markup, based on several inputs:		* POSH figure markup, based on several inputs:
Line 145:		Line 145:
	** RFC 2629's figure element		** RFC 2629's figure element
	** [http://microformats.org/discuss/mail/microformats-discuss/2007-August/010421.html Paul Wilkins' class names]		** [http://microformats.org/discuss/mail/microformats-discuss/2007-August/010421.html Paul Wilkins' class names]
	* Documented in [http://~~edward~~.oconnor.cx/2007/04/marking-up-figures Marking up figures], [http://~~edward~~.oconnor.cx/2007/08/figure-markup-redux Figure markup redux], and described in [http://~~edward~~.oconnor.cx/profiles/figures XMDP]		* Documented in [http://theresa.oconnor.cx/2007/04/marking-up-figures Marking up figures], [http://theresa.oconnor.cx/2007/08/figure-markup-redux Figure markup redux], and described in [http://theresa.oconnor.cx/profiles/figures XMDP]

	=== Revenue Watch Institute (website forthcoming) ===		=== Revenue Watch Institute (website forthcoming) ===
Line 216:		Line 216:

	In an attempt to bring together some of the ideas suggested, an addition to the Revenue Watch example was made. [http://www.contentwithstyle.co.uk/content/figure-microformats This solution] is based on		In an attempt to bring together some of the ideas suggested, an addition to the Revenue Watch example was made. [http://www.contentwithstyle.co.uk/content/figure-microformats This solution] is based on
	* ~~Edward~~ O'Connor's [http://~~edward~~.oconnor.cx/2007/08/figure-markup-redux Figure markup redux]		* Theresa O'Connor's [http://theresa.oconnor.cx/2007/08/figure-markup-redux Figure markup redux]
	* the [[#Revenue Watch Institute(website forthcoming)\|Revenue Watch example]] and		* the [[#Revenue Watch Institute(website forthcoming)\|Revenue Watch example]] and
	* [[#HTML5\|HTML5's figure element]] above		* [[#HTML5\|HTML5's figure element]] above
Line 241:		Line 241:

	* [http://factoryjoe.com/blog/2007/02/26/a-design-pattern-for-image-and-figure-alignment/ A design pattern for image and figure alignment]		* [http://factoryjoe.com/blog/2007/02/26/a-design-pattern-for-image-and-figure-alignment/ A design pattern for image and figure alignment]
	* [http://~~edward~~.oconnor.cx/2007/04/marking-up-figures Marking up figures]		* [http://theresa.oconnor.cx/2007/04/marking-up-figures Marking up figures]
	* [http://www.css3.info/styling-figures-with-css3/ Styling figures with CSS3]		* [http://www.css3.info/styling-figures-with-css3/ Styling figures with CSS3]
	* [http://www.simplebits.com/notebook/2005/07/10/figures.html When Floated Figures Attack!]		* [http://www.simplebits.com/notebook/2005/07/10/figures.html When Floated Figures Attack!]

MatthiasWillerich: Added link to the now existing draft figure 0.3, and updated the link to CwS article

2009-02-15T21:50:27Z

Added link to the now existing draft figure 0.3, and updated the link to CwS article

← Older revision		Revision as of 21:50, 15 February 2009
Line 7:		Line 7:

	The goal of this effort is to document and reflect the real-world needs of such design patterns while paying close attention to the types of data that people are using in this supportive role and also paying close attention to the existing class names and presentational styles that go along with such formats.		The goal of this effort is to document and reflect the real-world needs of such design patterns while paying close attention to the types of data that people are using in this supportive role and also paying close attention to the existing class names and presentational styles that go along with such formats.


			== The Draft ==
			[[figure \| A draft]] has been created that takes many of the suggestions of this discussion on board.

	== Participants ==		== Participants ==
Line 211:		Line 215:
	=== [http://www.contentwithstyle.co.uk/ Content with Style] ===		=== [http://www.contentwithstyle.co.uk/ Content with Style] ===

	In an attempt to bring together some of the ideas suggested, an addition to the Revenue Watch example was made. [http://www.contentwithstyle.co.uk/~~Articles/161~~/figure-microformats/ This solution] is based on		In an attempt to bring together some of the ideas suggested, an addition to the Revenue Watch example was made. [http://www.contentwithstyle.co.uk/content/figure-microformats This solution] is based on
	* Edward O'Connor's [http://edward.oconnor.cx/2007/08/figure-markup-redux Figure markup redux]		* Edward O'Connor's [http://edward.oconnor.cx/2007/08/figure-markup-redux Figure markup redux]
	* the [[#Revenue Watch Institute(website forthcoming)\|Revenue Watch example]] and		* the [[#Revenue Watch Institute(website forthcoming)\|Revenue Watch example]] and
Line 242:		Line 246:
	* [http://www.pearsonified.com/2007/06/how-to-format-images-for-feed-readers.php How to Format Images for Feed Readers]		* [http://www.pearsonified.com/2007/06/how-to-format-images-for-feed-readers.php How to Format Images for Feed Readers]
	* [http://www.alistapart.com/articles/figurehandler If I Told You You Had a Beautiful Figure...] by AARON GUSTAFSON		* [http://www.alistapart.com/articles/figurehandler If I Told You You Had a Beautiful Figure...] by AARON GUSTAFSON
	* [http://www.contentwithstyle.co.uk/~~Articles/161~~/figure-microformats/ Figure Microformats]		* [http://www.contentwithstyle.co.uk/content/figure-microformats Figure Microformats]

Csarven: /* Revenue Watch Institute (website forthcoming) */

2008-02-22T17:55:00Z

Revenue Watch Institute (website forthcoming)

← Older revision		Revision as of 17:55, 22 February 2008
Line 196:		Line 196:
	====Comments====		====Comments====
	Why is "credit" not an hCard? Also, for pictures of places any geo/ hcard microformat included in the caption should be understood to be associated with the figure. There is debate elsewhere, about whether coordinates should be for the camera position, or the object photographed; with consensus coming down on the side of the former [http://commons.wikimedia.org/wiki/Commons_talk:Geocoding#Geotagging_the_camera_or_the_Objekt], [http://commons.wikimedia.org/wiki/Commons_talk:Geocoding#Camera_vs_object_location]. That said, the whole "figure" div could be an hcard, with the picture being part of that; and a separate hCard for the photographer included. Complex... [[User:AndyMabbett\|Andy Mabbett]] 16:52, 21 Aug 2007 (PDT)		Why is "credit" not an hCard? Also, for pictures of places any geo/ hcard microformat included in the caption should be understood to be associated with the figure. There is debate elsewhere, about whether coordinates should be for the camera position, or the object photographed; with consensus coming down on the side of the former [http://commons.wikimedia.org/wiki/Commons_talk:Geocoding#Geotagging_the_camera_or_the_Objekt], [http://commons.wikimedia.org/wiki/Commons_talk:Geocoding#Camera_vs_object_location]. That said, the whole "figure" div could be an hcard, with the picture being part of that; and a separate hCard for the photographer included. Complex... [[User:AndyMabbett\|Andy Mabbett]] 16:52, 21 Aug 2007 (PDT)

			:For tangible entities (people, orgs, locations) hCard seems appropriate to me as well, however, figures can be illustrations or be composed of fictional (has this been addressed in hCard?) parts. In this case, "credit" could be defined as "text \| hCard". Regarding hCard, TITLE or NOTE may be sufficient to define "credit". [[User:Csarven\|Sarven Capadisli]] 09:55, 22 Feb 2008 (PST)

	I like the idea of the hCard <em>if</em> there is more information available other than just the name. If you are just putting the person's name, I still don't see the point of making that an hCard. Add some additional data (a link, email address, etc.) and I think you have an argument. Otherwise I think it's a waste of markup and simply clutters the results of whatever hCards might exist elsewhere on the page. As for geo-data, I think that sort of information may be useful, but I think I'd prefer to see that embedded within a <code>longdesc</code> page with more info on the image. Inside an article it seems superfluous to me. A <code>longdesc</code> page for an image could include much more data about where it was taken, by whom (possibly even a full hCard of the creator), etc.		I like the idea of the hCard <em>if</em> there is more information available other than just the name. If you are just putting the person's name, I still don't see the point of making that an hCard. Add some additional data (a link, email address, etc.) and I think you have an argument. Otherwise I think it's a waste of markup and simply clutters the results of whatever hCards might exist elsewhere on the page. As for geo-data, I think that sort of information may be useful, but I think I'd prefer to see that embedded within a <code>longdesc</code> page with more info on the image. Inside an article it seems superfluous to me. A <code>longdesc</code> page for an image could include much more data about where it was taken, by whom (possibly even a full hCard of the creator), etc.

TobyInk: /* Comments */

2008-02-18T14:46:37Z

Comments

← Older revision		Revision as of 14:46, 18 February 2008
Line 199:		Line 199:
	I like the idea of the hCard <em>if</em> there is more information available other than just the name. If you are just putting the person's name, I still don't see the point of making that an hCard. Add some additional data (a link, email address, etc.) and I think you have an argument. Otherwise I think it's a waste of markup and simply clutters the results of whatever hCards might exist elsewhere on the page. As for geo-data, I think that sort of information may be useful, but I think I'd prefer to see that embedded within a <code>longdesc</code> page with more info on the image. Inside an article it seems superfluous to me. A <code>longdesc</code> page for an image could include much more data about where it was taken, by whom (possibly even a full hCard of the creator), etc.		I like the idea of the hCard <em>if</em> there is more information available other than just the name. If you are just putting the person's name, I still don't see the point of making that an hCard. Add some additional data (a link, email address, etc.) and I think you have an argument. Otherwise I think it's a waste of markup and simply clutters the results of whatever hCards might exist elsewhere on the page. As for geo-data, I think that sort of information may be useful, but I think I'd prefer to see that embedded within a <code>longdesc</code> page with more info on the image. Inside an article it seems superfluous to me. A <code>longdesc</code> page for an image could include much more data about where it was taken, by whom (possibly even a full hCard of the creator), etc.
	[[User:AaronGustafson\|Aaron Gustafson]] 18:24, 22 Aug 2007 (EDT)		[[User:AaronGustafson\|Aaron Gustafson]] 18:24, 22 Aug 2007 (EDT)

			I like this idea, it certainly seems neat. Can we also please add an "optimisation" to explicitly say that if the IMG element itself has class="caption" then the TITLE attribute is taken to be the caption for the image. That way, we can support very minimal figures like this:
			<pre>
			<img class="figure caption" title="Sales data for March" src="march_sales.png"
			alt="We've experienced a huge growth in Widget sales this month!">
			</pre>
			Through to more verbose figures including credits with [[hcard]], and categories via [[rel-tag]]. [[User:TobyInk\|TobyInk]] 06:46, 18 Feb 2008 (PST)

	=== [http://www.contentwithstyle.co.uk/ Content with Style] ===		=== [http://www.contentwithstyle.co.uk/ Content with Style] ===

TobyInk: /* [http://www.contentwithstyle.co.uk/ Content with Style] */

2008-02-18T14:39:46Z

[http://www.contentwithstyle.co.uk/ Content with Style]

← Older revision		Revision as of 14:39, 18 February 2008
Line 221:		Line 221:
	</pre>		</pre>

	* The "legend" class is not semantically needed -- "caption" and "credit" suffice. IMHO, it should be left out of the microformat, though of course (as with other microformats) authors are free to add additional elements and classes to their data to assist with styling.		* The "legend" class is not semantically needed -- "caption" and "credit" suffice. IMHO, it should be left out of the microformat, though of course (as with other microformats) authors are free to add additional elements and classes to their data to assist with styling. [[User:TobyInk\|TobyInk]] 06:39, 18 Feb 2008 (PST)

	== Further discussion ==		== Further discussion ==

TobyInk: /* [http://www.contentwithstyle.co.uk/ Content with Style] */

2008-02-18T14:39:27Z

[http://www.contentwithstyle.co.uk/ Content with Style]

← Older revision		Revision as of 14:39, 18 February 2008
Line 220:		Line 220:
	</div>		</div>
	</pre>		</pre>

			* The "legend" class is not semantically needed -- "caption" and "credit" suffice. IMHO, it should be left out of the microformat, though of course (as with other microformats) authors are free to add additional elements and classes to their data to assist with styling.

	== Further discussion ==		== Further discussion ==

Chris Messina: added link to ALA article

2007-11-26T03:56:59Z

added link to ALA article

← Older revision		Revision as of 03:56, 26 November 2007
Line 229:		Line 229:
	* [http://www.simplebits.com/notebook/2005/07/10/figures.html When Floated Figures Attack!]		* [http://www.simplebits.com/notebook/2005/07/10/figures.html When Floated Figures Attack!]
	* [http://www.pearsonified.com/2007/06/how-to-format-images-for-feed-readers.php How to Format Images for Feed Readers]		* [http://www.pearsonified.com/2007/06/how-to-format-images-for-feed-readers.php How to Format Images for Feed Readers]
			* [http://www.alistapart.com/articles/figurehandler If I Told You You Had a Beautiful Figure...] by AARON GUSTAFSON
	* [http://www.contentwithstyle.co.uk/Articles/161/figure-microformats/ Figure Microformats]		* [http://www.contentwithstyle.co.uk/Articles/161/figure-microformats/ Figure Microformats]

MatthiasWillerich: Added Content with Style example code

2007-11-25T16:05:29Z

Added Content with Style example code

← Older revision		Revision as of 16:05, 25 November 2007
Line 200:		Line 200:
	[[User:AaronGustafson\|Aaron Gustafson]] 18:24, 22 Aug 2007 (EDT)		[[User:AaronGustafson\|Aaron Gustafson]] 18:24, 22 Aug 2007 (EDT)

			=== [http://www.contentwithstyle.co.uk/ Content with Style] ===

			In an attempt to bring together some of the ideas suggested, an addition to the Revenue Watch example was made. [http://www.contentwithstyle.co.uk/Articles/161/figure-microformats/ This solution] is based on
			* Edward O'Connor's [http://edward.oconnor.cx/2007/08/figure-markup-redux Figure markup redux]
			* the [[#Revenue Watch Institute(website forthcoming)\|Revenue Watch example]] and
			* [[#HTML5\|HTML5's figure element]] above

			The idea was to group meta information about the image in a legend container, just like HTML5 does. This leads to more freedom when styling the figure block, as the information can be grouped or treated separately.
			<pre>
			<div class="figure">
			<p class="image"><img src="/path/to/img.jpg" width="400" height="602" alt="Lorem ipsum dolor sit amet" /></p>
			<div class="legend">
			<p class="caption">Lorem ipsum dolor sit amet.</p>
			<p class="credit">
			<abbr class="type" title="Photograph">Photo</abbr>
			&copy; <cite>John Doe</cite>
			</p>
			</div>
			</div>
			</pre>
	== Further discussion ==		== Further discussion ==

MatthiasWillerich: Added Content with Style article

2007-11-25T12:11:32Z

Added Content with Style article

← Older revision		Revision as of 12:11, 25 November 2007
Line 209:		Line 209:
	* [http://www.simplebits.com/notebook/2005/07/10/figures.html When Floated Figures Attack!]		* [http://www.simplebits.com/notebook/2005/07/10/figures.html When Floated Figures Attack!]
	* [http://www.pearsonified.com/2007/06/how-to-format-images-for-feed-readers.php How to Format Images for Feed Readers]		* [http://www.pearsonified.com/2007/06/how-to-format-images-for-feed-readers.php How to Format Images for Feed Readers]
			* [http://www.contentwithstyle.co.uk/Articles/161/figure-microformats/ Figure Microformats]

LyricsBoy: /* Revenue Watch Institute (website forthcoming) */ cam -> came

2007-09-28T01:27:18Z

Revenue Watch Institute (website forthcoming): cam -> came

← Older revision		Revision as of 01:27, 28 September 2007
Line 145:		Line 145:
	=== Revenue Watch Institute (website forthcoming) ===		=== Revenue Watch Institute (website forthcoming) ===

	During the development of the new website for Revenue Watch, this was what we ~~cam~~ up with to handle figures:		During the development of the new website for Revenue Watch, this was what we came up with to handle figures:

	<pre>		<pre>