Log/Activity on 28-03-2012

          In the morning today, Christine had told us there are some new requirement after discussing with Madam Evelyn. We had to modify and design this website again. We had recorded and divided these works. From the requirement that been told, we have to find a new slider plugin for the images and some sub menu need to be added. Christine had gave us the Backbone's Showreel that should be put at the front page of the website. The flowplayer in joomla can not support mov and avi format, so I had converted the this showreel to higher bitrates of flv format and then uploaded it to the server. After that, I tried to search the colour for the Contact Form because of the colour of words was not clear. I had tried to find it from the Contact Form's related file but it did not has any coding related to colours. So, I tried to search it from the template's folder. Finally, I had successfully found it and changed the default colour of this website to white colour and now the words were clearer. Besides that, I had searched a new module called Find Us On Facebook. Based on the requirement, a new sub menu had to be added and there was a link called Alumni Page was need in this sub menu.

Log/Activity on 27-03-2012

          Today, we had done not much on the website. The top menu that we had installed previously, we can not seen it by using the IPAD because this menu was a flash menu. In addition, we need a drop down menu for the articles of About Us because there are many tabs at the About Us. So, we had searched some of the menus from internet. At last, we had decide to use a menu module called Ninja Simple Icon Menu. This module allow us to put the icons' image and icons' title. We had entered the icons' URL which linked each icon to its page respectively. Besides that, I had changed the colour of all the information in this website so the information looked clearly on this brighter background.

Ninja Simple Icon Menu

          After that, I continued to do the story board for the mobile game. I had sketched up some of the scenes of the game story.    

Story of the game

          Our team member, Chia Jing had done the milestone for this mobile game project. We had told that we have another two projects that we have to completed within this five months. This two projects are developing a website for another company and a game project. 

Milestone of the mobile game

Log/Activity on 26-03-2012

         Today, we done the website for a whole day. Christine had modified the content's background image to become brighter and she had added some textures to the background image. I had uploaded the new background image to the website. Through the modification for a few times, now the background of the content was looked nicer and the light effects were more obviously. For the Gallery, all the videos were been uploaded. I had edited and uploaded videos' images because the videos' size was fixed so we need to adjust the images that exactly same as the video's size.

Gallery

I also rearranged all the position of articles in this website and justify all the information at Articles and Gallery so they were looked more neatly. Besides that, I had shrank the font size of the information for the Jobs and also the image that I have designed before by using photoshop so the image would not out of the alignment.  

Justify the information

Log/Activity on 23-03-2012

          Today, Chia Jing, Li San and I continued with the work of the website to comply the requirement of Christine. According to the requirement, we had rearranged all the information in this website. Christine had designed a new high resolution background image since the colour of previous background image was darker and low resolution. I had uploaded the new background image through the CPanel server and re-adjusted the poisition of the top menu icons. I had found the coding of the template and successfully to allign the content with the Backbone Logo and the top menu icons at the top. Besides that, i had redone the cropping of the background image of the search box to remove the white border of the box. Now, this website was looked nicer and neatly. 

Home Page

I had put the information of the Contact into a table to avoid the use of scroll bar and tabs.

Contact Us

We had removed some tabs at the About since there are too many tabs that will made the user confusing. 

About Us

For the Gallery, we did not used the GaleryXml components anymore and we made it simple as articles for all the videos and descriptions. There are five categories which are 2D Animation, 3D Animation, TV Commercial, Augmented Reality and Games and we used the Link function in Joomla to link them.

Gallery

Log/Activity on 22-03-2012

          We had a meeting to finalise all the work for the mobile game. Our team member, Yukii continued to do the movement of the main characters, Jelly by using the Flash software. Book Tek who is our team designer was continued doing the background of the game. There are sive scenes in this game which are Jelly Land, Cookies Land, Marshmallow Land, Cupcakes Land, Candy Land and Ice Cream Land. Chia Jing, Li San and I will do the coding part for this mobile game. Yesterday, the graphic designer, Luay had gave us some guidelines and asked us to sketch up the flow of the game and make sure all of our team member very clear about the game flow. Today, three of us had discussed and done the flowchart for this game.

Flowchart

There are three things need to sketch up which are the story of the game, the storyboard for the menu and the level of the game. We divided all these work. Chia Jing incharged in the level of the game and Li San will do the menu part. I incharged for the story of the game and I had think and decide to sketch up these twelve scenes to describe the game story.

Story of the game

          In the evening, Christine had told us there are some parts need to modify again for the website. There are four things which are the arrangement of the information at Contact, the different background images for Home and the other menu, the background image of the content at Articles and the tabs of About Us. 

Log/Activity on 21-03-2012

          Today, we suspended the progress of the website project because of we are waiting for our colleagues to give us the rest of the information to complete this project. After we put in all these information, Christine will finalize all the parts that she was not satisfied and then we have to modify again. Madam Evelyn will meet the clients on next wednesday so we must complete overall parts before Wednesday.
         
          In the morning, we were doing the presentation slide for the second project- mobile game. The presenter today was our team member, Yukii and this was her first time presentation in front of many people. We give her the opportunity to present our ideas of mobile games. There are five section in this presentation slide which are the roles, the story line, map of game, different types of land and how to play. After we done the presentation slide, Yukii was practised in front of us. In the afternoon, Yukii was present our project to Madam Evelyn, Christine, our company graphic designer and some of our colleagues. After the presentation, they had indicate some of the errors and drawbacks for us to improve in this project. They also gave us some of the ideas and guidelines.

Log/Activity on 20-03-2012

          I added a search module in the website as a site navigation for user. Since the position, design of search box and colour of fonts are not matched with the background, so I changed the coding of the template. All the information given were arranged and now we are waiting for our colleagues to give us the rest of the contents like animation about backbone at front page and the background image of the website.

         We had a meeting to discuss for the presentation tomorrow. We finalise all the ideas and confirmed the theme, storyline and colours. We divided the work for doing the presentation slides.  

Log/Activity on 19-03-2012

          Today, we still continued modify some parts that are not satisfied. We had done design some images for the Gallery's categories.

Gallery's Categories

Other than that, we had listen to the opinions of our colleagues to change the fonts for the articles so that the background can be matched with the fonts.

Change the fonts of Jobs Articles 

We had asked Christine about the website. There still have some parts need to modify to meet her requirement. For examples, the top menu icons and the position of facebook and twitter tabs. We had edited the coding to change the position of the tabs to the top of the page. Because of the colour of our top menu icons were not standardised, we had changed the top menu icons to the icons that given by Christine.

Top menu icons

          In the evening, we had a meeting again for mobile games. We confirmed with the game story, characters and theme of the game. We had divided the work for the presentation slides. On the wednesday, we have to present our progress to Christine.

Log/Activity on 16-03-2012

          Same as yesterday, we continued to design and adjust the articles in our website. As I mentioned yesterday, we need to change the fonts and background image. So, today we edited the psd file that given by Christine for the background layout. We had design some images for displaying the introduction at the front page and the article for the Jobs menu. Besides that, we found a video plugin called flowplayer plugin because the video plugin that we found previously does not has the function that allow us to hide the control bar. By using the flowplayer plugin,  the video can be autoplayed, repeated and the control bar will be hidden if we did not pointed the cursor inside the video's border.

          For the mobile game, we had a meeting to discuss the game and divide the work since we have to present our ideas to Christine on the next wednesday. The works that we need to do are the characters, colours, theme and the story line of the game. Yuki will design the movement of the characters and find the suitable colour for this game. Book Tek will think about the theme and scene of the game. Chia Jing, Li San and I will think about the story of the game and the game mode.

Log/Activity on 15-03-2012

          Today, we continued to adjust the position of all the information in the website. We had arranged all the information neatly. We had get some of the opinion from our colleagues. Some of the parts need to be edited for user friendly. From the opinion from them, we have to change the fonts of the top menu items and the background colour of the articles. So, the user can see the information clearly. I had use the photoshop to arrange and edit the clients' logo from the image that given by Christine. Besides that, some of the unneeded files had been deleted from the CPanel for reducing the capacity usage in the server.

Log/Activity on 14-03-2012

          Today, my coursemates and I continued work on the website. Now, all the videos were finished be uploaded and the information currently available was arranged. Our first project was almost completed and we hope we can done it by this week.

          In the afternoon, we had discuss the game story and genre of the game. We decide to use the Jelly as our main character in this game. Christine had spent her time to listen our idea on game story and this idea was agreed. Since we haven decide the scene of the game for each level, she suggested us to use the candy land or chocoland as the theme of the game. The next phase will be the mood board such that we had to think about the colour and the treatment of graphics. I think that creating a nice game is really not a easy work.

Scene - 4 Seasons

Candy

Chocolates

Cookies

Fruits

Sushi

Flowers

Log/Activity on 13-03-2012

          For the requirement, I had install a plugin for the Collaboration in About Us tab. This plugin is called Contact Us Form plugin that allow the other organization who intend to collaborate with our company to state their enquiry. I also arranged the Contact Us so that the content can be fixed in to the layout.

          Christine had lend us her IPAD to play some nice games, for example Munch Time Game, Furmins and Lightopus. All these game have nice graphics. Again, we had a meeting to discuss with Li San, Chia Jing, Boon Tek and Yuki about the mobile game. We discussed about the type of game, theme, characters and target audience. After discussied, we decide to change the character and game type(Cockroach Survival Game) that we decided before. Then, we decide to create a strategy game which is similar like Munch Time. The characters of the game we have not determined yet and we will discuss it tomorow. The teen and kids are the target audience of this game.

Treemaker

Munch Time

Lightopus

Furmins

Log/Activity on 12-03-2012

          Today, I had install the XML/SWF Gallery Component in our website for Gallery to display videos. I learnt how to manipulate the articles, pictures and videos in this component. There are 5 category which are 2D TV series, 3D TV series, TV Commercial, Games and AR.

          In the evening, we had a meeting to discuss about the mobile game. We share our ideas and then discuss to choose one of the game among these ideas. There are 6 games are proposed:

• Dog rescue its owner who have been caught by Alien
• Spaceship
• Cockroach survival game
• Mosquito killer
• Flatfish
• Simple intelligence game

After discussion, the cockroach survival game get the most votes because we think that this game is the most interesting and exciting game.
         
          Christine advised us that we must do a research about the target audience first. We have to know the types of the games that suitable for different age of people and we must think either we want to make it realistic or non realistic.

Log/Activity on 09-03-2012

           In the morning, we wrote a report about the AR for Nestle in our blog. After that, we were asked to see the presentation of Addi who was finished his internship for seven weeks at this company. All the internship student must present what we had learn and also the experience in this company to Mr Low.
     
          Then, we continued on our work in Joomla. We still finding the more attractive plugin for articles because there are some features that do not exist in the free version of plugins.
       
          We had watched some youtube video about the second project- Mobile Game. From youtube, there are many interesting mobile games like top 10 mobile games. We tried to get the inspiration from these videos about what game is the most popular among public and what kinds of game that we want to create that can attract more people to play.

 

~Nestle~

Nestle Products: Junior food, Healthcare nutrition, Sports nutrition, Cereals, Chocolate, confectionery and baked goods, Coffee, Culinary (Maggie, sauces), chilled and frozen food, Dairy – yogurt, Drinks, Ice cream, Food service products, Petcare and Weight management

Some Examples of The Use of Augmented Reality for Nestle Products

1.      Nestle lets fans pick the next Kit Kat flavour using Blippar

Nestle has made a major change to its market research budget, putting a major focus on contests and games. The famed food company is preparing to launch a new crowd sourced campaign that will help it find four new flavours for their popular Kit Kat brand of candy. The new campaign will reflect the change in Nestle’s marketing focus as it will task consumers with determining what these four flavours will be. To accomplish this, the company is adopting augmented reality. The company has built an augmented reality experience and affixed it to a series of smart posters that will be set up in various cities around the world. Using the Blippar augmented reality mobile application, consumers with smart phones will be able to vote for their favourite flavour amongst a variety of others. Each day, one voter will be selected at random to win a cash prize worth roughly $150. Those that have signed up to participate in the campaign via the Kit Kat Facebook page will receive information on where they can find the smart posters and how to interact with the AR experiences embedded therein. The company is using augmented reality as a way to engage consumers in a new way.

2.      The Use of Augmented Reality for Nestle Products

KitKat UK recently launched an Augmented Reality campaign that works with its "4-Finger" bar packages. Each of the new bar packages has a specially designed "AR" marker on the KitKat four-finger packages that hit the shelves in late August. By simply holding the wrapper up to your webcam and visiting the www.kitkat.co.uk website a special 3D video appear featuring the group "Scouting for Girls" and a song titled "Silly Song". The band will play their hit in different 3D ‘break’ environments, including a park, a train, a bedroom and a library. All places Kit Kat believes their bars are enjoyed and people will "take a break". The Kit Kat’s new project dubbed “Kit Kat Brings Music To Life”, this represents most significant spending by Nestlé in the cybersphere to date. The experience was created by the independent agency Skive Digital of London. The promotion includes a collaboration with with Myspace which will host four intimate concerts which "Scouting for Girls" and will launch on Facebook with the gigs being streamed live. In addition the campaign also features a chance to win £100 of Ticketmaster vouchers that can be used for upcoming concerts and events featuring Scouting for Girls.

3.      Nestle adds augmented reality to its cereal boxes worldwide

Nestlé innovatively transforms millions of its cereal boxes into a video game to offer people a unique online virtual experience. The Company has added 3D augmented reality to over 26 million of its cereal boxes in 53 countries for Twentieth Century Fox’s new animated film RIO. RIO is the story of Blu, a bird from a small Midwestern town who cannot fly but who suddenly finds himself in the colourful, exciting and magical world of Rio, where he ultimately discovers that he has what it takes to really soar. Combining augmented reality with 3D animation, the fun game was created by Augmented Reality designers Dassault Systèmes. Using a tag cut out from the back of the cereal box, players can interact with the main RIO bird character Blu, by using a computer with a webcam, internet connection and an online augmented reality application. Players can then also discover another RIO character called Jewel, and make them virtually come to life in a real personal environment enriched with 3D backgrounds.

Suggestion

Healthy - General

From the internet, I know that the mission of Nestle is help to make better food so that people live a better life-healthy, nutrition and wellness. Most of us do not really know what is the nutrition of a certain product. So I suggest that apply the AR on explaining the nutrition of products to public. When the consumers scan the packing of product, the nutritional information and then a interesting animation about the details of ingredients's benefits will come out to transfer the knowledge to public about the balanced diets, the nutrition and wellness tangible to consumers.

Entertainment - Kids and teen

For example, one of the Nestle product had four flavours. A marker is divide into four parts and they are embedded to the packing of this product with different flavours respectively. The consumers need to buy all flavours of products and collect all parts. After that, they need to arrange them nicely and can scan through with their smartphone, a fun game will be appear. These concept is like the AR in Puzzle video that shared by Christine. They must be share this game to facebook before they can play this game. This game maybe related to the new Nestle products to increase the awareness of more people to know that there was a new products released or promotion offered by Nestle. 

Log/Activity on 08-03-2012

          Today, we had showed our website to Christine today and there are some parts were not satisfied. These parts are the size of logo and the position of top menu icons. The other part is the presentation of articles at Gallery because the content of the articles will be too long when we had many videos to insert as the image below.

As usual, we keep finding the articles plugin that was most suitable and good enough for our website. We spent time to install the plugin and try to apply it from the tutorial in the internet. Besides that, I had write my problem that I mentioned yesterday through the Skype to Adrian and I am still waiting for his reply.

          In the evening, Christine had asked for a meeting to discuss about the second project since we are going to work in a team to create a mobile game. She told us the procedure for producing a game. The most important things are design a nice icon and the characters to attract the people to download our game. At first, we need to decide the theme of game, game type, game mode, target audience and game story. The second step is design the mood board for the game. She also explained to us about the selecting the characters and she try to give us the inspiration for this project.

Log/Activity on 07-03-2012

           Today, three of us were continued do the Backbone official website. We had install some plugins like J4y content flow and Dione magic slider plugins in the website. Now we had another slideshow to present our articles. I met some problems for the J4y content flow plugin. I had write a correct coding and display the slideshow successfully in Localhost. But when i write the same coding to the server, there are some warnings appear although the slideshow was displayed at the bottom. I spent a lot of times to search the reason why this problem appear and also find the solution from internet, but still can not solve it.

J4y content flow slideshow in Localhost 

Warnings :(

           Our Boss, Mr Low had talk to us today and he will give us two weeks time to complete this project and after that he will form us as a team which consist of all my colleagues who are in training including three of us. He hopes that we can work together and create a simple shooting game for mobile. I think this is a very challenging and interesting experience for us :)

Log/Activity on 06-03-2012

          As i mentioned yesterday, three of us became admin of Backbone Entertainment website. Today, we have started to edit and design the website. We had create all the tabs and sub-tabs for top menu About Us. We had insert all the the articles that given by Christine. I use photoshop to blur the black colour image so the image become haft transparent. Then, I had edit the coding in style.css to insert the background of the tabs that similar to the draft of website given. Now, we have done Home, About Us, Gallery and Contact Us. We only use one plugin which is Tabber to display all the tabs and sub-tabs in that website. I had try to find the other plugin from internet, but most of them are modules and some of them are not suitable.

Tabs and Sub-tabs of About Us

          We had a meeting in the morning for the AR. This meeting was discuss about the Nestle. As the last meeting, we drawn a mind map again. This time the mind map did not really worked since we had too many repeating words in our mind map because we had not much knowledge about the Nestle. So, Christine had ask us to read through some articles from internet about what application AR for Nestle already had and how AR helps to sell the products.

Nestle mind map

Log/Activity on 05-03-2012

  Today, my coursemate, Chia Jing had ask our supervisor, Adrian about the way to upload our file to server so that three of us can do our works simultaneously in a same website. Adrian had help us uploaded all our files to the server (cPanel).

cPanel (upload files and design the website)

By using this server, we can upload files and update our website together. So, our progress will be faster by dividing work since we connect to the same server. We had successfully adjust our content position and we had done our Home page.

Home page

 I had install tabber plugin for About Us menu since there are seven tabs which are About Backbone, Clients, Clients' Testimonial, Company Structure, Investment, Collaboration and Founders. There are sub-tabs for some of those seven tabs. I also learnt how to create a nested tab.

Create tab and nested tab using Tabber

Log/Activity on 02-03-2012

          Today, my coursemates and i had discussed about the flow of our website and the presentation of articles for all the menu tab. The draft of the website was out after discussion. We had spend a lots of time to search the plugins which are nice and suitable for the website since there are a lots of plugins from the internet that need to pay. Otherwise the design was simple or there was a watermark on it. On the other hand, i had found a most suitable template today. The following image is the top menu and edited template that done today, but the watermark on the top we still did not know how to remove because this plugin is a free version.  

         
          Although we are not familiar with joomla before, we will work hard and try our best to complete this project.

          Today the meeting was cancelled and posponed to next week. I think Christine was busy with her work and meeting. So, i continued my work on joomla again~~

Log/Activity on 01-03-2012

         I leant how to link my website's top menu to another page. Today, my coursemate and i discuss with our manager, Christine about which menu tab and articles that we should put into our website and also the arrangement of those articles. These tabs are Home, About Us, Services, Jobs, Articles, Our Work and Contact Us. The About Us, Services and Our Work have several sub-tab.

Top menu

          Based on the requirement, we are facing two problems. The first problem is that we still have not found a plugin which allow us to produce a drop down menu with icons. The second problem is the plugin that allow us to display image which is shown as the image below. After that, we had divide the works of the arranging of articles, finding the plugin and editing the template.

Once we click the buttons below, the image will change.