Veggie Champs



Veggie ChampsA fun educational vegetarian website for kids!Ailís Ní ChofaighK0020747Project ReportHDip. in Creative Multimedia ProgrammingMay 2015Department of Information TechnologyLimerick Institute of TechnologyContents TOC \o "1-3" \h \z \u Abstract PAGEREF _Toc420458014 \h 3Introduction PAGEREF _Toc420458015 \h 4Research PAGEREF _Toc420458016 \h 5Design PAGEREF _Toc420458017 \h 6Implementation PAGEREF _Toc420458018 \h 17Discussions and Conclusions PAGEREF _Toc420458019 \h 23AbstractWith 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. IntroductionWith 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 old. 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. Research 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.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!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: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.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.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.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.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:Other images for the website use graphics from royalty free vectors from or a combination of my own graphics with graphics from freepik: 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 but I have also included a selection below: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: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.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.ImplementationAdobe SuiteTo 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 MarkupThe 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 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>CSS3.myCanvas {background-image: url('../images/canvas.png'); ->this ads a background image to the canvas to act as a tracing template for the userbackground-repeat: no-repeat;margin-left: 5%;margin-right: auto;}JavaScriptvar 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 supportstage = 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);}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) {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 addedfunction myFunction() { window.print();} ->I added this function to allow the user to print the pageAdditional 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> <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 boxjQuery $(function() {$("#kale").click( function (e) {$('#kaleDialog').dialog(); });}) ->this calls the kale dialog box when the kale image is clicked by the userDiscussions 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. ................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download