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