Digital Presentation of the Business Plan Using HTML5

© Jerry Belch

Overview of Project
The objective of this 7 week Step By Step Tutorial
  1. To learn HTML 5 elements, along with CSS3 and JavaScript to prepare an electronic presentations. The example used here is a business plan, but your could use this unit to prepare any kind of electronic presentation you wish: Year End report, Special Open house presentation, Presentations to business partners or the bank when applying for a loan or you company's web page.
  2. Wow your audience. Do not bore them with an another PowerPoint presentation.
  3. HTML5, CSS3 and JavaScript Elements include:
    • Flexible Box Model
    • Using Audio and Video
    • Utilizing the Canvas Element
    • Transitions and Transformations
    • Roll over Buttons
    • Rounded corners
    • Gradients
    • Drag and Drop


  • Our goal is to learn the new standard for web page design: HTML5 and Cascading Style Sheets version 3.
  • We will learn how to use these by putting together a digital presentation of our company's business plan.
  • You should have had some experience in coding from scratch web pages using a text-editor like Notepad before starting this unit.

    Materials to Collect

    1. Download a copy of Google's Chrome Browser
    2. Download a copy of Notepad++
    3. Your company's written business plan. See Below for Details
    4. Copy of Executive Summary
    5. Copy of Mission Statement
    6. Copy of Business Description
    7. Copy of Business Procedures
    8. A copy of your Job Descriptions
    9. Copy of Organizational Chart
    10. Marketing part of the business plan: 4Ps, Target Market, Market Segment and study of industry
    11. Financial records you want to include
    12. SWOT Analysis
    13. Loan information percentage, amount needed time frame.
    14. Microphone

      Teacher's Responsibility

    15. Make sure that the computer that is being used for this assignment has Google's Chrome - a browser.
    16. Make sure that the same computer has the text-editor program Notepad++
    17. Both pieces of software are free and are the tools necessary for your students to do this project
    18. HTML5 is still in the development process is not a standard yet.
    19. It should all be finished by 2014 an all major browsers will support its features.
    20. Other browsers will give mixed results on this project and should not be used for that reason.
    21. Use Progress Logs to manage the project
    22. Progress Logs and Department Templates Video 

  • Step-By-Step Instructions

    Business Plan Presentation using HTML5 Week 1

    WEEK 1

    Day 1: HTML5 Features

    1. You can define HTML5 family as a new mark up language, Cascading Style Sheets 3 and JavaScript.
    2. HTML5 includes all the older HTML tags plus an array of new tags designed to build better and more interesting web pages.
    3. Currently regular HTML cannot play audio or video, do animations, or store data without a plug in like Flash or QuickTime.
    4. HTML5 gives the web page designer many more tags to work with and ability to apply them to mobile devices. Learning how to use these tags is the purpose of this lesson.
    5. In addition to the tutorial, a full-blown example on how these tags work is applied to a business plan for Lovebytes, a computer dating company.
    6. The business plan for Lovebytes is on Janet Belch's web site a Step By step lesson.
    7. Take a few minutes to familiarize yourself with this business plan, as this is our focus here.
    Day 2: HTML5 flexible box model.
    1. In the past, web pages were organized using tables, HTML5 uses a series of tags in the html file that layout sections of the web page and the CSS3 sheet defines how they should look.
    2. The way they should look involves, fonts, colors, the way lists are displayed, the way headers and footers are formatted, etc.
    3. All the style sheets in this lesson are external
    4. External means that they are not embedded in the html sheet, but are in a separate file, that is referenced in the HTML code using a link.

    5. Above in the scrollable box is the source code that creates the flexible box model.
    6. We are going to use a template called the flexible box model to organize the contents of our web pages. Let's take a look at it now.
    7. The code in the scrollable box makes the flexible box model, when it is run.
    8. A cascading style sheet file along with the html file creates the look you see on your screen. More on the CSS file later.
      Flexible Box Model

      The flexible box model is the future of web design. Browsers are still implementing it. Google Chrome has adopted all the elements and that is why we are using it for this tutorial.

    9. Let's examine the coding for the flexible box model.
    10. The DOC Type tells the browser that this is an html file5. HTML5 tag for the document type is much concise than previous html4 tags
    11. The second line informs the browser that the language is English
    12. The third line tells the browser that this is the head tag and which character set to use
    13. In the early days of the web the ASCII standard character set was used. Today that is quit limited.
    14. The term meta tags are used for other pertinent information about your web site. Here is where key words are placed so that search engines can find your sight.
    15. The preferred encoding for e-mail and web pages today is UTF-8 which stands for Unicode Transformation Function
    16. The fourth line contains the meta tag information
    17. The fifth line is the title of the document and is enclosed in Title tags. It appears on the tabs in the browser in Google Chrome.
    18. The sixth line is the one that links this html file to a cascading style sheet named Style.css. 〈Link Rel = "stylesheet" href= "Style.css"〉Without this tag, the web page elements are not formatted and look very different.
    19. We will examine the Style.css file a little bit later.
    20. Line 7 is the ending head tag
    21. Line 8 is the beginning body tag.

      The rest of the tags layout the sections of the web page. div, nav, section, article aside, etc are reserved words.

    22. The first division is called 〈div id="big_wrapper"〉. That is the area inside the orange box with a white background. The box encircles the entire page. The ending 〈/div〉 tag is located the line third up from the bottom of the page
    23. The next line,〈Header id="top_header"〉, is yellow and is the main header for the document. It currently has the headline 1 style Welcome in it. This is where the title and logo go.
    24. The next line ends the header, 〈/Header〉
    25. Now is time to layout the navigation bar - used to navigate from one page to the next. 〈Nav id="top_menu"〉. It is the rectangular blue box.
    26. The next lines layout an unordered list, the names of the different pages, in the web site: Home, About, Our Products, Contact us.
    27. This will contain the links to your other pages. Be thinking what these might be for your company.
    28. Notice the beginning and ending NAV tags. This word is a reserved word in HTML5
    29. We now want to start a new division. Remember a 〈div〉 tag lays out a section of your page that will nest all other page elements.
    30. We give it and ID so we can reference this tag directly in the CSS file.
    31. The other elements in the sectioning category are 〈section〉, 〈article〉, and 〈aside〉, 〈hgroup〉. All these tags are meant to section off and group elements.
    32. This new division , 〈div id="new_div"〉 contains two articles, complete with their own headers and footers. Here is where the majority of you page is written.
    33. Be thinking about what you want to use for the two articles.
    34. Turn in these ideas to your instructor along with your progress Log for the week.
    35. An 〈article〉 is defined as "self-contained composition in a document, page, application or site and that is, in principle, independently distributable or reusable. This could be a forum post, a magazine or newspaper article, a blog entry, etc.
    36. The 〈hgroup〉 is used to group headings
    37. The next major section of the web page is the 〈aside〉
    38. The 〈aside〉 is used to define a section of the page that has content that is related, but not critical to the main content
    39. The last section of the page is the 〉Footer〉. It goes at the very bottom of the page. Things like copyright info, etc. could be placed here.
    Day 3: The Cascading Style Sheet file

    Now we examine the cascading style sheet code. It appears in the scrollable box below.

    1. The first lines of code are a housekeeping function to set margins and padding to 0.
    2. Next we set the way we want our headlines to appear: font, size, color, and style.
    3. The format of the coding uses curly braces to put the contents inside. You must adhere to this form exactly or the page will not display properly.
    4. After the attribute, like text ,height, width, background, the colon (:) is like an equal sign.
    5. In other words every time the html tag says 〈h1〉 the text will be Tahoma font, size is equal to 20, bold is the style ,and the color of the font is black - #000000
    6. The same format for headline 2 and 3 are just like headline. The size you would want to change, because h1 is bigger than h2 and h2 is bigger then h3
    7. header, section, footer, aside, nav, article and hgroup are all sections of the web page. These are reserved words that layout each section s you sw in the html file above for the flexible box model.
    8. The code tells the browser to display them as block elements. That means each one under the other one.
    9. the body is designed to be 100% of the browser's window. It is necessary to set 100% as the percentage for the flexible box model to function properly.
    10. The border is set to a 5px solid orange line around it.
    11. The webkit is a Google Tool. It is needed as some of HTML 5 features have not been implemented and do not work in other browsers.
    12. You will not want to change these lines.
    13. The WebKit reference is what makes this a flexible box model
    14. The line "-webkit-box-pack:center;": centers the web site.
    15. Now let's look at what the big wrapper code does.
    16. We need to set a maximum of 1000px for its size. It can change, of course, based on the size of other browsers, like screen size of mobile devices.
    17. The display parameter using -webkit-box helps adjust the size of the display.
    18. The code that refers to orienting the boxes or sections of the web page in a vertical fashion.
    19. -webkit-box:1; is a key element in the code. It tells the browser to allow the user to change the horizontal size of the browser. 1 means true, 0 means false which would make the big wrapper inflexible.
    20. The top header characteristics are yellow background with a 3 pixel solid black border with 20 pixels of padding.
    21. The top menu box that contains the links to other pages has a one pixel solid red border, is blue with white text.
    22. The next lines format the listing of the other links top_menu li. They are to be displayed as an in-line block rather than one line after the other.Style none means no bullets when listing items.
    23. The new div tag wraps article one and two and the side news in a container. We need to put these things in a box.
    24. The first div tag oriented things vertical, in the case of the new div we want to position them in a horizontal manner.
    25. The #main_section is formatted next. It has a 1 pixel solid blue border. The -webkit-box is flexible so that it will fit inside any sized browser. There is padding of 20 pixels and the margin is one pixel.
    26. The #side_news section is not a flexible box. We will use it for advertisements or other items we do not want to shrink. We make it a fixed width of 220 pixels. The other columns will change in size, but not the side news.
    27. The footer is the last box in our set up. The text is center-aligned with 20 pixels of padding and a 2 pixel solid green top border.

      Let's try out our file.

    28. Click on the link for the flexible box model in this tutorial.

    29. Now lets shrink the web site

    30. Click on the right side of the window and drag it to the left. Notice how the box with two articles changes dynamically while the side news box remains fixed in size.
    Day 4 : What colors should I use for each section?
    1. Looking at our template css file or by running the html flexible box template we can see that the following is true about colors.
      • Headline one is black. #000000. The word "Welcome's" text is black.
      • Headline 2 is purple. #800080. These are the sub headlines
      • Headline 3 is red #ff0000
      • The border around the body is orange.
      • big wrapper has #ffffff background which is white
      • The top header is yellow with a solid black border
      • The top menu has a solid red border, blue background and white text.
      • The side new background is #afeeee, This is the hexadecimal value for pale turquoise.
      • The top border for the footer is green.
      • Colors can be used in the css file either by name or hexadecimal numbers.
      • The hexadecimal format consists of 6 letter or numbers. The first two represent the amount of red, the second two represent the amount of green and the last two the amount of blue. (RGB)
      • As you look at the Style.css file you can see how both ways are used.
      • You can find the list of colors used in almost any HTML, JavaScript or Book on Cascading Style Sheets.
      • Check on line and you can find the same information.
      • Search for "Color Pickers"
      • Here is an example of such a program  Color picker program

    Your turn!. Let's make some color changes in your Style.css file.

    1. Run Notepad++
    2. Go to file on the menu bar.
    3. Click Open
    4. Find the first file "flexible box model.html" Click "OPEN". It should appear as one of the files loaded into Notepad++ It will be located on a tab near the top of the window.
    5. Go to file and use SAVE AS to give the file a different name so we do not change the original. Make sure that it has a ".html extension".
    6. Load the Style.css file and SAVE it AS a different name as well. Make sure that it has a ".css extension"
    7. Find the line that refers to the #top_header.
    8. Change the background color to gray or #808080
    9. Save the file
    10. Find the line in your html file that says 〈Link Rel="StyleSheet" href="Style.css"〉 Change the css file name to what you called your css file.
    11. Save the file after your make the change
    12. click on your html file. This is the one we want to launch, not the css file
    13. Make sure the html tab file is highlighted
    14. Click Run on the very top menu bar and select Launch in Chrome.
    15. The top header box should now be Gray instead of yellow.
    16. Make other changes in colors in the css file until you feel comfortable doing this.
    Day 5: The meaning of colors, the psychology of colors, and color palettes.

    The following list examines the meaning of colors

    1. Red - Energy, passion, action, strong, masculine.
    2. Orange - Social communication and optimism
    3. Pink - Love, unconditional love, nurturing
    4. Yellow - Optimistic, cheerful Green - Balance and growth
    5. Blue - Color of trust and peace.
    6. Indigo - Intuition
    7. Purple - Imaginative, seek meaning of life, spiritual fulfillment
    8. Turquoise - Communication, clarity of mind.
    9. Magenta - Universal harmony and emotional balance
    10. Brown - Down-to-earth, security, material wealth
    11. Gray - Compromise, neither black or white.
    12. Silver - Feminine, energy
    13. Gold - Success, achievement, lucky, quality
    14. White- Complete, pure, color of perfection, purity, innocence
    15. Black- Secretive, hidden, unknown, mystery

    The following list examines the psychology of colors

    1. Adolescents like complex colors. They are used to playing video games with computer graphics
    2. Girls like shades of purple and pink. AS they get older they also like black
    3. Boys favor blue, turquoise, green, yellow, black, white, gray and silver.
    4. Serious business colors include darker colors like dark blue, dark green, indigo, black and gray
    5. Casual business colors are light hearted, bright red, orange, yellow, bright green, bright blue, pink and purple
    6. Some color preferences are climate based. For example, California favors bright and warm colors
    7. Eastern part of country prefers colder, cool colors.
    8. Competitors like and used gray, black and blue colors.
    9. Their target market, however, is quite different than Lovebytes' market segment.

    The following list examines color palettes

    1. You want colors that go together and are pleasing to the eye. Here are a few palettes
    2. Palette one
      • #404040 - Dark gray
      • #6dbdd6 - Light blue
      • #b71427 - Dark red
      • #ffe658 - Light yellow
    3. Palette two
      • #558c89 - Light teal
      • #74afad - Blue gray
      • #d9853b - Light brown
      • #ececea - Light gray
    4. Palette three. You decide what colors are in palette three. Turn answers in with progress log
      • #191919
      • #df3d82
      • #ffffff
    5. Palette four. You decide what colors these represent. Turn in you answers in with your progress log,
      • #585858
      • #118c4e
      • #c1e1a6
      • #ff9009
    6. You should also examine the fonts used. Make sure that they are readable.
    7. I know there are so many to choose from. Try to find those that match your company image.
    8. Finalize your cascading style sheet file and save it with the colors and fonts you want.
    9. Your new template will be the template used to create each page of your presentation.

    Based on the above information: good colors for a casual California company that caters to teenagers, focused more on girls than boys would be pink, purple, white, gray, turquoise, black, and green.

    Printer Friendly Version - Week 1

    WEEK 2

    Day 1: Matching presentation template with business plan elements. Making the navigation bar links.

    1. Look at your html file that you based on the flexible box model.html file. In the 〈Nav id="top_menu"〉 contains just words in a list: Home, About, Our Products, Contact Us. We need to convert them to links to your other pages.
    2. Finalize what these other pages should be called and how many of them you need for this project.
    3. I used Home, Introduction, Management, Marketing, Financial, SWOT, Lovebytes Video and Appendix; These elements generally follow the part of the business plan outlined in the judging rubric.
    4. To convert items in the list to click-able links:
      • Open your html template file in Notepad++
      • In place of the word "Home", type 〈A href="Home.html"〉Home〈/A〉
      • Key in the links for each page that you have in your presentation. Remember put these links right after the link tag〈li〉
      • Check your work against my first page for Lovebytes. Load Index.html into Notepad++. Load main3.css also and compare.
      • Click on Run and Launch in Chrome to see how things look.
      • The links will not work at this time. You will need to create each of these pages, which we will do in this tutorial.
    5. Open your html file in Notepad++ if it is not already list as a tab
    6. In the 〈Header="top_header"〉 Replace the word welcome with your company's name
    7. We need to add a logo here and any slogan that we use in our company.
    8. Open up my index.html file and see what I did for logo and slogan. A copy of this is below in the scrollable box
    9. Change your html fie to reflect what you want to use for a logo or slogan. Make sure that the logo is in the same folder as the rest of your work.
    10. Logos can be jpeg, gifs or bitmaps
    11. Use the height and width parameters to adjust the size of our picture

    Day 2: Deciding what information to put on your first or home page.

    1. What do you want to be on your first page?
    2. Think of three different things.
    3. Remember the Article sections are the main part of the presentation and the side news is related information
    4. This is the first page of our presentation, so you want to capture their attention.
    5. It must load quickly, so no large graphics, etc.
    6. Open your templae html file in Notepa++
    7. Use save As Index.html to save a working copy into your student folder.
    8. If you examine Index for the Lovebytes Example Business Plan Presentation, you can see that I used one article as an explanation of what is computer dating.
    9. The next article is a profile of one of our subscribers- which is what our customers are paying for along with how they matched up with a person.
    10. The side news box is a testimonial from a satisfied subscriber.
    11. Below is what the index.html or home page looks like in code.
    12. The style sheet file is called StylePresentation.css

    13. Now you complete your home page with your information.
    14. Turn in a copy of your code with your progress log at the end of the week

    Day 3: The Introduction Page of the presentation.

    1. Load your Html template into Notepad++. This is the file that we will use to begin all of our pages since we want all of them to have the same layout and styling. Save the file and call it Introduction.html in your documents
    2. Look at the business plan rubric and my Introduction.html page in Notepad++
    3. My Introduction page contains
      • The same heading, logo, slogan, colors and fonts as the first page.
      • An Executive summary
      • An audio player
    4. Look over the code and the finished product of my page.
    5. Try to play the song. The song ties in with the theme of computer dating. The idea is to use computer dating rather than to look for love in all the wrong places.
    6. I am quite sure that you are not old enough to remember the John Travolta and Debra Winger movie, Urban Cowboy, however, a lot of the scenes were shot in Gilley's Place in Pasadena, Texas.
    7. The lead singer of one of the bands that played there was Johnnie Lee. It was his song, Lookin' For Love in All the Wrong Places, that was chosen.
    8. Substitute your information for the articles and side news
    9. Notice how the audio sound track is played directly with HTML5. It is a snap. It only takes a few lines.
    10. Make sure that you save your audio file in the same folder as the rest of your presentation file.

    11. The first line sets the size of the audio player controls.
    12. The second line names the song - love.mp3 and tells it that it is an audio mpeg file
    13. The next line is for a music file in the .ogg format
    14. MP3 is the most commonly used format.
    15. If your song is not in the mp3 format, you can convert it to Mp3 using the I-tunes program
    16. The next line is one you hope your users do not see, They will only see it if they cannot play the audio file
    17. The last line ends the audio tag.
    Day 4 Introductory page:Business Object and Mission statement
    1. The Description - Create your company description put in the side news box
    2. Business Objectives. Create your own and put them in the Article 2 section
    3. Mission Statement- Write your own and put in the side news box.
    4. Save your html file and launch it in Chrome to see how it looks.
    5. Turn in a copy of your completed Introduction.html page to your department VP. at the end of the week with your progress log.

    Day 5 The Management.html page: Organization chart

    1. Open your html template file, Save it in your own folder or workspace and call it Management.html
    2. Make sure that your cascading Style Sheet file, StylePresentation.css, is also saved in the same folder.
    3. The management page consists of an organizational chart, job descriptions for our staff, Planning Strategies, and audio presentation.
    4. For Day 5 we will just look at how to do the organizational chart using the html5 canvas element and the Chart.js file.
    5. The new HTML 5 concepts introduced include the Canvas element, which was used to construct the organizational chart
    6. Open Management.html in Notepad++
    7. There a few new things to learn here.
    8. In addition to a css file and html file we will add an external JavaScript file.
    9. Located near the top of the document you will see these new lines. These lines are how you access the Java Script file, that draws the organizational chart.

    10. Also locate the lines that relate to the Canvas Element in the HTML file. They are in Article one box.

    11. You give the canvas an id and set it equal to canvas and set the height and width to determine how much of your page you want to devote to the picture..
    12. This is the area set aside to draw things in.
    13. Our canvas is 200 pixels high and 900 wide,

      Here is what the Chart.js file looks like

    14. We now need to explain how to draw the organizational chart on our canvas using the Chart,js file instructions.
    15. Do not panic. It is not as complicated as it seems.
    16. The top three lines begin a JavasSript function called doFirst
    17. Next we create a variable called X and set it equal the the canvas element in the html file
    18. The third line tells it to behave in a two dimensional way. 3D is on the way in HTML5
    19. Even though there are many lines in between these, the last line should be added now.
    20. The last line tells the browser to run the doFirst Java Script function as soon as the page loads.
    21. The lines in the middle are the ones that map out how to draw the chart.
    22. We have a canvas that is 200 pixels high and 900 pixels wide. Our chart is much wider than it is tall.
    23. Before coding, the Chart.js file, draw out your organizational chart on a piece of paper. You can look at the Lovebytes example to see what one looks like. Organizational chart

    24. If this chart matches up with your company organization, feel free to just use this file
    25. You can modify certain lines if you wish.
    26. Follow these steps to produce the chart that is displayed in the chart.js file.
      • First we need to understand how the canvas is organized.
      • It has coordinates that are listed as horizontal first, and vertical second.
      • Coordinate 0,0 is the upper left-hand corner of the canvas. Coordinate 900,200 is the bottom right.
      • Coordinate 100,100 means 100 pixels across and 100 pixels down.
      • To draw on the canvas, you need to always reference the Canvas element .Canvas
      • To draw a line, you need to set the point from where you want to begin drawing.
      • Next we want to draw the first horizontal line in our chart 249 spaces over on line 20. This line is just to the left of the CEO box
      • In the example in the scrollable box above that makes the Lovebytes chart, we want to move to position 10,20 and draw a line. canvas.lineTo(249,20);
      • Make sure you type things in exactly the same format as you see in the Chart.js file
      • Notice that in the moveTo command, that move is in lower case and To is upper case. The same is true of the lineTo command. That is the way Java Script is designed
      • Notice also that that the end of each line ends with a semicolon.
      • The line canvas.stroke(); actually draws the line.
      • canvas.strokeRect(250,5,100,25 draws the box for the CEO. It starts one space over from the end of the line 249 is 5 spaces above the line
      • In other words, start at coordinate 250,5 and draw a rectangle with a width of 100 pixels and 25 pixels in height.
      • canvas.fillText('Chief Exe Officer'),255,22); Types the title of the person in their box.
      • The // lines are informational only. The browser does not see them. They are notes for us to see what we are planning to do next.
      • Experiment with a blank canvas and try drawing lines, boxes, and text before trying to draw your chart. After you play with it a little you will see how easy it really is to draw a chart.
      • After drawing the box for the CEO and putting the text in, we need to continue with the horizontal line
      • Next we want to We moveTo coordinate 350,20. Remember we were at a horizontal position of 250 and then drew a box that was 100 pixels in width, so we want to start at 350, 20 to continue the line.
      • Once we have the starting point for our line, we need to start drawing the line. It goes out horizontally to 550px on vertical line 20
      • Now tell the browser to draw the line using canvas.stroke();
      • I decided to draw the chart one horizontal line at a time.
      • Next we will draw the vertical lines to connect the boxes for each of the Vice Presidents. If you look at the // notations you can see what part of the chart is being done using the following lines.
      • There are many other things that can be done using the canvas element, but we will not explore them at this time.

    Printer Friendly Version - Week 2

    WEEK 3

    Day 1: Job descriptions table including Name, title, salary and duties

    1. Today we are going to build an job Description table into our presentation on the Management.html page.
    2. Click on the line below and examine the Job Description Chart.
    3. The table will be included in Article 1 just below the organization chart
    4. Our table consists of 4 columns: Name, Position, Salary, Duties
    5. There 21 Rows. One for each employee

      Management Page

    6. To see the code that makes our table. proceed as follows
    7. With the Management.html page on your screen, Right-click and select view page Source. You can then see the coding of the page.

    8. Let's see how the table was constructed. The next line begins our table.
    9. 〈Table cellpadding="15" cellspacing="5" border=".3"〉
    10. The next line begins a new row of the table 〈TR〉
    11. The next line contains the column headings for the data. 〈TD〉 tells the browser to create a table data cell. 〈/TD〉 ends the table cell.
    12. 〈TD〉:Staff Member's Name〈/TD〉〈TD〉Position〈/TD〉〈TD〉Salary〈/TD〉〈TD〈Duties〉/TD〉
    13. There is a row for each employee. Remember 〈TR〉 starts a row. 〈TD〉 begins table data cell. 〈/TD〉 ends the table cell data and 〈/TR〉 ends a row
    14. 〈/TR〉 end the row of the table.
    15. 〈rt〉 stand for regular text. Any time the browser sees this tag, the text is formatted as described in the .css file.
    16. The image tag, 〈img src〉, along with its height and width was only added so that a title tag could be used for the actual job description. There is no actual image.
    17. When the user hovers over the duty box, they will be able to see the job description for that employee.
    18. Follow the format of table substituting your own company information.

      Day 2 : Planning Strategy to be put into an audio presentation.

      1. Today we are going to make an audio recording of our Planning Strategy in our Business Plan Presentation software.
      2. This part of the presentation goes into Article two box along with the job descriptions table.
      3. Get a written copy of the planning strategy from your written business plan. This will be your script
      4. Next plug in your microphone
      5. Go to the Sound Recorder program. This comes with all windows programs. It is located in the Accessories group
      6. Click START
      7. Select All Programs
      8. Accessories Folder
      9. Sound Recorder
      10. Click Start Recording button
      11. Read Your script.
      12. When finished, click Stop Recording
      13. The SaveDialog Box comes up
      14. Select folder where you want to store the file
      15. Type in file name and then
      16. Save File
      17. The file extension will be .wma, which stands for Windows Media Audio
      18. For this file to work properly in our html document, we need to convert it from wma to mp3
      19. There a number of audio converter programs available.
      20. If you have I-tunes on your computer, you can convert your .wma recording to mp3 by using "Preferences", "Import Settings", "MP3 encoder" and file menu o save and convert.
      21. After you have converted your dialog, you can add a five lines of html code to play the recording called in this example, "planning.mp3"

      22. Save your html file. Try out the audio player.
      Day 3 Day 3: Management Page, Aside Elements - Directing and Controlling

      1. Now it is time to work on the side news box.
      2. Check out Lovebytes Management page AS you can see there two paragraphs . One is about Directing and the other about Controlling
      3. Insert your own company's information here. and save the file

      Day 4: Marketing page, Article 1 Marketing Plan and Components of the Marketing Mix.

      1. Load your html template.
      2. Save it and all it Marketing.html in your student working folder
      3. We will be adding information to each of the box elements
      4. Get out your business plan document and turn to the marketing section
      5. It is in the marketing section of the business plan that you will draw out the information needed for the presentation.
      6. In the Lovebytes Marketing plan we have a service business.
      7. Marketing Page for Lovebytes
      8. We want to explain the product or service and perhaps show a picture.
      9. The above information should go into Article 1 box
      10. Our computer dating company also has a deluxe package and it is outlined.
      Day 5:Placement, Price and Promotion
      1. The Placement ,Price and Promotion are laid out in tabular form. See box below for the code.
      2. Obviously you could present this information in many ways. I chose a table.
      3. See instructions above for how to put data into a table.
      4. Remember beginning and ending table tags with information about padding and spacing and borders
      5. Table rows beginning and ending tags
      6. Table data with is the information that goes into each cell.
      7. Title which shows information as you pass the cursor over the cell.

      Printer Friendly Version - Week 3

      WEEK 4

      Day 1 and 2 Marketing page, Target Market and Market Segment.

      1. Inside Article 1 box we are going to do some special things to make the Target Market and Market Segment, real attention getting.
      2. Make sure that your external links are to Main.cs an Chart2.js
      3. Instead of using plain old buttons we are going to make custom buttons with rounded corners, that roll over when you pass the cursor over them an also change color.
      4. Try them out by running and then launching Marketing.html
      5. Just pass your mouse over the target market button an see what happens.
      6. Then move the mouse off the button. What Happens?
      7. Look at the coding of the Marketing.html page
      8. We are going to set up two divisions. One for target market the other for market segment
      9. 〈div id="targetMarket"〉 is the first division.
      10. The next we type is〈P id="text"〉
      11. Now key in the text defining your company target market.
      12. After keying in the text use the ending division tag, 〈Div/〉
      13. Repeat the above procedure of the market segment.
      14. Now let's turn our attention to the Main3.css file to see how we can animate them
      15. Scroll down the file until you see the coding to format the targetMarket division

      16. Notice that the descriptions start out with the number sign, #, followed by the Id name, followed by a left-facing curly brace.
      17. The parameters for the button are listed below, followed by a right-facing curly brace.
      18. We want to display the button a a block.
      19. We set he margin at 250 pixels and auto-centers the button.
      20. We set the color of the button next.
      21. -webkit-border-radius;10px; makes rounded corners for the button
      22. Opacity refers to transparency.
      23. Now we set the background color, width and height before the transformation.
      24. The last property has to do with the animation, what properties are transformed and how long it takes. Two seconds was used for opacity, background, height and width.

        Hover Event for Target Market button

      25. Look at the coding for the targetMarket button to see how to animate or move it
      26. We first identify the division segment, next the hover properties.
      27. We want to rotate the button 360 degrees.
      28. We change the opacity, background color, width and height.
      29. Experiment with these properties in your css file until you get the desired effect.
      30. Change any properties that you want to for the Market Segment box and/or the hover event.
      Day 3 and 4 Break Even Chart

      Article 2

      1. I used article two box to create an graphical analysis of our break-even point
      2. The vertical axis was used for expenses
      3. The horizontal axis, for sales
      4. Lovebytes needs to sell almost3,000 dating packages at $34.95 to covers its nearly $100,000 of expenses.
      5. Get the information you need to prepare a break even chart form your Accounting Department.
      6. I suggest that you draw it out first on a piece of paper before coding the coordinates for the lines and text
      7. The procedure for doing this chart is just like when we created the organizational chart.
      8. The coding for the beak even analysis can be found in Chart2.js
      9. Make sure that your html file calls that link. Check lines inside script tags.
      10. Here is the information contained in the Chart2.css fie

    Day 4 and 5 Marketing Industry Analysis

    1. We are going to use the side news box for the industry analysis information
    2. Obtain that information from your business plan.
    3. It should include identification of industry threats and comparative national trends.
    4. Include industry strengths and threats
    5. Compare company vision and experiences against averages of similar operations.
    6. Key in the information in that side news box in your html file.

    Printer Friendly Week 4

    Week 5

    Day 1 and 2 Financial page, general ledger reports

    1. Use the financial section Financial Section  of your business plan for the following part of the presentation.
    2. Load your html template file, make modifications and save it calling it Financial.html in your student folder.
    3. StylePresentation.css and Chart2.js files are also needed. Make sure that you link them to your html file.
    4. There are a number of ways you can show a balance sheet, income statement in your presentation
    5. I used Article 1 for the video.
    6. I chose to make a video of me creating the financial statement using the free VB10 General Ledger Program available in the accounting tutorial chapter 1 of
    7. There are a number of screen capture programs that you can use to create a video.
    8. I used an excellent, easy to use program from TechSmith called Camtasia.
    9. While making the video,I recorded the screens first as I demonstrated the program and added the audio track afterwords.
    10. I chose to make a video of the financial statements for a number of reasons.
      • It is a much easier way to give a presentation using a prepared video rather than actually entering data , retrieving files, etc. during the presentation.
      • There is a good chance that I might make and error demonstrating the software and ruin the presentation.
      • Another very important reason is to show you how you can insert video directly into your html page without using services such as U-Tube.
    11. You will want to include the following in your presentation regardless of what software and video programs you use.
      • You need to show how to create a chart of accounts
      • You should show how to set up beginning balances, like the initial investment of the employees.
      • You will want to show the business loan, obtaining it and making the first monthly payment.
      • You need to include the business contract and show how it was determined.
      • Show the payment for the assets needed to run the company.
      • You will want to reflect the payment of your standard monthly expenses.
      • After these transactions are in the books, produce a trial balance, income statement, stockholder's equity statement and a balance sheet

    12. To play video on the web you should use MP4 format. Camtasia has a way of saving he movie into mp4 format in addition to posting it to U-tube or ScreenCast
    13. In the example above the movie, General Ledger.mp4, is in a folder by the same name.
    14. The size of the controls to play the video are 640 by 360 pixels.
    15. The poster tag allows you to put a picture above the controls when the video is not playing.
    16. I just used a jpeg of Lovebytes logo.

    Day 3 and 4 Financial page, Cash Flow

    1. Article two box was used for this next section.
    2. I used Microsoft's Excel spreadsheet program for the Cash Flow Estimate
    3. Make a link to the cash flow estimate in your presentation. If you look at Financial.html you will see how to make the link. Below is the link

      Cash Flow Estimate

    4. Explain where you got your beginning cash balance.
    5. First column which should include cash from investment and business loan.
    6. For other months, November through April, show beginning cash balance, which is the ending cash balance of the previous month.
    7. Include income from open houses, trade fairs and grand openings
    8. Remember that the money from trade fair sales comes in the next month since they are charge sales
    9. Include your business contract each month and all your company expenses.
    10. You will want to how that you always have enough cash to cover your immediate expenses.

    Day 5 Financial Page, Side News box.

    1. I used the aside box for information concerning the Business Investment, Business Loan and Business Contract
    2. Obtain this information from the financial section of the business plan
    3. Save your file in your student folder.
    4. Turn in a printout of the page and its code along with your progress report to your VP

      Printer Friendly Week 5

      Week 6

      Day 1 and Day 2 SWOT Analysis.

      1. I decided to use the ntml5 feature of drag and drop to make the Strengths, Weakneses, Threats, and Opportunities Page.
      2. Load in your template for html and save it in your student fole as SWOT.html
      3. Load in necessary style, StylePresentation.css and JavaScript files, jerry.js into Notepad++
      4. Run the SWOT Page to see how the program works.
      5. Drag and Drop is used in many desktop applications, therefore, HTML5 needed the same functionality.
      6. I laid out the html page as eight boxes :Strength with Cupid/Strength.Blank, Weakness with Cupid/Weakness Blank. etc. One contains a picture of Cupid, the other is Blank
      7. the idea is to drag the image of the Cupid one into the blank box of the same name.
      8. Once you let go of the mouse-drop, the information about that characteristic appears in the blank box.
      9. It seemed like a flashy way to present the SWOT information.

      10. Here is the coding that relates to the sections of the SWOT.html page.
      11. I created eight sections One for each with an image of Cupid and one that was blank.
      12. The Blank one contains the Words like Strengths or Weaknesses or Threats or Opportunities
      13. The sections with cupid use the image tag to load a picture of Cupid
      14. See Below for how they are coded in the style file, StylePresentation.css

      15. All of them are floated to the left.
      16. All have the same width and height
      17. They all have the same margins
      18. All the ones containing Cupid have solid green borders.
      19. The blank sections have solid blue borders

      20. The actual coding for the drag and drop function is in the jerry.js file.
      21. Listed below is that specific coding for the doFirst function.

      22. Explanation of how drag and drop works
      23. The script file came from web site
      24. Looking at the JavaScript file, four functions were created. They are called doFirst(), doSecond(), doThird(), doFourth().
        • The doFirst one is to handle the drag and drop functions for Strengths.
        • The doSecond one is to handle the drag and drop functions for Weaknesses.
        • The doThird one is to handle the drag and drop functions for Opportunities
        • The doFourth one to handle the drag and drop functions for Threats
      25. Let's examine the coding for doFirst function. All functions are almost identical
      26. The function is called as soon as the page loads with the line window.addEventListener("load",doFirst,false);
      27. This line is at the bottom of the doFirst Function. just before the doSecond function.
      28. Next a variable called mypic is equated to document.getElementsById('facepic1');
      29. The line above looks at the html file and finds in the section with the strengthsCupid Id, an image called CupidsStrength.jpg and assigns it to facepic1
      30. Each one of the facepic variables is slightly different.
      31. facepic1 is a picture of Cupid with the words Strengths written on top of it. The picture was created in Flash and the picture is on one layer and the text on another layer.
      32. facepic2 is a picture of Cupid with the words Weakness written on top of it. The picture was created in Flash and the picture is on one layer and the text on another layer.
      33. facepic3 is a picture of Cupid with the words Opportunity written on top of it. The picture was created in Flash and the picture is on one layer and the text on another layer.
      34. facepic4 is a picture of Cupid with the words Threats written on top of it. The picture was created in Flash and the picture is on one layer and the text on another layer.
      35. The line that states mypic.addEventListner("dragstart"),startdrag,false); fires as soon as the user starts to drag the image.
      36. dragstart is a keyword and cannot be changed
      37. What do we want to happen when we start to drag an object? We want to call a function called startDrag which we will create later.
      38. dragener is a reserved word. It will call a function by the name endDrag which we will create later.
      39. Now we need to reference the strengthsBlank box in the html file. This is section id="strengthsBlank". It is an empty box with the word STRENGTHS in it.
      40. The box is styled in the css file and is 200 pixels wide and 275 pixels high with a 2px margin and a border that is solid blue.
      41. We are now going to add four event listeners for the strengthsBlank box.
        • The first one is dragenter.
        • The second is dragLeave.
        • The third is dragOver. It contains an internal function preventing browsers from performing their default actions.
        • The fourth is drop the keyword drop calls the dropped function that we will build.
      Start Drag Function
      1. First we have the function name startDrag(e){ with the e inside the parameters. Remember e stands for an event like dragging. moving the mouse, dropping the item
      2. The browser stores that information like X and Y position of the mouse.
      3. We need to reference the picture of Cupid, that we are going to move, We assign a variable named code: var code='〈img src="Cupid.jpg" height=275 width=200〉';
      4. This line is how we store information about the picture e.dataTransfer.setData('Text', code);
      Drag End Function
      1. dragEnd function When we drop the image into the box to the left, we want to have the original image to disappear.
      2. First we assign to a variable called pic.
      3. The endDrag function sets our picture's style for visibility to hidden so it can't be seen.
      Drag Enter Function
      1. The first line of the function prevents different browsers from doing something you do not want them to do, like highlight a box, change colors, etc.
      2. The next line sets the background to SkyBlue
      3. The next line sets a 3 pixel border around the box that is solid red.
      Drag Leave Function
      1. The first line of the function prevents different browsers from doing something you do not want them to do, like highlight a box, change colors, etc.
      2. The second line sets the background color of the strengthBlank box to white
      3. The third line puts a 3 pixel solid border around the box. It is the same color as before - green.
      Drag Over Function
      1. The DragOver function was called in line 7 above and its purpose was only to prevent any abnormalities in browsers from happening when the mouse passes over.
      Dropped Function
      1. The first line of the function prevents different browsers from doing something you do not want them to do, like highlight a box, change colors, etc.
      2. Now we have to identify where are going to drop the image. It will be in the box called strengthBlank
      3. The rest of the line tells the browser to take the information that is stored and drop the text in the box.
      4. strengthCupid.innerHTML is the information we want placed in the box when the image is dropped. This is information about the strengths of our company.

      If you look at the rest of the code pertaining to drag and drop you will see it repeated four times. Once for each element of SWOT

      Day 3 Lovebytes Video

      1. The purpose of this page it to highlight our program and the way it works. It is inserts into Article 1 box.
      2. The header is "New Way to get a date Try Lovebytes"
      3. You might use it to insert a video commercial for your company.
      4. Again we are using the Camtasia Studio 8 program, which captures the screen and audio.
      5. The video is quite short and we have a poster above the controls when the video is not playing.
      6. Create a line in your html file to play the video.
      7. The footer identifies who wrote the software and their title.

      8. Remember to play on the web using html5 the file needs to be in the MP4 format.
      9. As mentioned before, a video presentation can be done ahead of time.
      10. By creating a video of a demonstration there is no chance of the presenter messing up.

      Day 4 Lovebytes Questionnaire

      1. The header for this article2 is 〈Header〉 〈BR〉 〈h1>Lovebytes Survey Sample Questions〈/h1〉 〈h3>Questionnaire〈/h3〉 〈/Header〉

      2. Article 2 is a sampling of the questionnaire that respondents fill out.
      3. It created in a true html format, so that you as the presenter can answer the questions.
      4. The questionnaire is put into a table.
      5. Respondents answer the questions by clicking on the radio button of their choice
      6. When the respondent is finished with the survey, they click a Sumbit Button to send the information to an e mail account specified by the coder.
      7. You can choose what ever you want to go here.
      8. The header for this section is〈h1〉Lovebytes Survey Sample Questions〈/h1〉 〈h3〉Questionnaire〈/h3〉
      9. The footer for this article is 〈Footer〉 〈p〉Questionnaire developed by〈/p〉〈/Footer〉

      Day 5 Side New Section: Business Partners

      1. The side section is used to make links to each of your business partners to help them promote their businesses in exchange for them giving your company advice.

      Printer Friendly version week 6

      Week 7

      Day 1 and 2 Appendix: Loan Amortization

      1. Take a look at the Appendix Link
      2. The user enters numbers for terms of the loan and then hovers over a special button to make the calculations
      3. The showpay() function in the java script file is called and here is where the calculations are made.
      4. Load in your flexible box model html template and save it as Appendix.html in your student folder.
      5. Remember all the headings, format for the boxes, menu and navigation link are the same for all pages of your presentation.
      6. The JavaScript link is called janet.js. Make that adjustment in your html file.
      7. Below is the listing of a calculator program that I found on the web. Use it if you want or create your own. It could just be a link to an already existing calculator program on the web.
      8. You might even want to just list the terms of the loan. But remember, the purpose of this tutorial to show off how interactive you can make your presentation.
      9. Below is a listing of the HTML file portion of the program that shows the loan program.

      10. The data entry portion of the calculator program is formatted in a table that utilizes 60% of the screen.
      11. The table has no border.
      12. Table Headings background color is gray
      13. The boxes where you enter the data are white.
      14. The box is our button. We have used this type of html5 button before.
      15. When it is clicked on it goes to the Java script file called janet.js and executes the showpay() function.
      16. There is a formula in the showpay() function that calculates the monthly payment base on interest rate, term of the loan and amount of loan.
      17. It returns the value of this function back to the HTML file as the word pay.
      18. If you would like to see the JavaSript file it is called janet.js. Load into Notepad++ to view its contents.

      Day 3 Appendix: Important Links

      1. The part of the Appendix page is in the Aside_news box.
      2. The first two are excellent references for HTML5, CSS and JavaScript.
      3. The third link is for your company's business contract.
      4. According the Business Plan rubric, the business plan contract is supposed to be included in the appendix.

      Day 4 and 5 Debug and test out all pages.

      1. Spend the next two days checking out all links, spelling and grammar.
      2. Make certain all the JavaScript works and delivers the right answers and results
      3. To do well giving a presentation in front of judges, please practice your presentation in front of different groups.
      4. Each Department vice president should explain their portion of the presentation.
      5. Good luck. I know that designing a presentation in this format is a lot of work, but at least it won't turn out to be just another boring, static PowerPoint presentation.

        Printer Friendly version week 7

        1. Virtual Enterprise California - Sales Catalog Workflow

        2. Virtual Enterprise California - Product Development, Rubric for Sales Catalog mail-in competition and Sales Catalog Presentation

        Virtual Enterprise California
        Janet's Web Site -Helpful forms-Forms and Templates