Site History
Notice:
This page is no longer being updated. Future technical descriptions of changes on this site will be posted on the public blog.
Versions of this Site
Version 1.0 (original HTML site)
Version 2.0 (original Flash site)
Version 3.0 (updated HTML site)
Version 4.0 (old Flash site - not accessible)
Version 5.0 (current HTML site with responsive styles)
Updates 2010 - 2012
1) Jul 2/2010 - Uploaded Version 1.0 -- original 3 page Dreamweaver site from February 2010. Links worked.
2) Jul 5/2010 - Began work on Version 3.0. Added div tags to index.html file to allow for centering of text and wrapper. Added link buttons as well.
3) Jul 6/2010 - Added background images to div tags. Used emboss for chop.
4) Jul 7/2010 - Completed title header.
5) Jul 8/2010 - Completed formatting of all associated pages. Also added an Ancient Greek Translation page with Spry tooltips.
6) Jul 11/2010 - Added an Ancient Greek reading page with working Flash audio.
7) Jul 12/2010 - Unsuccessfully attempted to fix Moire pattern on shirt in one picture with Photoshop. Unsuccessfully attempted to record my own reading of an Ancient Greek passage (because the test passage I'm currently using is a violation of copyright). Result contained a lot of background noise.
[Update: I later learned that the pattern on the shirt was due to JPG compression artifacts and not a Moire pattern. As for my own reading of the Ancient Greek passage, this was done a month later on a hand-held digital recorder, then uploaded to computer via USB.]
8) Jul 13/2010 - Rasterized Ancient Greek text so it would be readable by computers without Ancient Greek fonts. For Ancient Greek Translation page, used Photoshop to fix captions in some of the tooltip illustrations (ie: changed "Byzantion" to "Byzantium"). Altered some of the formatting on this page as well.
9) Jul 14/2010 - Downloaded a faux-Greek font ("Grecian Empire") for the headers of the Greek translation pages. Formated footer. Version 3.0 complete.
10) Jul 15/2010 - Uploaded Version 2.0 -- original Flash site from May 2010.
11) Added buttons to Versions 1.0 & 2.0 so user could return to Site History page.
12) Jul 29/2010 - Uploaded Version 4.0 - Flash version with closeable pop-up windows and working hidden buttons on the Greek translation pages. The latter also have working image link icons (derived from the Photoshop brushes "Ancient Greek Motifs"), and Photoshop-created background parchment. Due to readability concerns, I only did an image displacement map of one of these.
A few links were not working properly, and there were a few minor formatting issues with centering. Two HTML pages were carried over from Version 3.0 -- the Site History page & the Introduction to Translation 1A.
13) Jul 30/2010 - Links to the Night Class page were fixed on the 3 pages where they were a problem. Used CSS to format centering & add a yellow ridge border where appropriate. Adjusted margins to zero and increased the window width by 10 px on the pop-up windows. Also adjusted the pop-up position so it was horizontally centered (on my monitor, at least).
Tried to embed ancient Greek characters in Flash, but was unsuccessful.
[Update: see item 44 below]
14) Jul 31/2010 - Created smaller SWF files composed of parts of the originals (ie: separate SWFs for title, navbar, background & one flying lantern. Created an additional SWF file for the subheading for the Translation 1A page. Then brought these together in Dreamweaver & added HTML text. The Translation 1A page is now mostly a Flash page.
The Site History will remain an HTML page for the foreseeable future, however.
Also added a button to toggle the visibility of the parchment in the translations for additional readability.
15) Aug 1/2010 - audio on Greek translation pages would continue despite the mouse roll out events. stopAllSounds() was added so that audio will stop when the mouse is moved away from the lines of the text.
16) Aug 1-3/2010 - Added Adobe Picture Gallery links to Day, Night & Weekend Class pages. A great deal of Photoshop color correction was need for the Day Class photos, because the images all had a green hue due to an incorrect color balance setting under the flourescent lights. Some Photoshop work to create captions as well.
Added Javascript code so the picture galleries would appear in pop-up windows, then added a Javascript link allowing the pop-up windows to be closed.
17) Aug 3/2010 - Began work on a test file using _rotate command to make sky lantern motion less jerky. Looked into UTC date functions because I would like to display the time in 3 different time zones. Will have to revisit this later.
18) Aug 4/2010 - Restored links to Versions 1, 2 & 3. Restored links to some CSS styles for Version 3 and this page which were lost when folders were renamed & deleted.
19) Aug 5/2010 - Changed the Video page into an LHU Miscellania page. Added a photogallery of Dr. Huang's retirement party to this page.
Also downloaded a faux-Chinese font ("Wonton") and used it on the Day Class, Night Class, Weekend Class & LHU Miscellania pages.
20) Aug 8/2010 - Noticed that the Down state was not being displayed. This was because "on (click)" was used instead of "on (release)". Fixed this.
21) Aug 13/2010 - Redid one of the flying lanterns in Photoshop & Flash so it possessed brighter states. Created an individual SWF file for this, which could be loaded with "loadMovieNum" to reduce file redundancy & allow for quicker adjustments of this animation. Also used "setInterval" & "._rotation" to smoothen the lantern's swaying movement.
22) Aug 14/2010 - Removed navbar buttons in individual SWF files & created a single external navbar SWF file. Also added introductory sound effects to the main pages.
23) Aug 15/2010 - Added a Contact page with password. Discovered that image folder had been accidentally deleted from library of "translation1aMenu.fla". Recovered file from a backup, then removed internal navbar & replaced it with the external SWF navbar created the day previous.
For Contact page, used a Conan-style font ("Crom").
24) Aug 16/2010 - Added a "Contact" button to the external SWF navbar. Downloaded "Star Trek Classic" font for the subheader of the Contact page. Added another photogallery for the Day Classes page.
25) Aug 17/2010 - Added another photogallery for the Day Classes page. For the captions, downloaded silent movie title card font ("Nickelodeon"). Lower-case "s" was somewhat difficult to read, so downloaded the 1920s font "Gatsby Bold" for the titles. "Nickelodeon" will be used for the dates. Also downloaded borders for the captions from DeviantArt.com.
26) Aug 20/2010 - Created a "What's New?" page to inform users of updates to website content. Used LoadVars so that the content of this page can be changed in a simple .txt file.
I would ultimately like to have a Star Wars screen crawl for the subheader, but that would mean converting the page to AS3. I'll have to look up how to change the loadMovie functions
I've also found how to make a Flash version of the History page, which is currently in HTML Again, use LoadVars to import the text -- but then add a scrollbar to the text field. Something else to work on later.
In addition, the navbar now has 9 buttons, and it's becoming cluttered. I'll have to consolidate all the LHU buttons into a single LHU page button, then put the original individual LHU buttons onto a master LHU page.
27) Aug 23/2010 - created 2 different external header SWFs, & removed tweens & images for these from the original page files. Added tweened outer glow & shine effects to the external header SWFs.
28) Sep 1/2010 - created a new HTML introduction page with Dreamweaverr which offers browser suggestions to visitors.
29) Sep 3/2010 - created new picture viewer from previous work. Initial loading of images is quite slow, so will have to do some preloading. Minor formatting issues as well.
30) Sep 5/2010 - did not add a preloader to the picture viewer. Simply added few seconds for the first two images to load into 2 separate mc's. Not bug-proof, but acceptable.
31) Sep 6/2010 - added a condition to picture viewer so that if the loaded picture was less than a certain size neither it nor the border would display or undergo the fade routine. Works much better now.
Discovered a problem with one of the photo galleries (the program was trying to load more pictures than were in the gallery). Spent an hour trying to find a bug in the code. Turned out to be a flaky batch rename of image files with Adobe Bridge. Deleted the image files, copied fresh ones into the directory, and renamed them with Bridge again. The program rolled over correctly this time.
32) Sep 7/2010 - the left navbar became too cluttered for any other buttons to be added. Rolled up the Day Class, Night Class, Weekend Class & LHU Miscellania pages into a single Lunghwa University page. Created a new main page, with photos utilizing blur, rotational & size tweens.
33) Sep 10/2010 - added new Canada page. Had a problem linking to photogallery. Solved when I realized that I'd forgotten to add Javascript lines in Canada page which allow pop-up windows.
Discovered another problem. Sometimes files are named *.JPG instead of *.jpg for some reason, and my photoviewer program will hang as a result. This can be easily fixed by renaming the extension in Dreamweaver, but I'll have to look into the reason for this later.
34) Oct 2/2010 - added a temporary Hallowe'en page, using Karloff font. Created a fog-like movie clip over a still photograph, darkening the photo underneath. The mc tweens to the left, causing a flickering candle effect.
35) Oct 3/2010 - discovered that the greeting image on the Translation 1a Introduction page was not being displayed, due to a broken link. Fixed the link.
36) Nov 7/2010 - used Pet Eye Pilot to remove glare from rabbit eyes on one of the photogalleries. Works very well.
Unfortunately, after brightening these night pictures with Photoshop, there was a high level of color noise (particularly on patches of snow). Should look into programs which fix this problem.
37) Nov 14/2010 - added new code which allows the pop-up windows to work for Internet Explorer.
The old AS2 code (attached to the link button in Flash):
The old Javascript code after the </style> tag & before the </head> tag (embedded in the HTML file which corresponds to the Flash file with the link button):
The new AS2 code is attached to the link button in Flash, and does not require any corresponding Javascript in the HTML:
38) Noticed in my Photoshop work that when my Fuji point-and-shoot digital camera is set on "Chrome" its saturation levels are unacceptably high, requiring more work in post to desaturate the images. From now on, it will be set on "Standard".
39) Dec 27/2010 - Created Christmas page. Most animation was done with Photoshop's Puppet Warp tool. But the animation of silhouettes was done with Flash's Bone Tool.
40) Feb 5/2011 - Used Neat Image to reduce image noise on low-light images in Day Class Grad Play (2008) photogallery.
41) Feb 14/2011 - Created Favorites Icon with Photoshop, then converted it to .ico format via Chami.com.
42) Mar 18/2011 - Added drop shadow to Flash content on Flash pages with new CSS 3.
43) Mar 19/2011 - Added gradients to button on 'Browser Suggestions' page with CSS 3.
Also the CSS formatting for 3 main pages had become corrupt, so these had to be restored from an old backup.
44) May 17/2011 - Created a Self-Test Ancient Greek Translation page, with Greek and "Grecian Empire" fonts embedded.
To do this, a page must first be set up for Actionscript 3.0. Next, click the Text tool, select a font, and click the Embed button in the Properties Panel.
Give the font a Name and select one of the Character Ranges. In this case, Greek (439/674 glyphs).
Then click the ActionScript panel, and under the Outline Format, select TLF (DF4).
Finally, click the "Export for Actionscript" box under "Linkage", and hit "OK".
(The "Grecian Empire" font does not need anything selected under Character Ranges, nor does the "Export for Actionscript" box need to be clicked.)
45) One of the things learned while making the Self-Test page was that Actionscript 2.0 files can be loaded into AS 3.0 files, but not vice-versa.
Moreover, AS 2.0 files that load OTHER AS 2.0 files cannot be properly loaded into AS 3.0 files. (Or rather they can, but the AS 2.0 files they're supposed to load don't get loaded).
To make this a little clearer, there are two AS 2.0 files for the site which load different "flying lantern" MCs for different "flying lantern" sequences (the sequence for a page with a set of green sidebar buttons positions the lanterns slightly differently from the lanterns on a page with no green sidebar buttons).
When one of these intermediate "flying lantern" sequence AS 2.0 files is loaded into an AS 3.0 file, the three individual "flying lanterns" will not load.
The only solution seems to be to load the three individual "flying lanterns", and not to load the AS 2.0 sequence file.
46) May 31/2011 - A few problems cropped up during creation of a new Irregular Verb Self-Test on the Ancient Greek Translation page.
The first problem was that a set of 6 multiple-choice answers were to be presented to the user, with the answers in random order. However, the answers also had to be unique and non-duplicated. This latter requirement presented a bit of a problem.
Fortunately, I found the following (Java) code at a DZone forum, which could be adapted to Actionscript 3, and then further modified for this purpose. Here is the DZone code (which generates 5 unique random numbers within the range of 1 to 9:
int maxValue = 9;
int numInts = 5;
int range = maxValue - minValue;
Random r = new Random();
int[] randomInts = new int[numInts];
int nextRandom;
for (int i = 0; i < numInts; i++) {
nextRandom = r.nextInt(range + 1) + minValue; randomInts[i] = nextRandom;
// NOW CHECK THE DIGITS WE ALREADY HAVE for (int j = 0; j < i; j++) {
if (nextRandom == randomInts[j]) { i--; // DUPLICATE; TRY AGAIN j = i; // SHORT-CIRCUIT INNER-LOOP } } }
A second stumbling block was the discovery that Greek text did not render well for small font sizes, which made the vertical buttons originally intended for the verb conjugation tables difficult to read. The only solution for this was to use larger, horizontal buttons.
A third serious problem was creating single buttons that would direct the user to different Actionscript labels depending on whether the question being asked had one or two answers. The code for 1-answer questions worked, the code for correctly-answered 2-answer questions worked, but the code for incorrectly-answered 2-answer questions resulted in NULL object errors.
Ultimately, this could not be solved -- instead a work-around now directs the user to a single Actionscript label, wherein code changes the visibility & positioning of various textboxes depending on whether the question has one or two answers.
There was a forth, minor problem, where it was discovered that adding an animated movieclip (the winking owl) to a blank container MC via "addChild" resulted in the MC being added at unpredictable times. The result was that the owl would not "wink" at the appropriate time.
This was solved by abandoning the "addChild" approach, and simply changing the visibility of the owl and medusa MCs, according to whether an answer was given correctly or not.
47) Added gradient masks to flying lanterns to reduce the visibility of the transparent sections of the PNG files (which when animated, were not very transparent).
To do this in AS 2.0:
a) Create movie clip of image to be masked on a Layer (called "image"). Instantiate the MC (ie: mcPic).
b) In the "Display" section of the Properties panel, click "Cache as Bitmap" checkbox. (Or alternatively, do this on the Actions layer by typing "mcPic.cacheAsBitmap = true;")
c) Next, create a rectangle or circle on a Layer (called "mask"), and convert it to a movieclip. Instantiate the MC (ie: mcMask).
d) Enter the mask MC & select the Color panel. Use the panel to create either a linear or radial gradient.
e) Exit the mask MC & Cache as Bitmap as in step b), either by clicking the "Cache as Bitmap" checkbox or on the Actions layer (ie: mcMask.cacheAsBitmap = true;).
f) Do Not Create Mask By Left-Clicking on the Mask Layer & Selecting "Mask"!!! (This will create an ordinary mask, not a gradient mask.)
g) Create the mask on the actions layer with the following code: "mcPic.setMask(mcMask);"
To do this in AS 3.0:
Follow the same steps, but change the code in step g) to: "mcPic.mask = mcMask;".
Of course, AS 3.0 code on an AS 2.0 page (or the reverse) will not be functional.
48) Jun 13/2011 - Used "Zoomify" software to make a Calgary panorama. Final image size was 900 X 550 px, and a return link (with CSS styles) was inserted into the HTML.
49) Jul 13/2011 - Validated XHTML on all Version 4.0 files with W3C validator. Most invalid code originated from HTML tags being used instead of XHTML tags (for the shortcut icons & for the Statcounter code).
However, it also seems that Flash is automatically adding align="middle" to the <object> tag, which is not permitted in XHTML (Strict).
50) Aug 6/2011 - Added AS 2.0 code allowing user to click on leftmost flying lantern to stop its rotation and brightness changes.
For some reason, the following code would not work on the main timeline:
_root.mcFly.clearInterval(interval2); _root.mcFly.mcLant.stop(); }
However, the following code DID work, after being added to the 'mcFly' movieclip. A major stumbling block in getting it to work correctly was the fact that the 'mcLant' instance had a different name from its movieclip ('mcBright'), and 'mcBright' was erroneously used in the code.
//STOP TIME INTERVAL CALLING ROTATION FUNCTION clearInterval(interval2); //STOP TIMELINE FOR BRIGHTNESS CHANGES _root.mcFly.mcLant.stop(); }
51) Aug 21/2011 - Added a new working email form to the Contacts page. Emails are sent almost instantaneously from 'chou-se-fu.com' (which is hosted by Shaw Hosting). However, with another site (hosted by GoDaddy) mail took 1-2 hours to be delivered (due to the caching in their mail server).
(The cause was unknown to me at the time, so I was frantically checking, rechecking and using different code...none of which seemed to work because of the long email delivery delay!)
52) Aug 23/2011 - Used some anti-spam code for the email form on the Contacts page from Larry Ullman's PHP 6 and MySQL 5 (p 362-367).
However, with my setup, Ullman's code to remove newline characters didn't quite work:
Breaking the problem down into its components, I tried this code on a simple PHP script containing little more than 'Hello \r\nWorld!' and the 'str_replace' command, which still wouldn't work.
Eventually, I discovered that the '\r' and '\n' code needed an additional backslash. The new code is:
Also, 'Magic quotes' are enabled on both Shaw Hosting and GoDaddy, so the following code was needed to remove the additional slashes:
$_POST ['name'] = stripslashes ($_POST ['name']); $_POST ['emailAddress'] = stripslashes ($_POST ['emailAddress']); $_POST ['comment'] = stripslashes ($_POST ['comment']); }
53) Aug 24/2011 - Up until now, I've simply hit 'Publish' in Flash, and then done some CSS formatting. While easy, this method doesn't allow the SWF file to be scrollable.
To make scrollable Flash movies, add the following code to the <body> of the HTML file:
For alternative content (in case the SWF movie fails to load), insert an image link between the <object> and </object> tags:
For transparent Flash movies:
54) Sep 26/2011 - removed accentuation from Present Indicative Active & Present Indicative Middle self-tests on Greek Translation pages (I don't fully understand the accentuation rules, so the accentuation was most likely wrong, at any rate).
Also added code allowing user to toggle UPPER/lower case of the randomly-chosen Greek word.
ie:
and:
However, problems were encountered...
a) Terminal lunate sigmas ('ς') are not converted to uppercase by the 'toUpperCase()' method. So use code to convert the 'ς' to a standard lowercase sigma ('σ').
The standard lowercase sigma ('σ') is then easily converted to a capital sigma ('Σ') by the 'toUpperCase()' method.
b) Terminal uppercase sigmas ('Σ') are not converted to terminal lunate sigmas ('ς') by the 'toLowerCase()' method. So use code to search for a terminal sigma, and if one exists, then remove it from the string and add a terminal lunate sigma ('ς') in its place:
if (loadedWord.substr(loadedWord.length - 1, loadedWord.length) == 'σ') {
loadedWord = loadedWord.substr(0, loadedWord.length - 1) + 'ς';
}
c) For the middle voice self-test, I discovered that the smooth breathing mark over an initial 'εὐ' diphthong is not converted properly by the 'toUpperCase()' method. So to convert lowercase to UPPER:
mcLoadedWord.txtLoadedWord.text = loadedWord.toUpperCase();
And to convert UPPERCASE to lower:
loadedWord = loadedWord.split('ε'υ').join('εὐ');
mcLoadedWord.txtLoadedWord.text = loadedWord
d) Vowels with circumflex accents are also not converted to UPPERCASE by the 'toUpperCase()' method. {However, this is not currently an issue, since I've removed all accentuation, anyway.}
55) ********** MOVING **********
Oct 10/2011 - The chou-se-fu.com website has reached a size of 497 MB, out of the 500 MB allowed to it by its current plan at Shaw Hosting. I will therefore soon begin copying the files from it to chou-seh-fu.com, hosted at GoDaddy.
In preparation, the chou-seh-fu.com domain name was bought over a year ago at GoDaddy, and new "Chou Seh-fu" Flash headers were created a month ago.
Over the past two days, the following was done:
a) A hosting plan set up at GoDaddy for the chou-seh-fu.com domain.
b) The absolute URLs modified for the JavaScript pop-up windows. (40 minutes)
c) Links to the old headers modified to point to the new headers. (40 minutes)
d) StatCounter code for chou-se-fu.com removed from all XHTML files. (20 minutes)
e) Header for the "Site History" page modified and linked to. (10 minutes)
f) New StatCounter code for chou-seh-fu.com added to all XHTML files. (15 minutes)
g) A duplicate folder for the old chou-se-fu.com site made, with (almost) all images and SWF files deleted on it. XHTML code in files deleted, and the files saved. New XHTML with redirects copied and pasted into these files. These files will be uploaded to chou-se-fu.com AFTER the move to chou-seh-fu.com is complete. The files in chou-se-fu will redirect users to the new chou-seh-fu.com site.
h) New email address set up for chou-seh-fu.com, and the php code for the 'Contacts' page modified accordingly. (5 minutes)
(I had wanted to begin file uploads yesterday, but the nameservers and IP address of the chou-seh-fu domain needed updating, and it can take up to 48 hours for the update to take effect.)
****************************
56) Oct 11/2011 - After 3 separate communications with GoDaddy, the nameserver / IP issues were resolved, and the site uploaded to chou-seh-fu.com (1.5 hours).
Minor issues encountered so far:
a) New headers were never copied from the working FLV folder to the upload folder. A 2 or 3 minute fix.
b) The Chou Seh-fu Introduction page was originally designed for a height of 595px, but the page height has since increased to 650px. A 5 minute fix.
c) Return Link on Heritage Park Panorama (2010) went to Canada page instead of Canada 2010 page. This was an error on the original website.
d) I replaced all dashes(-) with underscores (_) in the pop-up photogallery folder names. Two such folders were incorrectly referenced on the Weekend Class page. A 2 minute fix.
Spent roughly 1 hour checking the pages and links, and everything seemed to work OK (aside from the few problems I've mentioned). Confirmed that email from Contact page is working correctly.
57) Oct 12/2011 - discovered that the Self-Test for Irregular Verbs on Greek Translation page used an absolute URL pointing to the chou-se-fu site. Took about 10 or 15 minutes to figure out -- I thought the new headers simply weren't being linked to.
A few of the pop-up photogalleries on the Canada 2010 page were still linked to chou-se-fu.com ... and worked perfectly well while chou-se-fu.com was still online. Now that it's been taken offline (and only chou-seh-fu.com remains online), the error was noticed and corrected. The perils of having 2 duplicate sites up at once.
58) Oct 13/2011 - Embedded a YouTube video into a Flash page. The AS 2.0 code is as follows:
//(ALTHOUGH THE MOVIES PREVIOUSLY LOADED WITH LOWER DEPTHS ARE ABOVE THIS ONE, FOR SOME REASON!!!)
this.createEmptyMovieClip("video_mc", 10000);
this.video_mc.loadMovie ("http://www.youtube.com/v/aYl8AR-YNOQ");
//POSITION THE YOUTUBE VIDEO
video_mc._x = 340;
video_mc._y = 190;
59) Oct 15/2011 - added new code into Greek self-tests so that the same question will not be asked multiple times. Had a bit of a problem with infinite looping, until I got the logic right:
do {
//ASSUME THE WORD HASN'T BEEN USED BEFORE. uniqueWord = true;
//RANDOMLY-DETERMINE THE ARRAY NUMBER OF THE GREEK STEM TO USE stemNum = Math.floor(Math.random() * (1 + (stem.length - 1) - 0)) + 0;
//RANDOMLY DETERMINE THE ARRAY NUMBER OF THE GREEK ENDING TO USE endingNum = Math.floor(Math.random() * (1 + 5 - 0)) + 0; //endingNum = 5;
//CALL FUNCTION WHICH GENERATES WORD FROM STEMS AND VERB ENDINGS //(Receives 'loadedWord') generateWord(stemNum, endingNum);
//CHECK THE ARRAY OF PREVIOUSLY-ASKED WORDS, AND SEE IF THE CURRENT WORD HAS BEEN USED BEFORE. //(Logic's a bit bad, but this works...) for (i = 0; i < (previouslyAsked.length + 1); i++) {
//CHECK IF AN ARRAY ELEMENT IS THE SAME AS THE CURRENT WORD. if (loadedWord == previouslyAsked[i]){ //IF THE CURRENT WORD MATCHES ONE THAT'S BEEN ASKED, THEN IT'S NOT A UNIQUE WORD. uniqueWord = false; } } }
//LOAD ANOTHER WORD IF THIS ONE ISN'T UNIQUE.
while (uniqueWord == false);
//ADD THE UNIQUE WORD TO THE LIST OF PREVIOUSLY-ASKED WORDS. previouslyAsked.push(loadedWord);
//ALLOWS AT LEAST 200 UNIQUE WORDS TO BE ASKED (BEFORE RESETTING). if (previouslyAsked.length > (stem.length * 5)) { previouslyAsked = []; } }
function generateWord(stemNumber:uint, endingNumber:uint):String {
//CODE TO CREATE GREEK WORD FROM STEM AND VERB ENDING NOT SHOWN loadedWord = stemStr + endStr; return loadedWord; }
60) Oct 16/2011 - code added to allow incorrectly-answered questions on the Greek self-tests to be asked again within the current batch of questions. Within the "incorrectly answered" conditional:
The "-1" parameter says to cut the final element from the "previouslyAsked" array, and the "1" parameter means that ONLY the final element is cut.
("previouslyAsked" may at this point be a misleading name for the array at this point ... "previouslyAskedAndAnsweredCorrectly" might be more accurate.)
61) Oct 17/2011 - just discovered that photogallery viewer XHTML files still had the StatCounter code for the old chou-se-fu.com site. It has now been updated with the new chou-seh-fu.com StatCounter code.
62) Dec 17/2011 - used <pre> tags to format code samples on the Site History page.
63) Feb 6/2012 - completed search engine optimization (SEO) for many of the web pages (except for the photo gallery pages).
This entailed placing some kind of alternative HTML content between the <object> tags containing the SWF files. I eventually hit upon the idea of using screen capture images of the operational Flash files as part of this alternate content. (Simply ALT-PRINT SCREEN to copy the contents of the screen, and CONTRL-V in Photoshop to paste them.)
<title> tags were also SEO optimized, while <meta name="description" "content="..." /> tags were added.
<meta name="keywords" content="..."/> tags were also added, though apparently they aren't used much anymore by the major search engines.
I've tried to use "title" attributes for <a> tags, and <b> tags for certain keywords.
To make life easier, I've started using PHP server-side includes (SSI) for the alternate HTML navigation system. SSI is also used for the copyright information on the alternate HTML Unfortunately, this required files with the HTML extension to be changed to the PHP extension, necessitating a massive renaming of links. People who've bookmarked those HTML files may be in for a rude surprise, too.
(I really should look into using ActionScript includes for the Flash copyright information as well...)
Last but not least, I created an XML sitemap for the site & uploaded it to Google. (Although 14 web pages still haven't been indexed by Google, so I'm not certain about its effectiveness.)
64) Feb 8/2012 - just added an XHTML site map (in addition to the XML sitemap which was added a few days ago). Links appear to be working.
65) Feb 11/2012 - learned a little bit about the use of alt & title attributes of <img> tags.
To sum up: alt should give a description of the image for the visually-impaired, while title should simply list the sort of title that one might give the image if it were displayed in an art gallery.
To prevent keyword stuffing, I'll go over the site the next few days and fix my usage of these two attributes.
In addition, I've found out more about the use of title attributes for <a> tags. title attributes for <a> tags should give the user additional information to the text within the tag. In the following example, the link text will read, "Site Map," while the title attribute that will appear as a tooltip will helpfully explain that a "Site Map" "Links to all the main pages of chou-seh-fu.com":
In the following example, no title attribute is needed, since the anchor text ("Continue to Main Page") is self-explanatory:
66) Feb 13/2012 - added new SEO checklist page to the site, with some of what I've recently learned about Search Engine Optimization. Since this is more of a technical page, it is reachable through the menu on this page as well as through the Sitemap.
67) Feb 22/2012 - according to StatCounter, a few visitors to the Ancient Greek Irregular Indicative Verbs page were staying for 0 seconds. I've seen this strange statistic before, but up until now, had no idea what it meant.
According to StatCounter, 0 second visits do not literally mean the user visited the site for 0 seconds -- it means that the visitor visited that page, and that page only, then left the site.
(Only if a visitor clicks on one of the internal links and navigates to one of the other pages on the site is StatCounter able to calculate the time spent on the first webpage.)
68) Feb 26/2012 - discovered and fixed major formatting issues over the weekend. I was using the position: absolute; property and value in CSS to position the copyright div on all pages, as well as the JavaScript weather widgets on the entry page.
This looked good on my monitor (1024 X 768 px), but the formatting became garbled for monitors with other resolutions.
The way to fix this is to sandwich the absolutely-positioned element within a relatively-positioned one:
{some content here}
<div id="innerDiv" style="position: absolute;"> {other content here} </div>
</div>
(The styling is done inline here for illustrative purposes.)
69) Feb 26/2012 - I've managed to get Server-Side Includes (SSI) with SHTML working for the Introduction page (they're only visible in the alternative HTML content for users without Flash). In Dreamweaver, I added the following code where I wanted the copyright information to appear:
<!-- #include virtual = "../includes/copyright2010.html" -->
Then I saved the introduction file as a Server-Side Include in Dreamweaver, and modified the extension to .shtml. It also appears as though GoDaddy has set things up so that SSI will work for files with the .html extension (though I should probably confirm this sometime).
For some reason, I couldn't get SHTML SSI to work properly a few weeks ago (see item 63 above), and was forced to use PHP includes for all the alternative HTML content on the search-engine indexed pages instead. I should probably now convert all the .php files to .shtml files (because from what I understand, PHP includes are more processor-intensive for the server, and a bit slower.)
However, doing this would entail renaming 40 files and their corresponding links, which is a big investment in time for little reward in terms of faster loading speeds. This would only be worth doing if my site traffic was significantly higher than it currently is.
70) Feb 27/2012 - I've gone through the Site History page & converted all <strong> tags to <b> tags (as well as <em> tags to <i> tags). I'm interested in seeing how this affects SEO (the <strong> tags surrounded the item numbering on this page, which probably isn't good for SEO purposes).
With the <strong> tags, the page ranked #3 on a Google site:chou-seh-fu.com search.
I've also considered replacing the <b> tags with <span> tags and then using CSS to get the bold effect. Hopefully this wouldn't affect the page SEO in a possibly negative way.
71) Feb 28/2012 - added a .htaccess file to redirect users from www.chou-seh-fu.com to chou-seh-fu.com. The file contains the following code:
RewriteCond %{HTTP_HOST} ^www\.chou-seh-fu\.com
RewriteRule ^(.*)$ http://chou-seh-fu.com/$1 [R=301,L]
The following code would be used for the reverse (from chou-seh-fu.com to www.chou-seh-fu.com):
RewriteCond %{HTTP_HOST} ^chou-seh-fu\.com
RewriteRule ^(.*)$ http://www.chou-seh-fu.com/$1 [R=301,L]
72) Feb 29/2012 - since I've added so much alternative XHTML content for SEO, I've decided to validate the site's XHTML with W3C Validator. Oddly enough, the following commented-out line will not validate:
<!-- ----- End of StatCounter Code ----- -->
However, this WILL validate:
<!-- ***** End of StatCounter Code ***** -->
Go figure.
Also, the validator informs me that I've forgotten the type="text/javascript" attribute in the JavaScript <script> tags.
Following the JavaScript <script> tags in the copyright notices is a <noscript> tag (in case JavaScript is disabled and cannot display the current year for the copyright). Apparently, content within <noscript> tags should be sandwiched inside a block element (ie: a <p> or a <div> tag) for Strict XHTML, eg:
To prevent the alternative content from being displayed on a new line, force the div to display inline in CSS:
display: inline; }
Finally, I've learned that <a> tags have no target attribute in Strict XHTML. Although, the target attribute seems to work with Firefox anyways, a simple work-around using the onclick attribute will validate successfully:
(The target attribute will validate for Transitional XHTML.)
UPDATE: The Server-Side Include for the copyright information on the Introduction page stopped working while I was troubleshooting the validation errors, so I converted the webpage from SHTML into PHP, and used a PHP include instead.
Thus, the SSI changes that were made in item 69 have been reversed.
UPDATE #2: The index page had 26 validation errors in the JavaScript weather widgets from Accuweather & the Weather Channel.
I eventually realized that these errors were caused by the use of unescaped ampersands in their parameter code rather than &. The makers of the Accuweather widget also forgot to declare type="text/javascript" in their <script> tag.
With these changes made, the page validated correctly.
(I later found that I, too, did not escape my ampersands in <title> tags as well as within <a> tag text.)
UPDATE #3: For a while I've noticed that when JavaScript is turned off, a gap appears between the top of the screen and the wrapper div (for the pages in Strict XHTML -- the gap does not appear for the few pages there are here in Transitional XHTML).
This gap no longer appears, now that the following rule has been added to the CSS:
display: none; }
73) Mar 1/2012 - during the XHTML validation of the main Version 4 files, I discovered a few more things:
<br /> tags should not be used for additional item spacing in unordered lists in Strict XHTML. Instead use <p> tags between the <li> tags to accomplish this:
<li>Item 1</li> <li>Item 2</li> <li><p>Separated Item 3</p></li> </ul>
I was doing nested lists incorrectly, as the code below shows:
<li>Item 1</li> <li>Item 2</li>
<ul> <li><p>Sub-item 2a</p></li> </ul>
<li>Item 3</li> </ul>
However, the <li> tag should not be closed at the end for Item 2, because the sub-list that follows is logically the child of Item 2:
<li>Item 1</li> <!-- DON'T CLOSE THE </LI> HERE --> <li>Item 2 <ul> <li><p>Sub-item 2a</p></li> </ul> <!-- CLOSE THE </LI> TAG HERE --> </li> <li>Item 3</li> </ul>
Update: Unrelated to this site, but when saving webpages for other sites with Notepad++, make sure the files are encoded in UTF-8. Do this by clicking Format>Encode in UTF-8.
74) Mar 8/2012 - During off-line testing, I noticed that Internet Explorer does not display alternate XHTML content for Flash.
However, when the same file is uploaded, it DOES display the alternative content. Just a quirk of IE.
75) Mar 11/2012 - 2 identically-sized headers can be placed on a page - 1 with Photoshop-formatted text, 1 without.
The key is that this allows an <h1> tag to be placed between the two (for SEO purposes).
The XHTML code is as follows:
<a href = "index.html"> <img id = "bannerNoText" src = " bannerWithNoText.jpg" />
<h1>Snack Taiwan</h1> <img id = "bannerWithText" src = "tiles/bannerWithText.jpg" /> </a></div>
And the CSS for this:
/* ABSOLUTELY-POSITIONED ELEMENTS MUST BE WITHIN A RELATIVELY-POSITIONED CONTAINER */ position: relative; }
#bannerNoText {
/* THE TEXT-FREE BANNER SHOULD BE ON THE BOTTOM */ position: absolute; top: 0px; left: 0px; }
#header h1 {
/* THE H1 HEADER SHOULD BE IN THE MIDDLE */ position: absolute; /* CHANGE THESE VALUES TO POSITION THE TEXT ABOVE THE TEXT-FREE BANNER */ top: 0px; left: 0px; }
#bannerWithText {
/* THE BANNER WITH FORMATTED TEXT SHOULD BE ON TOP */ position: absolute; top: 0px; left: 0px; }
UPDATE: a simpler way of doing the above would be to remove the <a> tag, and use the z-index attribute to hide the <h1> tag behind the banner image (which would contain the name of the website).
Ethically it should be fine, because people browsing with images turned off will still see the website name in <h1> tags.
76) Apr 22/2012 - yesterday, I had a problem with the Notepad++ text editor. Whenever I attempted to load a file to edit it, a pop-up window called "Configurator" appeared, informing me that "Load lang.xml failed!"
I was still able to view loaded files, but color-coding for PHP files was deactivated.
Sean Walther's blog has the solution for this:
a) Close Notepad++.
b) Right-click on the Notepad++ shortcut icon, and click on "Open file location".
c) Delete the langs.xml file. (It will probably be corrupt -- 0 bytes in size.)
d) Copy the langs.model.xml file, and rename the copy langs.xml
e) Restart Notepad++.
77) May 1/2012 - I've discovered that my JavaScript date & time program doesn't display dates & times properly...but only in Internet Explorer.
Apparently, IE JavaScript creates Date() objects differently from other forms of JavaScript.
Here is an example of a Date() object Internet Explorer creates:
Here is the same Date() object created by Firefox, Opera, Safari or Google Chrome:
Note that the day of the week (Tues) and the month (May) will be in the same location if this Date() object is converted to a string. But the day of the month is displayed differently (with / without a preceeding zero), and the year and times are positioned differently.
Since I was using the toString() method and then extracting the important information using the substr() method, the result was incorrect because the starting strings are so different.
This was the erroneous result after converting to a string and using the substr method in Internet Explorer:
And this was the correct result obtained by all other browsers:
To fix this for IE (and leave the correct result for all other browsers), the code is as follows:
$('calgaryTime').firstChild.nodeValue = "Calgary Time: " +
calgaryDate.getHours() + ":" + calgaryDate.getMinutes() + ":" +
calgaryDate + getSeconds() + calgaryDateStr.substr(0, 8) +
calgaryDate.getDate() + " / " + calgaryDate.getFullYear();
This will display the correct string within the <span id="calgaryTime"> tags.
78) Jun 19/2012 - I've just discovered that a simple <meta> redirection tag will not work for Internet Explorer (it's fine for all other browsers). For IE, instead of redirecting, the page will refresh ad infinitum.
(The redirect is on the old www.chou-se-fu.com index page, and redirects to the new www.chou-seh-fu.com site.)
To remedy this problem, I now have a JavaScript redirect working in conjunction with the <meta> redirect tag (the latter of which will work for non-IE browsers even if JavaScript is turned off).
Here then, is the code:
<!-- (MUST SET THIS REDIRECT TIME SLIGHTLY HIGHER THAN THE JAVASCRIPT REDIRECT TIME) -->
<meta http-equiv = "REFRESH" content = "6; http://chou-seh-fu.com" />
<!-- JavaScript redirect (NECESSARY FOR INTERNET EXPLORER!!!) -->
<script type = "text/javascript" language = "javascript">
<!-- (FOR XHTML VALIDATION) --> /* <![CDATA[ */
<!-- REDIRECT TO NEW WEBSITE -->
function delayedRedirect() { window.location = "http://chou-seh-fu.com" } <!-- (FOR XHTML VALIDATION) --> /* ]]> */ </script>
[...]
<!-- WHEN <body> TAG LOADS, SET COUNTDOWN FOR JAVASCRIPT REDIRECT -->
<body onLoad="setTimeout('delayedRedirect()', 5000)">
Notice:
This page is no longer being updated. Future technical descriptions of changes on this site will be posted on the blog.