~Blog 3 – Website Design~

Hello all, the final individual blog assessment task for this course is to design a small to medium sized website of a subject of choice. This website must contain a minimum of ten pages, and must be of a professional/educational nature.

In order to meet these criteria above, I have chosen to design a website called:

WiFi Node Observation Deck

The website objective is to provide various software that allows monitoring and visualization of a wireless network device statistical information. The website will also offer services to map wireless mesh network nodes and viewing the network topology’s of such.

The target audiences of this website includes:-

  • Network Administrators – will be the primary audience of the visualization software (typically of age 21+)
  • Network Owners – will be the primary audience of the node mapping services (creation, initialization, management)
  • Network Users / Support Staff – should a network owner register an account for a node mapping service, the users of respective network will be the secondary audience
  • Interested Public – will be able to view information of public networks

In order to effectively target the appropriate audience, design of website home-page and navigation will divide the website logically depending on the user desired outcome. For instance; all content relating to the offered software will be grouped in a container with quick access to critical information (features, screenshots, guides and pricing/purchase). Likewise, the network mapping service will also be logically grouped in a container, however, this container will also be split into three sub-categories which aim at the remaining audiences; a section for new network submission (Network Owners), a section to directly access an existing network map (Network Users) and finally a section to browse publicly listed networks (Interested Public).

A quick recap of website categories above :

Network Administrators

  • Available software information
    • Software description / features
    • Software installation guides and hardware compatibility
    • Software pricing / license information / terms and conditions
    • Software purchasing / on-line store

Network Owners

  • Network mapping service information
    • Service description / features
    • Service preparation / setup guide
    • Service account creation / administration
    • Service privacy information and configuration / terms and conditions

Network Users / Support Staff

  • Network mapping service access
    • General service information
    • Guides on use / access
    • Request to join existing network
    • View joined network information

As the identified website target audiences have a high chance of exclusively belonging within the adult age demographic, the website will be designed using a simplistic and aesthetically pleasing color scheme that avoids user fatigue whilst reading presented information. It is also assumed that the majority of website users will have moderate technical knowledge as the website content will primarily deliver technical information. However, effort will be made into converting as much of this information into a user-friendly visualization which will hopefully allow users with lesser technical knowledge to still benefit from the contents.

Included below are some screenshots of existing similar website of which the above schemes will be derived from:

Product Scheme

A scheme similar to the above will be used to represent and promote the available network monitoring software after it’s section has been accessed via the dashboard page or navigation system.

Node List

This page reflects the layout of the Node Mapping service, (specifically the view of a registered network user, looking at available network nodes) which includes clickable hyperlinks to individual devices of interest, but also access to the various sections that contain the other node diagrams, charts and information via the navigation.

Dashboard

Finally, this screenshot represents a closer representation of the desired node mapping service dashboard page and navigation system of a  logged in network owner or user. This page would be directly accessible from the home page or navigation system. The final design of the node mapping system will be a derivation of a combination of the two previous images.

The proposed navigation system will remain consistent throughout every page of the website, with direct access to any category available through the navigation bar or the default home page. Should a category be activated (clicked) within the navigation bar, a list of respective sub-categories (if required) will be displayed as a series of indented sub-items. This will ensure that the entirety of website content is accessible from every page, though remains in a non-confusing and easy to read fashion.

The blueprint diagram below highlights the general website flow and user interaction of website components (click picture to open full-size version):

Blueprint

The navigation scheme of the website can be seen clearly within the above blueprint, the main navigation labels are in bold, and can be seen by all users (and will only change based on decisions indicated by diamond shapes). All sub-category (child) menus are also listed under their parent, and information flows between information/processing pages and database systems have also been highlighted.

It can also be safely assumed that the navigation design of the website is of a hierarchical structure, this can be seen through the use of inheritance and the parent/child relationship of navigational categories and sub-categories. By splitting the website into logical sections assists with providing the correct content to the correct target audiences whilst minimizing unnecessary options/content and preventing users from getting lost.

The primary navigation menu will be affixed at the top of the webpage. When a particular tab is activated, contents below the top navigation bar will dynamically adjust itself respectively. The majority of categories will invoke a main content section that includes the top navigation bar (this is included globally within the site, and is never not shown) and section below divided into a fixed-left navigation bar containing all of the parent category’s sub-categories, and the remaining space to be dedicated to display content. The left navigation bar will be displayed on every page with exception of the home-page. This three tier system is relatively common, and can be seen used in the design of many websites. This will be further highlighted with the presentation of wire-frame prototypes in the next section. An example of the fixed global navigation bars located at both the top and the left of the screen is as follows:-

Nav Example

Along with these main navigation bars, navigational bread-crumbs will also be located directly below the top navigation bar and directly above any displayed content – these bread-crumbs are included in order to allow the user to quickly determine where-about they are located within the total site hierarchy / map. This again provides enhanced user-friendliness to the website, and aids the user retain their bearings whilst navigating through sections.

Included below is a collection of wire-frame prototypes developed to highlight the design principles to be applied in the creation of this website. This is to demonstrate how the navigational systems will flow between categories, and examples of how the website content will be delivered to each of the target audiences.

WF-Home

Above is an example of the homepage, the first page that the users will see when they enter the website. It is very simplistic by design, and will allow users to quickly and efficiently locate desired content (based on target audience – these are the main logically separate containers geared towards each target market).

WF-Buy

The snapshot above highlights the purchasing information section of the application web store page. The snapshot below highlights the search functionality of the website, the design of which has been styled to closely represent that of Google so that users have a sense of familiarity whilst performing a search query on the website:

WF-Search

Finally, due to the website including aforementioned search functionality – in order to be correctly implemented for the maximum possible efficiency, the Controlled Vocabulary of the website must be assessed, and the design of a Metadata Matrix is to be composed. Using both the Controlled Vocabulary database and Metadata Matrix, the internal search engine is able to optimize the results provided to the user by effectively expanding or modifying the query behind the scenes so that a desired item the user is searching for is not accidentally missed through the use of a non-exact matching term.

Vocabulary Description Examples Maintainance
 Product Product name / description WiFi, node  Easy
 Service General service name / desc. Cloud, network  Moderate
 Price Plans Specific Service Plan details fee, cost, price  Moderate
 Network Existing network name / attribute SSID, IP, MAC  Difficult
 Guide Guide document feature / content how to, how do i  Easy

Considering the Metadata Matrix above, the table below illustrates the Controlled Vocabulary Database:

Accepted Term Variant Terms
wLan WiFi, wireless, local area network
Quality Signal, RSSI, SNR, strength
$x.xx Plans, service, cost, price, licence, terms,
Map network map, network topology, node list
how to guide, instructions, help

That concludes the potential design of WiFi Node Observation Deck! Thanks for reading!

Posted in General Category | Tagged , , , , , | 7 Comments

~Labelling~

Hi All,

The final component (see 1 & 2) of this week’s blogging objective is to evaluate the navigational labels of a chosen website, and create a navigation system table. I have selected to use the Google Chrome web page, as it has been my browser of choice for a while now! A snapshot of the page below:-

Google Chrome

I actually really like the simplicity of the navigation structure of this site, the main item users are seeking is located centrally and is distinctive. The navigation-bar headings at the top; browser, devices and web store are actually hover-over drop-down menu’s which work really well – their contents described in the table following. A nice finishing touch is the top left ‘home’ page button (the chrome text and icon), when hovered over displays a really neat animation!! One thing I think could trip users up a bit though is that the bottom picture is actually linked to the button – so it might be accidentally clicked on and activated whilst scrolling or similar, as it is fairly large.

Label

Destination’s Heading Label

Destination’s <TITLE> Label

Browser

Download
Features
Mobile
Gallery
Support

Get a fast, free web browser
Explore the Chrome Browser
Chrome for Mobile
The web is what you make of it
How to use Chrome

Chrome Browser
Chrome Browser
Chrome for Mobile
Chrome Browser
Chrome Help

Devices

Features
Chromecast
Chromebook
Chromebox
Support
Buy online
Buy in store

For no more hassles
Chromecast
For the best of Google
Chromebox
Support
Get a Chromebook
Get a Chromebook

Introducing the new Chromebook
Chromecast
Chromebooks: Overview
Samsung Chromebox
Chromebook and Chromebox Support
Buy a Chromebook or Chromebox
Buy a Chromebook or Chromebox

Web Store

Features
Apps
Extensions
Themes
Support

Make the most of the web
Customize your Chrome
Do it all with apps
Fine-tune Chrome
Create Chrome theme

Chrome Web Store
Chrome Web Store features
Chrome Web Store apps
Chrome extensions from Web Store
Themes from the Chrome Web Store
Chrome Web Store Help

Two competing websites also inspected were both Mozilla Firefox and Internet Explorer. Both also contained relatively simple navigational structures, as can be seen below:

b

c

The distinct difference is contained within the main menu navigational object, both these sites contain a drop-up style menu, which pushes all other site content down in order to make room. Although a positive major similarity is that all browsers can be downloaded directly from the home page via a button. Also the colored backgrounds are a plus for both these sites as well!

Overall, I believe the Google Chrome page is the winner, the smooth navigation menu styles and the very nice animation at the top place it ahead of these other websites.

Thanks for reading!

Posted in General Category | Tagged , , , , , | 4 Comments

~List~

Hi all,

The second component of this week’s objective is to sort the following list into alphabetical order (see first component):-

El Paso, Texas
Saint Nicholas, Belgium
The Lord of the Rings
Newark, New Jersey
XVIIme siècle
.38 Special
St. Louis, Missouri
New York, New York
1001 Arabian Nights
The 1-2-3 of Magic
Albany, New York
#!%&: Creating Comic Books
The Hague, Netherlands
$35 a Day Through Europe
H20: The Beauty of Water
Plzen, Czech Republic

And this is my result:

#!%&: Creating Comic Books
$35 a Day Through Europe
.38 Special
The 1-2-3 of Magic
1001 Arabian Nights
Albany, New York
El Paso, Texas
H20: The Beauty of Water
The Lord of the Rings
New York, New York
Newark, New Jersey
Plzen, Czech Republic
Saint Nicholas, Belgium
St. Louis, Missouri
The Hague, Netherlands
XVIIme siècle

Both The Hague and El Paso have been placed under T and E respectively, due to both items being names of cities and therefore Proper Nouns. New York was placed above Newark as the space present between New and York logically separates the item so it could be equally argued whether putting it above or below the relevant position is correct.

St. Louis was placed after Saint Nicholas as the Saint has been abbreviated down to St. and therefore technically alphabetically lower when only the S and t is considered without the full stop. Numbers and special characters have been placed at the very top of the list.

A more useful way to organise this list would be to split it into two separate lists containing Book Titles and Cities respectively. I believe this would greatly enhance the clarity and readability of both lists, reduce searching and perusal time and generally make a lot more sense – as it doesn’t seem logical to concatenate these groups of items in a single list.

Finally, if the list was to represent personally visited cities and books read – a relationship could be established between both list items, similar to database columns, each row representing a log of each book read whilst visiting a particular city. This information could then be retained and queried, and I believe using chronology in this fashion benefits both the meaningful ordering and the overall understanding of the raw data.

Thanks for reading!

Posted in General Category | Tagged , , | 3 Comments

Wow!! Physical Pixels

A big thanks to Purush for sharing this awesome video with me during the consensus!! Amazing ideas!

Posted in General Category | Tagged , , , | Leave a comment

~Cool Web 3.0 Video~

Hey everyone, I ran into a pretty neat video that I think sums up Web 3.0 very nicely! I think it gives a very clear and relatively up-to-date picture of upcoming web technologies especially considering that it’s only 5 minutes in length! Check it out!

Posted in General Category | Tagged , , , | Leave a comment

~Information Architecture~

With the emerging mass of user created content on the internet that is driving Web 2.0 – it raises the question of how we’re able to sift through this ocean of data and retrieve what we’re looking for.

 

All user-content hosting sites, would have advanced algorithms that control the process of sorting / organizing / categorizing / tagging (therefore indexing) the data to allow it to be effectively searchable.

There is an official name for the above – Information Architecture – and the term has been around long before Web 2.0 was coined (1999), it was created by Richard Saul Wurman in 1976.

Richard Saul Wurman

A direct quote of his I believe accurately sums up the overall goal of the Information Architecture Framework:

“I thought the explosion of data needed an architecture, needed a series of systems, needed systemic design, a series of performance criteria to measure it.” – Wurman

 

Which leads to what exactly the role is of an Information Architect in the context of website development?

As the helpful picture below assists to explain greatly – I believe it is to ensure that website users are able to easily navigate / search both quickly and efficiently through website information in order to receive desired content.

 

Thank-you very much for reading!

Posted in General Category | Tagged , , , | 4 Comments

~Web 3.0~

The rise of the Semantic Web. I believe that the introduction of intelligent software and/or agents that could potentially make decisions on behalf of the end-user is a double-edged blade. On one hand, it could provide many positive convenience and productivity benefits – but would open up critical vulnerabilities with respect to user-provider trust and security.

The first thing that springs to my mind when considering a possible machine-assisted intervention:

text

Although the above is obviously a joke, the idea of combining information across various websites in a constructive manner (much like humans are naturally able to combine such logically similar information) appears to be the general direction of Web 3.0 development. However, increasing a machine’s intelligence to perform at this level would incur a lot of consideration being required of privacy implications and concerns on the level of access to, collection, use, and transmission of personal user data.

I found a really cleverly designed power-point presentation (that actually run’s inside the browser with no plug-in’s!) on the w3.org website found here about a talk regarding Web 3.0 development and Semantic Web. From this presentation I found a diagram that I think really highlights the importance of user provided trust and data transmission security (Cryptography = data encryption techniques) of such future Web 3.0 applications:-

Finally, I think it’s a possibility – but not necessary a reality in the near future, that machines would be able to collect and actually be able to interpret and intelligently act upon and make decisions about data collected from a complete world filled with sensors. For it to ever eventually happen I ascertain it will be a series of building blocks of incremental stages of intelligence (for example starting off with devices that can be powered on audially, privacy implications would arise from the nature of the device being able to “listen” 100% of the time to it’s surroundings – and what the device is doing with recorded data: being stored? sent over the network somewhere..?) whereby after a number of such revelations have completed could lead to a potential blur of the distinct difference between humanity and technology as it exists now (i.e. machine dumb, user ‘smart’).

Again, thank-you very much for reading – if you have any thoughts at all, please leave a comment!!

Posted in General Category | Tagged , , , | 9 Comments

~Privacy Policies~

So this afternoon I took a close look at Facebook’s Terms and Conditions regarding their Data Use and Information Collection Policies. They have it tucked away under a ‘Terms’ link on the right-hand side of the home page which leads to a rather nice looking policy selection page.

I examined both the Statement of Rights and Responsibilities, and the Data Use PolicyI think it’s a good idea that they have separated these policies into two sections, as one giant wall of text would be quite cumbersome to read as I’m sure all agree. Anyway, looking on through there is all the standard big company self-defense clauses – and is reasonable, I guess. It would be impossible for a moderation team to completely prevent an inappropriate action caused by a singular user with such a vast user base. However, when searching for an answer for the resolution plan in the event of a security breach – the following seemed to be the closest representation of their stance:-

“WE TRY TO KEEP FACEBOOK UP, BUG-FREE, AND SAFE, BUT YOU USE IT AT YOUR OWN RISK. WE ARE PROVIDING FACEBOOK AS IS WITHOUT ANY EXPRESS OR IMPLIED WARRANTIES INCLUDING, BUT NOT LIMITED TO, IMPLIED WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE, AND NON-INFRINGEMENT. WE DO NOT GUARANTEE THAT FACEBOOK WILL ALWAYS BE SAFE, SECURE OR ERROR-FREE OR THAT FACEBOOK WILL ALWAYS FUNCTION WITHOUT DISRUPTIONS, DELAYS OR IMPERFECTIONS. FACEBOOK IS NOT RESPONSIBLE FOR THE ACTIONS, CONTENT, INFORMATION, OR DATA OF THIRD PARTIES, AND YOU RELEASE US, OUR DIRECTORS, OFFICERS, EMPLOYEES, AND AGENTS FROM ANY CLAIMS AND DAMAGES, KNOWN AND UNKNOWN, ARISING OUT OF OR IN ANY WAY CONNECTED WITH ANY CLAIM YOU HAVE AGAINST ANY SUCH THIRD PARTIES.”

I like how they felt that this entire paragraph warranted CAPS LOCK, enabling cruise control for fury in order to shout how much they don’t care! That’s not very nice 😉

Capslock

My attention was then turned to the Data Usage policy, where they have nicely laid out pretty concisely all information that is collected through the registration and usage of an account – and what they’re supposedly doing with it. They suggest that all information gathered and used from accounts are to ‘enhance’ the richness of the browsing experience by using the information to improve targeted website advertisements. They insist that all information that is handed onto third parties has been stripped of all personal data that could link to an individual (which is what category I imagine all advertisement enhancement data collection falls into), and that personal information will not be disclosed to any third party unless permission has been provided by the user.

All in all I suppose I am relatively happy with the data policy, as at the end of the day it is up to each individual user to be wary of exactly what kind and how much personal information that they are willing to submit to a website which could be potentially exposed for public accessibility. It is a good idea to review the privacy configuration of any open social media account to ensure user submitted content and details are only viewable by the desired audience the user is comfortable with.

Thanks again for reading!

Posted in General Category | Tagged , , , , , | 9 Comments

~RSS Feeds~

Hello Everyone! First of all, thanks for all the new follows – have now hit 20+ !

This evening I decided to look further into RSS Feeds, more specifically RSS Feed Reading Software, and after much deliberation seeking a Google Reader Alternative (not too sure why, but if it was still available, it would have most likely been a first choice for myself and others) and I think I’ve found one that I’m happy with.

I checked out Feedly to begin with – but it appeared to be an online contained application and accessed via a web browser, but I was after a Windows application to be installed on my desktop. Something I liked about these guys though was that they offered mobile versions of the application for iOS and Andriod – which I think is a good idea and could possibly sway many people that way!

In the end I’ve decided to go with an Open-Source alternative that was recommended on a WordPress feed information page I was looking through – RSSOwl

RSSOwl

The first goal I had in mind for this application to achieve was to emulate the current functionality provided by the default Web Based WordPress Reader (referred to as WPR from now on) included as standard for blog account members. At first glance it appeared like it was going to be a mission to interpret the nicely laid out feed with all posts from blogs I’ve followed into a third party application. My first thought was that the feed reader pulled all it’s content from a single RSS feed URL customized for each user – however, after some poking around I discovered that WPR, like all other RSS Feed Reader applications, simply subscribes to each individual followee’s RSS feed and stores and them together in a group! It then would continue to display all content retrieved arranged in chronological order (much like Facebook’s newsfeed). Therefore, all that needed to be done now was to find a way of transferring this list between my WordPress account and my newly installed RSSOwl program.

Fortunately, this was quite simple to achieve. WordPress have ever so kindly included an Export feature which can be found on this page and clicking on the following:-

Export

Clicking on this button led to a 7KB ‘wpcom-subscriptions.opml’ file being downloaded, which I was easily able to import into RSSOwl using the initial configuration wizard, thus completing required setup with ease!

First impressions of RSSOwl vs WPR are mostly positive! I am a fan of having all posts having a read/unread option like an email, and the fact that media (confirmed both images and YouTube video) within any blog entries are included and displayed as well!
With that being said though, the only feature that I really miss from WPR is how all entries are laid out as per a Facebook newsfeed mentioned previously. The other thing I noticed is that special characters such as ” ‘ & … etc that are used in blog / RSS titles – are being displayed using a html/xml special character code, similar to what happens in URL’s
(e.g   ‘  = ‘ ).

Anyway, if you’ve read all of that up until here – thank you very much! Hope I conveyed across something that is at least half useful! 🙂

TLDR; Almost thought about re-following people manually, not cool.
RSSOwl = Open-Source, so far so good!

Posted in General Category | Tagged , , , , , | 6 Comments

Introduction

Greetings and salutations fellow blogee’s!

As you may have discovered already by the title – my name is Peter Brown and i’m a student currently enrolled in 3623ICT Information and Content Management for Semester 2 , 2013. I am currently undertaking a Bachelor of Information Technology (Program Code 1109) at Griffith University’s Gold Coast Campus. I hope to graduate at the end of this Semester, which I am looking forward to! 🙂

I hope this course will offer insight into the various technologies that have made popular websites as successful as they are today. As I am quite interested in programming and development, I hope to be able to increase my understanding of newish web based languages such as HTML5, AJAX, WebGL etc.

I’ll be honest and admit I did once have a blog when I was attending high-school (back when mySpace and MSN Spaces were popular! I’m sure someone remembers those days…) but has been neglected and forgotten about for many moons now! Which reminds me, my first memories of WordPress, I’m pretty sure they didn’t offer accounts or anything – just the software which you were able to host yourself! I had one of those too 🙂 The new system is quite good!

After a few years of previous IT Helpdesk experience behind me, I hope to progress into either a Senior Helpdesk or a Development/Programming role. I am also interested in enquiring at some point for the eligibility of entry into a post-graduate Honors degree if possible!

Now I have a decent post up and the page customization is just about sorted, I will post a link up on the FB group page – and start following ALL the people in the Blog list!! I know everyone is dying for extra notification emails to their inbox 😉

37942965

Posted in General Category | Tagged , , | 2 Comments