After 3 nights dedicating the whole weekend to the assignment, I have finally completed my semantic application. Since the proposal back in November, the project has come a long way, and with a design change occurring half-way, the result looks very promising, and does hold a lot of potential as to how this application can change the world.
The Introduction page is dominated with a profile picture and a brief introduction underneath it; the rest of the introduction is done in the Personal Profile. The content is marked up using XML in a polyglot environment (except for the addresses in the Contact page, where there is already a HTML5 semantic tag associated with it), and the content have CSS3 background transition effects to provide emphasis, which helps employers to easily read the content, especially in environments where processing of applications in a swift and timely fashion are required. The content box is styled natively using CSS3, as is the text in the AJAX tabs, and in terms of AJAX, it is used (with JQuery magic) to display the content in the same page from separate HTML files without having to go to another page.
Adding to the easy-to-use nature of the application, the content pages are formatted in a way that even the less-experienced users can easily populate the pages, provided that they have at least a plain-text editor and some knowledge of HTML (the custom XML tags are already provided for the user), because the main CSS file already provides the styling for the content, so whenever it appears unformatted in a WYSIWYG editor, the content becomes styled once it is loaded up in the application.
Overall, I've managed to produce an application that has a lot of potential, and even though I've already seen many examples of online portfolio websites, this semantic application has a lot of potential to impress employers in the professional world...
To view the application, click here: http://www.elnormo91.co.uk/semanticapp/semanticapp.html
Monday, 12 December 2011
Saturday, 10 December 2011
DAT204: Evolution of the design
After trying to make the website work with the originally-proposed design, I've then decided to take a different approach. Whilst trying to implement as many CSS3 features as possible, I've then discovered something that can make the website very lightweight yet powerful; in addition to the existing polyglot markup approach, I've also discovered the wonders of JQuery and AJAX.
The JQuery will be used to make the Edit dialogue hidden until the user clicks on it, and the AJAX will be used to paste the content from separate HTML documents making up the pages into the same website, via the use of tabs, without having to go to a separate page, replacing the need to press backwards whenever the user wants to go back to the previous page.
In terms of interface, I've decided to change it to one that can relate to businesses very well, with the content of the eCV centralised, so then more emphasis can be placed on the content, and with the tabs linking to the different sections coloured in a rainbow-style scheme, in a similar fashion to how Filofaxes are sectioned by colour code, or how some documents are bookmarked, to make the sections easier to remember. The goal that was envisioned in my specifications was to create something similar to Zerply, with a more business-oriented interface and a standardised layout.
The JQuery will be used to make the Edit dialogue hidden until the user clicks on it, and the AJAX will be used to paste the content from separate HTML documents making up the pages into the same website, via the use of tabs, without having to go to a separate page, replacing the need to press backwards whenever the user wants to go back to the previous page.
In terms of interface, I've decided to change it to one that can relate to businesses very well, with the content of the eCV centralised, so then more emphasis can be placed on the content, and with the tabs linking to the different sections coloured in a rainbow-style scheme, in a similar fashion to how Filofaxes are sectioned by colour code, or how some documents are bookmarked, to make the sections easier to remember. The goal that was envisioned in my specifications was to create something similar to Zerply, with a more business-oriented interface and a standardised layout.
Thursday, 8 December 2011
DAT204: Laying down the foundations and tightening up the ratchet...
So far, the foundations of the semantic application has been laid, and what was originally the empty shell of an app that has yet to see the light of the day has now started to progress. In terms of the app, I have chosen to include XML in harmony with HTML5. Despite it sounding like a rather uncanny marriage, the ability of using custom tags in HTML5 is still there, and even though XHTML was going to be the future, the clear direction was that HTML5 eventually emerged to become the winner.
However, the idea of 'XHTML5' still hasn't been put to the metaphorical bed yet, and as this application shows, the idea of XML semantics with the many features of the HTML5 platform can still be a good one.
As the Christmas holidays are starting to just come around the corner, the work still doesn't stop; the next part is to get the graphics sorted out and figure out a way of getting the content in whilst adding in the wonderful HTML5 features.
Tuesday, 29 November 2011
DAT203: Augmented Reality: more about it
Although it has been said that the Wizard of Oz can be considered to be the very first example of augmented reality (or a model of which a typical AR setup is based upon), the first documented example of a form of augmented reality dates back to the 1950s, with the advent of Sensorama, which was a machine that produced visuals, sound, movement, and even smell. However, it was not considered a success, as there was no financial backing to support the project and to apply patents to it.
In 1966, the first form of visual augmented reality, the head-mounted display (HMD) was invented by Ivan Sutherland, which provided the user with a view of a virtual world, which applied the principles of the Wizard of Oz model. Whilst the phrase 'augmented reality' was coined in 1992, the first, modern functioning form of augmented reality was created in 1992 by the US Air Force Research Laboratory, known as Virtual Fixtures, and in 1999, a standard platform of augmented reality, ARToolKit, was created by Hirokazu Kato of the Nara Institute of Science and Technology in Japan, and has since been ported to many platforms, including mobile devices, of which their potential was not realised until the boom of smartphones in the late 2000s.
A more recent implementation of augmented reality was created in 2008 as Wikitude, a travel guide that utilises the smartphone's built-in camera to overlay information onto the screen, and then provides the user with information about places to visit, shops, restaurants etc.
In 1966, the first form of visual augmented reality, the head-mounted display (HMD) was invented by Ivan Sutherland, which provided the user with a view of a virtual world, which applied the principles of the Wizard of Oz model. Whilst the phrase 'augmented reality' was coined in 1992, the first, modern functioning form of augmented reality was created in 1992 by the US Air Force Research Laboratory, known as Virtual Fixtures, and in 1999, a standard platform of augmented reality, ARToolKit, was created by Hirokazu Kato of the Nara Institute of Science and Technology in Japan, and has since been ported to many platforms, including mobile devices, of which their potential was not realised until the boom of smartphones in the late 2000s.
A more recent implementation of augmented reality was created in 2008 as Wikitude, a travel guide that utilises the smartphone's built-in camera to overlay information onto the screen, and then provides the user with information about places to visit, shops, restaurants etc.
Tuesday, 22 November 2011
DAT203: Augmented Reality: Is the Wizard of Oz considered to be the first example of AR?
Today, we've been taught more about Augmented Reality and the Wizard of Oz, but why the Wizard of Oz? Is it because, because, because of the wonderful things he does, or is it because it hints about the earliest possible example to date? Surprisingly, the Wizard of Oz is used as a model for Augmented Reality, because it is based on the idea of seeing the world from a different perspective via a wearable medium, which in most cases like the Emerald City, would be through special glasses.
Monday, 24 October 2011
DAT204: Assignment 1: Semantic 'Killer' Application (20% of the module)
For our first project of DAT204, we have to create a 'killer' web application based on the latest web standards (HTML5 etc.) and semantics, that will be very useful for a given task (e.g. a portfolio that is easy to use, graphically attractive and descriptive, hence the usage of semantics).
Semantics are used to make data more descriptive, because, in contrast to humans, computers need to interpret the meaning of data, and in its plain form, the computer doesn't understand straight away. In HTML5, semantics are used to describe the elements and layout, and in contrast to past versions of HTML, HTML5 does not require certain attributes, such as declaring JavaScript in the <script> tag (as JavaScript, by default, is the standard scripting language in the HTML5 platform), and mentioning the XML namespace in the <html> tag.
My initial idea is to create a 'killer' portfolio platform that is very intuitive, simple and easy to use, yet at the same time, is powerful and graphically attractive. My portfolio application is going to be 'the ultimate CV', which will be integrating a workbook, a gallery of practical work, a personal profile and SEO to make the website the first destination for any potential employer, especially those that are in the creative industries, in which this application is aimed at.
Semantics are used to make data more descriptive, because, in contrast to humans, computers need to interpret the meaning of data, and in its plain form, the computer doesn't understand straight away. In HTML5, semantics are used to describe the elements and layout, and in contrast to past versions of HTML, HTML5 does not require certain attributes, such as declaring JavaScript in the <script> tag (as JavaScript, by default, is the standard scripting language in the HTML5 platform), and mentioning the XML namespace in the <html> tag.
My initial idea is to create a 'killer' portfolio platform that is very intuitive, simple and easy to use, yet at the same time, is powerful and graphically attractive. My portfolio application is going to be 'the ultimate CV', which will be integrating a workbook, a gallery of practical work, a personal profile and SEO to make the website the first destination for any potential employer, especially those that are in the creative industries, in which this application is aimed at.
Mock-up 1: the workbook page
Mock-up 2: the cover page (i.e. the first page the user sees before proceeding to other pages, as per Mock-up 1)
Although the idea of portfolio websites aren't new, and have already been done, my semantic application is going to take it one step further, and become the CV of a potential employee, replacing the traditional paper format, and also being optimised, so in case the employee is 'Googled', the SEO used in this 'killer' semantic application will be optimised, so then the problem of being faced with an unwarranted social media presence (where it would be bombarded with personal opinions and photographs that, depending on the situation, can make or break one's opportunities) will be eliminated, so then the more professional side of the person takes precedence over one's personal side, especially since, even with, for example, your Facebook profile is set to private, friends may not be bothered to set their profiles to private, and anything unwarranted (e.g. unusual photos of nights-out) tagged with your name can cause problems.
Friday, 21 October 2011
DAT203: How not to design a website, and the future of the iPad
In today's practical, we've had to pick two of the world's worst-designed websites, and we managed to come up with these examples: alexchiu.com and the official Space Jam film website at www2.warnerbros.com/spacejam/movie/jam.htm. alexchiu.com featured a rather inconsistent design theme, a profusion of formatting and spelling errors, and a heavy reliance on animated GIFs to add emphasis on links and certain titles. Also, we found out that when we click on a different language, the design of the website is completely different, rather than having the same design throughout, which is supposed to be the convention no matter what language is used.
Although the official Space Jam website was designed sometime in October or early November 1996 (which was approximately about a month or two before CSS existed, and before CSS became the norm), it featured many bad design features. The website used repeating backgrounds, inconsistent text, frames as title bars (which can cause confusion as the user cannot tell whether or not the logo at the top left actually is the button that returns to the home page of the website), usage of the frame as a menu bar, and clashing colour schemes in certain pages, thereby rendering the text hard to read. We also found validation errors and spelling mistakes after we ran the Space Jam website through an online validator, so, even though it is almost an online 'museum' page, someone at Warner Brothers didn't really pay attention to ensuring that the website at least complies with W3C standards at the time and didn't think about the many little spelling errors that the website had. Even some of Disney's older websites had more of a consistent theme, at least.
Now, on to a different subject. We had a debate about how the hypothetical iPad 5 would evolve, and how it would eventually render conventional computers (desktops and laptops) obsolete. There is evidence that mobile devices are starting to overtake conventional computers in terms of sales, and with the proliferation of cloud computing, it could eventually replace the need to sync the device with a conventional computer. According to the IDC, an independent technology research firm (source: http://www.computerworld.com/s/article/9199918/In_historic_shift_smartphones_tablets_to_overtake_PCs), they are, indeed, outnumbering conventional computers, and even though they are already ahead of performance, the evolution of mobile technology is starting to make mobile devices outperform desktops and laptops in terms of speed, and eventually, they would be just as fast that even the most graphically-intense task could one day be performed on mobile devices such as the hypothetical iPad 5, or even its successor.
Although the official Space Jam website was designed sometime in October or early November 1996 (which was approximately about a month or two before CSS existed, and before CSS became the norm), it featured many bad design features. The website used repeating backgrounds, inconsistent text, frames as title bars (which can cause confusion as the user cannot tell whether or not the logo at the top left actually is the button that returns to the home page of the website), usage of the frame as a menu bar, and clashing colour schemes in certain pages, thereby rendering the text hard to read. We also found validation errors and spelling mistakes after we ran the Space Jam website through an online validator, so, even though it is almost an online 'museum' page, someone at Warner Brothers didn't really pay attention to ensuring that the website at least complies with W3C standards at the time and didn't think about the many little spelling errors that the website had. Even some of Disney's older websites had more of a consistent theme, at least.
Now, on to a different subject. We had a debate about how the hypothetical iPad 5 would evolve, and how it would eventually render conventional computers (desktops and laptops) obsolete. There is evidence that mobile devices are starting to overtake conventional computers in terms of sales, and with the proliferation of cloud computing, it could eventually replace the need to sync the device with a conventional computer. According to the IDC, an independent technology research firm (source: http://www.computerworld.com/s/article/9199918/In_historic_shift_smartphones_tablets_to_overtake_PCs), they are, indeed, outnumbering conventional computers, and even though they are already ahead of performance, the evolution of mobile technology is starting to make mobile devices outperform desktops and laptops in terms of speed, and eventually, they would be just as fast that even the most graphically-intense task could one day be performed on mobile devices such as the hypothetical iPad 5, or even its successor.
Subscribe to:
Posts (Atom)
Popular Posts
-
Designed with ease of use in mind, the interface is inspired by mobile tablet devices, namely the iPad, and also, some of the principles o...
-
For our first project of DAT204, we have to create a 'killer' web application based on the latest web standards (HTML5 etc.) and sem...
-
Inspired by ®™ark's Barbie Liberation Organization campaign of the early 1990s, I decided to add a section to Project Canterlot by looki...
-
During the course of a few weeks, we've been doing some Adobe Illustrator stuff. Part of our assignment is to design a digital signature...
-
As unconventional as it may seem, interventions are a great way to get the message out there. From urinating on sculptures resembling urinal...
-
Whilst we were planning on how we're going to implement the interface, the idea we had was to design the interface like a tablet compu...
-
There seems to be problems with existing information kiosks being underused, and this could be down to the fact that there is not enough fun...
-
Since the release of the miniature Raspberry Pi system last week, this has given an idea of cutting down the footprint and cost for the info...
-
As part of our assignment for the Creative Industries module, we were given a task to produce an educational application for a charity that ...
-
So, this wraps up the artefact, just like Winter Wrap Up, except that is not Winter Wrap Up anymore, this is Spring. After working hard for ...


