Valid HTML5

Closes: #40 * add alt tags to images and some title attributes * tabindex attribute in <div> allowed since HTML5, thus we use HTML5 doctype preamble * Setting searchfield as second tabindex * language-chooser refactored. <div>/<ul> element not allowed inside <h1> * search-field surrounded by <p>; adjust margin in css * add meta fields
WNRI · Jul 25, 2012 · 50df650 · 50df650
1 parent a3a430d
commit 50df650
Show file tree

Hide file tree

Showing 10 changed files with 89 additions and 47 deletions.
diff --git a/django/templates/basemap.html b/django/templates/basemap.html
@@ -4,9 +4,12 @@
 
 {% url simplemap as base_url %}
 
-<html>
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" lang="{{LANGUAGE_CODE}}">
 <head>
-    <meta http-equiv="content-type" content="text/html; charset=utf-8">
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta name="description" lang="en" content="This map shows Waymarked Trails around the world based on data from OpenStreetMap." />
+    <meta name="keywords" lang="en" content="Waymarked Trails, OpenStreetMap, hiking, skating, cycling, mtb" />
     <link rel="shortcut icon" href="{{ MEDIA_URL }}/img/{{ iconimg }}" />
     <title>Waymarked Trails - {% trans maptopic %}</title>
 
@@ -16,7 +19,7 @@
 
     <!-- external libraries -->
     <!-- script src="OpenLayers/lib/Firebug/firebug.js"></script -->
-    <script src="{{ MEDIA_URL }}/js/OpenLayers-120628.js"></script>
+    <script type="text/javascript" src="{{ MEDIA_URL }}/js/OpenLayers-120628.js"></script>
     <!-- script src="http://www.openlayers.org/api/OpenLayers.js"></script -->
     <script type="text/javascript" src="{{ MEDIA_URL }}/js/jquery-1.6.4.min.js"></script>
 
@@ -36,17 +39,17 @@
         var routemap_mediaurl = '{{ MEDIA_URL }}';
     </script>
 
-    <script src="{{ MEDIA_URL }}/js/Map.js"></script>
-    <script src="{{ MEDIA_URL }}/js/Routes.js"></script>
-    <script src="{{ MEDIA_URL }}/js/Search.js"></script>
+    <script type="text/javascript" src="{{ MEDIA_URL }}/js/Map.js"></script>
+    <script type="text/javascript" src="{{ MEDIA_URL }}/js/Routes.js"></script>
+    <script type="text/javascript" src="{{ MEDIA_URL }}/js/Search.js"></script>
 </head>
 
 <body{% if LANGUAGE_BIDI %} dir="rtl"{% endif %} onload="initMap('{{ tileurl }}', false);">
 
     <div id="map" tabindex="0">{% trans "JavaScript needs to be activated to use this service." %}</div>
 
     <div id="map_header" class="header headline" style="background-image:url('{{ MEDIA_URL }}/img/{{ bgimage }}')">
-        <h1>Waymarked Trails: {% trans maptopic %} {% include "snippets/langchooser.html"%}</h1>
+        <h1>Waymarked Trails: {% trans maptopic %}</h1> {% include "snippets/langchooser.html"%}
     </div>
     <div id="map_subheader" class="subheader subheadline">
         {% trans "Last update" %}: {{updatetime}}
@@ -63,10 +66,10 @@ <h1>Waymarked Trails: {% trans maptopic %} {% include "snippets/langchooser.html
     </div>
 
     <div id="map_maplinks">
-      <a class="maplink" href="http://hiking.lonvia.de{{ base_url }}"><img src="{{ MEDIA_URL }}/img/map_hiking.png"></a>
-      <a class="maplink" href="http://cycling.lonvia.de{{ base_url }}"><img src="{{ MEDIA_URL }}/img/map_cycling.png"></a>
-      <a class="maplink" href="http://mtb.lonvia.de{{ base_url }}"><img src="{{ MEDIA_URL }}/img/map_mtb.png"></a>
-      <a class="maplink" href="http://skating.lonvia.de{{ base_url }}"><img src="{{ MEDIA_URL }}/img/map_skating.png"></a>
+      <a class="maplink" href="http://hiking.lonvia.de{{ base_url }}"><img src="{{ MEDIA_URL }}/img/map_hiking.png" alt="{% trans "Hiking" %}" title="{% trans "Hiking" %}" /></a>
+      <a class="maplink" href="http://cycling.lonvia.de{{ base_url }}"><img src="{{ MEDIA_URL }}/img/map_cycling.png" alt="{% trans "Cycling" %}" title="{% trans "Cycling" %}" /></a>
+      <a class="maplink" href="http://mtb.lonvia.de{{ base_url }}"><img src="{{ MEDIA_URL }}/img/map_mtb.png" alt="{% trans "MTB" %}" title="{% trans "MTB" %}" /></a>
+      <a class="maplink" href="http://skating.lonvia.de{{ base_url }}"><img src="{{ MEDIA_URL }}/img/map_skating.png" alt="{% trans "Inline Skating" %}" title="{% trans "Inline Skating" %}" /></a>
     </div>
 
     {% include "snippets/mapswitcher.html" %}

diff --git a/django/templates/docpage.html b/django/templates/docpage.html
@@ -1,24 +1,27 @@
 {% load i18n %}
 {% load markup %}
 
-<html>
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" lang="{{LANGUAGE_CODE}}">
 <head>
     <meta http-equiv="content-type" content="text/html; charset=utf-8">
+    <meta name="description" lang="en" content="This map shows Waymarked Trails around the world based on data from OpenStreetMap." />
+    <meta name="keywords" lang="en" content="Waymarked Trails, OpenStreetMap, hiking, skating, cycling, mtb" />
     <link rel="shortcut icon" href="{{ MEDIA_URL }}/img/{{ iconimg }}" />
     <title>{{title}} - WT {% trans maptopic %} - Map of Waymarked Trails</title>
 
 	<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}/css/baselayout.css">
 	<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}/css/standard.css">
 	<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}/css/rest.css">
 	<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}/css/{{ cssfile }}">
+    <script type="text/javascript" src="{{ MEDIA_URL }}/js/jquery-1.6.4.min.js"></script>
 </head>
 
-    <script type="text/javascript" src="{{ MEDIA_URL }}/js/jquery-1.6.4.min.js"></script>
 
 <body{% if LANGUAGE_BIDI %} dir="rtl"{% endif %}>
 
     <div id="header" class="header headline" style="background-image:url('{{ MEDIA_URL }}/img/{{ bgimage }}')">
-        <h1>Waymarked Trails: {% trans maptopic %} {% include "snippets/langchooser.html"%}</h1>
+        <h1>Waymarked Trails: {% trans maptopic %}</h1> {% include "snippets/langchooser.html"%}
     </div>
     <div id="subheader" class="subheader subheadline">
         <a class="menu" href="{% url simplemap %}">{% trans "Back to map" %}</a>

diff --git a/django/templates/m_basemap.html b/django/templates/m_basemap.html
@@ -4,10 +4,13 @@
 
 {% url simplemap as base_url %}
 
-<html>
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" lang="{{LANGUAGE_CODE}}">
 <head>
-    <meta http-equiv="content-type" content="text/html; charset=utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta name="description" lang="en" content="This map shows Waymarked Trails around the world based on data from OpenStreetMap." />
+    <meta name="keywords" lang="en" content="Waymarked Trails, OpenStreetMap, hiking, skating, cycling, mtb" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
     <link rel="shortcut icon" href="{{ MEDIA_URL }}/img/{{ iconimg }}" />
     <title>Waymarked Trails - {% trans maptopic %}</title>
 
@@ -17,7 +20,7 @@
 
     <!-- external libraries -->
     <!-- script src="OpenLayers/lib/Firebug/firebug.js"></script -->
-    <script src="{{ MEDIA_URL }}/js/OpenLayers-120628.js"></script>
+    <script type="text/javascript" src="{{ MEDIA_URL }}/js/OpenLayers-120628.js"></script>
     <!-- script src="http://www.openlayers.org/api/OpenLayers.js"></script -->
     <link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}/js/theme/default/style.mobile.css" />
     <script type="text/javascript" src="{{ MEDIA_URL }}/js/jquery-1.6.4.min.js"></script>
@@ -38,9 +41,9 @@
         var routemap_mediaurl = '{{ MEDIA_URL }}';
     </script>
 
-    <script src="{{ MEDIA_URL }}/js/Map.js"></script>
-    <script src="{{ MEDIA_URL }}/js/Routes.js"></script>
-    <script src="{{ MEDIA_URL }}/js/Search.js"></script>
+    <script type="text/javascript" src="{{ MEDIA_URL }}/js/Map.js"></script>
+    <script type="text/javascript" src="{{ MEDIA_URL }}/js/Routes.js"></script>
+    <script type="text/javascript" src="{{ MEDIA_URL }}/js/Search.js"></script>
 </head>
 
 <body id="world" onload="initMap('{{ tileurl }}', true);">
@@ -54,7 +57,7 @@ <h1>Waymarked Trails: {% trans maptopic %}</h1>
       <a href="{% url helppage 'about' %}">{% trans "About this map" %}</a>
       <div class="absright">
         {% trans "Last update" %}: {{updatetime|date:"SHORT_DATETIME_FORMAT"}}
-     </div>
+      </div>
     </div>    
 
     <div id="map_footer" class="header footline">

diff --git a/django/templates/snippets/langchooser.html b/django/templates/snippets/langchooser.html
@@ -4,10 +4,11 @@
 
 {% endcomment %}
 {% load localeurl_tags %}
+{% load i18n %}
 
-<span id="langchooser" class="dropdown header">
+<div id="langchooser" class="dropdown header">
 <span class="ddtitle" onclick="$('#langchooser ul').toggle();">{{LANGUAGE_CODE|upper}}
-  {% if not ismobile %}<img src="{{ MEDIA_URL }}/img/tango-flags.png" />{% endif %}
+  {% if not ismobile %}<img src="{{ MEDIA_URL }}/img/tango-flags.png" alt="{% trans 'Language Flag' %}" title="{% trans 'Choose language...' %}"/>{% endif %}
 </span>
 <ul>
 {% for lang in LANGUAGES %}
@@ -18,5 +19,5 @@
     {% endifequal %}
 {% endfor %}
 </ul>
-</span>
+</div>
 
diff --git a/django/templates/snippets/mapswitcher.html b/django/templates/snippets/mapswitcher.html
@@ -7,16 +7,15 @@
 {% load i18n %}
 
 <div id="mapSwitcher">
-  <a id="switcherSelector" class="mapSwitch" href="javascript:toggleMapSwitch()"><img src="{{ MEDIA_URL }}/js/img/layer-switcher-maximize.png"></a>
+  <a id="switcherSelector" class="mapSwitch" href="javascript:toggleMapSwitch()"><img src="{{ MEDIA_URL }}/js/img/layer-switcher-maximize.png" alt="+" /></a>
   <div id="switcherWindow" class="mapSwitch invisible">
-   <a id="switcherClose" href="javascript:toggleMapSwitch()"><img src="{{ MEDIA_URL }}/js/img/layer-switcher-minimize.png"></a>
-     <p>{% trans "Base map" %}<br></p>
-     <div id="basebg" class="sliderbg"><img class="sliderbgimg" src="{{ MEDIA_URL }}/img/bg-fader.gif"><div id="basethumb"><img src="{{ MEDIA_URL }}/img/thumb-n.gif"></div></div>
-     <p>{% trans "Route layer" %}<br></p>
-     <div id="routebg" class="sliderbg"><img class="sliderbgimg" src="{{ MEDIA_URL }}/img/bg-fader.gif"><div id="routethumb"><img src="{{ MEDIA_URL }}/img/thumb-n.gif"></div></div>
-     <p>{% trans "Hill shading" %}<br></p>
-     <div id="hillbg" class="sliderbg"><img class="sliderbgimg" src="{{ MEDIA_URL }}/img/bg-fader.gif"><div id="hillthumb"><img src="{{ MEDIA_URL }}/img/thumb-n.gif"></div></div>
-   </div>
+    <a id="switcherClose" href="javascript:toggleMapSwitch()"><img src="{{ MEDIA_URL }}/js/img/layer-switcher-minimize.png" alt="-" /></a>
+    <p>{% trans "Base map" %}<br /></p>
+    <div id="basebg" class="sliderbg"><img class="sliderbgimg" src="{{ MEDIA_URL }}/img/bg-fader.gif" alt="" /><div id="basethumb"><img src="{{ MEDIA_URL }}/img/thumb-n.gif" alt="|" /></div></div>
+    <p>{% trans "Route layer" %}<br /></p>
+    <div id="routebg" class="sliderbg"><img class="sliderbgimg" src="{{ MEDIA_URL }}/img/bg-fader.gif" alt="" /><div id="routethumb"><img src="{{ MEDIA_URL }}/img/thumb-n.gif" alt="|" /></div></div>
+    <p>{% trans "Hill shading" %}<br /></p>
+    <div id="hillbg" class="sliderbg"><img class="sliderbgimg" src="{{ MEDIA_URL }}/img/bg-fader.gif" alt="" /><div id="hillthumb"><img src="{{ MEDIA_URL }}/img/thumb-n.gif" alt="|" /></div></div>
   </div>
 </div>
 

diff --git a/django/templates/snippets/searchbox.html b/django/templates/snippets/searchbox.html
@@ -1,7 +1,9 @@
 {% load i18n %}
 
-<form accept-charset="UTF-8" action="" onsubmit="return searchTerm(this.searchterm.value)">
-        {% trans "Search" %}:
-        <input type="text" size="30" name="searchterm">
-        <input type="submit" name="searchok" value="{% trans "Go" %}">
+<form id="searchform" accept-charset="UTF-8" action="#" onsubmit="return searchTerm(this.searchterm.value)">
+    <p>
+        <label for="searchterminput">{% trans "Search" %}:</label>
+        <input type="text" size="30" name="searchterm" id="searchterminput" tabindex="1" />
+        <input type="submit" name="searchok" value="{% trans "Go" %}" />
+    </p>
 </form>
diff --git a/django/templates/snippets/sidebar.html b/django/templates/snippets/sidebar.html
@@ -6,11 +6,11 @@
 
 {% load i18n %}
 
-<a id="routeselector" class="sidebarsel" href="javascript:openRouteView()">
-    {% trans "Routes" %}</a>
+<div id="routeselector"><a class="sidebarsel" href="javascript:openRouteView()">
+    {% trans "Routes" %}</a></div>
 
 <div class="sidebar invisible">
-  <a id="sbclose{% if LANGUAGE_BIDI %}_rtl{% endif %}" href="javascript:closeSidebar()"><img src="{{ MEDIA_URL }}/img/close.png"></a>
+  <a id="sbclose{% if LANGUAGE_BIDI %}_rtl{% endif %}" href="javascript:closeSidebar()"><img src="{{ MEDIA_URL }}/img/close.png" alt="X" /></a>
 
   <div id="routeview" class="sbcontent">
     {% comment %}Translators: Beware of doing a direct translation of 'Loading'. In many languages there are many much better alternatives, just think about synonyms such as 'fetching' and 'getting'.{% endcomment %}

diff --git a/static/css/baselayout.css b/static/css/baselayout.css
@@ -59,13 +59,16 @@ a:hover {
     padding: 0px
 }
 
+/* languagechooser right of h1 */
 .headline h1 {
     font-size: 30px;
     font-weight: bold;
     margin-top: 0;
     margin-bottom: 0;
     margin-left: 5px;
-    padding-top: 5px;
+    margin-right: 10px;
+    padding-top: 7px;
+    float: left;
     direction: ltr
 }
 
@@ -83,6 +86,10 @@ a:hover {
     text-indent: 3px
 }
 
+#map_header, #header {
+    direction: ltr;
+}
+
 /***** General Footer *****/
 
 .footline {
@@ -102,12 +109,18 @@ a:hover {
 
 /********************** Hovering Drop-Down Box ***********************/
 
+#langchooser {
+    display : inline;
+}
+
 .dropdown {
     position: relative;
+    top: 5px;
     margin: 0px;
     padding: 0px;
     vertical-align: super;
-    font-size: 0.4em;
+    font-size: 12px;
+    font-weight: bold;
     z-index: 10
 
 }
@@ -258,7 +271,11 @@ a:hover {
     font-size: 1.1em;
     font-weight: bold;
     font-variant: small-caps;
-    color: #000              
+    color: #000
+}
+
+#routeselector a{
+    color: #000
 }
 
 /* route list */

diff --git a/static/css/map.css b/static/css/map.css
@@ -10,7 +10,6 @@ body {
     right: 4px
 }
 
-
 /******************************    Map    *************************/
 
 /* adapt the controls */
@@ -84,4 +83,7 @@ body {
     text-indent: 3px
 }
 
-
+#map_footer #searchform p {
+    margin: 0;
+    padding: 0;
+}
diff --git a/static/css/map_mobile.css b/static/css/map_mobile.css
@@ -7,6 +7,7 @@
 
 #map_header h1 {
     font-size: 15px;
+    padding-top: 2px;
 }
 
 
@@ -68,7 +69,7 @@
 
 #langchooser {
     position : absolute;
-    top : 2px;
+    top : 0px;
     right : 2px;
 }
 
@@ -79,6 +80,7 @@
 
 .dropdown {
     font-size: 0.8em;
+    top: 0;
 }
 
 /***************************   Footer   ******************************/
@@ -90,4 +92,14 @@
     text-indent: 3px
 }
 
+#map_footer #searchform p {
+    margin: 0;
+    padding: 0;
+}
+
+#map_footer #searchform p input{
+    font-size: 7px;
+    border: 0;
+}
+