Website - Week 3

The final topic that I chose for the website will be about Grade 10. Since I really like my G10 school life at ISU, I wanted to create something that will keep the memories of my class and classmates. Even though more than half of G10 school year has passed, I think it will still be a good online place to share school "gossips", memories, events, and some academic talks. Also, if this website got popular among our classmates, then I can also use the same design skills to build one for next school year :)

Before I start brainstorming for my website, I made a simple design specification.
I believe that the website design should have:

• Neat but interesting formats such as the entire website design, background, proper fonts for the content, etc.
• The font for the menu can be decorative, but the font for the content should be neat, such as (but not limited to) arial, calibri, times new roman.
• The colors for the website should not hurt readers' eyes. Contrast of black and white will be okay, but the website should avoid using bright colors like red, yellow, bright green, etc.
• Appropriate images that suit to the website
• Music if it is required, but there should be a way to stop playing so that the users can play and stop the music by themselves
• Menu that is easy to navigate with a suitable design
• Contents that are not way too small or big, and there should not be too many texts on one page

So the things that I want to include in my website are:

• Student individual photos for the background of the website
• Sign up page
• Profile - Brief profile of each student and homeroom teachers such as: name(or nickname), date of birth, email address, phone number, profile picture, etc. (If they do not want to show their identity, then I'll skip them)
• Discussion - Free discussion forum to share ideas, have discussions on any topic and to know what's going around the school
• Homework - what homework we have, including the deadlines, etc.
• Photo - anyone can put pictures
• Suggestion box - to get suggestions from people in order to improve the website

To be continued...

Website - Week 2

For week 2, we are supposed to read three articles that give some tips to create a website. All of them were pretty straightforward which make me easy to understand, and I think all the information listed on these three websites will be very helpful as well as useful in terms of making a website.

1. "About.com: Web Design/HTML - Readers Respond: What Design Scares You?"
The first website is from About.com, and there are several responses made by different users, and they are based on a question that what factors make a website to scare them. The answers gave me an idea that what things that I should NOT include in my website design such as:

• Putting too much animation/flash - I often find out that some Korean websites tend to have way too much animation to 'advertise' their products, and I just get tired of waiting the main page to load. Too much flash make the users be annoyed for taking long time to upload the website, and it is not interesting of fancy at all but make your eyes get tired.
• Playing music that keeps playing again and again without any pause - I totally agree with this response. Whenever I enter a website and it plays annoying music forever, I really want to leave the website or I sometimes blame for the creator of the website for putting such lame music. If you are trying to put music to your website, your website should have at least a stop button to pause the music. For some websites that I know, they stop playing songs when I press the 'Esc' key. Maybe people should consider about using that way as well.
• Way too strong contrast between the background and the contents - It will just make your eyes be extremely tired if you have to read a text that is written in bright red or yellow from the black background. Well, these color contrasts would be suitable when you create an artwork, but for a website, wouldn't they be way too much for your eyes? Therefore, people suggest that a white background with black texts is the best way.
• Dragging the mouse over the text to see the content - I strongly think that people are supposed to 'view' the text from the website without dragging the mouse to see the content. Maybe some people did it in order to make the website to be more 'interesting', however, nonsense! It is just an annoying job to do.
• No Navigation - Some websites do not have navigation system, which makes website users have hard time to find the information that they are searching for. In order to visually aid the users, many people believe that there should be a proper navigation on the website which I also agree with them.

2. "Web Style Guide 3rd edition - Sidebar: A List of Reminders"

This website also tells me about some reminders to follow in terms of creating a web page. It tells some tips of website design, and how to put good quality of contents. There are some advice that I like which are:

• "Know what you’re doing, why you’re doing it, and for whom you’re doing it before anyone touches HTML or Photoshop" - Even though adding decorations and making your website look interesting are important factors, the first and foremost thing that you should do is to figure out the purpose, and the specific users of the website.
• "Do not overwrite" - People do not enjoy reading a web article that has such small fonts; small fonts are uncomfortable to read. Also, if a website is just full of texts, people will easily get bored of reading the contents. Therefore, an adequate amount of writing will benefit the website users and viewers.

3. "HTML Source: HTML Tutorials - Accessibility"

This website is about accessibility of websites. In order to access a website well, there are some major factors that I think people should take into consideration such as:

• Navigation - It is important to guide the web users such as where the information that they need is located. Navigation also shows the depth of your website such as how the information is demonstrated through the website. In order to navigate the readers, a good sense of structure and organization is required.
• Content Accessibility - With appropriate use of information and proper codes such as HTML, the content should be accessed to everyone even for those who are handicapped. The content will be better if its more objective than subjective because every reader is qualified to read it.
• Logical Style - Unfortunately, I did not understand the information of logical style fully, but what I have understood so far is that using appropriate logical elements (that gives functions to the web pate) and block-level elements (ex: <>, <>) would help the website be more organized and be in order. Basically, I think it is more related to the functions of website creation with using HTML.
• Testing your pages - Checking whether your websites have the same fonts, designs, sizes, etc. would help you to organize the information as well as the website, and it will benefit the readers to understand the content better in the end.

Works Cited

Kyrnin, Jennifer. "Readers Respond: What Design Scares You?" About.com: Web Design/HTML. 21 March 2010. http://webdesign.about.com/u/ua/webdesignbasics/what-design-scares-you.htm

Shannon, Ross. "Accessibility." HTML Source: HTML Tutorials. 21 March 2010. http://www.yourhtmlsource.com/accessibility/

"Sidebar: A List of Reminders." Web Style Guide 3rd Edition. 21 March 2010. http://webstyleguide.com/wsg3/1-process/5-list-of-reminders.html

Website - Week 1

(1)
• LEAD Portal
(http://library.thinkquest.org/08aug/02289/#?page=defining-leader§ion=perception)

Colors – There are different colors are used in the website. For the menu icons, colors such as green, blue, yellow and purple are used in order to grab the viewer’s attention. Since the background color is dark, the bright colors used for the website is showing out very well, and make the website to be interesting and colorful. When I scroll down the website, there is an animated menu with different colors, which makes me to be interested about it and gives me a desire of clicking one at each time to figure out what information they contain.

Contrast – There is a significant contrast of colors demonstrated in this website. Firstly, the people icon at the top of the website is in colors that can be showing out well from the dark brown background. Since the content background color is white, the menu icons which are in blue, green, yellow, and orange make a good contrast of colors. Because of these contrasts, the website is able to make the website user to be more interested of the website design and the contents of it.

Photos – There are not many real photos are used in the website, but some characterized icons. On the top of the website there are diagrams of people in different colors. On the side of the website, where the menu icons are, there are also some images of cartoonish looking drawings on them as well as on the bottom of the website. Since realistic photos are not used for the website, I think it makes the website to be less serious and give friendly look to the website users. Also, since the topic is about leadership, which may be boring and even hard sometimes, I think it is a good idea to give some cartoonish view to the website so that people will be able to enjoy reading the information on the website.

Font – Fonts are simple and not fancy, which makes viewers to read the information without having any reading difficulties. For the texts on the menu icons, they are decorated with some colors that match with the colors of icons, and for the information texts, they are in black and simple fonts.

Navigation – When you click any menu, it did not open a new browser, but it directly linked to the information on the same page. Therefore, it was very easy to organize what information I wanted to find, and the website did not become very messy even though I clicked on different categories for several times.

Overall, I think that the cartoonish design of the website was the most appealing. Since I am a visual learner, I prefer websites that have some good graphic designs so that I do not become bored out of reading information on the website. Nice choose of fonts and use of simple icons to visually aid the menu were another part that make the website to be a successful one.
 
• Portable Partners (http://library.thinkquest.org/08aug/01589/home.html)

Colors – There are not many colors are used for this website. Different tones of red are used for the general website design. If LEAD Portal one used different colors, this one tends to be simpler and more organized due to simple color choice. The background has a light tone of pattern, and the main website color is red, which makes the red part to show out better. Even though only one color is used for this website, it grabs viewer’s attention because the color is red and it’s very bright. However, if you just look at the title part for a long time, your eyes start to hurt a little bit because of its brightness.

Contrast – The background is covered with small round pattern, and the main website part is in red. Since the pattern tends to be dimmed, the strong red color makes a good contrast with the background.

Photos – All the information that is included in the website, there is a picture in order to give a visual effect to the information. I think it is a very clever choice to put some pictures to the information because it makes viewers to be more interested in the website rather than just reading a long article.

Font – Like the previous website that I visited before, this website also has a very neat and simple font. It helps me to find out information much easier, and makes the website to be organized. However since the website itself already has a very simple design, I think it might have been better if the website had fancier title image.

Navigation – The website was very easy to navigate. The topics were divided into different menu icons, and when you click it the information is directly linked from the previous website, which you do not require a new online browser to read the information.

The reason why I think this website is a good one is because A) it has an organized website design, which I was able to figure out information conveniently, B) the use of simple portable device icons as a visual effect of menu was very unique and cute.

(2)
• The Simphony of Chocolate (http://library.thinkquest.org/08aug/00696/intro1.html)

The first reason that I did not like about this website is its poor quality of graphics. There are some animated icons as the menu, and they look terribly bad. The image of chocolate box looks like it just got its shape from a photo. I think it would be better if they just used a simpler version of graphical images. Also the font to describe the menu is sort of hard to read. The colors that are used for this website are different tones of brown, but since everything is in brown it is hard to find some good contrast between the background and the information. Lastly there is a spelling mistake. I think it should be Symphony, not Simphony. Overall, the website is just full of animated icons with bad quality. I wonder how it got a first place from the competition.

(3)
My possible topics are:
• The wild animals (information about animals and their habitats)
• ISU Grade 10 (about our class)
• Travel Around the world (information about different cultures, foods, clothes, holidays, etc)

Website

We started a NEW UNIT! It is called "Website". In this unit we are going to learn how to make a website using html and make our own website that the topic is based on a topic that intrigues us. In order to learn some website creating skills, we are going to have online learning using a program called "Moodle". We will have a class discussion as well as some personal discussion with Mrs. Wilson. Since we are learning about websites, I think it is a very good idea that we are going to have a discussion online instead of having a face-to-face traditional form of discussion :) After we make our website, we are going to have a class competition to figure out who's website is made the best, and I think it will be a very interesting process since the competition will lead us to enlarge our knowledge on creating a website in order to win the competition :)

We chose Approaches To Learning as our Areas Of Interaction because we are learning skills of creating a website through using various methods; online class discussions, investigations, and visiting some sample websites. We then chose Inquirers as our IB Learner Profile since we will be able to acquire skills that are required for the new unit.

Since I never tried making a website before, I think this unit maybe challenging, but interesting. I believe that if I know some basic skills of creating a web page, they will be very helpful for me later on because I could use the skills to make my own website about my hobby/interest or even for my career or jobs. I hope I enjoy all the steps to create a website.

Wikiality Evaluation

1) Evaluate Wikipedia group project against our own Method and Design Specifications


The method that we came up was:
1. Choose a topic/subject that we’re familiar with
2. Check if there is a wiki page on it
3. Check if the information on the wiki page corresponds with the information we know
4. Find a reliable source to back up our theory (News sources, books, magazines, web etc.)
5. Once we’ve found an error, print it out and ask Mrs. Wilson if we can change it.


Our design specifications were:

•The information should be cited properly, using MLA format
•The information should be accurate enough that no additional changes are required
•The information should be from valid source, so that it is reliable enough

The topic that we changed on Wikipedia was about Thailand. We all agreed that Thailand is a great place to spend holidays, but I do not think that we did not have further information about Thailand except how famous the country is for a vacation. Therefore, I think that even though the topic was very interesting and intriguing, it was not 100% familiar for us in various ways.

Despite that the topic was not very familiar, we were able to find valid source on the surface area of Thailand, because there were some governmental websites that provide the most accurate information about countries, such as CIA factbook. We could not use any other sources but websites because 1) we could not fine any articles from paper source, and 2) we did not have much time to look thoroughly to other sources. If we had more time to work on the project, we could have probably added more changes since we could have investigated deeply about the subject.


After we added a change to the Wiki Thailand page, we put a proper citation using MLA format. Then we went to the page again, and found out that our change was not changed again, which means the information that we added was accurate! :) Even though it was a minor change, we actually helped Wikipedia to have more accurate information.


2) Evaluate each stage of the project (Cr. A, B, D)


Criterion A - Investigation

Before we started working on research, we firstly made our wiki page and had an experiment how it felt when someone else changed our information. I often made some funny comments on others' wiki pages, and in fact, it was very funny. However, I noticed that I definitely should not put any silly comments or changes on the real wiki pages because I will give disadvantages to other people who might need to use the information. When others added changes on our wiki page, we thanked for those who made some correction on grammar, etc. But others who put weird information just made us feel ridiculous. I think this activity was a very good to learn how we should use wikipedia in terms of editing information in a proper manner.

When the activity was done, the class members are divided into different groups, and I was working together with Sonya and Elise. We then worked on research of Wikipedia. There were two categories of question types; the first one was a individual work, and the second part was a group work. The individual work was mostly based on the questions that were more personal, and asking for one's thoughts and reasons.


There were six questions for the group work process, and each of us took two and answered them. After we answered the questions, we put the information on each one's blog and told other members to copy the information to combine together. While I was working as a part of the group, I felt that I really should be responsible about the topic that I chose, and I should be good at time management. I often procrastinated while we were working on the investigation and I was keep asking a pardon for being procrastinated. I finished investigation on time, but I needed to make other group workers wait for me to put my information on the blog. Next time, I should push myself to work hard during class times so that I would not make other people to feel uncomfortable with working together with me.


Criterion B - Design


For criterion B, we searched for a wiki page that we could possibly make changes, and find sources to prove that the change that we are going to make is valid. Then we created our design specifications.


When we were looking for information that we could add a change, Elise came up with the idea of checking the information on Thailand. We all agreed, and found out that there was a wiki page about Thailand, and there was a minor error on the surface area of Thailand. We found out valid information from CIA factbook and Mundi, a website that provides all the countries' profiles. Then we decided to change this information, then came up with three design specifications.

I think I was able to finish criterion B very quick because my group members provided so much information to me. They were really good at researching, and finding out information that they are needed. If the project was an individual work, I would probably had difficult times to what to choose for my topic. Furthermore, I learned the benefit of group work, which is we can come up with different ideas and solve a problem in a shorter time.

Criterion D - Create



As soon as we started working on criterion D, we went to Wikipedia Thailand web page, and logged on to the website. We added changes to the total area of Thailand, and then checked later again if there was another change made. The whole process of changing information went very fast (in fact it took only 10 minutes to finish Criterion D!). However, it was sort of complicated to change the information because the page was not like an ordinary web editing page, but full of HTML and other information. So we needed to find out where the information of the area is located, and the work cited page of it. After tried for more than 3 times to change the information, we finally saved the wiki page, and we were done with the process.

Overall I learned that changing information on a professional, or popular wiki page is really easy, therefore, people should be award of the validity of the information. Even if the website is a well-known one, there might be some flaws found in it. The entire process of this project went very quickly, but it was very interesting. What is going to be the next project?!? :D