{"id":48970,"date":"2020-05-10T03:01:04","date_gmt":"2020-05-09T17:01:04","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=48970"},"modified":"2020-05-09T17:35:05","modified_gmt":"2020-05-09T07:35:05","slug":"html-canvas-pros-and-cons-inline-html-email-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/html-canvas-pros-and-cons-inline-html-email-tutorial\/","title":{"rendered":"HTML Canvas Pros and Cons Inline HTML Email Tutorial"},"content":{"rendered":"
\"HTML<\/a>

HTML Canvas Pros and Cons Inline HTML Email Tutorial<\/p><\/div>\n

Keeping with the theme of HTML(5) canvas<\/a> elements lately, let’s revisit the “Pros and Cons” web application of HTML Canvas Pros and Cons Font Colours Tutorial<\/a>, because it is common for the “blank canvas” things of life to be the most intriguing and open to a lifetime of learning. The other feature of a “blank canvas” is that the user has scope to use their imagination more fully.<\/p>\n

Today’s improvements to “Pros and Cons” are both …<\/p>\n\n\n\n\n\n
Aesthetic<\/th>\n … as well as …<\/th>\nCollaboration Functional<\/th>\n<\/tr>\n
Font size tweaking (bigger)<\/td>\nInline HTML Email (new) button … uses …<\/td>\n<\/tr>\n
Use of shadowBlur<\/a> property gives 3D look<\/td>\nAjax<\/a> and FormData<\/a> objects … so that …<\/td>\n<\/tr>\n
Positional tweaking … allows for …<\/td>\nEmailee of Inline HTML Email “Pros and Cons” report can Save to Photos (at least on iPhone and iPad via two finger gesture option in iOS Mail app) … via …<\/td>\n<\/tr>\n<\/table>\n


\nfunction emailhtmlit() {
\n var pemail=prompt(\"Who do you want to email to? Comma separate a To emailee from optional From emailer.\", document.getElementById('mylemail').value);
\n if (pemail != null) {
\n if (pemail.replace(\"fill.in.email@address\", \"\").indexOf(\"@\") != -1) {
\n document.getElementById('mylemail').value=pemail;
\n var zhr = new XMLHttpRequest();
\n var zform=new FormData();
\n zform.append('inline', encodeURIComponent('<body><img src=\"' + document.getElementById('canvaselement').toDataURL() + '\"><\/img><\/body>'));
\n if (pemail.replace(\/\\;\/g,',').indexOf(',') != -1) {
\n zform.append('to', pemail.replace(\/\\;\/g,',').split(',')[0]);
\n zform.append('bcc', pemail.replace(\/\\;\/g,',').split(',')[1]);
\n zform.append('subj', 'My Pros and Cons ... ' + topic.split('<')[0].split(String.fromCharCode(10))[0] + ' from ' + pemail.replace(\/\\;\/g,',').split(',')[1]);
\n } else {
\n zform.append('to', pemail);
\n zform.append('subj', 'My Pros and Cons ... ' + topic.split('<')[0].split(String.fromCharCode(10))[0]);
\n }
\n zform.append('tdhuhta', encodeURIComponent('<body><img src=\"' + document.getElementById('canvaselement').toDataURL() + '\"><\/img><\/body>'));
\n zhr.open('post', '\/\/www.rjmprogramming.com.au\/HTMLCSS\/emailhtml.php', true);
\n zhr.send(zform);
\n }
\n }
\n}
\n<\/code><\/p>\n

… this Inline HTML Email technique (where emailee sees the report as soon as they open the email, at least for macOS and iOS Mail app email client applications) requiring no web server files hanging around bar mail server log files (that get recycled anyway).<\/p>\n

Please feel free to try the changed<\/a> prosandcons.html<\/a>‘s live run<\/a> link, to see this in action. Thanks to Soup Diet<\/a> webpage for the inspiration for “Pros and Cons” report featured in today’s tutorial picture<\/a>.<\/p>\n

\n

\n

Previous relevant HTML Canvas Pros and Cons Font Colours Tutorial<\/a> is shown below.<\/p>\n

\"HTML<\/a>

HTML Canvas Pros and Cons Font Colours Tutorial<\/p><\/div>\n

Yesterday’s HTML Canvas Pros and Cons Report Primer Tutorial<\/a> as shown below, was the start of our push for improvement, and today we continue with that task.<\/p>\n

We think the Pros and Cons report can benefit from user control over report colours for the circles and the text, as well as the size and font family of that text.<\/p>\n

Lots of people think better with colour coding. Think, on occasions, it certainly helps me, especially when skimming for information, it feels natural to skim effectively when colours guide your eyes in their task.<\/p>\n

The font size can certainly help in a similar way, and, with so much information passing our notice from the web font family styles are quietly conditioning<\/i> expectations about content.<\/p>\n

So today we critique the humorous “topic” of “Being Too Serious”. And why is that? Well, wanted to show you that I.T. classic font “Comic Sans MS”<\/a> and what I found to be a candidate for the most serious web font “Baskerville”<\/a>. Thanks to this link<\/a> for ideas.<\/p>\n

There is a serious message here though … just think Shakespeare and his “fools” … if you are serious with a Pros and Cons Report and you want to be taken seriously, words like “Too” in “Being Too Serious” show valued judgements even before you have started, and you can be accused of bias. The best way to utilize the “objective” qualities of a program recording your Pros and Cons, is to start out with a topic with no valued judgements in the wording of its topic … so “Being Very Serious” is better than “Being Too Serious” and perhaps “Being Serious” is better still, but not very attention grabbing.<\/p>\n

As with yesterday’s scenario, we continue to use the HTML Canvas<\/a> element, as a great tool for many types of games or other types of functionality, especially where you draw your own graphics based on interaction from the user.<\/p>\n

So what does today’s additional font and colours functionality need for its total implementation (reflected by these HTML source code changes<\/a> featuring huge use for the JavaScript eval<\/a> function)?<\/p>\n