{"id":49145,"date":"2020-05-31T03:01:29","date_gmt":"2020-05-30T17:01:29","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=49145"},"modified":"2020-05-30T20:17:15","modified_gmt":"2020-05-30T10:17:15","slug":"colour-systems-inline-html-email-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/colour-systems-inline-html-email-tutorial\/","title":{"rendered":"Colour Systems Inline HTML Email Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/cmyk_rgb.html\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"Colour Systems Inline HTML Email Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/cmykrgb.jpg\" title=\"Colour Systems Inline HTML Email Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Colour Systems Inline HTML Email Tutorial<\/p><\/div>\n<p>In undertaking the makeover for the Colour Systems web application of <a title='Colour Systems Primer Tutorial' href='#cspt'>Colour Systems Primer Tutorial<\/a> we were integrating Inline HTML Email functionality via <a target=_blank title='Ajax information from Wikipedia ... thanks' href='http:\/\/en.wikipedia.org\/wiki\/Ajax_%28programming%29'>Ajax<\/a>\/<a target=_blank title='FormData object information' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/FormData'>FormData<\/a> techniques (entrenched as a favourite &#8220;midair&#8221; feeling email conduit approach) when we were surprised trying something that we did not expect to work.   We have intimated that as far as email clients go it is touch and go whether much HTML5 works nor CSS3 when you try to get something going, so when we tried integrating &#8230;<\/p>\n<ul>\n<li>inline HTML email &#8230; with &#8230;<\/li>\n<li>HTML input type=&#8221;color&#8221; as per &#8230;<br \/>\n<code><br \/>\n&lt;input onchange=\"findc(this.value);\" style='display:INLINE-BLOCK;' type=\"color\" name=\"cinput\" id=\"cinput\" value=\"#000000\"&gt;&lt;\/input&gt;<br \/>\n<\/code>\n<\/li>\n<\/ul>\n<p> &#8230; we were really expecting &#8220;tears before bedtime&#8221; rather than an approach using the HTML input type=&#8221;color&#8221; element above that really made it good at the emailee end, in particular, as we &#8230;<\/p>\n<ul>\n<li>have an emailer <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/cmyk_rgb.html\" title=\"Click picture\">start the ball rolling<\/a> (with <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/cmyk_rgb.html-GETME\" title=\"cmyk_rgb.html\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/cmyk_rgb.html-GETME\" title=\"cmyk_rgb.html\">cmyk_rgb.html<\/a>) at this link &#8230; then &#8230;<\/li>\n<li>set up a colour of interest via any of the following approaches &#8230;\n<ol>\n<li>fill out Red, Green, Blue &#8230; 0 to 255 &#8230; RGB Colour System numbers<\/li>\n<li>fill out Cyan, Magenta, Yellow, Key &#8230; 0.0000 to 1.0000 &#8230; CMYK Colour System numbers<\/li>\n<li>click our new HTML input type=&#8221;color&#8221; element and follow your nose<\/li>\n<\/ol>\n<\/li>\n<li>and then, optionally, collaborate (or just share) with an emailee (textbox) they fill out and press the &#8220;Email to &#8230;&#8221; button &#8230; setting off &#8230;<\/li>\n<li>Ajax\/FormData functionality sends off the document.body.innerHTML (heavily amended) HTML data directed via our Inline HTML Email &#8220;emailhtml.php&#8221; (usual PHP) helper &#8230;<\/li>\n<li>email arrives for the emailee who sees a lot of what the emailer last saw &#8230; and &#8230;\n<ol>\n<li>we highly recommend clicking our new HTML input type=&#8221;color&#8221; element, then follow your nose <font size=2>(picking a colour <\/font>, <font size=1>not your &#8230; ?<\/font><font size=2>)<\/font> then &#8230; click RGB to CMYK button<\/li>\n<li>fill out Red, Green, Blue &#8230; 0 to 255 &#8230; RGB Colour System numbers &#8230; click RGB to CMYK button<\/li>\n<li>fill out Cyan, Magenta, Yellow, Key &#8230; 0.0000 to 1.0000 &#8230; CMYK Colour System numbers &#8230; click CMYK to RGB button<\/li>\n<\/ol>\n<p> &#8230; optionally adjusting the return email (as the original emailer&#8217;s email address, more than likely) &#8230; back out to &#8220;the net&#8221; with &#8230;\n<\/li>\n<li>the emailee&#8217;s web browser arrives at <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/cmyk_rgb.html\" title=\"Click picture\">the same colour systems web application<\/a> ready to, optionally, send more collaboration or sharing back to the emailer, as required<\/li>\n<\/ul>\n<p>Colourful discussions can ensue!  And don&#8217;t we know, lots of people have opinions about <i>colour<\/i>, even its <i>spelling<\/i>!<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/colour-systems-inline-html-email-tutorial\/'>Colour Systems Inline HTML Email Tutorial<\/a>.<\/p-->\n<hr>\n<p id='cspt'>Previous relevant <a target=_blank title='Colour Systems Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/colour-systems-primer-tutorial\/'>Colour Systems 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\/HTMLCSS\/cmyk_rgb.html\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"Colour Systems Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/cmyk_rgb.jpg\" title=\"Colour Systems Primer Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Colour Systems Primer Tutorial<\/p><\/div>\n<p>We want to talk, today, about <a target=_blank title='Colour space information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Color_space'>Colour (Space) Systems<\/a>.  There are, at least &#8230;<\/p>\n<ul>\n<li>additive colour systems &#8230; used in science &#8230; often used to define  web colours &#8230; red, green and blue are the primary colours<\/li>\n<li>subtractive colour systems &#8230; used by artists (and often the way we learn colours in early school) &#8230; often used with regard to printing &#8230; red, yellow and blue are the primary colours<\/li>\n<li>the CMYK colour system &#8230; used by printing industry &#8230; cyan, magenta, yellow and black are the primary colours<\/li>\n<\/ul>\n<p>You can read more about the comparisons and a description of these three at <a target=_blank title='Colour Systems' href='http:\/\/www.colormatters.com\/color-and-design\/color-systems-rgb-and-cmyk'>Colour Systems &#8211; RGB and CYMK<\/a>.<\/p>\n<p>We&#8217;ve got a small HTML and Javascript conversion program we call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/cmyk_rgb.html_GETME\">cmyk_rgb.html<\/a> (and that you can use as a <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/cmyk_rgb.html\">live run<\/a>) which you can use today to convert a given colour to and from RGB and CYMK colour systems.<\/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='#d18532' onclick='var dv=document.getElementById(\"d18532\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/colour\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d18532' 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='#d49145' onclick='var dv=document.getElementById(\"d49145\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/email\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d49145' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>In undertaking the makeover for the Colour Systems web application of Colour Systems Primer Tutorial we were integrating Inline HTML Email functionality via Ajax\/FormData techniques (entrenched as a favourite &#8220;midair&#8221; feeling email conduit approach) when we were surprised trying something &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/colour-systems-inline-html-email-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,14,37],"tags":[69,1741,1604,224,380,381,3313,3314,2730,576,3127,609,614,652,997,1065,1133,1137,1319],"class_list":["post-49145","post","type-post","status-publish","format-standard","hentry","category-ajax","category-elearning","category-event-driven-programming","category-tutorials","tag-ajax","tag-cmyk","tag-collaboration","tag-colour","tag-email","tag-email-client","tag-emailee","tag-emailer","tag-formdata","tag-html","tag-html-email","tag-input","tag-integration","tag-javascript","tag-programming","tag-rgb","tag-share","tag-sharing","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/49145"}],"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=49145"}],"version-history":[{"count":7,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/49145\/revisions"}],"predecessor-version":[{"id":49152,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/49145\/revisions\/49152"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=49145"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=49145"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=49145"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}