{"id":39765,"date":"2018-07-28T03:01:43","date_gmt":"2018-07-27T17:01:43","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=39765"},"modified":"2018-07-28T11:16:41","modified_gmt":"2018-07-28T01:16:41","slug":"header-and-content-hashtag-navigation-design-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/header-and-content-hashtag-navigation-design-primer-tutorial\/","title":{"rendered":"Header and Content Hashtag Navigation Design Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Header and Content Hashtag Navigation Design Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diffmore.jpg\" title=\"Header and Content Hashtag Navigation Design Primer Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Header and Content Hashtag Navigation Design Primer Tutorial<\/p><\/div>\n<p>Maybe <a target=_blank title='Location.hash information from w3schools' href='https:\/\/www.w3schools.com\/jsref\/prop_loc_hash.asp'>hashtag navigation<\/a> usage is a mystery to you?  Surely the navigation coming into a webpage should suffice, and any internal (to that webpage) navigation not be that useful?  Well, that&#8217;s true in a world where the webpage contents can be categorized as either &#8230;<\/p>\n<ul>\n<li>be so short it sits within the screensize of any known device &#8230; and\/or &#8230;<\/li>\n<li>be only of interest on devices whose screensize is big enough to contain the width and breadth of the content involved<\/li>\n<\/ul>\n<p> &#8230; but this, as all those avid &#8220;swipers&#8221; and &#8220;pinchers&#8221; out there know, is not much about reality.  Suppose your contents does not fit, then, the next best thing would be to see a &#8220;chapter&#8221; of content plus the heading of the next &#8220;above the fold&#8221;.  That is an improvement.  But an alternative to &#8220;dumbing down&#8221; content, perhaps to make it fit, is to use &#8220;hashtag navigation&#8221; ideas.<\/p>\n<p>We&#8217;re going to show a &#8220;long in the tooth&#8221; (can&#8217;t believe we didn&#8217;t see it before) application of &#8220;hashtag navigation&#8221; improvements to our &#8220;differences of code&#8221; PHP web application we use around here.  In its &#8220;component&#8221; design it has the simple setup of &#8230;<\/p>\n<ol>\n<li>HTML h1 element as &#8220;Latest File&#8221; heading<\/li>\n<li>HTML iframe element whose content is that &#8220;Latest File&#8221; content<\/li>\n<li>HTML h1 element as &#8220;Differences&#8221; heading<\/li>\n<li>HTML iframe element whose content is that &#8220;Differences&#8221; content<\/li>\n<li>HTML h1 element as &#8220;Older File&#8221; heading<\/li>\n<li>HTML iframe element whose content is that &#8220;Older File&#8221; content<\/li>\n<\/ol>\n<p> &#8230; which, unembellished (with &#8220;hashtag navigation&#8221; smarts) we&#8217;d never blinked an eye at because we&#8217;d mainly practically made use of it with a (MacBook Pro) laptop size screen where that &#8230;<\/p>\n<blockquote><p>\nnext best thing would be to see a &#8220;chapter&#8221; of content plus the heading of the next &#8220;above the fold&#8221;\n<\/p><\/blockquote>\n<p> &#8230; has been, mostly, the go.  The other day though, was out and about with the iPhone curious about some code, accessed this &#8220;differences report&#8221; web applications work, and found it &#8220;tiring&#8221; the thought of scrolling down to the Differences Content&#8221; I was after.  It lacked that &#8220;hashtag&#8221; navigation that could be useful, because the second &#8220;heading&#8221; (not &#8220;content&#8221;, as we&#8217;ll explain later) was not within view above the fold.  It&#8217;s not that hard a problem to fix via &#8230;<\/p>\n<ol>\n<li id=latest_file>HTML h1 element as &#8220;Latest File&#8221; heading &#8230;  id=latest_file &#8230; <a href=#differences title=Differences>Differences<\/a> below this &#8230; <\/li>\n<li>HTML iframe element whose content is that &#8220;Latest File&#8221; content<\/li>\n<li id=differences>HTML h1 element as &#8220;Differences&#8221; heading &#8230;  id=differences &#8230; <a href=#latest_file title=Latest>^<\/a> <a href=#older_file title=Older>v<\/a><\/li>\n<li>HTML iframe element whose content is that &#8220;Differences&#8221; content<\/li>\n<li id=older_file>HTML h1 element as &#8220;Older File&#8221; heading &#8230;  id=older_file &#8230; <a href=#differences title=Differences>Differences<\/a> just above &#8230; <\/li>\n<li>HTML iframe element whose content is that &#8220;Older File&#8221; content<\/li>\n<\/ol>\n<p> &#8230; which makes the functionality much more practically useful on mobile platforms.<\/p>\n<p>Why &#8220;hashtag navigate&#8221; to &#8220;headings&#8221; rather than &#8220;contents&#8221;?  It&#8217;s all about context.  We&#8217;re trying to save you from &#8220;swiping&#8221; or &#8220;pinching&#8221; too much here, and we need the context of the &#8220;heading&#8221; just above the &#8220;contents&#8221; all &#8220;above the fold&#8221; as the navigation scenario that we figure leads to less need to &#8220;swipe&#8221; and &#8220;pinch&#8221;.  It is a web browser &#8220;thang&#8221; that, except for the &#8220;end of webpage hitting end of screen&#8221; scenario, the webpage display off a &#8220;hashtag navigation&#8221; event will not allow for any &#8220;leeway&#8221; above the HTML element defined by the hashtag navigation definition element, so in our scenario should you &#8220;hashtag navigate&#8221; to the &#8220;Differences Content&#8221;, for instance, you will not see the &#8220;Differences Heading&#8221; just above this, unless you have to go to the effort to scroll up (ie. &#8220;swipe&#8221; a little bit) just above it (but it makes me tired just thinking about it &#8230; is it nap time yet?!).<\/p>\n<p>We hope you think so too?  If you desire to see the source code we&#8217;ve hidden up until now then take a skeg at <a target=_blank title='diff.php' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php--GETME'>diff.php<\/a> &#8230; and how we got there below (where the new hashtag navigation should help no matter what the HTML iframe height relative to content amount) or <a target=_blank title='New window' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php--GETME'>in a new window here<\/a> &#8230;<\/p>\n<p><iframe scrolling=\"yes\" style='width:100%;height:1350px;' title='diff.php' src='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php--GETME'><\/iframe><\/p>\n<p> &#8230; for your perusal, and we&#8217;ll show you this in action hosted within this blog posting&#8217;s HTML iframe below, for you to judge for yourself on whatever platform you are reading this blog posting.   And may your day be a happy one &#8230; two &#8230; three &#8230; etcetera etcetera etcetera.<\/p>\n<p><b><i>Did you know?<\/i><\/b><\/p>\n<p>To our mind, the ultimate use of hashtag navigation can occur in a single (huge) webpage (or PDF document, maybe) that consists of the contents of a book, fronted by a table of contents, whose links (presumably to &#8220;Chapters&#8221; or &#8220;Sections&#8221; or &#8220;Articles&#8221;) are almost exclusively &#8220;hashtag navigation&#8221; elements.  Wonder if that&#8217;s where the concept of &#8220;hashtag navigation&#8221; originated?<\/p>\n<p><b><i>Stop Press<\/i><\/b><\/p>\n<p>You may notice in the changed code links above, just now (8:30am AEST), we added a suffix to our hashtag IDs involving an &#8220;_&#8221; underscore character and a great big integer (derived from a PHP <a target=_blank title='PHP rand() call' href='http:\/\/php.net\/manual\/en\/function.rand.php'>rand()<\/a> call).   Well, if you look through blog postings involving diff.php&#8217;s <a target=_blank title='prediff.php blog postings' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/?s=prediff.php'>prediff.php<\/a> <a target=_blank title='Live run supervisor of differences reporter' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/prediff.php'>supervisor reporter of file difference<\/a> via since and before dates and file specification user entries, it nagged away at us overnight that for groups of difference reports the non-unique IDs of the diff.php old scenario before this Stop Press would have offered up &#8220;hampered&#8221; navigation only within the first such difference report &#8220;subset&#8221; but not others, while the introduction of this random uniquifier could get around this problem, in large part.<\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d39765' onclick='var dv=document.getElementById(\"d39765\"); dv.innerHTML = \"<iframe width=670 height=600 src=\" + \"\/\/www.rjmprogramming.com.au\/ITblog\/tag\/hashtag\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d39765' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Maybe hashtag navigation usage is a mystery to you? Surely the navigation coming into a webpage should suffice, and any internal (to that webpage) navigation not be that useful? Well, that&#8217;s true in a world where the webpage contents can &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/header-and-content-hashtag-navigation-design-primer-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,1,37],"tags":[51,257,2105,318,327,2229,557,1996,1807,830,932,997,1200,1319,2231,1350,1356],"class_list":["post-39765","post","type-post","status-publish","format-standard","hentry","category-elearning","category-uncategorised","category-tutorials","tag-above-the-fold","tag-content","tag-context","tag-design","tag-did-you-know","tag-hash","tag-hashtag","tag-header","tag-link","tag-navigation","tag-php","tag-programming","tag-stop-press","tag-tutorial","tag-uniquifier","tag-user-experience","tag-ux"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/39765"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=39765"}],"version-history":[{"count":21,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/39765\/revisions"}],"predecessor-version":[{"id":39793,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/39765\/revisions\/39793"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=39765"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=39765"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=39765"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}