Thursday, 16 April 2015

Final Project Report

You can find my final project here,

My capstone project was to create a website to showcase ways one can use the internet to immerse themselves in another language. I am mostly satisfied with the outcome, though it ended up differing significantly from my initial plans, something I will detail in the sections to come.

Project Background

This project was situated within the humanities discipline of Language Education. The academic justification for this project can be found in my initial project report in this blog. Overall, I think this project stayed faithful to its initial goals. My website offers resources for readers looking to start learning Chinese, as well as more advanced resources for readers looking to supplement their language education.

Data Acquisition

Data acquisition was reasonably close to what I stated in the project proposal. The resources presented on my website come from my personal experience learning Chinese, and pursuing this project. Some websites, such as Grooveshark's Mandarin station, Melnyk's and are websites I used in the past. Others, such as youku and ppstream were recommended by Chinese contacts. The majority of resources featured were ones I discovered in the process of making this site, either through English or Chinese searches using the kinds of keywords I suggest in the main pictures.

Tool Application

The primary tools employed for this project were Sublime Text 2, GIMP (GNU Image Manipulation Program), and several websites that provided training or reference in the listed languages, as well as one that ultimately hosted the website.

Sublime Text 2 is a program designed to replace notepad for web design. It recognizes and colour coordinates elements and tags for better visibility, while also providing some basic quality of life improvements, such as automatically appending finished tags and end quotations when one initiates a tag or starts a quotation. Before a friend recommended Sublime Text, I was using EditPad, another notepad replacement that offers some advanced features such as tabbed windows, but lacked the programming-oriented features of Sublime Text.

GIMP is an open source image manipulation program, something I used to overlay bordered text on the main images used in each page. The process of creating that bordered text was somewhat complicated due to the relative lack of features in GIMP compared with something like Adobe Photoshop, but given the significant price tag on the latter it was out of the question. Out of all of the tools used, my application of this particular tool was weakest, likely because I have had no training in the proper use of image manipulation programs. I ended up with some pretty glaring flaws in my implementation of bordered overlay text, but this is not the fault of the tool.

Several websites also provided invaluable services, such as,, and I used codecademy's lesson programs to refresh myself on HTML and Javascript, and learned the fundamentals of using CSS to style a webpage. I originally thought to use some other websites to supplement my learning such as, but chose not to partially because requires a subscription, but also because I felt codecademy gave me enough of the basics to continue my learning in another fashion.

That continued learning came primarily through exploring, which taught me several new traits and their proper syntax for styling with CSS. It also served as excellent reference for HTML and JavaScript, so it is no surprise that it is usually the first result for any web design related question in a search.

Lastly, provided free, ad-less hosting with support for custom CSS and Javascript. This site let me simply upload my folder using their file manager, and it worked with minimal tweaking. Storage and bandwidth are fairly limited, but this should not be a major problem for this project. It does not host or even embed any of the media linked, so it is very light on storage, and it should not attract enough traffic to make bandwidth an issue either. If it does become an issue, altervista offers ways to increase bandwidth by either placing ads, or letting me pay a subscription fee.

New Skill Development

My skill development for this project mostly consisted of refreshing the HTML and Javascript I used to know, and learning CSS from scratch. My first exposure to HTML and Javascript was through High School Computer Science courses, where I learned the basics of website construction some ten or so years ago.

HTML was the most extensively used language, providing structure and most of the site content. Most of the basic structure was just a refresher, the HTML I learned through this project mostly involved the creation of classes and ID tags to be styled with CSS or called in Javascript.

Heavy use of CSS was the main focus of language learning. Learning to use CSS allowed me to create a simple but consistent aesthetic. Setting classes and styling them with CSS let me apply that same look across the website, while still allowing further customization through adding additional classes, or using specific IDs. especially with the incorporation of Bootstrap, a set of pre-defined CSS classes designed to divide the page into a set of twelve easily manageable columns. The process of learning to use CSS effectively was one of the most time consuming aspects of this project, something I will detail further in the reflections part of this report.

I used Javascript to add some basic interactivity, a process that was greatly aided by employing JQuery. JQuery is a set of pre-defined instructions that let one call classes and IDs established in the HTML file in an intuitive way. In the project, it is Javascript and JQuery toggling the 'collapse' CSS class on the boxes that allows them to expand when clicked on.


The process of designing and building this site was one of constant reflection and revising. The difference between the first rough drawing and description of my project versus what it ultimately came to look like illustrates this fairly well.

For some time I followed the lessons available on codecademy and tried to brainstorm ways of implementing the initial design. When I reached the part of the second lesson where it taught how to use Javascript and CSS to animate elements of a webpage, I spent some time brainstorming ways in which I might approach what I wanted. I couldn't find anything that allowed for the direct perspective shift that I wanted, so I explored animating elements as a way to achieve an approximation of perspective shift – which was to shift literally everything on the page, bringing elements to the center rather than bringing the center to elements. I tried to visualize some pseudo-code that might establish each element on a grid, and have every element shift on the grid by the same amount needed to bring a given element to the center of the page, but ultimately felt that this was simply getting beyond my current capabilities.

With some hesitation, I went back to something else introduced through codecademy's lessons that caught my eye – Bootstrap. Bootstrap looked pretty good, and was fairly easy to use. It meant completely redesigning the page, but that seemed like a much more manageable task in the time limit I had to work with. I was able to get a pretty basic framework up before too long, and with a couple more evenings worth of work I was able to fill in the content.

Using Bootstrap began a shorter process of creating, reflecting, and revisiting. The site I presented to the class used separate .css and .js files for each page. I suspected this might be an inelegant and redundant way to structure the website quite some time after I finished the project as it was to be presented, but it worked so I left it as it was. In the weeks I've had to finalize the project, I consolidated those .js and .css files into one of each. This process wasn't too difficult, and helped to remove some of the inconsistencies from page to page.

To some extent, I was stepping into unfamiliar technical and academic territory with this project. I did not do extremely well in the courses I took before, so even the training I did have in using this languages was nothing spectacular. Even still, knowing the basics helped me absorb the online lessons readily. My unfamiliarity with Language Education as a discipline was also somewhat of a barrier, and a good reason why I've spent much more time in these reports talking about the hurdles I encountered with coding.

Time has not been a major issue in the development of the project, except in that case where I finished the build of the site despite wanting to restructure it. Regardless, it is fully functional one way or another, and that particular project was something more to challenge myself rather than to add anything to the user's experience.

It is not difficult to say that I learned, and remembered a great deal through creating this project, at least on a technical level. I have doubts that this particular model of exploring other languages and cultures using the internet will gain any traction, but there have been many focused projects that have grown significantly in recent years, such as duolingo. I'll be posting a blog entry talking more about the implications of the internet for language education, as well a s a couple that deal with some of the revisions I've made on a technical level, and how I could tackle work that still needs to be done on the site. For now, I want to wrap up the report by saying that it has been a very unexpected opportunity to retrain myself in some professional skills that grew dull, while teaching me to think of ways I can use the knowledge and skills gained as a humanities researcher to create new, important kinds of content.

No comments:

Post a Comment