Web Page Development

This post also appears on the Home page. October 8, 2021 Access Restored to Digital Art, Miscellaneous, and Photography Sidebar Links--Webpage. Much of my older content has been offline for quite some time due to the failure on my part to update security settings. I identified the issue by opening this page using the Firefox web browser without logging into my Google account. Clicking through the side bar links, it became apparent that something was wrong.

As I understand it, Google security upgrades were made to prevent exploitations and access to Google Drive account holder data (on my end) that was not meant to be shared. After updating the web page links to embedded content mentioned above, user access has been restored.

Again, I apologize for these oversights. Here's a similar access issue I discovered with my Food page a few months ago:

July 22, 2021 Access Restored to Tom's Food Archive 2019--2020. I apologize for an error made some time ago while transitioning to the New Google Sites webpage. I had overlooked setting permissions to allow viewers access to the archives linked at the top and bottom of this page. I am continuing to look for other glitches that may have been inadvertently missed. Thank you for viewing.

Originally posted to Home page--April 25, 2021. Website Conversion is Complete--new Google Sites. Transitioning to the new web page layout has gone smoothly thus far. I will gradually improve the overall appearance with a bit more experimentation and trial and error.

Navigational Note: If you're viewing this website on a web browser or mobile device -- tablet/cellphone, etc., that does not display the left sidebar, click/tap the triple horizontal lines (Show sidebar) in the top left corner next to T. Bolton Digital Art. In my case, with current web page settings and using a desktop Windows 10 computer, Google Chrome and Microsoft Edge browsers display the sidebar by default; however, the Mozilla Firefox browser does not unless Show side bar is clicked. My cell phone and tablet both require tapping Show sidebar as mentioned earlier.

This website has a lot to browse in the sidebar links. There are thousands of Images posted to the Digital Art and Photography sidebar links that will be enlarged in a separate window if clicked. For quick browsing, Digital Art and Photography are arranged in scrollable windows while others have been grouped in folders within the scrollable windows.

The Miscellaneous sidebar link contains a random collection of files I have accumulated over the years ranging from DIY projects to more artwork created with SketchUp, GIMP, PowerPoint, and PDF, etc. Other material has been formatted with Word, and Excel . The subject matter is too varied to try to list here. You're welcome to browse at your leisure.

Originally posted to Home page--April 24, 2021 Website Closure and Rebirth--Google Sites. The Classic Google Sites, upon which this website is built, is shutting down in a few months. Today, I will begin the conversion process using the new Google Sites platform. Hopefully, I will not have any significant downtime during the conversion.

I should be able to create links similar to those on the current site as well as to the older archives from years ago. Personally, some of this information is a historical record of what I've been doing with my life for the past half century or more and is worthy of sharing . I prefer not to have it disappear forever.

The New Google Sites version will be more streamlined. For example, the photo enlargement option is no longer implemented. It eliminates a lot of clicking by the website visitor. Instead, the photos can easily be resized by the website manager while they are being edited/resized in wysiwyg fashion. Pulling corner adjustment handles on inserted photos and new caption options are also straightforward.

I will try to apply a similar non-glare, off white on dark gray color scheme used in the Classic Google Sites which I believe is easier on the eyes. Navigation to other pages will continue to be done with the left sidebar.

You'll know when the transformation occurs. T. Bolton Digital Art will have a fresh new look!

June 6, 2020 HTML Box Example--JavaScript. Classic Google Sites provides an Insert > HTML Box option while in the Edit Mode. Here is an example containing the html code, a JS script, two JS functions with one containing button instructions for user interaction.

The following HTML and JavaScript code was typed in the HTML Box's Editor*:

<!DOCTYPE html>

<html>

<head>

<script>

//script in the head

function wackyFunction() {

document.getElementById("example").innerHTML = "You've altered the paragraph. You're very Brave.";

}

</script>

</head>

<body bgcolor="#FFBB15">

<center><h2>Scripting Example</h2>

<p id="example">Only the brave dare to alter this paragraph.</p>

<button type="button" onclick="wackyFunction()">Click Here--You'll only get 1 try!</button></center>

</body>

</html>

*Adapted from W3C Schools JS Tutorial -- Click link to view.

May 28, 2020 Learning JavaScript from Home--Update. I have now moved on to another method for self-instructed learning that I think better suits my needs.

This method uses a combination of three tools.

• 1. NotePad--in which I've edited and saved all of my previous coded projects as text files along with other examples and instructions.

  2. YouTube videos--that I watch in conjunction with what I'm presently attempting to learn.

  3. JSfiddle.net--is a website where javaScript code can be written or pasted and then executed/run. It will either be displayed in the console or in a window/canvas.

I open all three and arrange them in a split screen configuration with notePad in the back. It can be brought forward by clicking on a protruding edge near the bottom of the screen, for example, or use the use NotePad's quick launch task bar button and minimize to toggle back and forth using Wiindows 10. This makes each application easier to access.

Editing can either be done in NotePad or JSfiddle. I use NotePad text files for reference or for saving edited code from JSfiddle and the output displayed in its console. Things have begun to click again.

My desktop arrangement shown below is usually more overlapping with the active application enlarged while editing or viewing. The selected code highlighted in blue in NotePad was pasted into JSfiddle. Similarly, Code edited with JSfiddle and the console output can be pasted into NotePad, etc. Another option is to save the code on the website (account required). JSfiddle also provides separate HTML and CSS windows for editing scripts and Cascading Style Sheets.

There is no shortage of YouTube videos that provide javaScript instruction at my level. Pick and choose your instructor and topic. That is so cool !!!

The second screen shot shows another bit of code using Object Literal Notation and output with document.write. The video was useful because it explained exactly how to define object literals. I modified the output for this example. . . but don't believe all of my data entry info.

April 30, 2020 JavaScript--Book Shelf Tutorial Project. Learning a computer programming language is slow going, especially when you're as stubborn as I am and refuse to get help. After a month and a few days, I'm nearing the end of an online Introductory javaScript course. The project below was significantly more involved than the last few I completed, although they, too, were a struggle.

Five days later with my third attempt, I finally got all of the arrays and objects to output (see images below). However, my initial plan was to click on each book on the shelf to output the card catalog with its citation beneath. That did not happen. More advanced coding than I possessed was needed to accomplish this task. In its present state, the code is written to randomly select one of the cards for a book displayed on the shelf--but only after the program is restarted. Besides being the wrong way to display cards, there is a good chance that the same card will randomly appear--especially when only 3 or 4 books are on the shelf.

I have included 4 images of the index cards (card catalog) and a link to 220 lines of code in a text file. If you know javaScript, you'll probably recognize my errors and omissions.

Learning the javaScript language is very fun and challenging to work with while waiting for the Covid-19 Virus threat to lessen. The purpose of the project below was to apply arrays and objects. Object-Oriented Design is more complex and far more powerful than Applesoft Basic I dabbled with 30 years ago. I am now at a point in the course where constructors are used in place of object literals. With this transition, I hope to eventually master the use of dynamic prototypes, for example, that will further reduce code redundancy.

But, I must not get ahead of myself--just small baby steps at first. Accumulated knowledge and lots of practice are prerequisites for giant strides. Presently, it is embarrassing to have questions about javaScript and lack the ability to express them using correct terminology. Confusion and clarity of thought have always been competing forces in the learning process. Learning new things can be a humbling experience. We all need this from time to time.

Realistically, I may not have the aptitude or commitment to move forward into advanced concepts--After all, I'm not planning to make a career change at my age. (Recently my brother boasted that he has now lived in 10 decades, while I have lived in only 9.)

If anything else materializes in the future, however, I'll use this area for Show and Tell.

April 11, 2020 JavaScript in HTML Box--On This Web Page. The past few weeks have been an excellent time to practice writing JavaScript code. I've put a bit of it in an HTML Box that is part of the Classic Google Sites options. The background color was set with the html <body bgcolor="#FFFFB6"> instruction. The HTML Box dimensions are adjusted by changing Height and Width settings found beneath the html box during its editing phase--clicking on the "gear" reveals these options including a check box if you wish the window to be scrollable.

There isn't much application for this form as it exists below and could have easily been typed in the website's editor. However, by changing one number in the javascript code below from <11 to <301 or <501, for example, a much larger list could be created on screen. If it were made larger, either the scrollable box would need to be checked, or the HTML Box Height would require a larger value to accommodate the extra lines.

The code listed below can be copied and pasted into Notepad and saved as an HTML document. That is, replace Notepad's default filename .txt extension with .html. The saved file can then be opened with a browser by double clicking the file name or by dragging it to the opened web browser. If the file with a .txt extension is dragged to the browser, html will not "run." It will, instead, display the code.

The code that actually creates the list below has been typed (or pasted) inside the box while in the websites's edit mode. When saved, the window displays the list that you see here.

Modified for new Google Sites HTML box output

Image from Website's Edit Mode
"Gear" (top left corner) accesses Properties

The JavaScript code resides between the <script...> and </script> tags. Here's the code including its HTML wrapper:

<html>

<head>

<script type="text/javascript">

document.write("<b>Using while loops--v2 </b><br />");

var b = 1;

document.write(" My Big List!<br />");

while(b<11)

{

document.write(b + ". _______________" + "<br />");

b++;

}

document.write("<b>That's All Folks.</b>");

</script>

</head>

<body bgcolor="#FFFFB6">

</body>

</html>

February 01, 2020 Client side Image Map example--HTML. Image Maps may be considered "old school", but I still think they're pretty neat and will get the job done just like you want. The time consuming part is setting up map coordinates especially if the shape you are mapping is not a square or rectangle. Refer to the code I've posted in the working folder linked here. Along with the image map html file, there is an accompanying gif image,four small data files, and four published data files written in html. I literally used an image of a Map to make it easier to visualize. This post is for those of you who may have clicked on one while browsing, but never knew exactly how it worked

Once you have downloaded the folder containing the required files, you can make changes and publish your version that is explained later. It is self-contained in one folder or directory, hence, client side. Double Click or Drag the client side example file to your browser to open it. It can be modified to fit your personal needs. I edited it using Note Pad. Be sure you save your html files with an .htm extension. As it stands, all links work locally (from inside the folder moved to your computer).

The tricky part is to put the image map's modified code (instructions) inside an Html Box on your Classic Google Sites web page. It will require new links (urls) between the quotes. You will do this to make it functional on your Classic Google Sites website. Google docs will also publish your data files portion to Google Drive's web hosting services that I have utilized in this example..

But, before you can do all of that, you will need to create a folder in Google Drive and place your data files and your gif image in it. Your data files will need an overhaul of the return instruction below data which gives the user navigational instructions for getting back to the original map. During the html coding activity, I moved files in and out of Notepad as well as copied and pasted in the HTML Box using Classic Google Sites Edit feature.

And of course, change the data associated with your image map. Get the links for the data files containing Google's file id (url) using Google Docs and the Publish option. The link will now be coded for the Published Versions of each data file--not your original html data files that you code. Here is where you do lots of copying and pasting. The procedure for getting the file id and inserting it into the url is described below and has an excellent video with complete instructions (Direct Image Link from Google Drive).

If you/re new to this it may take some trial and error before all of your links are correct. But first, do some research on the internet with search statements such as: "how to link and open gif files saved on Google drive to your Classic Google Sites web page. Then look for a videos or tutorials that explain it. Secondly ask: "how to link and open html files save on Google Drive in your Classic Google Sites web page. Initially, my biggest stumbling block was not knowing what I should be searching for--i.e., lack of clarity in my search phrases. Based on what I found, here are some pointers:

• • 1. I've used a gif copy of the North Dakota map.jpg shown at the bottom of the page that was posted on July 2, 2019. With considerable effort, I was able to open and link the nd-map.gif image and data01--data04 files. The gif image was a bit more involved. The procedures for linking and opening it are explained very well on the short YouTube video that was uploaded by Google. A web search for a way to open the gif image in the html box below can be found at :Direct Image Link from Google Drive. The video explains how to copy the file id of the gif file (the longest part of the url between the two innermost diagonals) and paste it after this prefix: https://drive.google.com/uc?id=your file id is pasted here. Now replace my url placeholder nd-map.gif with the new url. Paste it between the quotation marks.

    2. The method for the four data files was easier. Each file needed to be opened with Google Docs found in your Google Drive. Before doing so, the four data files like the gif image must be shared with link access open to the public. Once in Google Docs, each of the data files is published to the web. A url containing for a data file will appear and that can be copied and pasted in the HTML Box below. (Not mine, but the one that you will create). I'm not sure if these features are available in New Google Sites that came out a year or two ago. By the way, the gif file doesn't need to be published--it's ready to go once it is moved into the folder or directory you're using.

    3. There will be 4 additional files in the working folder mentioned at the top. They are the published versions and can be easily updated with Google Docs. Just double click the published file (in the folder) to make changes. The file will automatically update. Saving is unnecessary and to leave, simply click on something else.

    4. Lastly, the Client side image map html file contained in the folder does not show the actual urls needed for the gif file or published htm files. Again, placeholders will be replaced by pasting in the required Google Drive urls. You can either do this in Notepad, for example, or or directly into an HTML box on your Google Sites page. There will be much longer file urls because Google assigns strings of letters, numbers, and punctuation, for the url comprised of the file id and other components.

The entire process is confusing at first, but once you see it all coming together, it isn't that difficult.

January 30, 2020 Browser Compatibility--Web Page Development.

Chess Board Coded with HTML & CSS--Revisited from September 1, 2018. The Chess Board below may not work with all browsers. Presently, it seems to display as it should with Chrome, Internet Explorer, and Firefox for Windows. Android Chrome browser on Samsung tablets and smart phones work as well.

When the chess board code was first posted in 2018, Firefox for Knoppix Linux version 8.2 displayed the chess board correctly. The Chromium Browser also bundled with the Knoppix download was unable to display it. The Weather App at the top of my Home page and Hit Counter at the bottom failed as well. I am not sure whether the Knoppix Chromium browser did not support it, or if I was missing essential Linux system files or extensions. I'll be looking for updates for the Knoppix free distribution in the near future.

The complete article posted in 2018 can be seen in the 2018 Archive linked at the top of my Home page. The archived files did not support the CSS format; therefore, I replaced it with a JPEG image. What may or may not be seen below, however, is derived from HTML Code and CSS Code that was added to this page by pasting it into an HTML Box. View code for the chess board by right clicking on the chessboard and selecting View page source. At the time of this post, line 725 is where all the chess board code resides;. Update: On my new Google Sites page it's line 69.

(Converted to new Google Sites 04-25-2021)

Lastly, free-standing versions of a chessboard and checkerboard can be viewed at the following links: ChessBoard v03 and CheckerBoard v03. Both are works in progress.

Website Reorganization--Updates were made on September 15 and 25, 2019 (see Home Page). Their purpose is to improve the browsing experience within a maze of unrelated topics.

Web Page Development contains a few of my recent projects (Internal, External, and In-line CSS Style Sheets) can be viewed at the following link: CSS Practice.

October 11, 2018 CSS and Javascript--Simplified Examples.

The scrolling text box below contains a brief list of css changes that were added to the html. HTML (Hypertext Markup Language) usage is reserved for/limited to text and basic elements--body, headings, paragraphs, lists, etc. Whereas formatting changes--colors, fonts, borders, alignment, margins, special effects, etc.--are in the domain of CSS (Cascading Style Sheets).

About this page. Google Sites which I'm using here provides an Insert HTML Box option. I have pasted code that was originally written with Note Pad. It was saved with an .htm extension. The ANSII standard was selected when saving in Note Pad; otherwise, the html file would not be recognized by web browsers.

When learning html, javascript or css, everyone needs to try out a few things along the way. Admittedly, this is not very fancy, but it's a start.

July 2, 2019 U.S Highways and Interstates in North Dakota--Travel.