This all about our Assignment 2 & Project

Assignment 2:
  1. Sketches storyboard (manual or by hand)
  2. Sketches storyboard (using visio)
  3. Our 1st interface of this project (still on planning)
  4. Our slide for presentation 1 (more on Proposal of this project)
  5. Our Project Plan
..... actually there are still more on assignment 2 that we can't explain in here... but dont worry, you can download full explanation in the link below.

Project:
  1. Presentation 2 (after we selected our Final Topic -->that is UTM Event System)
  2. Step by step towards our project
  3. Latest Design of UTM Event System

The Documentation: -----> you can download it if you want
  1. Assignment 2 documentation
  2. Final Project documentation

Latest design of UTM Event System

This is the main page:



and this is the view if we select by group:



and the last one is view by year:



this is only the picture of our new design, full report you can download it on our report....

Project Plan


Joomla vs Wordpress

Joomla vs. WordPress has become one of the hottest topics around the web. In actuality, the comparisons aren’t all that fair because these platforms are designed with different purposes in mind. WordPress is more of a website engine based on the premise of installing the software, running it and publishing basic content in a fast and easy manner. Joomla is completely different, built for publishing and managing all types of content. This gives Joomla many capabilities WordPress lacks.

Although Joomla is a CMS and WordPress is a blogging platform, before building a website we wonder ourselves which of these will be more appropriate for us.

Distinguishing the Two

A good way to compare the two systems would be to look at the fundamental differences. With Joomla, you can place ten different menus on a web page in any position or style you like. Much of this can be done from scratch in a few easy clicks. Its functionality is ideal for multiple users who have their own roles on the site as well as the administrator who needs to control the whole operation with ease.

If it has to be a user-friendly publishing tool for simple content that only requires one administrator, WordPress is the way to go. This platform covers the blog scene with more efficiency, which is exactly what is designed to do. It is very useful for attracting search engine bots with features such as ping and tracks, tag capabilities, and optimized URLs. Though Joomla can be configured to produce clean URLs, it does take a little more work. The overall theory is that blogs are search engine friendly and WordPress makes up a good portion of the argument.



We has made comparing both of them in different situations, needs and criterias.

below is the different...





When you have to create a website with more than 10 pages with different information, you can do this with both platforms. So when you start to put all the information on the site template, you’ll see the difference between platforms. It’s simple to accomplish these tasks With WordPress, as you only have to install some plugins, but with Joomla! you have to spend a little more time to re-organise the different module and then the menus from template.


DOWNLOAD JOOMLA PHP53TEST.ZIP

DOWNLOAD XAMPP

DOWNLOAD JOOMLA 15 QIUCKSTART.PDF

DOWNLOAD WORKPRESS TUTORIAL.PDF

JEvent

This well known and loved Events Calendar for Joomla. JEvents consists of a Joomfish compatible Joomla component and a number of modules and plugins.

JEvent is a an abstract class for the definition of EventHandlers. Together with the JDispatcher class, it implements the base funcitonality for the Event-Dispatcher-Pattern. JEvent needs to be extended by a concrete Event Handler class, that implements the functionality that shall be triggered once an event occurs.

Component

--> One-off Events and complex repeating patterns of events can be created
and viewed in an attractive calendar and a variety of list formats
--> Multiple design layouts possible
--> Fully compatible with Joomla 1.5 MVC framework
--> Ical imports/exports
--> Repeat exception handling.
--> Events can be categorised and calendar views can be customised to show all
or some of these categories

Modules

--> Mini-calendar module (jevents_cal) which gives a quick overview of events
which can be placed on any page
--> Latest events modue (jevents_latest) which gives a highly configurable
summary of upcoming events
--> Events legend (jevents_legend) - displayed alongside the component gives
you a summary of event categories and an easy way to limit the events shown
to specific categories

Plugin

--> A search plugin that enables the global Joomla search to return results
from the events calendar


Method of JEvent :




Below is example picture of Jevent Config :




Example of Jevent Calendar :


About Google API (Our Class Tutorial)

This is our friends project which is about GOOGLE MAP API. Google Map API is using bydevelopers to integrate Google Maps into their websites with their own data points. It is a free service, and currently does not contain ads or Geocoding, but Google states in their terms of use that they reserve the right to display ads in the future.

so, below is step by step presentation by our senior (Pang Yee Yong):

1. 1st step to make it happen, just using simple basic HTML:

2. 2nd step is about how to add Zoom Panel:


here is the result:


Cool right?? so, this is a sample of what we learn in the very short time class about GOOGLE MAP API. Actually there are more thing that we learn for example:
  • add a marker in our Map
  • add a message box
  • how to plot our specific location and many more...
but dont worry, you can download 'my note' about the presentation and also the slide presentation by Pang Yee Yong. below is the link:
  1. My note (step by step including picture)
  2. Presentation Slide
hope you all can learn new thing about Google Map API... :)











Our Next Step

We continue our project by several of step that is going to be done:




1.Project coding
We proceed by start adding the coding of the project. Because of the platform that we use to build our interface website is Joomla, so we need to find the right code for it.

2.Create Database
We need to create the database because our website have the log in for user. So the information of the user need to be saved in the database.

3.User LogIn







Presentation 2

This is our second group presentation. It still same with first presentation for four slide earlier which is including introduction, methodology, questionnaire, task analysis, task flow diagram, sketches storyboard and news add-on.





In this slide show presentation shows the news criteria in our system. The criteria that we shows is search engine in our system, imagine link (e.g bing.com) and community service. First slide shows the interface of our website. In this website have website logo, search keyword and three main columns. Second slide show when user use the search engine in our website, the new pop up window will be display which is show the search, keyword and date columns and one enter button. At the left sidebar in our website, we put the calendar so that user can know what time and day when they log in into our website. Third slide show that our website has three main columns that is main page, sub-sub categories, and advertisement and administrator login form in the right sidebar. Main page use to update new event so that user or guess will know what news in our website is. Sub –sub categories including features and upcoming event at the left sidebar can help user or guess to look easily what they are looking for. Login form to administrator are use for admin to insert any news event or anything event into the main pages.


DOWNLOAD PDF PRESENTATION 2

Introduction to Joomla


Presentation 1


This is our group project presentation. Our group create a project website that is News and Event system. in four slide earlier in our presentation, we shows about the content which is including Introduction, Methodology, Questionnaire, Task Analysis, Task Flow Diagram, Sketches Storyboard, and New Add-on.



Here, we want to explain about task flow diagram about our project. First flow diagram is home which mean interface about our website. Secondly for our flow diagram is main menu selection. This flow shows the menu selection of the top of website. Thirdly, sub menu selection content menu selection at the left sidebar of our website. Foully, our flow diagram is choose news or event or search keyword. At this step, guest will choose whether want to use search keyword or choose another news event. Fifthly of our flow diagram is the result display of news or event or search keyword. When guess search something or choose news the display result will be appear. Lastly, the flow diagram for our group is guess or user will decide whether they want to continue or finish before complete.


DOWNLOAD PDF PRESENTATION

Sketches Storyboard Using Visio

This is our sketches storyboard picture using visio

Homepage :

This is the homepage or main page of our website that is UTM Event. This is still in the low fidelity form but with more look organized and accurate. The only difference with the previous storuboard is it have been done using tool called Microsoft Visio.

Center:

On this page, we just put the various of interface item like a calendar, links, use log in and more details about search box.



Latest Assignment



Sketches Storyboard

This is our sketches storyboard picture

Homepage :

This is our homepage or main page for our News and Event system. Of course we just sketch it because want to show the low fidelity of it.

On it, we put the logo, banner or name of our system and multiple of link above it. When the viewer, user or anyone who just visits this site want to search anything, they can actually write it down on the search box that been provided.

On the center of this page, we put the news and event that are happened at University Technology Malaysia, Skudai Campus. For user that want to send any events, they need to register and then they can log in to post their events.


Center Stage :


Events :


On the event page, the only difference with the homepage is the news is changed by events.

Activity 1 HCI Assignment

Our submission data for activity 1 including video and document. you can download the video or document by selecting the link according the name of this blog member. Other wise you can watch the video directly in youtube which you can see the video link on the right panel -->.

Info Guide:
  • Vid1 for MAS
  • Vid2 for Air Asia
  • Vid3 for Expedia

  1. Ahmad Fuad Bin Rashid [Vid1 + Vid2 + Vid3 + Doc ]
  2. Ahmad Fahme Bin Abd Hamid [Vid1 + Vid2 + Vid3 + Doc]
  3. Mohd Nizam Bin Mazenan [Vid1 + Vid2 + Vid3 + Doc]

In order to increase the speed of your downloading and enable you to download from youtube, you can download the software below:


We hope all of you enjoy and get some useful information from our first HCI activity......

Our first post here


Assalamualaikum and good morning to all viewer... thanks for visiting our first blogs. This blogs has been created by:
  • Ahmad Fuad Bin Rashid
  • Ahmad Fahme Bin Abd Hamid
  • Mohd Nizam Bin Mazenan
This blog is to show our support to our HCI (Human Computer Interaction) Class in UTM (University Technology Malaysia) Skudai. We hope, all the viewer will get all the infomation they need... and one more thing, please leave your 'shout' or your comment about this blog. thanks a lot...

:)