What is semantic markup? Why should web designers use it? Why is coding "meaning" into the structure of a document important? How does this make the document more accessible and search engine friendly? Why do many designers seek to separate structure from presentation? Can you write examples of how designers might accidentally ignore semantic markup and/or how it should be applied?
Semantics has to do with the meaning of things, and is a topic of considerable importance to people who are much more into literary theory and criticism than I am. Mostly it is discussed in literary criticism like Ferdinand de Saussure's famous work Course in General Linguistics.
Semantics also indicates meaning in term of HTML markup. Basically, it is markup that provides some meaning. It mostly has come about in the more recent versions of HTML (HTML 4 particularly, not sure about HTML 5, but since HTML 5 seems to favor eliminating DIV tags in favor of more specific tags like <header> and <section>, I imagine it also supports semantic markup), in which many of the popularly-used "presentational" tags (i.e., ones that didn't have any meaning besides presentation) were deprecated. This may also have to do with the rise of CSS, since CSS's raison d'être is to take care of the presentational stuff.
I confess I don't know much about semantic markup, but it seems the best reason for using semantic markup is that it is "HTML that describes the content" (as the BBC Guide linked to on the class site says). This, according to the BBC guide, helps avoid browser compatibility issues and also separates presentation from content, which is becoming a more desired idea thanks to the increasing adoption of CSS. I suppose it would also be useful to any non-tech savvy person who might have some reason to be looking at your code. Doing this also would probably help your code stay cleaner (much the way, as I'm learning in MAT 225, coding PHP to do certain things can make your code cleaner because all the PHP is stored server-side and not seen by the client on the other end).
Encoding meaning into a document would make it more user-friendly because it would take into consideration the fact that readers online often scan rather than read articles and so on. It would also make it easier for search engines to index you in a meaningful way (though doing something like submitting a site map to Google also helps).
I think designers seek to separate presentation from structure in HTML because CSS is capable of taking care of all, or pretty much all, of the presentational stuff anyway. And since an external style sheet allows you to control the whole site's style in one document, this allows you to cut away a lot of the frills from the HTML that are no longer needed.
The BBC guide suggests tags to avoid when using semantic markup. These include the deprecated bold and italic tags (<b> and <i>), which apparently don't mean anything (though I'm not sure how their replacements, <em> and <strong>, mean anything either). Some of the tags they suggest not using make sense though, like <strike> for striking through a line to indicate a change (no one really does that anymore anyway, that I know of) and the purely presentational tags <blink> (blinking text, even when it was popular to use the <blink> tag, was generally found to be rather annoying anyway) and <marquee> (which basically let your text scroll like a New York stock ticker...it was fun for a while but I don't think anybody does that now either). CSS, Javascript, and PHP can probably take care of any of those things anyway.
Semantic markup should be applied where it is needed, especially in cases where the tag you might use for something is deprecated as a presentational tag. It's probably the best choice in any situation though, really.
I'm sorry I can't find much to say on this. Goodbye for now. Bonsoir!
Showing posts with label website. Show all posts
Showing posts with label website. Show all posts
Thursday, October 27, 2011
Wednesday, October 26, 2011
Blog Post #7: Experience Design
Many designers have found a rigid focus on usability design stifling to creativity on the Web. The incorporation of experimental navigational systems, animation, sound, high-end graphics, and multimedia elements are often left out of sites who focus on fast-loading pages and making things as easy as possible for the user. However, as broadband connections become increasingly common, so too have many designers become increasingly interested in creating user experiences on the Web; sites where users can do more than simply read a brochure or shop at a store. Companies and designers are discovering that the Web can also be a place for drama, emotion, and a branding experience. Such designers are working in a relatively new design area sometimes called "experience design."
In your own words, define experience design. What considerations would be important for you as a designer if you were designing a site that focuses on "experience." Can you find a site that is a good example of experience design? Why is it a good example and how does it differ from other sites? Like debates between form and function, designing for experience and designing for usability are frequently put at odds. Why is this? Do you think they are mutually exclusive? Or, can they coexist in design?
This is sort of the flip side of the previous post. The previous one was about usability, whereas this is about those who finds usability restrictions squelch creativity.
I do kind of agree, designing to make a site meet strict usability guidelines might take some of the fun out of web design. I'm better with creating content than with the visual design side of things right now though, so I might not mind so much personally, though I'm sure some of my visitors would.
For me, a site that focuses on "experience" would be one that has a lot to offer the visitor but isn't so flashy that it's overwhelming. A person doesn't want to be bored on a website, but they don't want to be overwhelmed either. This is particularly true for me because I am autistic, and autistic people are highly susceptible to sensory overload. A site's that too flashy might also be difficult for those with other sensory processing disorders, people who are easily distracted or who have disorders like ADD, people with visual disabilities who are using screen readers, and - if flashing pictures or lights are involved - those who are prone to photoelectric seizures. I also dislike sites that are flashy visually and have some kind of audio or music that autoplays when you arrive at the site. That can be a lot for me, especially if there is no obvious way to turn the music off, and particularly if it loops AND can't be turned off easily. I also find some custom cursors distracting - they can be fun but sometimes I may not want a trail of sparkles following my arrow around. (The music problem seems primarily present in older sites where people used MIDI files as background audio for their sites. This used to be the cool thing to do once upon a time. Now I think people have moved on).
Why are designing for usability and designing for experience at odds? I think for much the same reason rational scientists and not-as-rational artistic people end up at odds - those in each camp have different ways of thinking about how web design should be done. It's like those literary theorists who only care about the text and what you can get from the text itself (sometimes called the "the author is dead" camp because they evaluate the text on its own merit, ignoring the author) versus those who want to evaluate a text based on the author and his or her background, society, culture, reader's response, feminist views, etc. They just can't agree to disagree, so they butt heads. As I mentioned before, both viewpoints have merit. Which one is the better one remains to be seen. And at any rate things in the tech world are constantly in flux anyway. So I think they can peacefully coexist, if each group would stop making such a big fuss about the other's view.
And now, some examples of "experience design":
In your own words, define experience design. What considerations would be important for you as a designer if you were designing a site that focuses on "experience." Can you find a site that is a good example of experience design? Why is it a good example and how does it differ from other sites? Like debates between form and function, designing for experience and designing for usability are frequently put at odds. Why is this? Do you think they are mutually exclusive? Or, can they coexist in design?
This is sort of the flip side of the previous post. The previous one was about usability, whereas this is about those who finds usability restrictions squelch creativity.
I do kind of agree, designing to make a site meet strict usability guidelines might take some of the fun out of web design. I'm better with creating content than with the visual design side of things right now though, so I might not mind so much personally, though I'm sure some of my visitors would.
For me, a site that focuses on "experience" would be one that has a lot to offer the visitor but isn't so flashy that it's overwhelming. A person doesn't want to be bored on a website, but they don't want to be overwhelmed either. This is particularly true for me because I am autistic, and autistic people are highly susceptible to sensory overload. A site's that too flashy might also be difficult for those with other sensory processing disorders, people who are easily distracted or who have disorders like ADD, people with visual disabilities who are using screen readers, and - if flashing pictures or lights are involved - those who are prone to photoelectric seizures. I also dislike sites that are flashy visually and have some kind of audio or music that autoplays when you arrive at the site. That can be a lot for me, especially if there is no obvious way to turn the music off, and particularly if it loops AND can't be turned off easily. I also find some custom cursors distracting - they can be fun but sometimes I may not want a trail of sparkles following my arrow around. (The music problem seems primarily present in older sites where people used MIDI files as background audio for their sites. This used to be the cool thing to do once upon a time. Now I think people have moved on).
Why are designing for usability and designing for experience at odds? I think for much the same reason rational scientists and not-as-rational artistic people end up at odds - those in each camp have different ways of thinking about how web design should be done. It's like those literary theorists who only care about the text and what you can get from the text itself (sometimes called the "the author is dead" camp because they evaluate the text on its own merit, ignoring the author) versus those who want to evaluate a text based on the author and his or her background, society, culture, reader's response, feminist views, etc. They just can't agree to disagree, so they butt heads. As I mentioned before, both viewpoints have merit. Which one is the better one remains to be seen. And at any rate things in the tech world are constantly in flux anyway. So I think they can peacefully coexist, if each group would stop making such a big fuss about the other's view.
And now, some examples of "experience design":
- Erin's Challenge! I Can Speak Japanese, the site I reviewed in my first post. That site provides a very full experience to anyone who wishes to learn the Japanese language. It's even been used to teach Japanese in a classroom setting, as their trailer in that post shows. And while it uses a lot of Flash, the overall design of the site is pretty minimalist, so it isn't too overwhelming.
- StarWars.com - The most recent version of the official Star Wars website is VERY streamlined. Yet the website still provides a lot of things for the user to do, the perhaps best well-known being the site's encyclopedia, which is the most detailed resource on Star Wars I've ever seen. One of my fave Sailor Moon websites, moonkitty.net, took its redesign cue from StarWars.com when trying to streamline its home page, but I think it still has too much distracting stuff in the sidebars to make the idea really work.
- The Great Gatsby - For NES - I was introduced to this site by a classmate in my American Lit 2 class, in which we were reading The Great Gatsby at the time. While the site does not provide a huge amount of user experience, just playing the game is fun in itself. As anyone who has read The Great Gatsby would know, it doesn't really have the kind of plot that would probably translate well to a video game, but somehow this game makes it work. And while it appears to have be a fan-created game (despite what the actual website says about it being on a NES cartridge the creator found at a yard sale), it does look like a real NES game and is pretty fun to play once you master the controls (which took me some time to do).
Tuesday, October 11, 2011
Pokémon Trading Card Game Online is Cool! (Blog Post #1 Again)
Find a site that you think is cool or cutting edge and well designed. Explain what this site is about and why you find it compelling. What makes the site cool or cutting edge and how does it differ from most sites that are out there? Are there special, unique, or interesting features to the site? Can you determine how the site was made and/or the tools and techniques that were used?
Recently, I discovered that the Pokémon Trading Card Game, which I used to play in its physical form several years ago, was being made into an online version, which you can find here: http://www.pokemontcg.com/. It is known as the Pokémon Trading Card Game Online, though the actual game on the site is referred to as Pokémon Trainer Challenge.
This site is basically what it sounds like - an online version of the original Trading Card Game. The original game involves collecting cards, making decks from them, and using the decks to play against others according to rules defined by Pokémon USA (or Wizards of the Coast, who released the cards until 2003). It essentially simulates a Pokémon battle in the Pokémon video games, with the same concept of a team of six Pokémon, damage, special conditions (like poison, confusion, etc), and prizes for defeating an opponent (in the form of prize cards; in the video game you earn either EXP - if you defeat a wild Pokémon - or EXP and money if you defeat another Pokémon trainer), coupled with aspects specific to the card game, like coin tossing, energy cards, and special non-Pokémon cards (initially called Trainer Cards, later expanded into the categories of Supporter Cards, Item Cards, Stadium Cards, and Pokémon Tools) that can affect gameplay in various ways (favorites early on were card-drawing cards like Bill and Professor Oak; other cards like Full Heal and the rare card Computer Search were also popular).
The online version, now available in open beta, seeks to replicate this experience online, with cards that look just like the physical ones. Based on the site's "learn the game" tutorials, the process of the game will go just the same as the physical Trading Game does. (I haven't tried the actual game; I've had some trouble getting in even though I should have access to the beta).
The site is cool because it is the only online version of a trading card game that I have ever heard of. If it is the first ever, then it is certainly cutting edge. It may help to generate more interest in the Trading Card Game, which I'm excited about because I haven't been able to play the game in a while (aside from a modified 30-card game at Comic-Con) and would like to get back into it again.
One of the interesting features of the site is the "Learn" tutorials. They feature an exclusive professor character who teaches you the basic, intermediate, and advanced aspects of the game through an interactive video environment. And if you finish the tutorials successfully, you gain special tokens as rewards (which don't have any value yet - a lot of aspects of the game aren't yet available because this is a beta - but which the site's FAQ indicates will mean something later).
Another interesting feature is the Deck Builder, which you gain once you purchase booster packs or theme decks using the credits you can gain from Pokémon Black and White physical booster packs and specially marked theme decks. After you open your purchased packs (as well as the free theme deck you get if you haven't bought a physical one and registered it - as I found out personally), you simply drag one card into place and the system creates a deck for you out of the cards you have. It's very useful because I've never been good at deck-building, which is why, I think, I've always lost playing the TCG in the past.
The site was obviously made mostly with Flash. The forum seems to be made with the typical PHPBB code used with forums. The site/game's still in beta though so it's hard to say exactly how things are built. A view of the home page source code shows some JavaScript and a LOT of DIV layers. The site also promises to be kid-friendly, a place "where kids can play the Pokémon Trading Card Game Online and we work tirelessly to help keep it as safe as possible," which may mean there is some PHP security code under the surface.
If I had been able to get into the game proper, I'd be able to say more, but unfortunately I can't. In lieu of that, please enjoy these screenshots that I took from the site:
To end this post, check out this video which shows what battling in this game is like:
See you next time!
 | |||
| My custom avatar for the TCG Online site |
Recently, I discovered that the Pokémon Trading Card Game, which I used to play in its physical form several years ago, was being made into an online version, which you can find here: http://www.pokemontcg.com/. It is known as the Pokémon Trading Card Game Online, though the actual game on the site is referred to as Pokémon Trainer Challenge.
This site is basically what it sounds like - an online version of the original Trading Card Game. The original game involves collecting cards, making decks from them, and using the decks to play against others according to rules defined by Pokémon USA (or Wizards of the Coast, who released the cards until 2003). It essentially simulates a Pokémon battle in the Pokémon video games, with the same concept of a team of six Pokémon, damage, special conditions (like poison, confusion, etc), and prizes for defeating an opponent (in the form of prize cards; in the video game you earn either EXP - if you defeat a wild Pokémon - or EXP and money if you defeat another Pokémon trainer), coupled with aspects specific to the card game, like coin tossing, energy cards, and special non-Pokémon cards (initially called Trainer Cards, later expanded into the categories of Supporter Cards, Item Cards, Stadium Cards, and Pokémon Tools) that can affect gameplay in various ways (favorites early on were card-drawing cards like Bill and Professor Oak; other cards like Full Heal and the rare card Computer Search were also popular).
The online version, now available in open beta, seeks to replicate this experience online, with cards that look just like the physical ones. Based on the site's "learn the game" tutorials, the process of the game will go just the same as the physical Trading Game does. (I haven't tried the actual game; I've had some trouble getting in even though I should have access to the beta).
The site is cool because it is the only online version of a trading card game that I have ever heard of. If it is the first ever, then it is certainly cutting edge. It may help to generate more interest in the Trading Card Game, which I'm excited about because I haven't been able to play the game in a while (aside from a modified 30-card game at Comic-Con) and would like to get back into it again.
One of the interesting features of the site is the "Learn" tutorials. They feature an exclusive professor character who teaches you the basic, intermediate, and advanced aspects of the game through an interactive video environment. And if you finish the tutorials successfully, you gain special tokens as rewards (which don't have any value yet - a lot of aspects of the game aren't yet available because this is a beta - but which the site's FAQ indicates will mean something later).
Another interesting feature is the Deck Builder, which you gain once you purchase booster packs or theme decks using the credits you can gain from Pokémon Black and White physical booster packs and specially marked theme decks. After you open your purchased packs (as well as the free theme deck you get if you haven't bought a physical one and registered it - as I found out personally), you simply drag one card into place and the system creates a deck for you out of the cards you have. It's very useful because I've never been good at deck-building, which is why, I think, I've always lost playing the TCG in the past.
The site was obviously made mostly with Flash. The forum seems to be made with the typical PHPBB code used with forums. The site/game's still in beta though so it's hard to say exactly how things are built. A view of the home page source code shows some JavaScript and a LOT of DIV layers. The site also promises to be kid-friendly, a place "where kids can play the Pokémon Trading Card Game Online and we work tirelessly to help keep it as safe as possible," which may mean there is some PHP security code under the surface.
If I had been able to get into the game proper, I'd be able to say more, but unfortunately I can't. In lieu of that, please enjoy these screenshots that I took from the site:
 |
| Pokémon Trading Card Game Online community/forum |
 |
| User dashboard |
 |
| Home page |
 |
| The initial game-playing interface |
 |
| News page |
 |
| User profile (with leaderboard) |
 |
| Shop where you can buy booster packs for the game |
 |
| Support Center |
 |
| Tutorials section |
 |
| On the forum, there are desktop wallpapers you can download with trainers on them, representing the different energy types in the TCG. This here is the water-type one (my favorite type) featuring a trainer named Calvin. |
 |
| The site's "ProfessorMaven" explains to users what exactly an "open beta" is. |
To end this post, check out this video which shows what battling in this game is like:
See you next time!
Wednesday, September 21, 2011
Blog Post #5: Web Typography
One of the big frustrations that designers have about designing for the
Web is the historically poor state of web typography. As web designers
strive for consistency across platforms, they have been forced to rely
on only a small set of commonly installed fonts, knowing that their
ideal choice of font may not be installed on the end-users system. As a
result, designers would often turn to creating images for their headers
and subheads (pictures of text instead of actual text), but this has
never been a good choice for body copy as it has some draw backs in
terms of file size, semantic markup, and accessibility. However, many
people feel that typography on the web is finally beginning to mature.
Why is that? What is the @font-face declaration and what are the
implications of downloadable and/or hosted fonts? What is WOFF and why
is it significant? What are your impressions about the current state
(and future) of Web Typography?
I think that people are saying web typography is maturing because of the introduction of the @font-face declaration with CSS3. W3 puts it well:
I for one am happy that this functionality is finally available, as I am one of those people who have created images for headers (usually banners). I also have found many interesting fonts on the Absolute Font Archive that I would like to use, and I regularly bookmark Smashing Magazine's articles on fonts and typography. Before the arrival of @font-face, though, you had to stick with what fonts people were likely to have on their computers, and that list is pretty limited. But with @font-face, all those great fonts people have created and put on the internet for download can finally be put to use!
I have not played around with WOFF, but apparently it means "Web Open Font Format" and is what is used to embed fonts in pages. It is also significant in that it compresses said data, allowing for pages to have smaller file size and thus load faster. And of course, we always want our pages to load faster. I mean, it's kind of common web courtesy nowadays.
I have to say, I'm excited about where web typography could go with the arrival of @font-face. As I said before, it will allow so many more interesting fonts to get some use. This will allow designers to make web pages so much more unique too. And UNIQUE IS GOOD!
I apologize if my commentary on this is sparse; it's a subject I'm interested in but don't know a ton about. (Plus I'm kinda tired out from doing Exercise 3). Still, a development like this is worth blogging about, right?!
Oh, and by the way, I chose not to do Blog Post Topic #4. Hence the jump from #3 and #5.
I think that people are saying web typography is maturing because of the introduction of the @font-face declaration with CSS3. W3 puts it well:
"The @font-face rule allows for linking to fonts that are automatically activated when needed. This allows authors to select a font that closely matches the design goals for a given page rather than limiting the font choice to a set of fonts available on all platforms."
I for one am happy that this functionality is finally available, as I am one of those people who have created images for headers (usually banners). I also have found many interesting fonts on the Absolute Font Archive that I would like to use, and I regularly bookmark Smashing Magazine's articles on fonts and typography. Before the arrival of @font-face, though, you had to stick with what fonts people were likely to have on their computers, and that list is pretty limited. But with @font-face, all those great fonts people have created and put on the internet for download can finally be put to use!
I have not played around with WOFF, but apparently it means "Web Open Font Format" and is what is used to embed fonts in pages. It is also significant in that it compresses said data, allowing for pages to have smaller file size and thus load faster. And of course, we always want our pages to load faster. I mean, it's kind of common web courtesy nowadays.
I have to say, I'm excited about where web typography could go with the arrival of @font-face. As I said before, it will allow so many more interesting fonts to get some use. This will allow designers to make web pages so much more unique too. And UNIQUE IS GOOD!
I apologize if my commentary on this is sparse; it's a subject I'm interested in but don't know a ton about. (Plus I'm kinda tired out from doing Exercise 3). Still, a development like this is worth blogging about, right?!
Oh, and by the way, I chose not to do Blog Post Topic #4. Hence the jump from #3 and #5.
Sunday, August 28, 2011
Blog Post #2: Can I Get a Resource?
Although we don't have to do both of the posts for this week, I decided I will go ahead and do this post too and share a few design resources with you all.
Hex Hub HTML Color Codes - I use this site all the time to find hexadecimal codes for colors. They have a lot of ones listed here, which should make it easy for you to find the perfect shade. Programs like Fireworks and Photoshop let you put in hex codes in the color picker too, so you can use these codes in your graphic design as well.
Namechk - This is not so much a design resource but it could help you when you decide to get the word out about your website on social networks. This site lets you check over 100 social networking sites to see if the username or custom URL you want is available. Saves you lots of time and stress.
8 Simple Ways to Improve Your YouTube Channel - This is also social media-related in a way, but it's the best article I've ever seen on helping you out with YouTube. I found it when I did a Google search on how to change your YouTube username (since I no longer like the one I have). The article is on Mashable, a popular tech blog that is worth following in and of itself.
StumbleUpon - I came across this semi-obscure social network a while back, which suggests web content to you based on what you tell the site your interests are. I have found a lot of great stuff using this site. You can browse what you are given using the site or through downloading the StumbleUpon Toolbar for Internet Explorer. Either way, when viewing a site, you give it a thumbs up or thumbs down. StumbleUpon uses this data to improve its recommendations. It's definitely a good place to start to get inspiration!
~*~
Hope you enjoyed this short list of resources! Till next time!
Hex Hub HTML Color Codes - I use this site all the time to find hexadecimal codes for colors. They have a lot of ones listed here, which should make it easy for you to find the perfect shade. Programs like Fireworks and Photoshop let you put in hex codes in the color picker too, so you can use these codes in your graphic design as well.
Namechk - This is not so much a design resource but it could help you when you decide to get the word out about your website on social networks. This site lets you check over 100 social networking sites to see if the username or custom URL you want is available. Saves you lots of time and stress.
8 Simple Ways to Improve Your YouTube Channel - This is also social media-related in a way, but it's the best article I've ever seen on helping you out with YouTube. I found it when I did a Google search on how to change your YouTube username (since I no longer like the one I have). The article is on Mashable, a popular tech blog that is worth following in and of itself.
StumbleUpon - I came across this semi-obscure social network a while back, which suggests web content to you based on what you tell the site your interests are. I have found a lot of great stuff using this site. You can browse what you are given using the site or through downloading the StumbleUpon Toolbar for Internet Explorer. Either way, when viewing a site, you give it a thumbs up or thumbs down. StumbleUpon uses this data to improve its recommendations. It's definitely a good place to start to get inspiration!
~*~
Hope you enjoyed this short list of resources! Till next time!
Blog Post #1: "Erin's Challenge! I Can Speak Japanese" is cool!
Find a site that you think is cool or cutting edge and well designed. Explain what this site is about and why you find it compelling. What makes the site cool or cutting edge and how does it differ from most sites that are out there? Are there special, unique, or interesting features to the site? Can you determine how the site was made and/or the tools and techniques that were used?
The site I would like to feature for this post is Erin's Challenge! I Can Speak Japanese. I found this back in March while searching for Japanese language learning resources. It was created by the Japanese Foundation, an organization, that, according to their own website, "specializes in international cultural exchange in Japan," and is specifically sponsored by their Japanese-Language Institute in Urawa. Its purpose is to teach the Japanese language to foreigners through the use of 25 video skit "lessons" starring a young British girl named Erin who is studying abroad in Japan. Each lesson focuses on specific cultural situations which Erin encounters, such as introducing oneself, asking where something is, telling time, asking the price of a bus fare, and ordering food. Each lesson includes the video skit, a script of the skit, a manga rendition of the skit, and review questions. Text for the skit, script, and manga can be viewed in Japanese with kanji, Japanese without kanji, Romanji (Japanese written in Roman letters, like what we use), and English (or whatever foreign language you speak - I viewed the English site but you can also view the site in Japanese, Chinese, Spanish, Portuguese, or Korean). There are both basic and advanced versions of the skits available, allowing anyone of any level in the language to enjoy this resource. As the site's motto says, "Free Japanese learning website, even beginners can enjoy." You can also make an account on the website, which opens up more features, but the site is fully functional without one.
I find this site compelling because it provides an easy way for foreigners to learn Japanese. It has the script for those who learn best through writing as well as elements for visual learners such as the video and manga. The use of cultural situations to teach the lessons also introduces users to aspects of Japanese culture they might not otherwise learn about using other resources, as well as putting the learning into contexts that a visitor to Japan or study-abroad student might easily encounter.
I have not explored many Japanese language resources on the net, so I am not sure how Erin's Challenge differs from what else is out there. But its use of video and cultural situations is probably pretty unique. Plus the site seems very tailored to foreigners, especially as they feature a foreign character, which is cool. The site is also more interactive than most, with the features such as the videos and scripts, and features that help you understand what you learned, like the Key Phrases (which also includes a section showing how these key phrases can be used in situations other than the one Erin experienced) and the Let's Try area, which also introduces a situation similar to what Erin experienced but not the same (the one for the first lesson, for example, discusses exchanging business cards, even though the main lesson is on classroom introductions). They also provide a very useful FAQ that shows how to use each part of the site, as well as giving very specific technical specifications to help you get the most out of the site.
The video skits are a unique part of the site. Instead of just having a teacher teaching you Japanese, you get to follow a story, namely that of Erin's six months studying in Japan. Erin gives viewers somebody to relate to as they embark on their journey learning Japanese, which makes the experience that much more interactive!
As for how the site was made...clearly Flash was used for most, if not all, of it because the site is very dependent on Flash Player. The skits were taken from a DVD series, so some sort of video conversion software was used to put it on the internet. Since the site also allows you to make an account and features a "user ranking" sort of leaderboard, there is probably some sort of interface that manages that part. According to the FAQ, the site also uses JavaScript. The FAQ also suggests you have a large screen size (1024 x 768 or higher), which makes sense since the site takes up a large amount of screen space even on my laptop (which has a unusually wide screen and a resolution of 1280 x 800).
Anyway, I definitely recommend this site if you want an easy and creative way to learn the Japanese language! I now leave you with some screenshots of the site, taken by me in full-screen:
This trailer from the site's official YouTube channel also gives a very good overview of how the site works, including some stuff I forgot to mention:
The site I would like to feature for this post is Erin's Challenge! I Can Speak Japanese. I found this back in March while searching for Japanese language learning resources. It was created by the Japanese Foundation, an organization, that, according to their own website, "specializes in international cultural exchange in Japan," and is specifically sponsored by their Japanese-Language Institute in Urawa. Its purpose is to teach the Japanese language to foreigners through the use of 25 video skit "lessons" starring a young British girl named Erin who is studying abroad in Japan. Each lesson focuses on specific cultural situations which Erin encounters, such as introducing oneself, asking where something is, telling time, asking the price of a bus fare, and ordering food. Each lesson includes the video skit, a script of the skit, a manga rendition of the skit, and review questions. Text for the skit, script, and manga can be viewed in Japanese with kanji, Japanese without kanji, Romanji (Japanese written in Roman letters, like what we use), and English (or whatever foreign language you speak - I viewed the English site but you can also view the site in Japanese, Chinese, Spanish, Portuguese, or Korean). There are both basic and advanced versions of the skits available, allowing anyone of any level in the language to enjoy this resource. As the site's motto says, "Free Japanese learning website, even beginners can enjoy." You can also make an account on the website, which opens up more features, but the site is fully functional without one.
I find this site compelling because it provides an easy way for foreigners to learn Japanese. It has the script for those who learn best through writing as well as elements for visual learners such as the video and manga. The use of cultural situations to teach the lessons also introduces users to aspects of Japanese culture they might not otherwise learn about using other resources, as well as putting the learning into contexts that a visitor to Japan or study-abroad student might easily encounter.
I have not explored many Japanese language resources on the net, so I am not sure how Erin's Challenge differs from what else is out there. But its use of video and cultural situations is probably pretty unique. Plus the site seems very tailored to foreigners, especially as they feature a foreign character, which is cool. The site is also more interactive than most, with the features such as the videos and scripts, and features that help you understand what you learned, like the Key Phrases (which also includes a section showing how these key phrases can be used in situations other than the one Erin experienced) and the Let's Try area, which also introduces a situation similar to what Erin experienced but not the same (the one for the first lesson, for example, discusses exchanging business cards, even though the main lesson is on classroom introductions). They also provide a very useful FAQ that shows how to use each part of the site, as well as giving very specific technical specifications to help you get the most out of the site.
The video skits are a unique part of the site. Instead of just having a teacher teaching you Japanese, you get to follow a story, namely that of Erin's six months studying in Japan. Erin gives viewers somebody to relate to as they embark on their journey learning Japanese, which makes the experience that much more interactive!
As for how the site was made...clearly Flash was used for most, if not all, of it because the site is very dependent on Flash Player. The skits were taken from a DVD series, so some sort of video conversion software was used to put it on the internet. Since the site also allows you to make an account and features a "user ranking" sort of leaderboard, there is probably some sort of interface that manages that part. According to the FAQ, the site also uses JavaScript. The FAQ also suggests you have a large screen size (1024 x 768 or higher), which makes sense since the site takes up a large amount of screen space even on my laptop (which has a unusually wide screen and a resolution of 1280 x 800).
Anyway, I definitely recommend this site if you want an easy and creative way to learn the Japanese language! I now leave you with some screenshots of the site, taken by me in full-screen:
 |
| The site's homepage |
 |
| The first Basic Skit in action. |
 |
| The "Script" feature. |
 |
| The "Manga" feature, with only English turned on. Down in the corner, there is also a "Learn onomatopeia with manga" feature, which helps you learn the Japanese words for different manga sound effects. |
 |
| The "Review Questions" feature. |
 |
| The first Advanced Skit in action. Though on the same subject as the Basic Skit 1, the situation is different. |
 |
| The "Key Phrases" feature for Basic Skit 1 in action, featuring an animated version of Erin along with an animated "teacher." |
 |
| The "Develop vocabulary" section for Basic Skit 1 (with a helpful reminder to get the latest version of Flash Player on the bottom). |
This trailer from the site's official YouTube channel also gives a very good overview of how the site works, including some stuff I forgot to mention:
Subscribe to:
Posts (Atom)