Source files of fsfe.org, pdfreaders.org, freeyourandroid.org, ilovefs.org, drm.info, and test.fsfe.org. Contribute: https://fsfe.org/contribute/web/ https://fsfe.org

template.en.xhtml 18KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378
  1. <?xml version="1.0" encoding="UTF-8" ?>
  2. <html>
  3. <head>
  4. <title>Template article – Contribute – FSFE</title>
  5. </head>
  6. <body class="article" microformats="h-entry" id="the-template-2014">
  7. <p id="category" class="p-category">
  8. <a href="/contribute/contribute.html">Contribute</a>
  9. </p>
  10. <h1 class="p-name">A template article, to use the new webdesign</h1>
  11. <div class="e-content">
  12. <p class="p-summary">
  13. So, you are publishing an article on fsfe.org? Let’s have a look at
  14. this <a href="/source/contribute/template.en.xhtml">template page source code</a> to see how you can make use of the many
  15. features at your disposal with this new design!
  16. <a class="fn" id="ref-name-that-footnote" href="#fn-name-that-footnote">1</a>
  17. All code samples are pasted directly from the source file of this page.
  18. </p>
  19. <p>
  20. Just like before, fsfe.org web pages are built from xml source files.
  21. You can actually see the source code directly by clicking on the link
  22. at <a href="#source">the bottom of each page</a>. So there’s no big
  23. change here, go on to read more about the website in genral if you want
  24. to know more (there’s a link in the sidebar, on the right).
  25. </p>
  26. <h2>Page styling and metadata</h2>
  27. <p>
  28. The first thing with the new design are the <code>&#60;body&#62;</code>
  29. attributes. This page has:
  30. </p>
  31. <pre><code>&#60;body class="article" microformats="h-entry" id="the-template-2014"&#62;</code></pre>
  32. <p>
  33. A file can have more than one class and more than one microformats
  34. (separated by a space), but a file can only have one id. These
  35. attributes are very useful to have different kinds of styling depending
  36. on what kind of content we’re showing.
  37. </p>
  38. <p>
  39. For instance, the page <a href="/about/">About FSFE</a> is not an
  40. article, but one of the four main sections of the website. It’s a way
  41. to get to other pages relating to what FSFE is about. For this kind of
  42. pages, there are some specific styling (using <code>&#60;body
  43. class="subsite"&#62;</code>). In doubt, it’s always useful to find a
  44. page that’s as close as possible to what you have to edit, and see how
  45. this one is made. And of course, you can always <a
  46. href="https://lists.fsfe.org/mailman/listinfo/web">get in touch
  47. with the web team</a>. What’s more, all pages which are on
  48. wiki.fsfe.org have the wiki class, all pages on planet.fsfe.org have the
  49. planet class, etc.
  50. </p>
  51. <p>
  52. So, all articles should have an "article" class. However, it is
  53. optional for them to have an id. If you put an id, please choose it
  54. carefully. Id can be very useful to apply very specific styling. If you
  55. need to write new CSS style for a page, please make sure to put an id
  56. and then use that id for the rules in the CSS files.
  57. </p>
  58. <p>
  59. Microformats attributes are both about style and about metadata of a
  60. page. To learn what microformats are, please read <a
  61. href="http://microformats.org">microformats.org</a>.
  62. This page, as most articles, news entries, event items, should have
  63. proper metadata and use microformats.
  64. If you are <em>not</em> going to use microformats markup inside a
  65. source file, there’s no need to enable them, so remove the
  66. "microformats" information from the &#60;body&#62; element.
  67. </p>
  68. <p>
  69. Articles should use the <a
  70. href="http://microformats.org/wiki/h-entry">h-entry
  71. microformat</a>. This page has:
  72. </p>
  73. <pre><code>&#60;body class="article" <strong>microformats="h-entry"</strong> id="the-template-2014"&#62;
  74. &#60;p id="category" class="p-category"&#62;
  75. &#60;a href="/contribute/contribute.html"&#62;Contribute&#60;/a&#62;
  76. &#60;/p&#62;
  77. &#60;h1 class="p-name"&#62;A template article, to use the new webdesign&#60;/h1&#62;
  78. &#60;div class="e-content"&#62;
  79. &#60;p class="p-summary"&#62;So, you are…
  80. &#60;/div&#62;&#60;!--/e-content--&#62;
  81. </code></pre>
  82. <p>
  83. The rest of the metadata (author, date, etc.) should be taken care of.
  84. But do not hesitate to use other h-entry classes in the body of the
  85. article, and <a
  86. href="http://indiewebify.waterpigs.co.uk/validate-h-entry/">check
  87. their validity</a>. If you want to know more about how fsfe.org
  88. deals with other metadata like tags, author, dates, etc. you can read
  89. the <a href="/source/contribute/template.en.xhtml">source code of this page</a>. You should also <a
  90. href="/contribute/web/tagging.fr.html">read the how-to on tagging
  91. fsfe.org</a>.
  92. </p>
  93. <h2>The sidebar</h2>
  94. <aside>
  95. <p>
  96. By the way, did you notice that, if you inspect the HTML of this page
  97. as rendered in your web browser, each title automatically gets an id?
  98. That way you can easily <a href="#id-the-sidebar">link to a specific
  99. part</a> of a page on fsfe.org by using anchors. For example, the title
  100. above probably has <code>&#60;h2 id="<a
  101. href="#id-the-sidebar">id-the-sidebar</a>"&#62;The
  102. sidebar&#60;h2&#62;</code>
  103. </p>
  104. </aside>
  105. <pre><code>&#60;sidebar news="ilovefs" promo="about-fsfe"&#62;
  106. &#60;div id="related-content"&#62;
  107. &#60;h3&#62;Get involved&#60;/h3&#62;
  108. &#60;ul&#62;&#60;li&#62;&#60;a href="/contribute/web/web.html"&#62;Webmastering&#60;/a&#62;&#60;/li&#62;
  109. &#60;li&#62;&#60;a href="/contribute/editors/editors.html"&#62;Information for editors&#60;/a&#62;&#60;/li&#62;
  110. &#60;li&#62;&#60;a href="/contribute/contribute.html"&#62;Contribute&#60;/a&#62;&#60;/li&#62;&#60;/ul&#62;
  111. &#60;h4&#62;Ongoing campaigns&#60;/h4&#62;
  112. &#60;ul&#62;&#60;li&#62;&#60;a href="//documentfreedom.org"&#62;Document Freedom Day!&#60;/a&#62;&#60;/li&#62;&#60;/ul&#62;
  113. &#60;/div&#62;
  114. &#60;/sidebar&#62;
  115. </code></pre>
  116. <p>
  117. The sidebar is what’s showing on the right side of this very page (if
  118. your screen is large enough!). Articles should really have a sidebar
  119. and we encourage you to add things in it. They are useful to provide
  120. context to an article, and to give more things to read if somebody’s
  121. interested. So you should show related articles, and/or related
  122. campaigns if that makes sense. See the code above: you can write
  123. directly inside the <code>&#60;sidebar&#62;</code> elements.
  124. </p>
  125. <p>
  126. However, the sidebar is not just another place to write, it’s also a
  127. useful tool where we can automatically put stuff. So if you are very lazy,
  128. or if there’s nothing to write in, just write
  129. <code>&#60;sidebar&#62;</code> without anything in it, and the build system
  130. will automatically decide what to show for you. Note: the sidebar
  131. element should be after the body element, not within. It’s at the same
  132. place that timestamp, tags and translator elements.
  133. </p>
  134. <h3>Sidebar options</h3>
  135. <p>You can also give parameters to your sidebar. This page has the following sidebar parameters:</p>
  136. <pre><code>&#60;sidebar news="ilovefs" promo="about-fsfe"&#62;</code></pre>
  137. <p>The news value is <a href="/contribute/web/tagging.html">a tag</a>.
  138. It’s going to fetch some news items that match the given tag and display
  139. them in the sidebar. For matter of demonstration, this page displays links
  140. to news items with the "ilovefs" tag.</p>
  141. <p><strong>Note:</strong> The news feature of the sidebar is disabled until
  142. Nicolas finds a better way of building the tag. Your help is welcome!</p>
  143. <p>The promo parameter is a paragraph promoting one important aspect of
  144. FSFE. This page promotes the "about-fsfe" paragraph, which is a general
  145. paragraph about FSFE which is going to invite the user to go read the
  146. about-page. If you don’t want to show any promotional paragraph, set
  147. <code>promo="no"</code>. If you do not choose which paragraph to promote in
  148. your sidebar, the build system is going to default to one paragraph for
  149. you.</p>
  150. <p>These paragraphs should already be ready for translation like other
  151. generic parts of the website. For now, you can choose to promote among:</p>
  152. <ul>
  153. <li>our-work</li>
  154. <li>about-fsfe</li>
  155. <li>donate</li>
  156. <li>More to come… Do not hesitate to ask the web team to add one.</li>
  157. </ul>
  158. <h3>Table of contents</h3>
  159. <p>Right now, it’s not automated. But the sidebar should be very a nice place
  160. to add a table of contents, especially if you wrote a long article. More to
  161. come on that.</p>
  162. <h2>The follow-up</h2>
  163. <p>It’s important to help people engage and support FSFE and to make it
  164. easy for them. This is why we have the "followup" box. This box is the
  165. second section of each page on fsfe.org, which you can see below the
  166. license information of this page. Why is it at the bottom? The idea is
  167. that, if somebody reaches the end of an article on fsfe.org, it’s probably
  168. a very good sign that this person is interested! So we should engage with
  169. them, give them a way to follow up on that enthusiasm! By default, if you
  170. don’t put anything, the build system is going to insert a followup box for
  171. you. If you don’t want to show a followup box for some reason, then please
  172. write <code>&#60;followup&#62;no&#60;/followup&#62;</code>.</p>
  173. <p>This page chooses to help people engage by subscribing to our monthly
  174. newsletter. So, after the body element, it has:</p>
  175. <pre><code>&#60;followup&#62;subscribe-nl&#60;/followup&#62;</code></pre>
  176. <p>These boxes should already be ready for translation like other generic
  177. parts of the website. For now, you can choose to follow up on:</p>
  178. <ul>
  179. <li>"subscribe-nl" to subscribe to the newsletter</li>
  180. <li>"support" to sign as a supporter</li>
  181. <li>"donate" to make a one-time or recurrent donation</li>
  182. <li>"join" to promote joining the fellowship</li>
  183. </ul>
  184. <h2>Misc</h2>
  185. <p>If you need to add a quote, proceed as follows:</p>
  186. <blockquote>
  187. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor. Pellentesque auctor nisi id magna consequat sagittis. Curabitur dapibus enim sit amet elit pharetra tincidunt feugiat nisl imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros. Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.</p>
  188. <footer>
  189. – <cite>Cicero</cite>
  190. </footer>
  191. </blockquote>
  192. <p>Alternative, you can also <q cite="http://example.org">quote an example inline</q> (the quotation marks will vary depending on the language).</p>
  193. <div class="captioned" style="max-width: 2000px;">
  194. <header>
  195. <p>An article would not be complete without a picture!</p>
  196. </header>
  197. <img src="https://hroy.eu/images/fsfe_ecm-group_pic/2013-09-ECM-group-picture.JPG" alt="group picture!" />
  198. <footer>
  199. <p>This is a picture from the Group coordinators meeting in Berlin, September 2013!</p>
  200. </footer>
  201. </div>
  202. <p>If you want to use the <code>div class="captioned"</code> to display
  203. a picture like the above, please specify a <code>style="max-width:
  204. Xpx;"</code> property where X is the width of the picture.</p>
  205. <p>This is the source code for the example picture above:</p>
  206. <pre><code>
  207. &#60;<strong>div class="captioned" style="max-width: 2000px;"</strong>&#62;
  208. &#60;header&#62;
  209. &#60;p&#62;An article would not be complete without a picture!&#60;/p&#62;
  210. &#60;/header&#62;
  211. &#60;img src="https://hroy.eu/images/fsfe_ecm-group_pic/2013-09-ECM-group-picture.JPG" alt="group picture!" /&#62;
  212. &#60;footer&#62;
  213. &#60;p&#62;This is a picture from the Group coordinators meeting in Berlin, September 2013!&#60;/p&#62;
  214. &#60;/footer&#62;
  215. &#60;/div&#62;
  216. </code></pre>
  217. <p>If you want to center the picture, add the <code>center-block</code>
  218. class. If you want to make it float on the left, add the class
  219. <code>left</code>, and <code>right</code> to make it float… to the
  220. right! So, if you want to have a captioned picture on the right, you can
  221. add <code>div class="captioned right" style="max-width: Xpx; width:
  222. Y%;"</code></p>
  223. <p>Here's an example code for a right-side picture taking 1/3 of the width:</p>
  224. <pre><code>
  225. &#60;div class="captioned <strong>right</strong>" style="max-width: 400px; <strong>width: 33%</strong>;"&#62;
  226. &#60;header&#62;
  227. &#60;p&#62;An article would not be complete without a picture!&#60;/p&#62;
  228. &#60;/header&#62;
  229. &#60;img src="https://hroy.eu/images/fsfe_ecm-group_pic/2013-09-ECM-group-picture.JPG" alt="group picture!" /&#62;
  230. &#60;footer&#62;
  231. &#60;p&#62;This is a picture from the Group coordinators meeting in Berlin, September 2013!&#60;/p&#62;
  232. &#60;/footer&#62;
  233. &#60;/div&#62;
  234. </code></pre>
  235. <h2>General design</h2>
  236. <p>Please avoid adding inline css styles in your css. Use css classes
  237. instead. If you need new classes, create new classes, or try to see if the
  238. current design does not already solve what you want to do! Also check with
  239. bootstrap if there’s not something standard to use. To understand how to
  240. edit the stylesheets of the new design, <a
  241. href="/contribute/web/css.html">head to the documentation</a>.</p>
  242. <p>The new design uses bootstrap. Visit <a
  243. href="http://getbootstrap.com/">getbootstrap.com</a> for more
  244. information about that. This should allow you to have some nice things on
  245. fsfe.org pages now! However if you are doing something a bit out of the
  246. ordinary or if you are not sure of yourself, do not hesitate to <a
  247. href="https://lists.fsfe.org/mailman/listinfo/web">get in touch
  248. with the web team</a>.</p>
  249. <h2>Some notes on typography</h2>
  250. <p>Typography matters. Please, if you share my love for typography, letters, spaces and symboles, try to use curly quotes and real apostrophes. I know this article did not respect that rule and used "stright quotes" instead of “curly quotes” because I needed to imitate the source code in order not to confuse anyone. However, for most articles on fsfe.org there’s no need for this. Especially, since we use utf-8, there’s no reason not to put some utf-8 in our pages! ☺ </p>
  251. <h2>Other examples to take inspiration from</h2>
  252. <p>This template should get you going for most articles, i.e. pages which
  253. are mostly about “content”. However, not all pages are like that. So here’s
  254. a selection of well designed pages that should help you to get some
  255. inspiration from.</p>
  256. <p>
  257. If you have trouble producing the correct quotation marks for your language on your keyboard, look up the html escapes in
  258. <a href="http://en.wikipedia.org/wiki/Quotation_mark_glyphs#Quotation_marks_in_Unicode">the wikipedia article</a> (or <a href="http://unicode-table.com/en/sets/quotation-marks/">unicode table</a>).
  259. </p>
  260. <ul>
  261. <li><a href="http://test.fsfe.org/about/about.en.html">Subsite pages</a> for navigating to different parts of the website.</li>
  262. <li><a href="http://test.fsfe.org/news/2014/news-20140116-01.en.html">Press Releases</a></li>
  263. <li><a href="http://test.fsfe.org/news/nl/nl-201401.en.html">Newsletters</a></li>
  264. <li><a href="http://test.fsfe.org/about/roy/roy.en.html">Personal Bio pages</a></li>
  265. <li><a href="http://test.fsfe.org/fr/index.en.html">Country page</a></li>
  266. <li><a href="http://test.fsfe.org/fellowship/card.en.html">Fellowship page</a> (You might also want to edit <code>/tools/menu-global.xml</code> and <code>/tools/texts-**.xml</code>)</li>
  267. </ul>
  268. <h2 id="fn">Footnotes</h2>
  269. <ol>
  270. <li id="fn-name-that-footnote">
  271. This is just a footnote! Please read <a href="/source/template.en.xhtml">the source code of this page</a> to see
  272. how footnotes should be made.
  273. <a href="#ref-name-that-footnote" class="ref">&#8617;</a></li>
  274. </ol>
  275. </div><!--/e-content-->
  276. </body>
  277. <tags>
  278. <tag>webmaster</tag>
  279. </tags>
  280. <sidebar news="ilovefs" promo="about-fsfe">
  281. <div id="related-content">
  282. <h3>Get involved</h3>
  283. <ul><li><a href="/contribute/web/web.html">Webmastering</a></li>
  284. <li><a href="/contribute/editors/editors.html">Information for editors</a></li>
  285. <li><a href="/contribute/contribute.html">Contribute</a></li></ul>
  286. <h4>Ongoing campaigns</h4>
  287. <ul><li><a href="//documentfreedom.org">Document Freedom Day!</a></li></ul>
  288. </div>
  289. </sidebar>
  290. <followup>subscribe-nl</followup>
  291. <timestamp>$Date: 2013-12-31 13:55:36 +0100 (Tue 31 Dec 2013) $ $Author: hugo $</timestamp>
  292. <date>
  293. <original content="2014-01-05" />
  294. <revision content="2014-01-06" />
  295. <revision content="2014-01-07" />
  296. </date>
  297. <!--Please help FSFE make the switch to Creative Commons: use this license for your publication:-->
  298. <legal type="cc-license">
  299. <license>https://creativecommons.org/licenses/by/4.0/deed.en</license>
  300. <notice>This work is licensed under a Creative Commons Attribution 4.0 International License.</notice>
  301. </legal>
  302. <author id="roy" />
  303. <translator>Hugo Roy</translator>
  304. </html>