{"id":26991,"date":"2016-12-19T03:01:12","date_gmt":"2016-12-18T17:01:12","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=26991"},"modified":"2016-12-19T05:03:39","modified_gmt":"2016-12-18T19:03:39","slug":"timezone-country-places-emoji-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/timezone-country-places-emoji-tutorial\/","title":{"rendered":"TimeZone Country Places Emoji Tutorial"},"content":{"rendered":"
\"TimeZone<\/a>

TimeZone Country Places Emoji Tutorial<\/p><\/div>\n

Maybe you’re like me, and prefer websites where there is lots of functionality, and whether you use it or not, is up to the individual user. We might be wrong about this, but this represents to us an idea in a webpage where you don’t think all users are looking for the bare minimum of what the webpage nominally does, but that for those users not interested in all the “bells and whistles” it is still fairly obvious where the main flow of “business logic” (in the webpage) goes. This is where, for us, we’ve been making more and more use of Emojis, and we do this for three main reasons …<\/p>\n

    \n
  1. Emojis can represent the “optional” (on top of the bare minimum) functionality of the webpage … and …<\/li>\n
  2. Emojis take up very little room in an “online” world with smaller and smaller screen size expectations … and …<\/li>\n
  3. Emojis look like fun, and can look like buttons (which users are used to as “action” items)<\/li>\n<\/ol>\n

    So what Emoji “buttons” did we add today, building on that work from yesterday with TimeZone Country Places CSS Tutorial<\/a>?<\/p>\n

      \n
    1. Video (camera) emoji 📹 next to Country and Place names to link the user to a YouTube<\/a> API for Iframe embedded videos<\/a> (like we talked about at YouTube API Start and Stop Primer Tutorial<\/a>) for the purposes of looking up general “where” content about these countries and places<\/li>\n
    2. An Alarm Clock emoji ⏰ signifies TimeZones that have a Daylight Saving Mode to link the user to further information about this<\/li>\n
    3. Time Clock emojis like 🕛 (which we found out about thanks to this link<\/a>)<\/li>\n<\/ol>\n

      Which leaves us looking at a TimeZone Places web application live run<\/a> with what we hope you agree is an improved functionality using PHP code tz_places.php<\/a> that changed for the purposes of Emoji “button” functionality, in this way<\/a>. As per usual, we hope you give it a go, as your trip planner, perhaps?!<\/p>\n

      \n

      Previous relevant TimeZone Country Places CSS Tutorial<\/a> is shown below.<\/p>\n

      \"TimeZone<\/a>

      TimeZone Country Places CSS Tutorial<\/p><\/div>\n

      Today we’ve started out on the first bits of CSS styling improvements to the web application at the heart of TimeZone Country Places Iintegration Tutorial<\/a> as shown below. But today, as well as …<\/p>\n

        \n
      1. CSS styling improvements …
        \n
        \n<style>
        \ntd { vertical-align: top; }
        \n.round, #isubmit {
        \n \/* Safari 3-4, iOS 1-3.2, Android 1.6- *\/
        \n -webkit-border-radius: 50%; <\/p>\n

        \/* Firefox 1-3.6 *\/
        \n -moz-border-radius: 50%; <\/p>\n

        \/* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ *\/
        \n border-radius: 50%;
        \n padding: 17px 17px 17px 17px;
        \n font-family: Tahoma;
        \n color: red;
        \n font-size: 32px;
        \n}
        \nselect { background-color:#f0f0f0; border: 2px solid lightblue; }
        \n.abut { background-color:#ffffff; border: 2px solid olive; padding 3px 3px 3px 3px; color: purple; }
        \n<\/style>
        \n<\/code>
        \nas well as “bugs” …<\/li>\n

      2. fix for Google Maps directions map URLs that occasionally get confused by using the TimeZone Continent\/Place<\/i> naming as the aid to construct the URL required rather than involving Country\/Place<\/i> where as you will recall we can derive the Country<\/i> name via our ISO two letter Country Code mappings … as exemplified by the bad Continent\/Place<\/i><\/a> URL compared to a good Country\/Place<\/i><\/a> URL version … as well as …<\/li>\n
      3. fix for “bug” where we had assumed all TimeZone names were of the form Continent\/Place<\/i> whereas you can also have, as in Argentinian TimeZones, those of the form Continent\/Country\/Place<\/i><\/li>\n<\/ol>\n

        Basically the CSS styling above is intended to emphasise the HTML input type=buttons that when clicked start up the “when” and “where” data hookups, which is the main purpose of the web application. Those buttons, as well as the “new iframe ‘parent'” HTML a<\/i> links that now look like buttons, get their increased emphasis via the use of a CSS(3) border-radius<\/i><\/a> property of 50% to form an ellipse as a background “shape” to the HTML element of interest, the idea for which we got from this great link<\/a>, thanks. To facilitate this styling we added into the HTML classnames for abut<\/i> and round<\/i> and one new ID isubmit<\/i> to help with this.<\/p>\n

        The last item in the list above, first discovered in unit testing of Argentinian TimeZone places<\/a> (it now works better than as shown), had implications not only for our …<\/p>\n