veggie champs - wordpress.com… · web viewwith the increase in the numbers of overweight and...
TRANSCRIPT
Veggie Champs
A fun educational vegetarian website for kids!
Ailís Ní Chofaigh
K0020747
Project Report
HDip. in Creative Multimedia Programming
May 2015
Department of Information Technology
Limerick Institute of Technology
Veggie Champs 2015
ContentsAbstract.................................................................................................................................................3
Introduction...........................................................................................................................................4
Research................................................................................................................................................5
Design....................................................................................................................................................6
Implementation...................................................................................................................................17
Discussions and Conclusions................................................................................................................23
2
Veggie Champs 2015
AbstractWith the increase in the numbers of overweight and obese children it is important to
educate and encourage children to engage in their own food choices. A vegetarian diet can
provide children with a well balanced diet that can help them to maintain a healthy body
mass index. Vegetarianism is also highly recommended by both the United Nations and
World Health Organisation. With all this in mind Veggie Champs was created as a fun
educational tool to help children adapt and maintain a vegetarian diet. The website teaches
children about the vegetarian food pyramid and each of its food groups. Veggie champs’
bright engaging characters help the users navigate through the site, learn about the foods
they eat and how to cook and grow their own vegetables at home.
3
Veggie Champs 2015
Introduction
With the significant increase in overweight and obese children and teenagers, educating
children about their food choices is vital. In Ireland, these disorders occur in one in ten
children between the ages of 5 and 12 years old, and one in five children between the ages
of 13 and 17 years old1. The biggest impact on our weight is what we eat. Veggie Champs’
website teaches children to make better food choices by understanding the food pyramid
and how healthy foods benefit them. To help children get more involved in their food
choices the website will also teach children about growing their own vegetables at home,
and encourage them to try more cooking too. Research2 carried out with mothers of
vegetarian children in Ireland found that children have more of an interest in eating foods
they grow and cook themselves. It also found that children are more likely to eat what their
peers are eating. While many children are not vegetarian in Ireland, the Veggie Champions
page allows children to share their gardening and cooking posts and view posts by other
users.
Many existing vegetarian and healthy eating websites are targeted more specifically at
adults, or they contain an overwhelming about of information. This encouraged me to
create a vegetarian healthy site that specifically targets children keeping the information
simple and using lots of interactivity. The educational information, tips and facts can be
found on the site through dialog boxes that open when an image or area is clicked. Veggie
Champs has a number of veggie characters that help and engage the user to enhance their
experience with the site. The ‘Peter Pepper’ character provides the uses with easy to follow
steps to becoming vegetarian on the ‘Become a Veggie Champ’ page.
When changing to a vegetarian diet it is important to ensure a complete and balanced diet.
Meat should be substituted with iron and protein rich vegetables, beans, nuts and other
meat substitutes. Fresh vegetables are also important to ensure a balanced source of
nutrients; Veggie Champs gives users lots of tips and advice on how to get the most from
their vegetables, as well as suggestions for meals and recipes.
1 https://www.irishheart.ie/media/pub/factsheets/obesity.pdf 2 Research carried out with ‘Vegetarian, Vegan and Semi-vegetarian Families in Ireland’.
4
Veggie Champs 2015
ResearchResearch was carried out on a number of children’s website, especially those concerned with healthy eating and vegetarian diets for children. The findings of this research were covered in the ‘Research Report’ for this project. In summary, the majority of websites addressing healthy eating and vegetarian diets for children are targeted at parents and not the children themselves. Many websites for children on the Internet use familiar or larger than life characters and bright, strong colours to engage the users and hold their attention. Veggie Champs provides information that is targeted at children and the design is geared towards users of an age range from 5 years to 12 years. Veggie champs uses bright colours and larger-than-life vegetable characters that I created myself.
Further research was carried out by asking mothers of vegetarian children for their feedback on the webpage mock-ups for Veggie Champs. This research was conducted through a closed Facebook group, ‘Vegetarian, Vegan and Semi-Vegetarian Families in Ireland’, with mothers of children from ages 2 years to 14 years. Suggestions for Veggie Champs were:
Include a video section with children discussing their favourite vegetarian foods, as children want what their peers want.
Recipes that are children friendly as children love to eat what they help to cook themselves.
Those surveyed were in favour of the ‘Grow Your Own’ page. They felt their own children would really like to grow vegetables at home and would be more likely to eat foods they grew themselves.
Keep it fun and keep it simple!
5
Veggie Champs 2015
DesignThe colour scheme for Veggie Champs uses bright, strong colours to attract and hold the users attention.
The main colours of the site, as seen above, are HEX #6D428A (purple), #02ADC2 (lighter blue), #0080A7 (darker blue), #F17405 (lighter orange) and #EE4900 (darker orange). Bright colours attract and hold attention and encourage learning; all of which are important when designing an educational website aimed at children.
I chose to design the website with these colours and using fun larger-than-life characters, to increase the user experience for my target group. The characters I created in Adobe Illustrator using vegetables as inspiration, but drawing an exaggerated shape with a cartoon design. I designed five veggie champ characters:
1. Sally the Strawberry – Sally was created in Adobe Illustrator with the pen tool by tracing over a photo of a strawberry. She is used on the site to offer tips and advice to users.
6
Veggie Champs 2015
2. Garry the Gardener – Garry was created in Adobe Illustrator with the pen tool. Garry features in the Flash animation on the site for the ‘grow your own’ page teaching children about growing vegetables themselves. Garry also features on other pages of the Veggie Champs website.
3. Charlie the Chef – Charlie was created in Adobe Illustrator using the pen tool. Charlie will feature in a flash animation for the cooking page at a later stage of the project’s life cycle. The current Veggie Champs site features Charlie on a number of pages. Charlie will be used to teach children about cooking simple vegetarian recipes.
7
Veggie Champs 2015
4. Harry the Hazelnut – Harry was created in Adobe Illustrator using the pen tool. Harry features on a number of pages of the website offering helpful hints to users.
5. Peter Pepper – Peter was created tracing over a pepper vector using a pen tool. This character provides users with easy to follow steps to becoming vegetarian. Peter also features on a number of pages and is part of the Veggie Champs logo design.
Other graphics I created in Adobe Illustrator from memory or tracing over real-life photos, using the pen tool:
8
Veggie Champs 2015
Other images for the website use graphics from royalty free vectors from www.freepik.com or a combination of my own graphics with graphics from freepik:
9
Veggie Champs 2015
10
Veggie Champs 2015
When designing the website initial wireframes were made using myBalsamiq. Wireframes were created for the homepage, food groups’ pages, cook with Charlie and grow your own pages. These can be viewed in full at https://litmm.mybalsamiq.com/projects/cmp_id/grid but I have also included a selection below:
11
Veggie Champs 2015
Food Group page that each of the groups will follow in terms of layout:
Grow Your Own Page, now uses a flash animation with interactivity:
12
Veggie Champs 2015
Original Home page, now the Food Pyramid Page on the website:
I downloaded a Smart Kid font as it was in fitting with the design and feel of the site. I then added the font into the CSS for the site using the @font-face element. I used the Smart Kid font for all the <h1>, <h2> elements and Times New Roman for all other fonts to ensure readability of smaller text.
Font example:
As part of the design and research user personas were created to represent two typical users expected for Veggie Champs. For the personas I spoke with two Internet users in the target age group, Ciara aged 10 and Marty aged 6. The personas for these users were put together with their tastes and hobbies as well as user requirements. Ciara and Marty are my niece and nephew, and both would be in the Veggie Champs target audience.
13
Veggie Champs 2015
14
Veggie Champs 2015
I also created a moodboard to aid the design of Veggie Champs. The moodboard includes bright images of healthy food as well as fun characters to inspire my own Veggie Champs’ designs.
15
Veggie Champs 2015
16
Veggie Champs 2015
ImplementationAdobe Suite
To create the graphics for the website I used Adobe Illustrator, Photoshop and Flash. All the images I created were made using the pen tool and other features of Illustrator. These graphics were then saved as .ai files to be used in either Photoshop or Flash. Images for the site were brought into Photoshop to adjust the image size and resolution and then saved as PNG files for use on the site. PNG files are small in size and retain good quality when scaled/resized, however I did my best to save the image size as they were needed on the site. PNG is also allows for transparent backgrounds which work well on web pages. I used Flash in order to create a fun interactive animation for the Grow Your Own page. I created the .ai files first and then pasted them into Flash allowing me to use each part of the image as required. I added a drag and drop function in the Flash code snippets for increased interactivity for the user. The user is guided through the process of planting seeds, watering them and finally harvesting them.
At later stages in the site’s life cycle Flash will be used to create a Cook with Charlie page. I also hope to add short Flash animation healthy eating stories to the site that will make more use of the Veggie Champs’ characters giving them more depth and personality.
Programming and Markup
The site markup was done in HTML5 code using CSS3 for styling in a separate stylesheet. I used Notepad++, an open source editing application, for all programming and mark-up code. Each page uses the one CSS style sheet linked externally.
<link href= "css/style2.css" rel="stylesheet" type="text/css">
Having the one style sheet helped me to use common styles without repetition. Each page has the same background, wrapper, header and navigation HTML and CSS. I found with the design of the page that I had no use for a footer.
As a fun game I created a drawing canvas using code for a drawing easel from https://code.createjs.com/easeljs-0.8.0.min.js which was embedded in my Drawing Fun page. I added an outline of a Veggie Champs character to the background of the canvas to provide the user with a tracing template. I also added buttons with JavaScript functions to allow the users to create a new picture (refresh the canvas) or print a picture.
Canvas Code:
HTML5
<canvas id="myCanvas" class="myCanvas" width="1220" height="600"></canvas>
17
Veggie Champs 2015
CSS3
.myCanvas {
background-image: url('../images/canvas.png');
->this ads a background image to the canvas to act as a tracing template for the user
background-repeat: no-repeat;
margin-left: 5%;
margin-right: auto;
}
JavaScript
var canvas, stage;
var drawingCanvas;
var oldPt;
var oldMidPt;
var title;
var color;
var stroke;
var colors;
var index;
function init() {
canvas = document.getElementById("myCanvas");
index = 0;
colors = ["#F23644", "#A6DEBA", "#7DDA51", "#FC4F78", "#00FFFF", "#F2DF73"];
//check to see if we are running in a browser with touch support
18
Veggie Champs 2015
stage = new createjs.Stage(canvas);
stage.autoClear = false;
stage.enableDOMEvents(true);
createjs.Touch.enable(stage);
createjs.Ticker.setFPS(24);
drawingCanvas = new createjs.Shape();
stage.addEventListener("stagemousedown", handleMouseDown);
stage.addEventListener("stagemouseup", handleMouseUp);
title = new createjs.Text("Click and Drag to draw", "36px Arial", "#777777");
title.x = 400;
title.y = 200;
stage.addChild(title);
stage.addChild(drawingCanvas);
stage.update();
}
function handleMouseDown(event) {
if (!event.primary) { return; }
if (stage.contains(title)) {
stage.clear();
stage.removeChild(title);
19
Veggie Champs 2015
}
color = colors[(index++) % colors.length];
stroke = Math.random() * 30 + 10 | 0;
oldPt = new createjs.Point(stage.mouseX, stage.mouseY);
oldMidPt = oldPt.clone();
stage.addEventListener("stagemousemove", handleMouseMove);
}
function handleMouseMove(event) {
if (!event.primary) { return; }
var midPt = new createjs.Point(oldPt.x + stage.mouseX >> 1, oldPt.y + stage.mouseY >> 1);
drawingCanvas.graphics.clear().setStrokeStyle(stroke, 'round', 'round').beginStroke(color).moveTo(midPt.x, midPt.y).curveTo(oldPt.x, oldPt.y, oldMidPt.x, oldMidPt.y);
oldPt.x = stage.mouseX;
oldPt.y = stage.mouseY;
oldMidPt.x = midPt.x;
oldMidPt.y = midPt.y;
stage.update();
}
function handleMouseUp(event) {
20
Veggie Champs 2015
if (!event.primary) { return; }
stage.removeEventListener("stagemousemove", handleMouseMove);
}
function clear_canvas (){
var myCanvas = document.getElementById("myCanvas");
var myCanvasContext = myCanvas.getContext('2d');
myCanvasContext.clearRect(0, 0, canvas.width, canvas.height);
} ->this clears the canvas when the user clicks the ‘draw a new picture’ button I added
function myFunction() {
window.print();
} ->I added this function to allow the user to print the page
Additional interactivity was added to the site by adding dialog boxes onclick to images on the site. This also meant that the information could be shown when the user wanted to see it and that the text would not over crowd the page. I used a jQuery UI dialog box that is hidden on page load and opens when the user clicks the specific area.
Dialog box that opens when image of kale is clicked:
HTML
<img id="kale" src="images/kale.png" alt="kale" title="kale">
jQuery
<div id="kaleDialog" title="Kale (per 100g)">
<p>Kale is very high in Vitamin A and a great source of Vitamin C too. It's also high in calcium, which helps you grow strong, healthy bones and teeth! </p>
<p>Energy: 117 kJ (28 kcal)</p>
21
Veggie Champs 2015
<p>Carbohydrates: 5.63g</p>
<p>Fat: 0.4g</p>
<p>Protein: 1.9g</p>
<p>Vitamins: A 85%, B1 5%, B2 6%, B3 3%, B6 11%, B9 3%, C 49%, E 6%, K 778%</p>
<p>Calcium 7%</p>
<p>Iron 7%</p>
<p>Magnesium 5%</p>
<p>Manganese 20%</p>
<p>Phosphorous 4%</p>
<p>Potassium 5%</p>
<p>Sodium 2%</p>
<p>Zinc 3%</p>
</div>
CSS
#kaleDialog {display: none;} ->this doesn’t show the dialog on page load
.ui-dialog {min-width: 800px; max-height: 450px; overflow: scroll;} ->this overrides the jQuery UI style for dialog box
jQuery
$(function() {
$("#kale").click(
function (e) {
$('#kaleDialog').dialog();
});
}) ->this calls the kale dialog box when the kale image is clicked by the user
22
Veggie Champs 2015
Discussions and ConclusionsThroughout this project I was able to really improve my design and web development skills. The graphics I created in Adobe Illustrator took a lot of time, but I felt it really enhanced the look of the website. I was able to develop my skills with Photoshop through my work on the images for the site, the personas and the moodboard. Using Flash gave a different level of interactivity to the Grow Your Own page that I found too difficult to achieve with HTML, CSS and JavaScript. I found that the Flash animation had a nicer feel and still provided interactivity to engage the user. Having the wireframes helped to shape the initial design and navigation of the site, however this did evolve as development continued. For example, the initial home page is now the Food Pyramid page and the new home page better communicates what Veggie Champs is.
I attempted to put my site in a PHP framework, CodeIgniter. Though I understand what MVS is and how CodeIgniter works I found the learning curve too steep and was unable to put my pages into the PHP format. For the future of the site I would place the pages into the CodeIgniter framework as this will benefit a bigger site with more database functions and connectivity. For now the website does use PHP to create a user and store images the user uploads with a small database to store this information.
For the future of the site I would aim at creating pages for each of the food groups. I would also aim to have a Flash animation for the Cook with Charlie page, which will also provide users with a few recipes for child friendly vegetarian meals. A Games page could show previews of each of the games with tips on how to play them as well as links to the specific game page. As the site is an educational site I would include a Food Pyramid Quiz and a Feed the Champ game (users need to feed a character food with the nutrients they need). I had started to develop a Make Your Own Champ game that I did not have time to finish, but would at a later stage. This game involves the uses dragging body parts from the veggie characters together to make their own version of a Veggie Champ. As the site grows I would expand the Veggie Champions page to all posts from users and allow users to rate posts.
In the life cycle of the project I hope to create a strong Veggie Champs community of users and encourage them to take turns hosting vegetarian events in their areas such as a park picnic or school meat-free lunch day. The parents of users could host an event with attendees bringing their own vegetarian dishes for sharing. Veggie Champs could also be expanded to include pages for older children.
23