When we chose the topic to talk about onomatopoeia in Japanese, we decided to do some “computer” things for it. Actually we really want to make a simple game to help understanding and learning Japanese onomatopoeia. But limited to time and resources, we turned to build a simple but funny website to achieve our goal. And I take responsibility for the programming part using what I have learned as a master student in computer science. Therefore in this report, I want to talk about how I build this onomatopoeia website in a quick way without mentioning too much technological details.
Prepare Onomatopoeia Materials
No matter what and how you want to present on a topic, you have to collect enough materials as the supporting content. As for onomatopoeia in Japanese, we did find some websites that make definitions to explain what exactly is onomatopoeia [1], list all onomatopoeias with detailed comments [2], organize onomatopoeias by category [3], and list all onomatopoeias attached with pictures and examples [4] in Japanese or English. To understand and learn something like onomatopoeia is always easier and funnier to start from searching it in Google and looking through related websites rather than taking a course or reading some paper.
We found there are also onomatopoeias using in other languages, but onomatopoeia in Japanese seems to be more often used and developed, making it more special. So that when people talk about onomatopoeia they are talking onomatopoeia in Japanese. Then we decided to focus on onomatopoeia in Japanese and make our own onomatopoeia website based on content from these websites. To make our website more interesting and cooler, we try to present onomatopoeia with multimedia way by both text, picture, gif and audio. For picture and gif, we can easily search them on Yahoo Image, and we can judge if it is a commonly used onomatopoeia by the searching result. And for some onomatopoeia related to sound, we also try to find related audio from Freesound and put it directly on our website to help to feel it.
Build A Website
Before build a website, it should be clear why we need a website instead of a document or a PPT. A document is enough if you want to share some text content. Then if you want to add some pictures or even animation to make it attractive to audience, you can make a PPT. If you are still unsatisfied with it, you want user not only can passively see something but also can actively do something by themselves, you need to build a website. As I mentioned in our presentation, a website is not only a document when it is interactive with user, a game to play is obviously more attractive than a paper to read. Besides, a website is easier to distribute with only a short link as long as one can connecting to the Internet.
For now there are many service providers that can help you to build your website like a blog without doing any code. I think the blog of each class from 先生 is build by Blogger, where 先生 only need to put content then the website will be generated automatically. But to build a more complex website to meet our demands, we still have to build our website from lower level. But it also doesn’t mean that you have to do it all by yourself, there are endless off-the-shelf resources on the Internet you can find and use for free.
For example, I wanted to find a list layout with comic style so I can put onomatopoeias one by one in an interesting way, then I found someone already make a CSS Only Mobile Friendly Comic Book Layout. Then I can just download it and use it as the basic framework for our website with only minor modifications. Of course you have to be familiar with some basic programming language like HTML, CSS and Javascript that combines to make a website, you can just image they are a set of tools and rules you can systematically learn and use. Next I put each onomatopoeia to each grid with interesting materials we prepared and make sure it well-displayed. The game part is a little difficult, I had to dynamically make random picture with three candidate onomatopoeia choice and react with animations when the correct one is chosen.
So far the website itself is already done, but you have to put it to somewhere that can be accessed by the Internet. I chose the Github Pages where you can publish your website for free, it also needs some basic concepts of how Github works. And I keep a domain name myself, it’s just a kind of Internet address that can guide to your website, so I can use my domain to link to our website to make it easier and cooler. That’s how I build our onomatopoeia website: 見て聞いて学ぶオノマトペ [9].