Group Presentation

Brain child

[Click to enlarge]

Finally, we managed to create this... It's very simple, VERY SIMPLE. Nothing fancy about it. If you are interested, do check it HERE.

Gratuitous eye candy...

In this day and age, Internet users are becoming more aware regarding the usage of multimedia elements. As one of the internet users, I prefer a site offers these elements because to me this websites offers more choices as well as better information. More often than not, the message can be conveyed with much precision.

Other than that, by integrating multimedia elements in a website, the developer is actually offering the users more control. This is because, when listening to an audio files (streaming) a user has the ability to control the playback.

When developing a website there are numerous elements that can be utilized. They are:

Images : By and large, this element is the most prominent in any website. It is the easiest element to date. A developer only needs to find suitable images and graphics so that the message can be conveyed precisely.

Animation : Basically, once a page has loaded, anything that's still moving on the screen is animation. There are a variety of uses for animation ranging from simple animations that might be intended to "liven-up" a page through to more complex and lengthy animations that could be used to provide a product demonstration. The types of animation are ranging from GIF files to Flash files (*.flv or *.swf), depending on the purpose.

Text : In designing a website, the most vital element to take into consideration is the fotnts and the typeface. For text on the web the most common sans-serif fonts are Verdana, Arial, and Helvetica. Verdana was specifically designed to be more readable at small font sizes, it has wider proportions than Arial so works well for body text. Arial is better if used for larger sizes such as headings. Helvetica is most popular with Mac and Linux users, but is not always supported by older versions of Windows. A popular alternative to Arial is Universe which looks similar but with slightly wider spacing.

Audio : Audio in website ranges from sound effects, background sounds, streamed audio files as well as downloadable sound files. The numerous formats in distributing audio files are, MP3, WAV, MIDI, Real Audio, OGG Vorbis, AIFF and the list goes on. However, MP3 is the most sought after since the size is relatively small and yet the quality of the sound is still preserved.

Video: Nowadays, this element is widely applied in websites. It is a common sense that using video helps to improve understanding. Other than that, video also helps to distribute information and idea more effectively. Nevertheless, when integrating videos in a website, it is important to consider issues such as compression, size, quality, speed and bandwidth. Is these issues are not handled carefully, the usage of videos will be in vain.

Tools of trades...

This is the expansion of the previous post. In this entry I am going to discuss on the types of tools integrated in a website. These tools include chatting, forum, email, downloading and uploading files, search engine and guestbook. By and large these tools advocate interactive reciprocal activities between a user and a developer.

Chatting
The most common tool integrated in a website. This tool enables immediate response between two or more individuals done in a virtual chat room. Previously, this can only be done using text-based chat but now, it integrates web-cam chat as well as voice chat. The most popular host is Yahoo Messenger.


Forum
Forum or Internet forum basically is an online discussion site. It actually adapts the traditional bulletin board. Forum enables users to discuss regarding almost any subject matters. People participating in an Internet forum may cultivate social bonds and interest groups for a topic may form from the discussions.



Email
Email is abbreviated from Electronic Mail. This is a method of exchanging digital messages, designed primarily for human use. E-mail systems are based on a store-and-forward model in which e-mail computer server systems accept, forward, deliver and store messages on behalf of users, who only need to connect to the e-mail infrastructure, typically an e-mail server, with a network-enabled device (e.g., a personal computer) for the duration of message submission or retrieval. Rarely is e-mail transmitted directly from one user's device to another.


Downloading and uploading
Uploading and downloading are two terms used in computing to refer to data transfer. In brief, files are considered uploaded when they are transferred from a computer to a central server. Files are downloaded when they are transferred from a server to a smaller peripheral unit.

Search Engine
A web search engine is a tool designed to search for information on the World Wide Web. The search results are usually presented in a list and are commonly called hits. The information may consist of web pages, images, information and other types of files. Some search engines also mine data available in databases or open directories.


Guest book
A guest book is a paper or electronic means for a visitor to acknowledge their visitation to a site, physical or web-based, and leave their name, postal or electronic address (if desired), and a comment or note, if desired.


In final analysis, these webpage tools are developed in order to enhance the performance of a website. It is imperative that these tools are applied with the satisfaction of a user in mind.

Hear ye, hear ye...

In the world wide of web, there are two ways a user can access audio function in a web page. The first one is known as streaming and the next one (which is most popular) is known as downloading.

Streaming means the users can access the audio files on the spot (in real time) without downloading the files. In addition, it utilises playback function for the users. This service can be obtained in webpage like www.aimini.com and www.mix.fm.




On the other hand, downloading enables the users to download the files so that they can transferred the files into any hard drive. This can be seen in webpages like www.mp3int.com, www.mp3raid.com and so many more.


Furthermore, these two types of audio fuctions can be accessed based on factors like...

• the speed of the internet,
• the technology applied in distributing the audio files
• the compression techniques as well as th
• the format used which in way involved the size and quality.
  

The numerous formats in distributing audio files are, MP3, WAV, MIDI, Real Audio, OGG Vorbis, AIFF and the list goes on. However, MP3 is the most sought after since the size is relatively small and yet the quality of the sound is still preserved.

As a 'hardcore downloader' I am very particular with this audio distribution technology. Si, as a web-developer, it is a prime priority to determine the correct method and technology if this service is going to be integrated in a particular webpage. This is because it can determine the satisfaction of the users and hence the popularity of the webpage.

For all and sundry

In designing a web page, it is imperative for any developer to identify the audience. This is because the integration of colors, graphics and fonts depend heavily on the appeal of the audience. The range of age of the audience is one of the key factors determining the design.

In order to highlight the differences, I am going to compare two websites that have similar purpose but differs in the target audience. I am going to compare the designs of two educational websites. The first one is educational website for children an the other is for adult education (androgogy)

The first website is entitled Kidsknowit Network. This website is designed for young children.

[Click for a larger view]

Color scheme: The color choice is very vibrant and bright. This is to catch the attention of young children and at the same time to stimulate their interest. This is also to stimulate their brain so that the children can be more alert accessing this website.

Graphics : Very childlike and colorful. The animation is also provided since this element has a strong appeal on children in which will enhance and eventually maintain their interest in accessing the educational website.

Font & typeface: The font chosen is very suitable. It is not cursive as it will confuse the young minds who are mostly still learning to read.

Navigation : If we look closely at the enclosed picture, we can see that the navigation buttons are relatively big and easy to access. This is very crucial as children's hands are still small and most of them are still learning to use a mouse. So, by providing large navigational buttons, the children can access the contents easily. Moreover, the developer uses ample pictures. This is to guide children with reading difficulty.


The next website, NIACE: Promoting Adult Learning, is meant to more mature audience.

[Click for larger view]

Color scheme: The color scheme for this page is very relaxing and soothing. The developer doesn't need to use bright and vibrant color scheme since adult doesn't need the attraction. In fact, the color complements the mood. By and large, working adults need to relax after a hard day at work and most probably the only time they can access this website is at night of after work. They need to relax while browsing the Net. Bright colors can only distract them from accessing the site.

Graphics : There is no animation in this website. Since this will only hamper the loading of the page. Remember, time is essence. More animations mean more time loading. The pictures used are very straightforward and minimal.

Font & typeface : Very simple and relatively smaller compared to the first website. More often than not, adult won't be having any difficulties in reading hence the size of the font should not be more than 14. In fact, as an adult I will feel insulted if the developer uses large font because as if the developer is belittling my ability to read.

Navigation : Very simple and not cluttered. In fact, the developer uses navigational bar for easy access. No pictures needed as adult can read and understand the content.


[Author's note]
For those who are not so sure what is ANDROGOGY is (and no, it is not ANDROGYNY) do click this LINK.

Next Top Models???

This post is the extension of the previous one. And this time around I would like to discuss the ID Models. In previous post I have defined what is ID. Based on my reading ID is also known as

• Instructional Development,
  
• Instructional Design and Development,
  
• Instructional Systems Design (ISD),
  
• Instructional Technology as well as
  
• Educational Technology.

Therefore, from this we can conclude that the main purpose if ID models is to serve as tools for analyzing, designing, creating and evaluation guided learning.

Evidently, there are numerous types of ID models that we can apply in developing our websites. These ID models are created because the need to test and evaluate learner behaviours are emerging. Also, many researchers believe that it is important to know how well the learners can perform in a particular educational activity. Click on the screenshots for the types of ID models.





All these ID Models can be utilised in order to test and evaluate learners behaviours and understanding. Other than that, a web-developer can also utilise ID models such as ADDIE [click H.E.R.E. to read more] and ASSURE [click H.E.R.E. to read more].

ADDIE model is rather simple and straightforward. It is actually an acronym that stands for:
A = Analysis
D = Design
D = Development
I = Implementation
E = Evaluation

ASSURE on the other hand offers more detailed steps:
A = Analyze learners
S = State objectives
S = Select media and learners
U = Utilize media and learners and
E = Evaluate and revise.

In the final analysis, in testing and evaluating I would much prefer to utilize ASSURE model in developing my website. This is because, it tells exactly what should we do it progresses from one stage to another. In my humble opinion, ADDIE model is a tad vague for me since it is too simple. As for the rest of the models, I believe they are somewhat mind-boggling and 'cluttered' (if you get my drift). Well, I leave it to you to decide on which is the top model.... My two cents!

Learning Theories 101

In this post I am going to discuss on the implementation of learning theories in websites.

Before I begin any further, allow me to shed some light on the differences between model and theory. According to Dorrin, Demmin & Gabel (1990), a theory provides a general explanation for observation. It also can predict behaviour. However a theory cannot be established before it is accepted by all.

On the other hand, a model is a mental picture that helps us understand something we cannot see or experience directly.

Next, what actually is ID model? ID models a.k.a Instructional Design models can best be defined as frameworks for developing modules or lessons that can increase and/or enhance the possibility of learning as well as encourage the engagement of learners so that they learn faster and gain deeper levels of understanding. In doing so, it is imperative to implement the learning theories in the models.

Learning theory is an obvious source for inspiration, insight, and new perspectives on instruction design. Hence, learning theories act as a foundation and ID acts as a building built on the foundation. In relation to web developing, a developer must aware the importance of ID models in implementing learning theories into a website. This is to assure the functionality of the website.

There are 3 learning theories that a developer needs to consider. Behaviourism, cognitivism and constructivism.

In gist, behaviourism learning theory can be traced back since Aristotle. It is based on observable changes in behaviour . It also focuses on a new behavioral pattern being repeated until it became automatic. Moreover, it is based on stimulus-response pattern. This theory had made popular by names like Pavlov, Thorndike, Watson, as well as Skinner. The best example to implement this learning theory is in computer class. In this class, the learners will obtain understanding through repetition of action as well as observation.

Next, is cognitivism. This learning theory is made popular by Piaget. Furthermore, this theory deals on the thought process behind the behaviour. Furthermore, In addition, changes in behaviour are observed because these changes usually reflect the activities inside ones' head, so to speak. This theory usually deals with how people perceive and remember information, solve problems and ultimately learn. A key concept of cognitivism is that learning constructs mental maps in the brain and learning process is the means by which these mental structures are understood. For example, in learning Physics, a student must understand the concept and internalize the concept in his/her mind. Then, he/she must build a mental map of that concept so that it makes sense. This, in a way, will strengthen their understanding of a concept.

The final theory that I will discuss is constructivism. It views learning as a process in which the learner actively constructs or builds new ideas or concepts based upon current and past knowledge or experience. It based on the principles that a learner constructs his/her perspective of the world, experiences as well as schema. In addition, it prepares learner to solve problem in complex situation. In layman term, it simply means learning by integrating one's acquired knowledge with one's experiences so that the learning will be much more meaningful. In constructivism, a learner is given freedom to explore within the given framework. This theory promotes learner to internalize concepts, rules, and general principles. Then these concepts, consequently, be applied in a practical real-world context.


In the final analysis, in building a website, a developer needs to consider which learning theory fits the bill. The developer also must acknowledge the learning styles that he/ she is going to utilize in the website. Therefore a developer should vary the usage of instructional materials and include audio visual examples, demonstrations, opportunities for practical application along with corrective feedback. The use of feedback to guide and support the learner in creating accurate mental connections is a key component of the success of a website. The use of technology can be used effectively by providing interest and variety, thereby aiding comprehension and the elaboration of existing cognitive structures.




[Author's note]
In the next post, I will be discussing more on the types of ID models.

Web evaluation: what you need to know

After a month studying on web-based development, I realize that to develop a website is not a stroll in a park. It takes a lot of effort as well patience. In this post I am going to discuss the measures taken in evaluating a website.

First and foremost, after developing a website, it is imperative to ensure that the website is fully functional as well as be accessible to all and sundry. Hence, in order to obtain this state, a web-developer must undergo a web evaluation process. Like any other products, a website needs to be evaluated before it is officially published in the Net. The website must undergo a formative as well as summative evaluations. This is crucial in order the obtain the functionality and accesibility result. Then it is analyzed by manipulating reliability as validity concept.

One might wonder, why do we need to evaluate the website? The answer lies in the purpose of a website. We must consider the main purpose of a website as the main resource of learning and if a website fail to meet this purpose then, it is a flop.

Another question might rise in which who and how a website will be evaluated? The best way is to utilize a classic method. This method, more often than not, incorporates

• the use of experts in the respective disciplines
• the user's usage of a particular website
• reviewing the previous literature of similar results as well as
• observation the use of the website in real-time.

Basically, all these steps will assure you on the efficiency of the evaluation.

However, this does not stop here. After the evaluation is done, a web-developer needs to undergo an accessible and usability testing.

The reason why do we have to do usability testing is because it will determine the 'survival' and the 'popularity' of our website. In usability testing, there are 5 components of quality that need to be considered. They are; learnability i.e how fast can users learn, efficiency i.e how fast can the users apply the skill learned; memorability i.e how easy people can be proficient; errors i.e how frequent the errors or can users resolve the errors and lastly satisfaction i.e do the users feel satisfy with the design interface.

The next step that needs to be considered is the accessibility testing. This testing will highlight whether a website has a proper layout and navigable. This testing will also determine whether the typeface of a font as well as language register are appropriate for the target users or not. By and large this testing tests whether a website can incorporate all types of media items. In a nutshell, accesibility testing is the one test that ensures whether a website is worth visiting

In developing the evaluation tools, it is vital for the web developer to consider the appropriate methods. Basically, the most prominent tool is the web evaluation form. This is can be done by using a proper web evaluation form.

[Click the picture for the link]

You can also click H.E.R.E to view another example.

In developing a web evaluation form, it is important to ensure that it is valid and reliable. To ensure the validity of a form a developer must ensure that the item in the evaluation form really measures the proposed researched. In order to ensure the reliability of the web evaluation form, the result achieves must be accurate and consistent and the instrument must concord with the research methodology.

In the final analysis, as a future web-developer I need to do evaluation on my website. The result from the evaluation will help me in improving my website. The result that I collect from the web evaluation form later on can determine the forte and the shortcoming of my website.

At first sight...

In this entry I would like to discuss on the web interaction and interface design. First and foremost, after thorough reading I conclude that interaction design encompasses system interfaces that prevalent in many types of media. It needs to respond to users' experience. In regards with this, users should be able to experience interaction design visually or using any other possible sensory. In addition, some interaction designs are created without graphic interface. This is common in application like Skype that utilizes interactive voice response (IVR).

In setting up a fully functional web-site, a web developer must consider these three constructs: usability, visualization and functionality.

Now, let's talk about the usability construct of a web-site. It is imperative for a web-developer to consider how his/her media item will be navigated or processed. In order to ensure this, a web-developer must take these steps into consideration:

1. Plan - Begins with a storyboard on the sequence of the pages. Then, he or she must utilize flowchart that uses standard icon. This flowchart is the summary of your storyboard.
2. Navigation samples
3. Scaffolding - the items on the web-site must be able to aid the users.
4. Navigation option - here, a web-developer must consider the outline of the website. The appropriateness of the heading, sub-units. And most importantly the appropriateness of the layout.
5. Activity - a web-developer must ensure the most appropriate navigation techniques.

• The menu and tabs must be structured well. For example www.realitylapse.com

[Click to enlarge]

• Sometimes, an interface can look a tad cluttered but at the same time still usable. For example www.softpedia.com

[Click to enlarge]

• At times, a web-developer prefers to utilize a pull-down (a.k.a drop-down) menu. This technique integrates flash plug-in as well as java script. This can best be seen in www.lordoftherings.net

[Click to enlarge]

• Other than that, another type of navigation is known as iconic navigation. For this type, a user needs to click on the icon in order to be redirected to another link. To enlight you, check out www.spongebob.com

[Click to enlarge]

• Another method that the developer can use is, page turning navigation. This is common in many websites such as, www.fitterhappier1412.com

[Click to enlarge]

Other than usability, a web-developer must consider the importance of visualization of the web-site. The visualization must definitely appeal to to users aesthetic as well as visual sensory. This is because, with an appropriate visualization, the contents as well as the items of a web-site will be easily understood. Take this visual for example:

[Click to enlarge]

As a web-developer, he or she must ensure that the visual used must be self-explanatory and must not overwhelm the users.Other than graphics, a web-developer must consider integrating an appropriate animation in order to enhance users understanding.

When it comes to designing appropriate text, a web-developer must consider the proper etiquette. He or she must avoid using capital letters as the body text. In addition, a good web-developer must integrate appropriate fonts, colors schemes as well as contrast. When it comes to layout management, a web-developer must know how to consolidate graphics, animation and text in a website. A web-developer must consider the target audience before designing the layout.

The final construct that is needed to be considerate is the functionality of the website. As a web-developer, he or she must exercise this question: what instructional task must my interface support? It is imperative to ensure the that the interface can support the objectives and strategies of a web-site.

So, in a nutshell, in order to be a good web-developer, I need to be very sensitive to the interactivity of my website. I also must ensure that the interface of website produced is appropriate and appealing to my target users.

The power of ONE...

In this post I am going to discuss on web project management. But, before I write any further, let ask you this question, what is management? According to Henri Fayol, management is the ability to organize, to command, to coordinate as well to control. Hence, in order to ensure the success of a web-based project, a manager must play his or her role well. Now, let's discuss on the basic guidelines on how to manage a web-based project.

First and foremost, a project manager must choose the best model of project management. For your information, there are three models, namely; Traditional Hierarchy, Project Co-ordination and Delicate Tension.

Traditional Hierarchy


Project Co-ordination

Delicate Tension

After analyzing these model, I believe the best model is Delicate Tension (DT hereafter) model. This model integrates the first two models. Moreover, DT enables the project members to be more proactive. In addition, even though Project Manager still has the utmost determining power, he or she advocates cross discussion among the team members. In fact, the team members do not have to report every single action to the Project Manager.

Later, during the execution of the web project, necessary skills within the team must be taken into consideration. The skills are;

• Strategy - ability to identify objectives, market place, opportunities, threats, competiton and et cetera.
• Management - ability to acknowledge punctuality as well as communication between team members as well as the clients.
• Architecture & design - this area of skill focuses on the ability to create interface that have two crucial elements: user appeal and user friendly.
• Content - ability to create original content and managing feeds.
  
• Programming - ability to integrate skills like, scripting, coding, database management, server management, web applications creation, so on and so forth.

Moreover, a good project management must be able to consolidate two important social skills. They are hard skills and soft skills. Hard skills encompass assertive and leadership attributes such as controlling, leading, risk taking and knowledgeable. On the other hand soft skills deal with interpersonal skills such as ability to empathize, interest for the web, sense of humor, pragmatist and so forth.

The next step is to develop the web site. Basically there are three phases involved, namely: planning, constructing and testing. When planning, a project manager should consider areas such as the user psychology, the system and the usage consideration. As for constructing, a project manager must ensure that team members to have the sufficient skills. They must also know how to use special tools, software and applications in order to ensure the success of the web-based project. Finally, when it comes to testing a project manager must ensure the usability and functionality of the website by run-testing it before publish it to the mass.

In the final analysis, as future web developer, these considerations are applicable in order to ensure the success of my web site.