{"id":13872,"date":"2015-04-02T05:04:12","date_gmt":"2015-04-01T18:04:12","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=13872"},"modified":"2019-12-07T07:47:02","modified_gmt":"2019-12-06T21:47:02","slug":"html-canvas-pros-and-cons-report-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/html-canvas-pros-and-cons-report-primer-tutorial\/","title":{"rendered":"HTML Canvas Pros and Cons Report Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/ProsAndCons\/More\/\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"HTML Canvas Pros and Cons Report Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/ProsAndCons\/More\/ProsAndCons_More.jpg\" title=\"HTML Canvas Pros and Cons Report Primer Tutorial\"    \/><\/a><p class=\"wp-caption-text\">HTML Canvas Pros and Cons Report Primer Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a target=_blank title='HTML Canvas Pros and Cons Game Primer Tutorial' href='#hcpacpt'>HTML Canvas Pros and Cons Game Primer Tutorial<\/a> as shown below, had lots of scope for improvement, but feel that it is a good idea, so let&#8217;s set out on that task.<\/p>\n<p>A Pros and Cons report, by the very nature of it, could be wordy, and it would be good to be able to have a wider left hand side <a target=_blank title='HTML Canvas element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ref_canvas.asp'>canvas<\/a> element.<\/p>\n<p>How do you do this when the right hand side form is so critical to the whole premise?  And I say to all you believers &#8230;<\/p>\n<blockquote><p>\n&#8230; let things float &#8230; <strike>man<\/strike> person &#8230;\n<\/p><\/blockquote>\n<p> &#8230; and so we do today as the default approach, though we let you go back to the older method should you prefer that &#8230; for a limited period &#8230; what &#8220;sale&#8221; doesn&#8217;t have a &#8220;limited period&#8221; after all?<\/p>\n<p>The CSS ideas revolve around similar ones which kept cropping up with our <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=overlay\" title='Overlay blog postings here'>&#8220;overlay&#8221;<\/a> series of blog posts, namely (to treat the form with styling such as) &#8230;<\/p>\n<ul>\n<li><a target=_blank title='CSS z-index information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/pr_pos_z-index.asp'>z-index<\/a><\/li>\n<li><a target=_blank title='CSS position:absolute information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/pr_class_position.asp'>position:absolute<\/a><\/li>\n<li><a target=_blank title='CSS opacity information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/css3_pr_opacity.asp'>opacity<\/a><\/li>\n<\/ul>\n<p>As we mentioned yesterday, the HTML <a target=_blank title='HTML Canvas element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ref_canvas.asp'>Canvas<\/a> element is great for many types of games especially where you draw your own graphics based on interaction from the user.<\/p>\n<p>Today we drop the Pros and Cons &#8220;game&#8221; nomenclature and call it for what it is, more, by referring to it as a &#8220;report&#8221;.  Perhaps it may suit you as a way to be more objective about your decision making.<\/p>\n<p>So the thoughts behind this version came from a topic of interest I&#8217;ve been looking into recently &#8230; the benefits and otherwise of Simple Carbohydrates versus Complex Carbohydrates, to your health and diet.  One inspirational website for the research was <a target=_blank title='Simple versus Complex Carbohydrates' href='https:\/\/trainelite.com\/simple-vs-complex-carbs\/'>here<\/a> &#8230; thanks.<\/p>\n<p>Continuing on with yesterday&#8217;s thinking, it occurred to me that there was enough complexity here to think about how to design a tool to help.  Have always thought the concept of an &#8220;issue&#8221;, or a set of &#8220;issues&#8221; to do with a &#8220;topic&#8221; sounds the go.  However, it occurs to me that this is not a great model without some mechanism for a user-defined &#8220;weighting&#8221; of the importance of any one &#8220;issue&#8221; to their thought patterns.  And so that&#8217;s what we have today &#8230; a &#8220;topic&#8221; with a set of &#8220;issues&#8221; that the user supplies with a &#8220;rating&#8221; that is positive for a Pro and negative for a Con, and finally that &#8220;issue&#8221; is given a user-defined &#8220;weight&#8221;, to add that personal touch possibility to the decision making process, but objective enough, in that the user will keep thinking of &#8220;issues&#8221;, methinks &#8230; &#8220;me hopes&#8221;.<\/p>\n<p>Here is the HTML programming source code for today&#8217;s tutorial you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/prosandcons.html-GETME\" title=\"prosandcons.html\">prosandcons.html<\/a> and it changed from yesterday as per <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/prosandcons.html-GETME\" title=\"prosandcons.html\">this link<\/a>.<\/p>\n<p>There is (unchanged) functionality in this game to email a snapshot of the game and the PHP programming source code that helps facilitate this functionality for today&#8217;s tutorial you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/prosandcons.php_GETME\" title=\"prosandcons.php\">prosandcons.php<\/a><\/p>\n<p>Our &#8220;Simple versus Complex Carbohydrates&#8221; topic personalized thinking came up with the email linking you to this <a target=_blank title='WordPress.com versus WordPress.org' href='http:\/\/www.rjmprogramming.com.au\/PHP\/prosandcons_2015_4_15_14_28.png'>Pros and Cons<\/a> report.<\/p>\n<p>Try a pros versus cons issue yourself, and email your opinions forward, as you wish with our live run <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/prosandcons.html\" title='Pros and Cons game'>here<\/a>.  Hope to &#8230; see &#8216;ya in a while Croc O. Dial.<\/p>\n<hr>\n<p id='hcpacpt'>Previous relevant <a target=_blank title='HTML Canvas Pros and Cons Game Primer Tutorial' href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=13846'>HTML Canvas Pros and Cons Game 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\/ProsAndCons\/\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"HTML Canvas Pros and Cons Game Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/ProsAndCons\/ProsAndConsZ.jpg\" title=\"HTML Canvas Pros and Cons Game Primer Tutorial\"    \/><\/a><p class=\"wp-caption-text\">HTML Canvas Pros and Cons Game Primer Tutorial<\/p><\/div>\n<p>The HTML <a target=_blank title='HTML Canvas element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ref_canvas.asp'>Canvas<\/a> element is great for many types of games especially where you draw your own graphics based on interaction from the user.<\/p>\n<p>Today you may consider our Pros and Cons &#8220;game&#8221; to be more of a &#8220;decision making tool&#8221; perhaps.  Perhaps it may suit you as a way to be more objective about your decision making.<\/p>\n<p>So the thoughts behind this first version came from a topic of interest I&#8217;ve been looking into recently &#8230; the benefits and otherwise of <a target=_blank href='http:\/\/www.wordpress.com' title='WordPress.com'>WordPress.com<\/a> blog websites versus <a target=_blank href='http:\/\/www.wordpress.org' title='WordPress.org'>WordPress.org<\/a> blog websites, as this blog is, by the way.  One inspirational website for the research was <a target=_blank title='WordPress.com versus WordPress.org' href='http:\/\/diythemes.com\/thesis\/rtfm\/differences-wordpress-com-org\/'>here<\/a> &#8230; thanks.<\/p>\n<p>It occurred to me that there was enough complexity here to think about how to design a tool to help.  Have always thought the concept of an &#8220;issue&#8221;, or a set of &#8220;issues&#8221; to do with a &#8220;topic&#8221; sounds the go.  However, it occurs to me that this is not a great model without some mechanism for a user-defined &#8220;weighting&#8221; of the importance of any one &#8220;issue&#8221; to their thought patterns.<\/p>\n<p>So that&#8217;s what we have today &#8230; a &#8220;topic&#8221; with a set of &#8220;issues&#8221; that the user supplies with a &#8220;rating&#8221; that is positive for a Pro and negative for a Con, and finally that &#8220;issue&#8221; is given a user-defined &#8220;weight&#8221;, to add that personal touch possibility to the decision making process, but objective enough, in that the user will keep thinking of &#8220;issues&#8221;, methinks &#8230; &#8220;me hopes&#8221;.<\/p>\n<p>Here is the HTML programming source code for today&#8217;s tutorial you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/prosandcons.html_GETME\" title=\"prosandcons.html\">prosandcons.html<\/a><\/p>\n<p>There is functionality in this game to email a snapshot of the game and the PHP programming source code that helps facilitate this functionality for today&#8217;s tutorial you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/prosandcons.php_GETME\" title=\"prosandcons.php\">prosandcons.php<\/a><\/p>\n<p>Our &#8220;WordPress.com versus WordPress.org&#8221; topic personalized thinking came up with the email linking you to this <a target=_blank title='WordPress.com versus WordPress.org' href='http:\/\/www.rjmprogramming.com.au\/PHP\/prosandcons_2015_3_20_9_0.png'>Pros and Cons<\/a> report.<\/p>\n<p>Try a pros versus cons issue yourself, and email your opinions forward, as you wish with our live run <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/prosandcons.html?nofloat=nofloat\" title='Pros and Cons game'>here<\/a>.  Hope to &#8230; see &#8216;ya later Alli Gator.<\/p>\n<p><b>Did you know?<\/b><\/p>\n<p>The fact that we felt like putting things so much in double quotes above is pretty much a <a target=_blank title='Lay down misere information from Wikipedia ... thanks' href='http:\/\/en.wikipedia.org\/wiki\/Mis\u00e8re'>&#8220;lay down misere&#8221;<\/a> indicator that this web application could well suit an (alternative) <a target=_blank title='OOP information from Wikipedia ... thanks' href='http:\/\/en.wikipedia.org\/wiki\/Object-oriented_programming'>Object Oriented<\/a> (ie. OOP) solution also, where the double quoted words could well be classes in your software design.  Even though the basis of this web application only needs the HTML (the PHP usage is a bit optional, but useful (because the server-side is needed to create the snapshot image file, on the server, later used as a link in the email)) you may wonder how OOP ideas relate to HTML, but OOP can very much play a part in the way you code your <a target=_blank title='Object Oriented JavaScript information' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Introduction_to_Object-Oriented_JavaScript'>JavaScript<\/a>, and in seeking out solutions here, you may even end up exploring <a target=_blank title='Ajax OOP information from Wikipedia ... thanks' href='http:\/\/en.wikipedia.org\/wiki\/AJAX.OOP'>Ajax<\/a> techniques.  The combination of JavaScript and Ajax can make your web application be, or at least feel, as if it is totally client-based.<\/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='#d13846' onclick='var dv=document.getElementById(\"d13846\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=canvas\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d13846' 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='#d13846' onclick='var dv=document.getElementById(\"d13872\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=Javascript\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d13872' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Yesterday&#8217;s HTML Canvas Pros and Cons Game Primer Tutorial as shown below, had lots of scope for improvement, but feel that it is a good idea, so let&#8217;s set out on that task. A Pros and Cons report, by the &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/html-canvas-pros-and-cons-report-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":[2,12,15,28,37],"tags":[184,186,213,281,297,309,476,477,576,578,590,652,876,894,932,997,1001,1161,1166,1167,1319,1411,1496],"class_list":["post-13872","post","type-post","status-publish","format-standard","hentry","category-ajax","category-elearning","category-games","category-oop","category-tutorials","tag-canvas","tag-carbohydrates","tag-clientserver","tag-css","tag-data-url","tag-decision-making","tag-game","tag-games-2","tag-html","tag-html5","tag-image","tag-javascript","tag-opacity","tag-overlay","tag-php","tag-programming","tag-pros-and-cons","tag-snapshot","tag-software-2","tag-software-design","tag-tutorial","tag-web-server","tag-z-index"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/13872"}],"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=13872"}],"version-history":[{"count":2,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/13872\/revisions"}],"predecessor-version":[{"id":47365,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/13872\/revisions\/47365"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=13872"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=13872"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=13872"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}