Assignment 1: Blog Post (Week5&week6)

CRN code: 36822

Creative Hive URL:

Week Five (01/03/2016)


5.1          Lecturing Session

For this week, I continued to learn about Principles of System Development focused on Computer Systems.


Other than keyboard, we can use other data capture technology like microchips on the credit card, QR codes (2D Bar Code), speech recognition, Electronic Data Interchange (EDI) and others.


  1. Chips / microchips

Chips can be found in credit card, identity card and other cards. These cards have embedded mini computer chips that can stores data up to 128Kbit. (Cardwerk, 2015)


Example of chips:


Figure 1: Example of chips, figure reproduced from PCMag (2011)

2. QR code

QR code is a small black and white boxes with small square dot inside than can be scanned by using mobile devices with QR code scanning function. We can use applications like QuickMark to scan or generate QR code.


Example of QR code:


Figure 2: Example of QR code, figure reproduced by QuickMark (2016).

3. Speech Recognition

Computers or mobile devices that have microphone and related software can record and interprets the voice input.


Example of Speech Recognition:


Figure 3: Example of Speech Recognition, figure reproduced by Drishticone. (2015)

4.Electronic Data Interchange (EDI)

E-Commerce technologies mainly used in online bank transactions that allow users to generate transactions electronically through the system.


Example of EDI:


Figure 4: Example of EDI, figure reproduced by Oracle. (2011)

5.Electronic Information System

This is a system mainly focused on displaying information for users.


Example of Electronic Information System:


Figure 5: Example of Electronic Information System, figure reproduced by Edewilkison. (2016)



Computer Systems

Computer system contains of hardware, software, database, telecommunications and networks. All of them work together as a system that can collect, manipulate, store and process data into information.


  1. Hardware

Components such as processor, keyboard, mouse, LED (Light-emitting diode) monitor and others


Example of hardware:


Figure 6: Example of hardware, figure reproduced by Informationcells (2016)


  1. Software

Programmes that control the work of computer hardware.

Example of Software:


Figure 7: Example of software, figure reproduce by Onlineeducations (2016)


  1. Database

Organized collection of facts and information.

Example of database: Microsoft SQL server, Oracle, Microsoft Access and others.


  1. Telecommunications

The electronic transmission of signals for communications which enables organizations to link computer systems into effective networks.

Example of telecommunication:


Figure 8: Example of telecommunication, figure reproduce by Concept Draw (2015)


  1. Network

Used to connect computers and computer equipment in a building, around the country or across the world, to enable electronic communications. Categorised into 2 types: Internet and intranet.


Internet: An electronic communications network that connects computer networks and organizational computer facilities around the world. (Merriam Webster 2016)


Intranet: A network that works like the Internet but can only be used by certain people such as the employees of a company. (Merriam Webster 2016)


Extranet: A network (as of a company) similar to an intranet that also allows access by certain people such as customers or suppliers. (Merriam Webster 2016)


The most important element of any computer-based information system will be the people. People can be programmer that design the information system, or users that will use the system.

People who uses the system must always aware that there are procedures to follow. Procedures include strategies, policies, methods, and rules of using the computer system.


The output of an Information System can be business transactions or management information which is used to enhance decision making.


Anthony’s triangle

Anthony’s triangle distinguishes between three different levels in the management structure of an organization in a pyramid form. At the top of the pyramid will be the strategic level (CEO, General Manager), the middle level will be the tactical level (Manager), and the last level will be the operational level (Officers, clerks).

Example of Anthony’s triangle:


Figure 9: Example of Anthony’s triangle diagram, figure reproduced by RAINA’S REFLECTIONS (2013)


  • Tutorial Session

This week’s tutorial session focused on Cascading Style Sheets (CSS). CSS is a stylesheet saved with a .css extension. It can be written in any text editor. Beware that, CSS does not always work consistently in different browsers. Different browser may show different results.

Why we need CSS? CSS is an extension that are easier to maintain. It has smaller size than HTML file size, which will save time loading. CSS is also search engine and mobile friendly. The website using CSS will have better consistency than those that doesn’t.

How to link the CSS file into website? There are many ways to insert CSS file into the website by using element or inline styling:

  1. We can use the <link> element in the


<link rel=“stylesheet” href=“(style name).css” type=“text/css”>

  1. Using the <style> element in the <head>…</head>:

<style type=“text/css”>



  1. Using inline styling – the style attribute:

<p style=“color: … ”> </p>


For CSS, there are lots of font attributes:

  • Font-family: Arial, Helvetica, sans-serif and so on..
  • Font-weight: normal; / bold; / lighter; / 100; / 300; and so on..
  • Font-style: normal; / italic; / oblique;
  • Font-variant: normal; OR oblique;
  • Colour: red; #FF0000; / rgb(255,0,0); and so on…
  • Background-colour: white; / #FFFFFF; / transparent; and so on…


So how do we apply style in XHTML?

  1. Using the CLASS specific attribute:

<h1 class=sidebox”> Text appears as 1.5em </h1>


  1. Using the floating CLASS attribute:

<p class=“anyname”>

Text appears as Verdana in red


<a class=“anyname”>

Text appears as Verdana in red



  1. Using the <div> element:

<div id=“header”>


  1. Using the <span> element:

<span class=“anyname”> word </span>


CSS example:

p {font-family: Arial, Helvetica, sans-serif; font-weight:normal;

color:black; text-align:left;}


.special {font-family:Verdana, sans-serif; font-weight:bold;

color:red; text-align:left;}



For this week, I learned about others method that can be used to input data besides than manual key in by hand. I also learned that there are similarities between information system and computer system, they both need hardware, software, and people to operate. From the Anthony’s triangle, I got to know that how the different levels of the organization work. Besides that, I also found out that using CSS can make a website more consistent with the design and save the time for us to design the website.


Week Six (08/03/2016)


6.1          Lecturing Session

This week lecture is on the topic Requirements Engineering.

Why we need for engineering for information system?  We need engineering to generate system specification or to form a set of commonly accepted good practice.


Do you ever know what causes projects to fail?


Figure 10: Pie chart of reasons project fail


Requirements Engineering lifecycle consists of three interacting sub-processes:


Figure 11: Requirements Engineering lifecycle diagram

  1. Requirement Acquisition
    1. To find out as much as possible about the client’s organisation.
    2. To find out about the client’s current problems
    3. To find out what the client expects from the system to be built

Methods that can be used for requirement acquisition: Interviews, questionnaires, prototyping, Rich Picture and others.

Example of Rich Picture:


Figure 12: Example of Rich Picture, image reproduced by Graham Chastney (2009)

2. Requirement Specification

  1. Provide a basis for communication between users, clients and developers.
  2. May be part of the contract
  3. May be used in testing or evaluating the final system.

Requirements specification involves analysis, interpretation and recording from diagrams, graphic or text, prototyping and so on…

The requirements should be:

  1. Annotated: indicate relative necessity and stability
  2. Modifiable: Changes to requirements is easy
  • Traceable: Changes is visible, showing the changes both backwards and forwards

3.Requirement Validation

  1. Check whether specification match stakeholder’s intent
  2. Validation can begin as soon as a requirement has been specified
  3. The specification should not be signed off until validation is complete

These are the technique or methods to validate:

  1. Interviews (combining techniques from elicitation)
  2. Hand checking (reading through the specification document)
  3. Fagan inspections (structured hand checking using a prototype)
  4. Specification animation (using prototype as a simulator)


These are some funny videos about requirement expectation:

Video 1:

Video 2:



6.2          Tutorial Session


This week tutorial focused on Accessibility Techniques. What is Web Accessibility? Web accessibility means access to the Web by everyone, regardless of disability.


Why is Web Accessibility an issue? This is because use of web has spread into all areas of society, but there are some people that have disabilities that affect them to access to the web. That’s why we need to learn some accessibility techniques to improve our website.


Example of design requirements for people with different disabilities:

  1. Visual: Well marked-up tables or frames / described graphic or video
  2. Hearing: Captioning for audio / supplemental illustration
  3. Physical: Speech input
  4. Cognitive/ Neurological: appropriate language level / simple design


When we use the <a> element when designing a website, we must ensure that the link text Is substantive. For example:

for information on courses

for information on courses click here X
We can also add a nice title to our coding. For example:

<a title=“Guide to Accessibility for this site” href=“access.htm”> Accessibility </a>
For the ease of the user to navigate, we can add accesskey attribute. For example:

<a accesskey = “1” href = “…”>


To control the way that the tab button navigates around the links on the website, we can use the TABINDEX attribute. For example:

<a tabindex = “1” href = “…”>


Table can be helpful for users to get information quickly and easily by a glance, so we should design our table neat and simple for viewing. Here are the ways to design a neat table.


  1. Use the SUMMARY attribute to provide a summary description of the table

<table summary=“layout table”>

  1. Use TH for the first row and first column of the table. Use scope in the TH to identify whether it is a row or column.

<th scope=“col” id=“header1”> Room </th>

  1. Use id in the TH to give it a unique name. Use headers in the TD to link it to the relevant TH.

<table  id=“customer’s table” border=”1″ width=”100%”>


Lastly, use appropriate Meta Tags can help search engines to easily find our website. For example:

<TITLE>Stamp Collecting World</TITLE>
<META name=”description” content=”Everything you wanted to know about stamps, from prices to history.”>
<META name=”keywords” content=”stamps, stamp collecting, stamp history, prices, stamps for sale”>



After the lectures for week 6, I realised that when designing a system for clients, we need to communicate carefully with the clients, so that we do not need to waste time changing the requirements from the clients. If we have good communication with the clients, we can easily know what the clients actually demanded and we can save time on re-editing the system. Next, in the tutorial, I realised that most of the websites did not actually have good web accessibility for the disable users to use. This reminds me that I must include these web accessibilities features into my 2nd Assignment.



Concept Draw, (2015) Telecommunication Network Diagrams [ONLINE Image] Available at: [Accessed 15/03/2016]


Drishticone, (2015) SIRI [ONLINE image] Available at: [Accessed 15/03/2016]


Edewilkinson, (2016) Electronic Information Systems [ONLINE image] Available at: [Accessed 15/03/2016]


Graham Chastney, (2009) Rich Picture diagram [ONLINE image] Available at: [Accessed 15/03/2016]


Informationcells, (2016) Hardware [ONLINE image] Available at: [Accessed 15/03/2016]


Merriam-Webster, (2016) Available at: [Accessed 15/03/2016]


Online educations, (2016) Computer Software [ONLINE image] Available at: [Accessed 15/03/2016]


Oracle, (2011) Example of a complete EDI payment [ONLINE image] Available at: [Accessed 15/03/2016]


PCMag, (2011) Visa Emv Credit Card [ONLINE image]. Available at: [Accessed 15/03/2016]


QuickMark, (2016) QR code [ONLINE image]. Available at:  [Accessed 15/03/2016]


Raina’s Reflection, (2013) Anthony triangle diagram [ONLINE image] Available at:

Assignment 1: Blog Post (Week3&week4)

Creative Hive URL:

Week Three (26/21/2016)


3.1          Lecturing Session

For this week, I learned about information system and the key elements of an Information System (IS).

What is the key elements of an information system? The answer is input, process and output.

Input: Data input (ATM cards, credit card)

Process: System will process the data by organizing it.

Output: Invoices, receipts and etc.

There are 7 characteristic of good quality of input data:

  • Relevance: Information that are not relevant will generate useless output
  • Timeliness: Timely convenience data will let the system runs smoothly
  • Correct format: The system cannot process data with wrong format
  • Reliable: Unreliable data will also generate useless output
  • Consistent: Running different process at the same time will slow the system down
  • Easy to understand: System cannot process over complicated data

Example of information system

Payroll system in organizations

Every company needs to pay their staff with salary every month, but if the company is big organization, it will be a problem for the Human Resource (HR) section to calculate the salary for each staff. So, to overcome this problem, information system like the payroll system will help the HR staff to calculate the salary.

Payroll system will have to be:

  1. Efficient: The system needs to support efficient batch running to complete the task in a short time. (Creates multiple payroll at the same time)
  2. Resilient: Any failure is prohibited.
  3. Accurate: The amount of salary must be accurate.
  4. Up-to-date: The salary generated must be up-to-date with the government tax changes.


The payroll system operates in two phases:

  1. Maintain Standing Data

HR staff will check on the details of staff, salaries and variances before the payroll system run.

  1. Process Payroll

When the payroll system starts, it will run based on the standing data and use the payroll data from the last period to generate the payroll.


  1. Maintain Personnel Data

The payroll system will have a record of each employee, the records contain the employee’s data: name, address, payroll number, salary grade code, tax code and etc. The data of the employee must be always updated as soon as possible. For example, existing employees will be paid regularly every month while the employees who left must not be paid anymore.


  1. Maintain Variance Data

When an employee took a sick leave, it is categorized variance. The variance data is the one-of adjustments applied in the paying month: Annual leave, bonus, overtime and etc.


Electronic Payment

Company now uses Electronic Funds Transfer (EFT) to pay the employee through the bank accounts. It is much safer than to let the employees to hold a bunch of cash.


Figure 1: Payroll system

From figure 1, the process starts from selecting a staff, the system will search the staff’s data from the database and retrieve the data in it. Then the system will process the data retrieved and add in the variance factors such as: Sick Leaves, Overtimes and so on. The system will now generate the payroll after processing the data and send to the employee.


3.2          Tutorial Session

                To create any digital content, we need certain hardware to help us, depends on which kind of digital content we want to create.

  • Photographs: Mobile phone, compact camera, DSLR, tablet and etc.
  • Video: GoPro, Mobile Phone and DSLR
  • Audio: Audio recorder, mobile phones, microphones and etc.


Next, I started to learn the evolution from XHTML to HTML5. XHTML is known as Extensible Hyper-Text Mark-Up Language.  It is a stricter version of HTML, originally aim to replace HTML. It’s actually HTML defined as an XML (Extensible Mark-Up Language) application.

XHTML has some difference compare with HTML. XHTML is a stricter version, so the elements in XHTML must be properly nested, closed all the time, and lowercase.

For example: <label>Click me <input type=”text”></label>



For this week lesson’s, I found out that there are many things we need to consider when using any Information System. The data we key in will also affect our output. For example: If we enter the wrong PIN number for the ATM machine, it will not proceed with our transaction, this is definitely not the output we want. I also learned that the IS need to go through many processes to gain an output, it is amazing that even it need to go through so many processes, it still can generate an output in a very short time.


Week 4 (02/02/2016)

4.1          Lecturing Session


For this week, I learned about Principles of System Development. This chapter mainly focus on web ethics, dark web and digital dossier.

These are the characteristics of the web that are important in considering ethics:

  • Different users
  • Technology that evolve rapidly
  • Challenges of enforcement
  • Privacy
  • Personal data storage


Dark Web

Dark Web uses certain tools to cover up the server IP address, so the websites are publicly available but cannot be found via search engine. Most of the Dark Web uses Tor encryption tool to hide their IP.

People created the Dark Web uses it to:

  • Sell illegal information
  • Drug or Human Trafficking
  • Private Communication
  • Spy activitiesdark

    (Figure 2: Dark Web, figure reproduced from Deep Web Technologies (2008)


    From figure 2, we can see that there is an iceberg with a big part of it under the water surface. The surface web will be the normal website that we usually browse. For example: Facebook, Twitter and so on. While the deep web will be more confidential web that requires authorized users to view the content. While at the bottom will be the dark web that are used for illegal act.

    Digital Dossier

    Digital Dossier can be explained as the tracks of information we leave behind on our internet life. What is in the digital dossier? The answer is everything we did using the web, even a normal Google search will be stored forever in our digital dossier. Examples: email, searches, Youtube streaming and etc.

    Is Digital Dossier good or bad?

    Example video of digital dossier:


    4.2          Tutorial Session

    Next, I learned about the topic Tutorial from XHTML to HTML5 and creating HTML 4.01 page.

    In HTML 5.0, changing Doctype will not influence the existing website. So for those that use old version of browser like internet explorer, will have problem to view some new website running HTML 5.0.

    In order to upgrade old website using HTML 4.01 or below to HTML 5.0, we need to change the DOCTYPE from: <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “”> to <!DOCTYPE html>

    To check how well do our browser support html5, we can visit the website below:

    Example of test:






    Figure 3: Example of HTML5 browser test



    After that, I continued learning about the topic Web Design, Content and Usability. The usability of a website depends on the following:


    • Superstructure: Your website must be easy to navigate, understand, and use. The website must be fast responded.
    • Graphics: The website must be clear and attractive, no excessive or distracting images that may influence the users.
    • Use of colours: The website must use the correct colour as background to attract the users, excessive use of colours are not recommended as it will make the website messy.
    • Content: Content must be interesting, accurate and appropriate.
    • Readability: The website must use good fonts that won’t distract the users, and must fit properly into different browser/ screens.
    • Page layout: The page layout should be nicely design, consistent and easy to access.
    • Hyperlinks: Hyperlinks that showed in the website must be easy to spot, able to accessed.
    • Promotion: META tags should be added into the website so that search engines are able to search the website.



    • Write for scannability: est. 79% of web users scan rather than read (Nielsen)
    • Use hypertext to split long information into multiple pages
    • Create a visual hierarchy: obvious from a glance. Example: Use <h1></h1> to indicate important things, while <p></p> for the details.
    • Website must have good search facilities



    For this week, the lesson is more focus on the ethics of using the internet. Now I know that we should not be too dependent to the internet, as we will leave trace in our digital dossier. If the information leaked out to hackers, we may be harmed by them. So we need to be more careful on what we did using the web and try not to expose too much of our privacy data to the web. Besides that, I also learned that there is a lot of things need to be considered before creating a website, the content must be accurate, up-to-date, precise and relevant. The design of the website must be tidy, clear and easy. Users don’t like messy website as it is very distracting.



    Deep Web Technologies, 2008. The “Deep Web” is not all Dark. Deep Web Technologies Blog RSS. Available at: [Accessed February 23, 2016].

    Nielsen, J. “Why You Only Need to Test With Five Users”, March 19, 2000b. Available online: [Accessed February 23, 2016].

    W3schools, (2016) Available at: [Accessed on 23th February 2016]



Assignment 1: Blog Post (Week1&week2)

WEEK ONE (12/01/2016)

1.1 Greeting & Course Outline Introduction

The first day of class, Mr. Lim introduced himself to me. He introduced me the course outline and some rules and regulations from the student handbook available for download. After that, Mr. Lim introduced the assignment 1&2 for me.

1.2 Lecturing Session

Mr. Lim starts the lecture by introducing me the principles of information system.

After the lecture, I understand that Information System is a combination of hardware, software, people or devices that collect, manipulate, and disseminate data and information, and provide feedback to meet an objective.

Example: Automated Teller Machine (ATM) machine. When we are using ATM machine, we need to insert our bank debit or ATM card, then we type our PIN number into it. That is the input for this system. Then the software inside the ATM machine will start to read and process the data inside our card, to gain the information and process the transaction needed by us. When we choose to withdraw money, the ATM machine will start to process and count the money we requested. After that, the ATM machine will deliver our output, which is the money we requested.

He also explained the origin of the web, Tim Berners-Lee is the father of the internet. I understand how the internet deliver information.

In the internet, data or information are divided up into smaller part, or chunk known as packets.

Breaking data into packets

(Figure 1: Breaking data into packets, figure reproduced from Microsoft (2001)

Packets contain a header, data and a trailer.


(Figure 2: Packet components, figure reproduced from Microsoft (2001)

These packets are sent over a shared medium. The packets will be sent from one router to another router by different route. When the packets reached the desired destination, the packets will then rearrange to the information needed.

Every electronic device that is able to connect to the internet has its own unique Internet Protocol (IP) address. The Domain Name Server (DNS) will converts the IP address into websites or from websites to IP address. Every website or webpage has their own unique address called URL address.

To design a website, there are few models can be used.

  1. The Linear Model

The pages of the website follow a sequence. It is not easy for the user to navigate, but in a simple path, user can’t get lost easily.


(Figure 3: Linear Navigation Model, figure reproduced from Rocketface (2016)

  1. Hierarchical Model

This is the most common web site format. It allows logical groupings of subjects, and navigation to be structured with the content.


(Figure 4: Hierarchical Model, figure reproduced from Rocketface (2016)

  1. Hub and Spoke Model

This model has many sections, but all of them are linked to a central page. All of the navigation will goes through the central page.

  1. Fully Connected Model

This model is a very big and complicated model, because pages are linked with one another. This will be confusing is there are very large number of pages in the website.

  1. Fully connected hierarchical model

This model is like the combination of Hierarchical Model and Fully Connected Model. It has a unique front page that has only one menu (the sections menu). And every other page has two menus – one to navigate between sections, the other to navigate within the section.

1.3 Tutorial Session

Mr. Lim introduced me Creative Hive and viewed some sample blogs from Creative Hive.

WEEK 2 (19/01/2016)


2.1Lecture Session

Today, Mr. Lim covered Enterprise System. Enterprise system is actually an Information System that runs inside a company. It also can be called as enterprise-wide information systems.


Why we need Enterprise System? We need enterprise system to increase our competitive advantage by streamlining our business activities. It can also help us to organize our data, make us easier to access to the data we need.


Enterprise system can be divided into internal and external focus. Inside internal focus, we have two different kind of business activities which is: Primary activities and also Support activities.



Primary activities

  • Marketing and sales (Selling the product)
  • Operations and Manufacturing (Production)
  • Inbound logistic (Receive, store and disseminate incoming materials for production use)
  • Outbound logistic (Store, transport and distribute product for customers)
  • Customer service (Feedback)


Support activities

  • Technology development
  • Infrastructure (Buildings, machine &etc.)
  • Human resources (Employees)
  • Procurement




  • Upstream information (Info from other organization)
  • Suppliers, partners and customers
  • Downstream information (Info sent out to others)

Needle’s Business in Context Model

 figure 3

(Figure 5: Needle’s Business Context Model)


The inner level will operate depends to the outer layer. The environmental level will affect the organizational level, and the organizational level will affect the structural level and so on.



Types of enterprise system


  1. Enterprise Resource Planning (ERP)

System that combine data from different section of a company in a shared database.

  1. Customer Relationship Management (CRM)

Record and process the customer’s data including sales & contacts from the customers

  1. Supply Chain Management (SCM)

Monitor the supply chains and supply network from suppliers.



2.5          Then, Mr. Lim introduced me Web 2.0. Web 2.0 is an upgrade of Web 1.0, it is more interactive than its previous version, it is more to user generated content. Because of Web 2.0, Enterprise 2.0 was introduced. It was meant to use the network to do business rather than the old, traditional conventional retail operation. Enterprise 2.0 uses internet for e-commerce, and it will become more popular in the future because it is faster and simpler than conventional mode.


Example of E-shopping:


2.6         Next, Mr. Lim taught me about the system development life cycle (SDLC). To develop a system, we need to follow the SDLC, also known as the waterfall model.


The waterfall model is the a very popular, easy and classic model to use. In this model, each phase of development must be completed entirely before moving to the net phase, because the phases cannot be overlap in this model.

Example of SDLC model


(Figure 6: SDLC model)


  1. Planning : Define requirement, develop project planning
  2. Analysis : Analyse requirement by client
  3. Design : Design the prototype
  4. Development : Develop functional system
  5. Test : Test the developed system
  6. Implement : Start using the system, provide training and user guide
  7. Maintenance : Upgrade system to meet new requirement and provide future support for client


Project Life Cycle Diagram


(Figure 7: Project Life Cycle)


  1. Initiation : Identify objective, research for solutions and determine solution.
  2. Planning : Create project plan, assign tasks, identify resources and identifying potential risks.
  3. Executing : Execute activities and tasks in the project plan to produce deliverable.
  4. Monitoring and controlling: Monitor the quality of the deliverables whether acceptable.
  5. Closing : Pass the completed project and others documents to client



After the week 1 lecture, I realise that the information system isn’t just about simple information processing, it is a complicated system that process our data, and provide output that requires hardware, software and people to manage. Later on, I also realise that there are so many steps to create a website and also so many kind of models to use when creating a website. For the week 2 lecture, I noticed that there are few enterprise systems that I’ve never heard about. I also learned that there are few procedures or steps to follow in order to create a system or running a project. In my opinion, this assignment is very good for me, because it reminds me of what I’ve learned, so that I do not easily forget what I’ve learned.




  • Microsoft, (2001), Breaking data into packets [ONLINE image]. Available at: [Accessed 01 February 16].
  • Microsoft, (2001), Packet components [ONLINE image]. Available at: [Accessed 01 February 16].
  • Rocketface, (2016), Linear Navigation Model [ONLINE image]. Available at:, [Accessed 01 February 2016]
  • Rocketface, (2016), Hierarchical Navigation Model [ONLINE image]. Available at:, [Accessed 01 February 2016]