Thursday 16 April 2015

Notes on suggested changes

I opted to go with the title Digital Immersion. I think it pretty accurately captures the spirit of the project, and is short enough to keep it catchy. If I had the resources and felt there was interest in expanding this project, Digital Immersion could becomes a series of sorts, making this Digital Immersion – Mandarin.

I scrapped most of the lower content on the front page, and all of the non-collapse elements on the main media pages. From here it was a tough decision to either stick with HTML/CSS text overlays, or to edit the overlays on to the images themselves. I went with the latter because it let me create bordered text, which is much more readable. The downside is that, due to how jumbotrons scale images, they all look to be different sizes despite using the same font size when creating the image. I think this could be resolved by cropping all of the images to fit the dimensions of the smallest image, but I haven't tried that yet.

I added an about section to the main page, offering up a basic explanation for the purpose of the site and how to use it. I also clarified the general meaning of the difficulties I assigned to every link, and ended up revisiting some of the difficulties I assigned and changed them to match the criteria established. I also used basic HTML to colour code the difficulty levels, choosing green, orange and red.

I kept titles center-aligned, but moved descriptions and difficult to left-alignment. I also changed the colour of the hyperlinks to white as recommended, and in doing so learned how to use CSS to give them a little more style. I set already visited links to a bright gray, and removed the automatic underline from all basic links. Hovering over a link changes it to bold text, making it pop out.

I changed the order of the media types, putting education first. I initially ordered them as I did because I just wanted some consistency (entertainment, information, education), but agreed that education should probably come first both in principle, and because it is usually the 'easiest' of the types. I moved entertainment to the middle, and information to last to keep with this trend of easiest to hardest.

I added photo explanations to all of the jumbotron images, and wanted to quickly note that the one I used for video is from Lust, Caution, which was originally filmed in Mandarin.

Some of the other changes I wanted to make worked out fairly well, others didn't. It didn't take too long to merge the JS and CSS files into one file to handle the whole site, and doing so helped to make the pages a bit more uniform. In doing so, I realized why the collapse boxes in the audio section were not lining up. All of the entries were fine on every page but Radio on the audio page, so I changed the radio class I used to radiobox, and it then aligned properly. Radio must be a class already defined by bootstrap. I also found a CSS property that let me set a minimum height (min-height) for the collapse boxes. This turned out to be a less elegant solution than I hoped, because it essentially just created a lot of blank, black space under the body of the text. Given that the process of merging lumped all collapse boxes into the same styling, setting a minimum height globally would either do nothing for the larger boxes, or look ridiculous with the small boxes. I ended up settling for a size that brought the audio boxes in line, and left the others alone because they looked fine as they were.

The ugly overlay text and the non-uniform video collapse boxes are two outstanding issues, and in writing this I thought of a pretty easy way to fix the video boxes. Basically, I'd just have to add classes for the set of audio boxes, and the set of video boxes, and put the min-height attribute under those as suitable values. The issue of being unable to use Chinese characters in most of the content of the site still remains, and I'm no closer to finding a solution to that than I was when I initially mentioned the issue. I was able to somewhat work around this by writing the characters into the image overlays, then adding the pinyin for them since they cannot simply be copied and pasted. It will have to do for now, and it least it does give Chinese characters some presence on a site about immersing oneself in Chinese.

No comments:

Post a Comment