After getting flexible box model template and all the css files, it is time to test out our code.
From Notepad++ run your html file.
It should look like:
Now we need to plan the layout for our marketing plan presentation.
One approach is divide up the parts of the presentation and place them inside the nav, article and aside sections.
You could put all the industry statistics in the nav section, the target market and market segmentation information in the aritcle, middle section. You could use the section on the right , the aside section for product, price, placement and promotion.
Next we need to decide on how to present the information in each section: paragraphs, lists. tables, graphs
We need to decide on images we want to use.
We need to decide on headlines to help us organize the information.
We need to decide on what jQuery functions to use to make the presentation more exciting.
The header information
Put the name of the company "Rincon Surf Shack Marketing Presentation" in the header. Use <H1>
Information in the nav section
Nav section will contain information about surfing industry statistics.
We need a headline, let's use <h3>Industry Statistics for Surf Industry</h3>
An image might be good after the headline.
Insert this line <img src="woody.jpg" height =300 width = 300>
Copy this information to your clipboard and paste it in between the nav tags.
Put it in paragraph form with beginning and ending tags. <p> and </p>
jQuery code to enlage the text in the paragraphs.
What we are going to do first is to enlarge any paragraph when we put the mouse on it, turn the text to green.
When your mouse leaves the paragraph, the text will become smaller and be gray in color.
That can help us and your audience see which point you are on.
The code appears below in the box.
One thing we need to do for any jQuery code is to add the document ready event before the query methods.
$(document).ready(function(){
// jQuery methods go here...
});
Copy the information for the jQuery file.
Paste the information into your application between the script tags.
Save your file in your working folder.
Run your application and move the mouse over the line you want to enlarge.
It must be a paragraph for it to enlarge.
When you move the mouse over a pargraph, the font size should increase by 25%.
The font families are also selected and the text should turn green in color.
When you move the mouse away from the paragprah, it should return to its original size and turn to gray.
Note: In the css files there is some code that enlarges images when you hover over them.
We are now going to add a bar graph to our presentation. It shows revenue for surfboards, footwear and apparel.
Key in this code
<center>
<img src="graph.jpg" height=300 width=300>
</center>
<br>
<br>
Save and test.
Adding items to an existing ordered list.
In this part of the presentation we are going click on a button and have an existing list expanded with additional items.
The list will explain the trends in the surfing industry.
Copy the information for the html list.
Paste the information into your application.
Save your file your working folder.
Once you add the jQuery coe, when you click on the button called btn1, the additional items will be added to the end of your existing list.
Now it is time to get the jQuery code to make this happen.
The code like the previous jQuery code will be located in the head section of the HTML code, between the script tags.
Copy the information for the jQuery add items to a list.
Paste the information into your application between the script tags.
Save your file your working folder.
Now test the program out by running the application and clicking on the button to add items to the list.
You can also add the new items before the original list with before() and prepend() methods.
Adding Music to the Presentation.
You can add music to any presentation in HTML5.
I added a surf song from the 60's in an mp4 format.
In July of 1963, Surf City was number 1 on the billboard charts.
If you want to add the code to your presentation, here is the code.
<audio controls height= "50" width="50">
<source src="02 Surf City.m4a" type="audio/mpeg"">
<source src="02 Surf City.mpeg.ogg" type audio/ogg">
Your browser does not support the audio element.
</audio>
We now need to add a list of strengths into our presentation.
Open the strengths file , copy it to the clipboard and then paste it into your html file.
Now we are going t use jQuery to add more to our existing list.
Below is the code you will need.
Copy the information for the jQuery add items to a list.
Paste the information into your application between the script tags.
Save your file your working folder.
Now test the program out by running the application and clicking on the button to add items to the list.
You can also add the new items before the original list with before() and prepend() methods.
Weakness in the Marketing Plan
Part of any good marketing plan is looking at the weaknesses in the plan.
We are going to use jQuery again to make the presentation more interactive.
This time when we click we want want to list of weaknesses to slide down the screen.
Here is the code necessary to accomplish this.
Add this code to your html5 document.
<H3>Industry Analysis - Weaknesses</h3>
<div id="flip1">Click to slide down panel</div>
<div id="panel1">Surfing can make you think of only one thing - surfing<br>You may want to miss work, quality time with friends.<br>It can be dangerous: skin cancer, ear infections, damaged hair.<br>Injuries can be serious.<br>Billabong, Quicksilver, Pac Sun - large losses recently<br>Today's surfers don't want to wear the same clothes that their fathers wear.</div>
Copy the information for the jQuery to make a panel slide down.
Paste the information into your application between the script tags.
Save your file in your working folder.
We also need some style tags to help in this process.
