www/server/staging/standards gnu-website-guidel...

[Lorenzo L. Ancora]

CVSROOT:        /web/www
Module name:    www
Changes by:     Lorenzo L. Ancora <lorenzoancora>       21/02/10 08:26:53

Modified files:
        server/staging/standards: gnu-website-guidelines.html 

Log message:
        ISO 639/3166,RFC6068,CSS3 RECs,WCAG F41,ANYBROWSER: overhaul; advanced 
tips

CVSWeb URLs:
http://web.cvs.savannah.gnu.org/viewcvs/www/server/staging/standards/gnu-website-guidelines.html?cvsroot=www&r1=1.6&r2=1.7

Patches:
Index: gnu-website-guidelines.html
===================================================================
RCS file: /web/www/www/server/staging/standards/gnu-website-guidelines.html,v
retrieving revision 1.6
retrieving revision 1.7
diff -u -b -r1.6 -r1.7
--- gnu-website-guidelines.html 8 Feb 2021 14:01:49 -0000       1.6
+++ gnu-website-guidelines.html 10 Feb 2021 13:26:50 -0000      1.7
@@ -162,12 +162,13 @@
 regards hyphenation and quotes, gnu.org adds its own rules for the sake of
 consistency:
   <ul>
-  <li>&ldquo;Nonfree&rdquo; is preferred over &ldquo;non-free&rdquo;;
-  likewise, &ldquo;noncommercial&rdquo; over &ldquo;non-commercial.&rdquo;</li>
+  <li>The term &ldquo;nonfree&rdquo; is preferred over &ldquo;non-free&rdquo;;
+  likewise, &ldquo;noncommercial&rdquo; over &ldquo;non-commercial&rdquo;.</li>
   <li>In ordinary text, HTML entities
-  &ldquo;&amp;ldquo;...&amp;rdquo;&rdquo; and
-  &ldquo;&amp;lsquo;...&amp;rsquo;&rdquo; are preferred over straight quotes
-  ("..." and '...'). This doesn't apply to script-generated documents.</li>
+  &ldquo;<code>&amp;ldquo;</code>&hellip;<code>&amp;rdquo;</code>&rdquo; and
+  &ldquo;<code>&amp;lsquo;</code>&hellip;<code>&amp;rsquo;</code>&rdquo;
+  are preferred over straight quotes ("..." and '...').
+  This doesn't apply to script-generated documents.</li>
   <li>Where they exist, the double spaces after sentence breaks should be
   preserved. They enable Emacs sentence commands to do the right thing.</li>
   </ul>
@@ -181,7 +182,7 @@
 
 <ul>
 <li>To make simultaneous edition of many files easier,
-try and give each HTML file a unique name; the filename
+try and give each HTML file a unique and descriptive name; the special filename
 <code>index.html</code> should only be used as a symbolic link, as
 explained next.</li>
 
@@ -193,11 +194,14 @@
 
 <li id="NamingTranslations">If you translate your web page in different
 languages, please name the English file <code><var>article</var>.html</code>, 
and
-its translations 
<code><var>article.lang</var>.html</code>&mdash;<code><var>lang</var></code> 
should contain the
-two-letter language code from <a
-href="https://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>
+its translations <code><var>article.lang</var>.html</code>&mdash;
+<code><var>lang</var></code> should contain a code from <a
+href="https://www.loc.gov/standards/iso639-2/php/code_list.php";
+rel="noopener">ISO 639-1</a>,
+and optionally an hyphen followed by the <i>Alpha-2</i> country code given in
+<a href="https://www.iso.org/obp/ui/#search/code/";
+rel="noopener">ISO 3166-1</a>.
+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>
@@ -210,14 +214,19 @@
 <li>Hand-written URLs that refer to other files on www.gnu.org should be
 absolute, starting from the root page.  That is, paths should start
 with <code>/</code> (e.g., <code>/gnu/about-gnu.html</code>; <em>not</em>
-<code>http://www.gnu.org/gnu/about-gnu.html</code>, and <em>not</em>
+<code>http://www.gnu.org/gnu/about-gnu.html</code> nor
+<code>https://gnu.org/gnu/about-gnu.html</code>, and <em>not</em>
 <code>about-gnu.html</code>).  This makes it easier to copy and paste
 links from other pages.  Besides, links like
 <code>http://www.gnu.org/</code> will be wrong when the visitor uses
 HTTPS.</li>
 
 <li>Check if the linked host supports HTTPS and always prefer HTTPS over HTTP
-when the former is supported and has a valid certificate.</li>
+when the former is supported and has a valid certificate (this is expressed by
+a locked/green lock on most web browsers).</li>
+
+<li>Protocol-relative URLs (e.g. <code>//www.example.org</code>) are not
+recommended when linking to 3rd-party domains.</li>
 
 <li>Collections of files produced automatically from Texinfo source
 contain links with relative file names.  They always refer to another
@@ -237,8 +246,10 @@
 <li>Be sure to omit the filename entirely when linking to an anchor in
 the same file and double-check that the anchor actually works.</li>
 
-<li>Consider others linking to your page when removing an anchor or
-<code>id</code> attribute from any header tag.</li>
+<li>Consider others linking to your page when removing an <code>id</code>
+attribute from any header tag (<code>&lt;h1 id="example"&gt;&hellip;</code>,
+<code>&lt;h2&hellip;</code>, <code>&lt;h3&hellip;</code>, &hellip;) or
+anchor (e.g. <code>&lt;a id="example"&gt;#example&lt;/a&gt;</code>).</li>
 
 <li>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
@@ -248,16 +259,19 @@
 location URLs do not need to be changed, on this and other sites, as new
 versions are released into that directory.</li>
 
-<li>Cite people with e-mail addresses this way:
+<li>Cite people with e-mail addresses using the
+<a href="https://tools.ietf.org/html/rfc6068"; rel="noopener">RFC6068</a> 
syntax:
 <p class="emph-box"><code>
 &lt;a href="https://www.stallman.org/"&gt;Richard Stallman&lt;/a&gt;
 &lt;a href="mailto:rms@gnu.org"&gt;&amp;lt;rms@gnu.org&amp;gt;&lt;/a&gt;
 </code></p>
-which browsers display this way:<br />
-<a href="https://www.stallman.org/";>Richard Stallman</a>
-<a href="mailto:rms@gnu.org";>&lt;rms@gnu.org&gt;</a><br />
+which browsers display this way:
+<p class="emph-box" style="background-color: inherit">
+  <a href="https://www.stallman.org/";>Richard Stallman</a>
+  <a href="mailto:rms@gnu.org";>&lt;rms@gnu.org&gt;</a>
+</p>
 It is less confusing to the user, because it's clear what is a
-<code>http(s):</code> link to another web page and what is a
+<code>https:</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 users save a copy of the page,
@@ -282,13 +296,14 @@
 
 
 <ul>
-<li>HTML 5 and CSS 3 are preferred over older (X)HTML and CSS standards.</li>
-
-<li>The subset of HTML used must be composed only by W3C Recommendations.</li>
+<li>HTML 5 and CSS3 are preferred over older (X)HTML and CSS standards.</li>
 
 <li>All markup on the GNU web server should be strictly compliant with
 <a href="https://www.w3.org/standards/";>W3C standards</a>.</li>
 
+<li>The subsets of HTML and CSS used must be composed only by official
+W3C Recommendations (RECs) and be supported by the most used web browsers.</li>
+
 <li>Please follow the above mentioned web standards strictly.  Don't
 neglect <a
 href="https://www.w3.org/TR/html401/struct/global.html#h-7.1";>required
@@ -501,10 +516,10 @@
 <li>Before you take an image from another website, please ask for
 permission to use it.</li>
 
-<li>Always have a textual alternative for in-line images, for people
-who have text-only access to the web.  For instance:
+<li>Always have a textual alternative for in-line images, to ensure
+indexability by search engines and accessibility.  For instance:
 <p class="emph-box"><code>&lt;img src="/graphics/*.jpg"
-alt="&amp;nbsp;[DESCRIPTIVE TEXT]&amp;nbsp;"&gt;</code></p>
+title="[BRIEF TEXT]" alt="&amp;nbsp;[DESCRIPTIVE 
TEXT]&amp;nbsp;"&gt;</code></p>
 We add the non-breaking spaces (&amp;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
@@ -520,9 +535,11 @@
 units such as <code>em</code> or <code>%</code>; for instance:
 <p class="emph-box"><code>&lt;img src="/graphics/*.jpg"
 alt="&amp;nbsp;[DESCRIPTIVE TEXT]&amp;nbsp;"
-style="width: 10em" /&gt;</code></p>
+style="width: 10em; height: auto;" width="77px" height="77px" /&gt;</code></p>
 This way, the page will look the same if the reader increases or
-decreases font size.</li>
+decreases font size.<br>Specifying both <code>width</code> and
+<code>height</code> will reserve the space required for the image during
+the page loading phase.</li>
 
 <li>If you are adding a small floating image to a page that uses
 <code>layout.css</code> (the stylesheet for <a
@@ -539,7 +556,7 @@
 attribute if none of the predefined ones fits your needs); for instance:
 
 <p class="emph-box"><code>&lt;div class="pict wide"
-style="width: 25em"&gt;&lt;img src="/graphics/*.jpg"
+style="width: 25em;"&gt;&lt;img src="/graphics/*.jpg"
 alt="&amp;nbsp;[DESCRIPTIVE TEXT]&amp;nbsp;"
 /&gt;&lt;/div&gt;</code></p>
 
@@ -553,17 +570,22 @@
 <p class="imgleft">
 <a href="/graphics/agnuhead.html"><img
    src="/graphics/gnu-head-sm.jpg"
-   alt="&nbsp;[Image of the Head of a GNU]&nbsp;"
-   style="width: 8em" />
+   title="Head of a GNU"
+   alt="&nbsp;[Black and white sketch of the Head of a GNU]&nbsp;"
+   style="width: 8em; height: auto"
+   width="129px" height="122px" />
 </a></p>
 
 <pre class="emph-box">
 &lt;p class="imgleft"&gt;
-&lt;a href="/graphics/agnuhead.html"&gt;
-&lt;img src="/graphics/gnu-head-sm.jpg"
-     alt="&nbsp;[Image of the Head of a GNU]&nbsp;"
-     style="width: 8em" /&gt;
-&lt;/a&gt;&lt;/p&gt;
+  &lt;a href="/graphics/agnuhead.html"&gt;
+    &lt;img src="/graphics/gnu-head-sm.jpg"
+          title="Head of a GNU"
+          alt="&nbsp;[Black and white sketch of the Head of a GNU]&nbsp;"
+          style="width: 8em; height: auto"
+          width="129px" height="122px" /&gt;
+  &lt;/a&gt;
+&lt;/p&gt;
 </pre>
 <div style="clear: both"></div>
 
@@ -737,7 +759,10 @@
 <ul>
 <li>
 Before the initial checkout, set the environment variable
-<code>CVS_RSH=ssh</code>.</li>
+<code>CVS_RSH=ssh</code>.<br>In alternative, on Debian-like systems you can
+replace <code>:ext:</code> with
+<a href="/software/trans-coord/manual/cvs/cvs.html#Connecting-with-rsh-or-ssh">
+  <code>:extssh:</code></a> in each command.</li>
 
 <li>
 <p>If you have write access to www, check out the main www repository
@@ -904,12 +929,13 @@
 redirection in some cases.  You can do this either in the top-level
 control file <code>.htaccess</code>, or by using something like this as the
 file to be redirected:</p>
-
 <p class="emph-box"><code>
 &lt;meta http-equiv="refresh" content="0;
   url=https://www.gnu.org/<var>target</var>"&gt;
 </code></p>
-
+However, the latter must be implemented so as
+<a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F41";
+rel="noopener">WCAG 2.1 F41</a> does not occur in any circumstance.
 
 <h4 id="scripts">Server-side scripts</h4>
 
@@ -935,10 +961,10 @@
     <li>We follow the guidelines of the <a
     href="https://www.anybrowser.org/campaign/"; rel="noopener"
     style="text-decoration: none;">
-      <img src="../graphics/icons/anybrowser.png" width="80px" height="1.2em"
-      title="Best Viewed on Any Browser"
+      <img src="../graphics/icons/anybrowser.png" width="96px" height="18px"
+      title="Visit the 'Best Viewed on Any Browser' campaign website"
       alt="Best Viewed on Any Browser"
-      style="vertical-align: middle; height: 1.2em; width: 6.4em" /></a>
+      style="vertical-align: middle" /></a>
       campaign.</li>
 
     <!-- Removed on 01/2021; superseded by HTML 5 (W3C Recommendation).
@@ -953,11 +979,17 @@
     href="https://www.w3.org/Provider/Style/Overview.html";>Style
     Guide</a>.</li>-->
 
-    <li>Use of <a href="https://w3.org/TR/2021/SPSD-html52-20210128/"; 
rel="noopener">HTML&nbsp;5.2</a>
-    allows for consistent backwards compatibility among web browsers.</li>
-
-    <li>Use of <a href="https://www.w3.org/TR/2018/REC-WCAG21-20180605/"; 
rel="noopener">WCAG&nbsp;2.1</a>
-    ensures accessibility for a wide range of people with disabilities.</li>
+    <li>Use of <a href="https://w3.org/TR/2021/SPSD-html52-20210128/";
+    rel="noopener">HTML&nbsp;5.2</a> allows for consistent backwards
+    compatibility among web browsers.</li>
+
+    <li>Use of <a href="https://www.w3.org/TR/2020/NOTE-css-2020-20201222/";
+    rel="noopener">CSS3 RECs</a> in place of WDs and CRs allows for stable
+    cross-browser styling.</li>
+
+    <li>Use of <a href="https://www.w3.org/TR/2018/REC-WCAG21-20180605/";
+    rel="noopener">WCAG&nbsp;2.1</a> ensures accessibility for a wide range of
+    people with disabilities.</li>
   </ul>
 </li>
 
@@ -1063,7 +1095,7 @@
 
 <p class="unprintable">Updated:
 <!-- timestamp start -->
-$Date: 2021/02/08 14:01:49 $
+$Date: 2021/02/10 13:26:50 $
 <!-- timestamp end --></p>
 </div>
 </div><!-- for class="inner", starts in the banner include -->