{"id":39901,"date":"2018-08-03T03:01:49","date_gmt":"2018-08-02T17:01:49","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=39901"},"modified":"2018-08-03T17:29:08","modified_gmt":"2018-08-03T07:29:08","slug":"header-and-content-details-navigation-design-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/header-and-content-details-navigation-design-primer-tutorial\/","title":{"rendered":"Header and Content Details 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\/prediff.php\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Header and Content Details Navigation Design Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/prediff_diff_details_summary.jpg\" title=\"Header and Content Details Navigation Design Primer Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Header and Content Details Navigation Design Primer Tutorial<\/p><\/div>\n<p>Have you ever heard of the theory regarding <a target=_blank title='Michelangelo information, thanks' href='https:\/\/www.pickthebrain.com\/blog\/5-must-read-success-lessons-from-michelangelo\/'>Michelangelo&#8217;s sculpting prowess<\/a> &#8230;<\/p>\n<blockquote cite='https:\/\/www.pickthebrain.com\/blog\/5-must-read-success-lessons-from-michelangelo\/'><p>\nMichelangelo said, \u201cEvery block of stone has a statue inside it, and it is the task of the sculptor to discover it.\u201d  Every person is like that block of stone, there\u2019s greatness inside, but it has to be carved out.  It has to be carved out through hard work; it has to be carved out by the individual who can perceive their own greatness.  To succeed, you must carve your greatness out of the block.\n<\/p><\/blockquote>\n<p>?  Has a feel of &#8220;lateral thinking&#8221; and &#8220;turning things on their head&#8221; to me, or could be because am writing this blog posting standing on my head <font size=2>&#8230; back down now<\/font> <font size=1>&#8230; funny, that?!<\/font><\/p>\n<p>The <a target=_blank title='HTML details tag information from w3schools' href='https:\/\/www.w3schools.com\/tags\/tag_details.asp'>details<\/a>\/summary element combination are <a target=_blank title='Reveal blog postings' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/reveal'>&#8220;reveal&#8221;<\/a> tools that can effectively &#8220;etch something out of something whole&#8221; to achieve an end.<\/p>\n<p>Were you here for the recent <a title='Header and Content Hashtag Navigation Design Primer Tutorial' href='#hchndpt'>Header and Content Hashtag Navigation Design Primer Tutorial<\/a>?  It was all about improvements to navigation regarding our difference reporting that had a methodology based around hashtag navigation.  &#8220;Hashtag navigation&#8221; we normally associate with content &#8220;as a whole&#8221;.  But what if that content can get to be separated and partially hidden and controlled and revealed again at will?  This effect can get you to the same end result of bringing content of interest up above the fold, and the &#8220;reveal&#8221; (star) mechanism we often turn to for such ideas are the HTML details and summary (combination) elements are again the &#8220;stars&#8221; with today&#8217;s &#8230;<\/p>\n<ul>\n<li>Difference Reports in Date Range of File Pairs Specification supervisor <a target=_blank title='diff.php' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/prediff.php------GETME'>prediff.php<\/a> <a target=_blank title='diff.php' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/prediff.php------GETME'>changed this way<\/a> &#8230; supervising &#8230;<\/li>\n<li>Single File Pair Difference Report PHP web application <a target=_blank title='diff.php' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php---GETME'>diff.php<\/a> <a target=_blank title='diff.php' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php---GETME'>changed this way<\/a><\/li>\n<\/ul>\n<p>We&#8217;ve been finding for the mobile platforms this <a target=_blank title='Reveal blog postings' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/reveal'>&#8220;reveal&#8221;<\/a> technique can, like hashtag navigation, help reduce the amount of swiping and pinching and scrolling required to view these difference reports.<\/p>\n<p>Will leave you with a feel for all this in action. You can see &#8220;differences to differences&#8221; changes, today, via the report <a style=\"word-wrap: break-word;\" href=\"HTTP:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/prediff.php?dpath=HTTP:\/\/www.rjmprogramming.com.au\/&#038;dfilespec=PHP\/Geographicals\/*.*GETME&#038;dmdates=2018-08-02&#038;dmdateb=2018-08-03\" target=\"_blank\">HTTP:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/prediff.php?dpath=HTTP:\/\/www.rjmprogramming.com.au\/&#038;dfilespec=PHP\/Geographicals\/*.*GETME&#038;dmdates=2018-08-02&#038;dmdateb=2018-08-03<\/a><\/p>\n<p><iframe scrolling=yes style=\"height: 1600px; width: 100%;\" src='\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/prediff.php?dpath=HTTP:\/\/www.rjmprogramming.com.au\/&#038;dfilespec=PHP\/Geographicals\/*.*GETME&#038;dmdates=2018-08-02&#038;dmdateb=2018-08-03' width=\"300\" height=\"150\"><\/iframe><\/p>\n<hr>\n<p id='hchndpt'>Previous relevant <a target=_blank title='Header and Content Hashtag Navigation Design Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/header-and-content-hashtag-navigation-design-primer-tutorial\/'>Header and Content Hashtag Navigation Design Primer Tutorial<\/a> is shown below.<\/p>\n<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<hr>\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='#d39901' onclick='var dv=document.getElementById(\"d39901\"); dv.innerHTML = \"<iframe width=670 height=600 src=\" + \"\/\/www.rjmprogramming.com.au\/ITblog\/tag\/reveal\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d39901' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Have you ever heard of the theory regarding Michelangelo&#8217;s sculpting prowess &#8230; Michelangelo said, \u201cEvery block of stone has a statue inside it, and it is the task of the sculptor to discover it.\u201d Every person is like that block &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/header-and-content-details-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,37],"tags":[2310,2139,557,2641,830,932,997,1054,1063,2311,1319],"class_list":["post-39901","post","type-post","status-publish","format-standard","hentry","category-elearning","category-tutorials","tag-details","tag-difference","tag-hashtag","tag-michelangelo","tag-navigation","tag-php","tag-programming","tag-report","tag-reveal","tag-summary","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/39901"}],"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=39901"}],"version-history":[{"count":8,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/39901\/revisions"}],"predecessor-version":[{"id":39918,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/39901\/revisions\/39918"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=39901"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=39901"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=39901"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}