[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]
www/server fsf-html-style-sheet.html
|
From: |
Therese Godefroy |
|
Subject: |
www/server fsf-html-style-sheet.html |
|
Date: |
Thu, 7 Dec 2017 07:08:19 -0500 (EST) |
CVSROOT: /webcvs/www
Module name: www
Changes by: Therese Godefroy <th_g> 17/12/07 07:08:18
Modified files:
server : fsf-html-style-sheet.html
Log message:
Rewrite the graphics section (see 'Putting all images in /graphics' in
www-discuss@); a few clarifications; cosmetic changes.
CVSWeb URLs:
http://web.cvs.savannah.gnu.org/viewcvs/www/server/fsf-html-style-sheet.html?cvsroot=www&r1=1.74&r2=1.75
Patches:
Index: fsf-html-style-sheet.html
===================================================================
RCS file: /webcvs/www/www/server/fsf-html-style-sheet.html,v
retrieving revision 1.74
retrieving revision 1.75
diff -u -b -r1.74 -r1.75
--- fsf-html-style-sheet.html 5 Dec 2017 14:35:51 -0000 1.74
+++ fsf-html-style-sheet.html 7 Dec 2017 12:08:18 -0000 1.75
@@ -1,15 +1,16 @@
<!--#include virtual="/server/header.html" -->
<!-- Parent-Version: 1.83 -->
<title>Web Site Guidelines - GNU Project - Free Software Foundation</title>
+<style type="text/css" media="print,screen"><!--
+ul li { margin-top: 1em; }
+--></style>
<!--#include virtual="/server/po/fsf-html-style-sheet.translist" -->
<!--#include virtual="/server/banner.html" -->
<h2>The GNU/FSF Web Site Guidelines</h2>
-<p>These are style guidelines for writing web pages for the GNU server.</p>
-
-<p>The standards documented here are the default for the GNU
-project website. All pages should appear this way by
-default.</p>
+<p>These are style guidelines for writing web pages for the GNU server.
+The standards documented here are the default for the GNU
+Project website.</p>
<h3 id="CopyrightGuidelines">Copyright Guidelines</h3>
@@ -31,7 +32,7 @@
<li>
If ultimately we decide to post a new page we don't have permission to
-modify, put the text “Posted in 201X without FSF permission to
+modify, put the text “Posted in 20XX without FSF permission to
modify” inside an HTML comment, just after the copyright notice.
</li>
@@ -49,7 +50,8 @@
free</a>. So these pages must carry
a <a href="/licenses/license-recommendations.html">free
license</a>. If such a page doesn't have a free license, please report this
-problem to address@hidden</li>
+problem to <a
+href="mailto:address@hidden";><address@hidden></a>.</li>
<li>For other pages, use the same license as some other page that serves
a similar kind of purpose.</li>
@@ -77,14 +79,14 @@
<li>The GNU web server is interested first in content. Substance is
more important than style. The use of graphics should be minimized so
pages load fast over slow links. The GNU Project is for everyone, even
-those with slow Internet access or text-only browsers.</li>
+those with slow internet access or text-only browsers.</li>
<li>Offer a document in as many formats as the GNU Project has it.
For an example, see <a href="/licenses/fdl.html">The GNU Free
Documentation License</a>. This lets the user get the document in the
format most useful to him.</li>
-<li>Before you take any graphics or text from another Web site,
+<li>Before you take any graphics or text from another web site,
please ask for permission to use it. It's polite to do so. It is also
essential for us to avoid copyright infringement.</li>
@@ -108,10 +110,11 @@
<li>HTML on the GNU web server should be strictly compliant with
W3C standards.</li>
-<li>A boilerplate for web pages, especially project web pages, is provided:
+<li>A page template (or “boilerplate”) is provided for
+both the main part of the GNU website, and the software projects:
<a
href="http://web.cvs.savannah.gnu.org/viewvc/*checkout*/www/server/standards/boilerplate.html?root=www&content-type=text%2Fplain";>
-view source</a> (with server-side includes intact). Pages using the
-boilerplate must be valid XHTML.</li>
+view source</a> (with server-side includes intact). Templated pages
+must be valid XHTML.</li>
<li>Acronyms/abbreviations:
<ul>
@@ -176,25 +179,27 @@
end: <code> - GNU Project - Free Software Foundation</code>.</li>
<li>The <head> pair should have this line after the
-<title> pair:<br />
-<link rev="made" href="mailto:address@hidden"><br />
+<title> pair:
+<p class="emph-box">
+<code><link rev="made" href="mailto:address@hidden"></code></p>
Some browsers use this information to allow users to easily report
problems they find on a page.</li>
-<li>On pages with dated entries (e.g., Thank GNUs and
-GNU's Bulletins), the newer entries should be first (i.e., reverse
+
+<li>On pages with dated entries (e.g., /philosophy/latest-articles.html),
+the newer entries should be first (i.e., reverse
chronological order).</li>
<li>Cite people with e-mail addresses this way:
-<pre>
-<a href="http://www.stallman.org/">Richard Stallman</a>
+<p class="emph-box"><code>
+<a href="https://www.stallman.org/">Richard Stallman</a>
<a href="mailto:address@hidden">&lt;address@hidden&gt;</a>
-
-</pre>
+</code></p>
which browsers display this way:<br />
-<a href="http://www.stallman.org/";>Richard Stallman</a>
+<a href="https://www.stallman.org/";>Richard Stallman</a>
<a href="mailto:address@hidden";><address@hidden></a><br />
It is less confusing to the user, because it's clear what is a
-http: link to another web page and what is a mailto: anchor that
+<code>http(s):</code> link to another web page and what is a
+<code>mailto:</code> anchor that
will bring up a mail form to fill out and send, if this is
supported by the client. Also, if the user saves a copy of the
page, he will have a copy of the e-mail address he can use, without
@@ -202,12 +207,12 @@
page, leave the name unanchored.</li>
<li>Cite FTP locations of source code with the full URL of the
directory they are in:
-<pre>
-<a
href="http://ftp.gnu.org/gnu/foo">http://ftp.gnu.org/gnu/emacs</a>
-</pre>
+<p class="emph-box"><code>
+<a
href="https://ftp.gnu.org/gnu/foo">https://ftp.gnu.org/gnu/foo</a>
+</code></p>
which browsers display this way:<br />
<a href=
-"http://ftp.gnu.org/gnu/";>http://ftp.gnu.org/gnu/emacs</a><br />
+"https://ftp.gnu.org/gnu/";>https://ftp.gnu.org/gnu/foo</a><br />
We encourage FTP sites to use a directory for each package, and only put
one package's files in each directory, so that the users can see what
@@ -225,7 +230,7 @@
allow users to specify defaults for the color attributes, and the
user's choices could conflict with your choices, as your choices
override the user's choices. In the worse case, the foreground and
-background could end up the same. Please use a style sheet for
+background could end up the same. Please use a stylesheet for
this, and not HTML 3.2 (HTML 4 Transitional) deprecated
markup.</li>
@@ -251,10 +256,11 @@
from left to right, ignoring any tables that you make. If you use
tables, you should make an effort to make sure that reading a whole
page left to right doesn't confuse such software. Please follow the
-WAI compatibility guidelines to ensure that tables are properly
-marked for accessibility.</li>
+<a href="https://www.w3c.org/wai";>W3C web accessibility guidelines</a>
+to ensure that tables are properly marked for accessibility.</li>
-<li>SGML and XML are case sensitive. TITLE and title are not the
+<li>HTML is case-insensitive whereas XML and XHTML are
+case-sensitive. TITLE and title are not the
same thing in XHTML. (This means that text/html and
application/xhtml+xml are mutually exclusive, which also means that
strictly speaking XHTML and HTML are mutually exclusive.)</li>
@@ -284,10 +290,10 @@
file in the same directory. These relative links are to be
tolerated.</li>
-<li>To make it easier to edit many files at once in Emacs:
+<li>To make it easier to edit many files at once,
try and give each HTML file a unique name; the filename
<code>index.html</code> should only be used as a symbolic link, as
-explained next:</li>
+explained next.</li>
<li>Each directory in the web server tree should have an
symbolic link named <code>index.html</code> to the top-level HTML file
@@ -296,22 +302,21 @@
file to handle this.</li>
<li>Don't use just a directory name in a URL; always include the
-specific file name. E.g., use “/gnu/gnu-history.html” not just
-“/gnu/”. Never use “index.html” in a URL. Both of
these are kindnesses
-to the users, as browsers change the highlighting on a link if a user
-has already seen it. If the link is known by several different file
-names, the user will not get a highlighted link on the file names the
-user hasn't explicitly referenced. So the user goes to pages the user
-has already seen, which is irritating. Also, this helps mirroring.</li>
-
-<li id="NamingTranslations">If you translate your web pages in different
-languages, please use <code>article.html</code> name for the English
-files and <code>article.<var>LANG</var>.html</code> for the
-translations. <var>LANG</var> should contain two-letter language code
-from <a
-href="http://www.loc.gov/standards/iso639-2/php/code_list.php";>ISO
-639</a> and optional hyphen with two-letter country code given in ISO
-3166. For example, the German translation of <code>not-ipr.html</code>
+specific file name. E.g., use <code>/gnu/gnu-history.html</code> not just
+<code>/gnu/</code>. Never use <code>index.html</code> in a URL. Both of
+these are kindnesses to the user, as browsers change the highlighting on
+a link after it has been visited. If links to a given file use several
+different URLs, the URLs that haven't been explicitely referenced will
+not be highlighted as visited. So the user goes to pages he/she has
+already seen, which is irritating. Also, this helps mirroring.</li>
+
+<li id="NamingTranslations">If you translate your web page in different
+languages, please name the English file <code>ARTICLE.html</code>, and
+its translations <code>ARTICLE.LANG.html</code>. LANG should contain the
+two-letter language code from <a
+href="http://www.loc.gov/standards/iso639-2/php/code_list.php";>ISO 639</a>,
+and optionally an hyphen followed the two-letter country code given in
+ISO 3166. For example, the German translation of <code>not-ipr.html</code>
should be named <code>not-ipr.de.html</code>; the Brazilian Portuguese
translation should be named <code>not-ipr.pt-br.html</code>.</li>
</ul>
@@ -321,7 +326,7 @@
<ul>
<li>The use of graphics should be minimized, so pages load fast
over slow links, especially animations. The GNU Project is for
-everyone, even those with slow Internet access and/or text-only web
+everyone, even those with slow internet access and/or text-only web
browsers.</li>
<li>In the past, GIFs have had patent problems. However, now that
@@ -330,62 +335,81 @@
87a or 89a standard are acceptable. Please be wary of proprietary
applications that may include non-standard patented technologies (we'd
prefer you use free software applications when authoring for our
-websites). In general, PNG or JPEG format, are still safe, and are
+websites). In general, PNG or JPEG format are still safe, and are
probably better from a technical standpoint. For details regarding the
old GIF problem, see <a
href="/philosophy/gif.html">http://www.gnu.org/philosophy/gif.html</a>.
Other formats are also allowed, though JPEG is the one most widely
-recognized by Web browsers (be careful with JPEG 2000, as well as PNG
-alpha channels, as it includes features not fully supported by older
-browsers).</li>
+recognized by web browsers (avoid JPEG 2000, and be careful with PNG
+alpha channels; the former is not widely supported, and the latter are
+not fully supported by some older browsers).</li>
-<li>Before you take any graphics or text from another Web site,
+<li>Before you take any graphics or text from another web site,
please ask for permission to use it. It's polite to do so. It is
also essential for us to avoid copyright infringement.</li>
<li>Whenever you add an image to the main GNU web repository, please:
<ul>
-<li>install the image file in the <code>graphics/</code> subdirectory.</li>
-<li>create a new html web page in <code>graphics/</code></li>
+<li>install the image file in the <code>/graphics/</code> subdirectory.</li>
+<li>create a new web page in <code>/graphics/</code></li>
<li>add a link to it on the <a href="/graphics/graphics.html">GNU
-graphics</a> page. This is so it's easy for visitors to the site to
+graphics</a> page. Thus it's easy for visitors to the site to
find all the graphics on the site in one place.</li>
</ul>
</li>
-<li>Tag all images like this:<br />
-<a href="/graphics/agnuhead.html"><img src=
-"/graphics/gnu-head-sm.jpg" alt=
-" [Image of the Head of a GNU] " /></a><br />
+<li>Link all images to the relevant page in <code>/graphics/</code>,
+like this:
+<p><a href="/graphics/agnuhead.html"><img
+src="/graphics/gnu-head-sm.jpg" alt=" [Image of the Head of
+a GNU] " style="width: 8em" /></a></p>
This will allow the user to quickly go to a page related to the
picture if he or she is interested.</li>
-<li>Always have a textual alternative for in-line images:<br />
-<img src="/graphics/*.jpg" alt=" [Image of DESCRIPTIVE TEXT]
-">.<br />
-The FSF wants users who have text-only access to the Web to be
-treated as well as those who have both text and graphic
-access.<br />
-We add the spaces and square brackets to separate the DESCRIPTIVE
-TEXT from adjacent text, and help the user realize that this is a
-stand-in for a graphic.</li>
-
-<li>Use width and height attributes for fixed-width in-line images, but not in
-ISO HTML:<br />
-<img src="/graphics/*.jpg" alt=" [Image of DESCRIPTIVE TEXT] "
-width="999" height="666" />.<br />
-This improves the performance of, and display on, some
-browsers.</li>
+<li>Always have a textual alternative for in-line images; the FSF
+wants users who have text-only access to the web to be treated as well
+as those who have both text and graphic access. For instance:
+<p class="emph-box"><code><img src="/graphics/*.jpg"
+alt="&nbsp;[Image of DESCRIPTIVE TEXT]&nbsp;"></code></p>
+We add the nonbreaking spaces (&nbsp;) and square brackets to
+separate the DESCRIPTIVE TEXT from adjacent text, and help the user
+realize that this is a stand-in for an image. The point of using
+nonbreaking spaces rather than normal ones is to make sure they find
+their way to the translatable strings that are extracted by the
+POA4/Gettext tools.</li>
+
+<li>Make sure the image doesn't look too big or too small when
+displayed at its original size, using the browser's default font
+size.</li>
+
+<li>Adjust image width or height in a style attribute, using scalable
+units such as <code>em</code> or <code>%</code>; for instance:
+<p class="emph-box"><code><img src="/graphics/*.jpg"
+alt="&nbsp;[Image of DESCRIPTIVE TEXT]&nbsp;"
+style="width: 10em" /></code></p>
+This way, the page will look the same if the reader increases or
+decreases font size.</li>
+
+<li>If the width is 12em or more, and the page is using layout.css
+(the stylesheet for templated pages), you may find convenient to use
+one of the responsive <code>pict</code> classes that are defined in the
+IMAGES section of the stylesheet (you can adjust the width in a style
+attribute if none of the predefined ones fits your needs); for instance:
+<p class="emph-box"><code><div class="pict wide"
+style="width: 25em"><img src="/graphics/*.jpg"
+alt="&nbsp;[Image of DESCRIPTIVE TEXT]&nbsp;"
+/></div></code></p>
+Note that the div container is necessary because some browsers (e.g.,
+NetSurf) don't know how to apply <code>max-width</code> to images.</li>
+
+<li>If you are adding a floating image to a page that uses layout.css,
+you may want to use the <code>imgright</code> or <code>imgleft</code>
+class (defined in the IMAGES section of layout.css). This will ensure
+that the floating direction is reversed if the page is translated into
+an RTL language.</li>
-<li>We do not use backgrounds on our pages, as they make text
-significantly harder to read. Improving readability is also the
-reason we specify black text on a white background as the default
-on our pages.</li>
-
-<li>Sometimes it can be useful to add some HTML tags, for example
-with <span> and CSS, that gives a broader “white” area around
-a block of text. This can be used to draw more attention to one
-block in the text.</li>
+<li>We do not use backgrounds images on our pages, as they make text
+significantly harder to read.</li>
</ul>
<h3><a id="UsefulResources" name="UsefulResources">Useful Resources</a></h3>
@@ -472,7 +496,7 @@
<p class="unprintable">Updated:
<!-- timestamp start -->
-$Date: 2017/12/05 14:35:51 $
+$Date: 2017/12/07 12:08:18 $
<!-- timestamp end --></p>
</div>
</div>