© Jerry Belch Overview of Project The objective of this 7 week Step By Step Tutorial 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. Wow your audience. Do not bore them with an another PowerPoint presentation. 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 Tutorial 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 Download a copy of Google's Chrome Browser Download a copy of Notepad++ Your company's written business plan. See Below for Details Copy of Executive Summary Copy of Mission Statement Copy of Business Description Copy of Business Procedures A copy of your Job Descriptions Copy of Organizational Chart Marketing part of the business plan: 4Ps, Target Market, Market Segment and study of industry Financial records you want to include SWOT Analysis Loan information percentage, amount needed time frame. Microphone Teacher's Responsibility Make sure that the computer that is being used for this assignment has Google's Chrome - a browser. Make sure that the same computer has the text-editor program Notepad++ Both pieces of software are free and are the tools necessary for your students to do this project HTML5 is still in the development process is not a standard yet. It should all be finished by 2014 an all major browsers will support its features. Other browsers will give mixed results on this project and should not be used for that reason. Use Progress Logs to manage the project Progress Logs and Department Templates Video
Business Plan Presentation using HTML5 Week 1 WEEK 1 Day 1: HTML5 Features You can define HTML5 family as a new mark up language, Cascading Style Sheets 3 and JavaScript. HTML5 includes all the older HTML tags plus an array of new tags designed to build better and more interesting web pages. Currently regular HTML cannot play audio or video, do animations, or store data without a plug in like Flash or QuickTime. 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. 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. The business plan for Lovebytes is on Janet Belch's web site a Step By step lesson. Take a few minutes to familiarize yourself with this business plan, as this is our focus here. Day 2: HTML5 flexible box model. 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. The way they should look involves, fonts, colors, the way lists are displayed, the way headers and footers are formatted, etc. All the style sheets in this lesson are external 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. <!doc type html> <html lang="en"> <Head> <Meta char set="utf-8"/> <Title>Flexible Box Model Template</Title> <Link Rel="StyleSheet" href="Style.css"> </head> <body> <div id="big_wrapper"> <Header id="top_header"> <H1>Welcome</H1> </Header> <Nav id="top_menu"> <ul> <li>Home <li>About <li>Our Products <li>Contact us </ul> </Nav> <div id="new_div"> <Section id="main_section"> <Article> <Header> <hgroup> <h1>Title of Article 1</h1> <h2>Subtitle of Article 1</h2> </hgroup> </Header> <P>This is the beginning of the article</p> <Footer> <p>Written by </p> </Footer> </Article> <Article> <Header> <hgroup> <h1>Title of Article 2</h1> <h2>Subtitle of Article 2</h2> </hgroup> </Header> <P>This is the beginning of the second article</p> <Footer> <p>Written by </p> </Footer> </Article> </Section> <Aside id="side_news"> <H3>Headline of Side News</h3> </Aside> </div> <Footer id="the_footer"> <p>Copyright 2013</p> </Footer> </div> </Body> </html> Above in the scrollable box is the source code that creates the flexible box model. 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. The code in the scrollable box makes the flexible box model, when it is run. 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. Let's examine the coding for the flexible box model. 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 The second line informs the browser that the language is English The third line tells the browser that this is the head tag and which character set to use In the early days of the web the ASCII standard character set was used. Today that is quit limited. 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. The preferred encoding for e-mail and web pages today is UTF-8 which stands for Unicode Transformation Function The fourth line contains the meta tag information 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. 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. We will examine the Style.css file a little bit later. Line 7 is the ending head tag 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. 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 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. The next line ends the header, 〈/Header〉 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. The next lines layout an unordered list, the names of the different pages, in the web site: Home, About, Our Products, Contact us. This will contain the links to your other pages. Be thinking what these might be for your company. Notice the beginning and ending NAV tags. This word is a reserved word in HTML5 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. We give it and ID so we can reference this tag directly in the CSS file. The other elements in the sectioning category are 〈section〉, 〈article〉, and 〈aside〉, 〈hgroup〉. All these tags are meant to section off and group elements. 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. Be thinking about what you want to use for the two articles. Turn in these ideas to your instructor along with your progress Log for the week. 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. The 〈hgroup〉 is used to group headings The next major section of the web page is the 〈aside〉 The 〈aside〉 is used to define a section of the page that has content that is related, but not critical to the main content 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. *{ margin:0px; padding: 0px; } h1{ font: bold 20px Tahoma; color:#000000; } h2{ font: bold 18px Times New Roman; color:#800080; } h3{ font: bold 17px Comic Sans; color:#ff0000; } header,section, footer, aside, nav, article, hgroup { display:block; } body{ width=100%; border:5px solid orange; display:-webkit-box; -webkit-box-pack:center; } #big_wrapper{ max-width:1000px; margin: 20px 0px; display:-webkit-box; background:#ffffff; -webkit-box-orient:vertical; -webkit-box-flex:1; } #top_header{ background:yellow; border:3px solid black; padding:20px; } #top_menu{ border: 1px solid red; background:blue; color:white; } #top_menu li{ display:inline-block; list-style:none; padding:5px; font:bold 14px tahoma; } #new_div{ display:-webkit-box; -webkit-box-orient:horizontal; } #main_section{ border:1px solid blue; -webkit-box-flex:1; margin: 1px; padding:20px; } #side_news{ border:1px solid red; width:220px; margin:20px 0px; padding:30px; background:#afeeee; } #the_footer{ text-align:center; padding:20px; border-top:2px solid green; } The first lines of code are a housekeeping function to set margins and padding to 0. Next we set the way we want our headlines to appear: font, size, color, and style. 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. After the attribute, like text ,height, width, background, the colon (:) is like an equal sign. 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 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 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. The code tells the browser to display them as block elements. That means each one under the other one. 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. The border is set to a 5px solid orange line around it. 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. You will not want to change these lines. The WebKit reference is what makes this a flexible box model The line "-webkit-box-pack:center;": centers the web site. Now let's look at what the big wrapper code does. 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. The display parameter using -webkit-box helps adjust the size of the display. The code that refers to orienting the boxes or sections of the web page in a vertical fashion. -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. The top header characteristics are yellow background with a 3 pixel solid black border with 20 pixels of padding. The top menu box that contains the links to other pages has a one pixel solid red border, is blue with white text. 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. 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. The first div tag oriented things vertical, in the case of the new div we want to position them in a horizontal manner. 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. 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. 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. Click on the link for the flexible box model in this tutorial. Now lets shrink the web site 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? 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. Run Notepad++ Go to file on the menu bar. Click Open 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. 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". Load the Style.css file and SAVE it AS a different name as well. Make sure that it has a ".css extension" Find the line that refers to the #top_header. Change the background color to gray or #808080 Save the file 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. Save the file after your make the change click on your html file. This is the one we want to launch, not the css file Make sure the html tab file is highlighted Click Run on the very top menu bar and select Launch in Chrome. The top header box should now be Gray instead of yellow. 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 Red - Energy, passion, action, strong, masculine. Orange - Social communication and optimism Pink - Love, unconditional love, nurturing Yellow - Optimistic, cheerful Green - Balance and growth Blue - Color of trust and peace. Indigo - Intuition Purple - Imaginative, seek meaning of life, spiritual fulfillment Turquoise - Communication, clarity of mind. Magenta - Universal harmony and emotional balance Brown - Down-to-earth, security, material wealth Gray - Compromise, neither black or white. Silver - Feminine, energy Gold - Success, achievement, lucky, quality White- Complete, pure, color of perfection, purity, innocence Black- Secretive, hidden, unknown, mystery The following list examines the psychology of colors Adolescents like complex colors. They are used to playing video games with computer graphics Girls like shades of purple and pink. AS they get older they also like black Boys favor blue, turquoise, green, yellow, black, white, gray and silver. Serious business colors include darker colors like dark blue, dark green, indigo, black and gray Casual business colors are light hearted, bright red, orange, yellow, bright green, bright blue, pink and purple Some color preferences are climate based. For example, California favors bright and warm colors Eastern part of country prefers colder, cool colors. Competitors like Match.com and E-harmony.com used gray, black and blue colors. Their target market, however, is quite different than Lovebytes' market segment. The following list examines color palettes You want colors that go together and are pleasing to the eye. Here are a few palettes Palette one #404040 - Dark gray #6dbdd6 - Light blue #b71427 - Dark red #ffe658 - Light yellow Palette two #558c89 - Light teal #74afad - Blue gray #d9853b - Light brown #ececea - Light gray Palette three. You decide what colors are in palette three. Turn answers in with progress log #191919 #df3d82 #ffffff Palette four. You decide what colors these represent. Turn in you answers in with your progress log, #585858 #118c4e #c1e1a6 #ff9009 You should also examine the fonts used. Make sure that they are readable. I know there are so many to choose from. Try to find those that match your company image. Finalize your cascading style sheet file and save it with the colors and fonts you want. 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. 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. Finalize what these other pages should be called and how many of them you need for this project. 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. 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. Open your html file in Notepad++ if it is not already list as a tab In the 〈Header="top_header"〉 Replace the word welcome with your company's name We need to add a logo here and any slogan that we use in our company. 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 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. Logos can be jpeg, gifs or bitmaps Use the height and width parameters to adjust the size of our picture <h1>Lovebytes Computer Dating Service</h1> <img src="New Logo.jpg" height=100 width=175 border =3> <Center><h2>Not Ready for Mr. Right or Miss Right. How about Mr. or Miss Right <u>Now?</u></h2></center> Day 2: Deciding what information to put on your first or home page. What do you want to be on your first page? Think of three different things. Remember the Article sections are the main part of the presentation and the side news is related information This is the first page of our presentation, so you want to capture their attention. It must load quickly, so no large graphics, etc. Open your templae html file in Notepa++ Use save As Index.html to save a working copy into your student folder. 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. 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. The side news box is a testimonial from a satisfied subscriber. Below is what the index.html or home page looks like in code. The style sheet file is called StylePresentation.css <!DOCTYPE html> <html lang="en"> <Head> <Meta char set="utf-8"/> <Title>Lovebytes Index</Title> <Link Rel="StyleSheet" href="StylePresentation.css"> </head> <body> <div id="big_wrapper"> <Header id="top_header"> <h1>Lovebytes Computer Dating Service</h1> <img src="New Logo.jpg" height=100 width=175 border =3> <Center><h2>Not Ready for Mr. Right or Miss Right. How about Mr. or Miss Right <u>Now?</u></h2></center> </Header> <Nav id="top_menu"> <ul> <LI><A href="index.html">Home</A> <li><A href="Introduction.html">Introduction</A> <li><A href="Management.html">Management</A> <li><A href="Marketing.html">Marketing</A> <LI><A href="Financial.html">Financial</A> <LI><A href="SWOT.html">SWOT</A> <LI><A href="LoveVideo.html">LoveBytes Video</A> <li><A href="Appendix.html">Appendix</A> </ul> </Nav> <div id="new_div"> <Section id="main_section"> <Article> <Header> <h1>A new way to get a date</h1> <h2>Try Lovebytes.com</h2> </Header> <P>A new computer dating service has come to town, Its called Lovebytes. A byte is a unit of digital information that consists of eight bits. Since a computer is used to find love, thus the name Lovebytes. It is not like any other dating service around. It is meant just for high school and college students. We help you find a date - not the forever kind, just one for right now. Most people believe that young people have no difficulty finding a date. Nothing could be further than from the truth according to CEO, Jerry Belch. He says that there are so many things competing for our time that dating just takes the back seat. No pun intended. </p> <Footer> <P>Written by Sherry Bell, <P>Editor of the Richmond High School Gazette.</p> </Footer> </Article> <Article> <Header> <BR> <h1>Lovebytes Dating Profile</h1> <h3>Respondent Janet Coy</h3> </Header> <P> <Textarea rows=50 cols=50 readonly> DATE POTENTIAL Janet is very romantic. She likes action films with car crashes, violence and lots of fights. She is not much of a sports fan and is not really thrilled with the prospect of spening her Sundays watch football. Miss Coy would enjoy staying at a cabin on the beach for a weekend with you. She wants to keep a pretty tight rein on your time. This potential date won't go near a surfboard since she may not be able to swim. Your prospective date is somewhat conservative when it comes to money spend on you while on a date. There is a good chance that your first ate might be a school dance. You have a good chance of being kissed goodnight on your first date. PERSONALITY This respondent would like to vacation at the beach. She doesn't get going until the afternoon. She has an appetite for many different types of food. If a free trip were won, she would like to see Europe.Janet enjoys Mexican food and it is a favorite. She likes to watch football. She is somewhat demanding when talking with people in stores and restaurants. Janet believes that most people should own a car. Janet believes that being grounded is not quite as severe as death. Miss Coy would have a very difficult time living without a cell phone. Janet believes that social media are an integral part of life. The latest fashions and accessories are not that important to her. JOB/CAREER Respondent is not very concerned about the type of work that she does, since weekends are more important. Janet believes that, in most cases, a husband and wife must work outside the home to make it financially. Miss Coy would like to get a four-year college degree. She believes that a job in which you help others is important. CHARACTER Respondent believes that making a lot of money is a moderately important goal. She is a pretty religious person. She is moderately sensitive toa hint of criticism and agrees that in a relationship, you should please yourself first, then the other person. She needs a moderate degree of emotional support and goes out of her way to avoid disappointing anyone. She is somewhat mindful of people's feelings and will not just say anything that needs to be said. Janet does not put things off on a regular basis. Careful, Miss Coy does not like to be crossed. Consider that she is pretty dangerous. She does not want to lose your friendship, but believes that it it not the end of the world. Sometimes Janet can simulate emotions she does not feel. </p> <Footer> <p>Profile generated by LoveBytes.exe</p> </Footer> </Article> </Section> <Aside id="side_news"> <H4>Testimonial</h4> I recently broke up with my boyfriend, just before the senior prom. I had already bought my dress and arranged to double date with my best friend. Lovebytes made it possible for me to go to my prom with one of the most popular, most interesting boys I have ever met. We had so much in common and lots to talk about. We are planning on seeing each other again. I would recommend this service to anyone in high school or college. Thank you to Lovebytes.com for making my senior year a great success. Sincerely Jessica S </Aside> </div> <Footer id="the_footer"> <Center> <p>Copyright© 2013 Lovebytes Incorporated Santa Barbara, California </p> </Footer> </div> </Body> </html> Now you complete your home page with your information. 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. 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 Look at the business plan rubric and my Introduction.html page in Notepad++ My Introduction page contains The same heading, logo, slogan, colors and fonts as the first page. An Executive summary An audio player Look over the code and the finished product of my page. 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. 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. 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. Substitute your information for the articles and side news Notice how the audio sound track is played directly with HTML5. It is a snap. It only takes a few lines. Make sure that you save your audio file in the same folder as the rest of your presentation file. <audio controls height= "100" width="100"> <source src="love.mp3" type="audio/mpeg"> <source src="love.ogg" type audio/ogg"> Your browser does not support the audio element. </audio> The first line sets the size of the audio player controls. The second line names the song - love.mp3 and tells it that it is an audio mpeg file The next line is for a music file in the .ogg format MP3 is the most commonly used format. If your song is not in the mp3 format, you can convert it to Mp3 using the I-tunes program The next line is one you hope your users do not see, They will only see it if they cannot play the audio file The last line ends the audio tag. Day 4 Introductory page:Business Object and Mission statement The Description - Create your company description put in the side news box Business Objectives. Create your own and put them in the Article 2 section Mission Statement- Write your own and put in the side news box. Save your html file and launch it in Chrome to see how it looks. 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 Open your html template file, Save it in your own folder or workspace and call it Management.html Make sure that your cascading Style Sheet file, StylePresentation.css, is also saved in the same folder. The management page consists of an organizational chart, job descriptions for our staff, Planning Strategies, and audio presentation. For Day 5 we will just look at how to do the organizational chart using the html5 canvas element and the Chart.js file. The new HTML 5 concepts introduced include the Canvas element, which was used to construct the organizational chart Open Management.html in Notepad++ There a few new things to learn here. In addition to a css file and html file we will add an external JavaScript file. 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. <Link Rel="StyleSheet" href="StylePresentation.css"> <script src = "Chart.js"> </script> </head> <body> Also locate the lines that relate to the Canvas Element in the HTML file. They are in Article one box. <canvas id="canvas" height="200" width="900"> Hopefully you do not see this. Get Google Chrome as your Browser </canvas> 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.. This is the area set aside to draw things in. Our canvas is 200 pixels high and 900 wide, Here is what the Chart.js file looks like function doFirst(){ var x = document.getElementById('canvas'); canvas = x.getContext('2d'); //canvas.beginPath(); canvas.moveTo(10,20); canvas.lineTo(249,20); canvas.stroke(); canvas.strokeRect(250,5,100,25); canvas.fillText('Chief Exe Officer',255,22); canvas.moveTo(350,20); canvas.lineTo(550,20); canvas.stroke(); //line down to first vp canvas.moveTo(40,20); canvas.lineTo(40,40); canvas.stroke(); // line down for second vp canvas.moveTo(180,20); canvas.lineTo(180,40); canvas.stroke(); // line down for third vp canvas.moveTo(420,20); canvas.lineTo(420,40); canvas.stroke(); // line down for fourth vp canvas.moveTo(520,20); canvas.lineTo(520,40); canvas.stroke(); //first vp box canvas.strokeRect(10,40,60,20); canvas.fillText('CFO',20,52); // Vp of It canvas.moveTo(150,40); canvas.lineTo(150,40); canvas.stroke(); canvas.strokeRect(150,40,60,20); canvas.fillText('IT VP',155,52); //administrative assistant canvas.moveTo(300,30); canvas.lineTo(300,40); canvas.stroke(); canvas.strokeRect(270,40,60,20); canvas.fillText('Adm Assist',275,55); // vp of sales canvas.strokeRect(390,40,60,20); canvas.fillText('VP Sales',395,55); // vp of human resources canvas.strokeRect(490,40,60,20); canvas.fillText('VP of HR',495,55); // payroll clerk line canvas.moveTo(10,80); canvas.lineTo(10,60); canvas.stroke(); // Ar Clerk canvas.moveTo(40,80); canvas.lineTo(40,60); canvas.stroke(); // banker Gl clerk canvas.moveTo(70,80); canvas.lineTo(70,60); canvas.stroke(); // web master line down canvas.moveTo(180,80); canvas.lineTo(180,60); canvas.stroke(); //sales clerk 1 - lines down canvas.moveTo(390,80); canvas.lineTo(390,60); canvas.stroke(); //sales clerk 2 - lines down canvas.moveTo(410,80); canvas.lineTo(410,60); canvas.stroke(); //sales clerk 3 - lines down canvas.moveTo(430,80); canvas.lineTo(430,60); canvas.stroke(); //sales clerk 4 - lines down canvas.moveTo(450,80); canvas.lineTo(450,60); canvas.stroke(); // payroll clerk box canvas.strokeRect(2,80,20,20); canvas.fillText('P',5,95); // AR clerk box canvas.strokeRect(30,80,20,20); canvas.fillText('AR',32,95); // banker clerk box canvas.strokeRect(60,80,20,20); canvas.fillText('B',66,95); // web master box canvas.strokeRect(150,80,60,20); canvas.fillText('Web Master', 152,93); // sales clerk 1 box canvas.strokeRect(380,80,20,20); canvas.fillText('S1',382,95); // sales clerk 2 box canvas.strokeRect(400,80,20,20); canvas.fillText('S2',405,95); // sales clerk 3 box canvas.strokeRect(420,80,20,20); canvas.fillText('S3',423,95); // sales clerk 4 box canvas.strokeRect(440,80,20,20); canvas.fillText('S4',443,95); // line for web 1 canvas.moveTo(150,100); canvas.lineTo(150,120); canvas.stroke(); // line for web 2 canvas.moveTo(170,100); canvas.lineTo(170,120); canvas.stroke(); // line for web 3 canvas.moveTo(190,100); canvas.lineTo(190,120); canvas.stroke(); // line for web 4 canvas.moveTo(210,100); canvas.lineTo(210,120); canvas.stroke(); // box for web 1 canvas.strokeRect(140,120,20,20); canvas.fillText('W1',142,132); // box for web 2 canvas.strokeRect(160,120,20,20); canvas.fillText('W2',162,132); // box for web 3 canvas.strokeRect(180,120,20,20); canvas.fillText('W3',182,132); // box for web 4 canvas.strokeRect(200,120,20,20); canvas.fillText('W4',202,132); } window.addEventListener("load", doFirst,false); We now need to explain how to draw the organizational chart on our canvas using the Chart,js file instructions. Do not panic. It is not as complicated as it seems. The top three lines begin a JavasSript function called doFirst Next we create a variable called X and set it equal the the canvas element in the html file The third line tells it to behave in a two dimensional way. 3D is on the way in HTML5 Even though there are many lines in between these, the last line should be added now. The last line tells the browser to run the doFirst Java Script function as soon as the page loads. The lines in the middle are the ones that map out how to draw the chart. We have a canvas that is 200 pixels high and 900 pixels wide. Our chart is much wider than it is tall. 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 If this chart matches up with your company organization, feel free to just use this file You can modify certain lines if you wish. 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 Today we are going to build an job Description table into our presentation on the Management.html page. Click on the line below and examine the Job Description Chart. The table will be included in Article 1 just below the organization chart Our table consists of 4 columns: Name, Position, Salary, Duties There 21 Rows. One for each employee Management Page To see the code that makes our table. proceed as follows With the Management.html page on your screen, Right-click and select view page Source. You can then see the coding of the page. Let's see how the table was constructed. The next line begins our table. 〈Table cellpadding="15" cellspacing="5" border=".3"〉 The next line begins a new row of the table 〈TR〉 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. 〈TD〉:Staff Member's Name〈/TD〉〈TD〉Position〈/TD〉〈TD〉Salary〈/TD〉〈TD〈Duties〉/TD〉 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 〈/TR〉 end the row of the table. 〈rt〉 stand for regular text. Any time the browser sees this tag, the text is formatted as described in the .css file. 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. When the user hovers over the duty box, they will be able to see the job description for that employee. Follow the format of table substituting your own company information. Day 2 : Planning Strategy to be put into an audio presentation. Today we are going to make an audio recording of our Planning Strategy in our Business Plan Presentation software. This part of the presentation goes into Article two box along with the job descriptions table. Get a written copy of the planning strategy from your written business plan. This will be your script Next plug in your microphone Go to the Sound Recorder program. This comes with all windows programs. It is located in the Accessories group Click START Select All Programs Accessories Folder Sound Recorder Click Start Recording button Read Your script. When finished, click Stop Recording The SaveDialog Box comes up Select folder where you want to store the file Type in file name and then Save File The file extension will be .wma, which stands for Windows Media Audio For this file to work properly in our html document, we need to convert it from wma to mp3 There a number of audio converter programs available. 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. 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" <audio controls> <source src="planning.mp3" type="audio/mp3"> <source src="planning.ogg" type audio/ogg"> Your browser does not support the audio element. </audio> Save your html file. Try out the audio player. Day 3 Day 3: Management Page, Aside Elements - Directing and Controlling Now it is time to work on the side news box. Check out Lovebytes Management page AS you can see there two paragraphs . One is about Directing and the other about Controlling 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. Load your html template. Save it and all it Marketing.html in your student working folder We will be adding information to each of the box elements Get out your business plan document and turn to the marketing section It is in the marketing section of the business plan that you will draw out the information needed for the presentation. In the Lovebytes Marketing plan we have a service business. Marketing Page for Lovebytes We want to explain the product or service and perhaps show a picture. The above information should go into Article 1 box Our computer dating company also has a deluxe package and it is outlined. Day 5:Placement, Price and Promotion The Placement ,Price and Promotion are laid out in tabular form. See box below for the code. <Table border=3 cellpading=5 cellspacing=5> <TR> <TD><h2>Placement</h2><img src="pv.ico" height=12 width=12 Title="Our placement used to get our service to the consumer is via the Internet. That is our only channel of distribution. The compiling of data, creating the files, finding the matches and profiles will be handled at our headquarters. No middlemen are needed in our venture thus saving costs." </TD><TD><h2>Price</h2><img src="pv.ico" height=12 width=12 Title="Price will be competitive. For example, Match.com charges $16.99 per month for six months or $34.95 for one month. Other sites have much the same pricing structure. Lovebytes.com will charge $16.95/month for the six months, or $32.95 for a one month's subscription. We will have trade show discounts and special promotions during December, March and April. Clients who introduce Lovebytes to their friends will receive a 5% discount." </TD><TD><h2>Promotion</h2><img src="pv.ico" height=12 width=12 Title="Promotion will be accomplished in a couple of ways. The web site will be listed in the Virtual Enterprise shopping mall and meta tag information will be sent to the major search engines. The questionnaire will be attached to the web page. We will create ads that run on the Internet, tied to other Virtual Enterprise sites. Email ads will be created and sent to all Virtual Enterprise companies in California. Special flyers with trade show deals will be circulated during each of the trade shows. We will run an ad in our school paper and have a spot on the school's TV station feauring popular students in school showing how cool it is to use Lovebytes to get a date for a school activity. We will attempt to obtain company to company contracts with other VE companies. "</TD> </TR> </Table> Obviously you could present this information in many ways. I chose a table. See instructions above for how to put data into a table. Remember beginning and ending table tags with information about padding and spacing and borders Table rows beginning and ending tags Table data with is the information that goes into each cell. 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. Inside Article 1 box we are going to do some special things to make the Target Market and Market Segment, real attention getting. Make sure that your external links are to Main.cs an Chart2.js 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. Try them out by running and then launching Marketing.html Just pass your mouse over the target market button an see what happens. Then move the mouse off the button. What Happens? Look at the coding of the Marketing.html page We are going to set up two divisions. One for target market the other for market segment 〈div id="targetMarket"〉 is the first division. The next we type is〈P id="text"〉 Now key in the text defining your company target market. After keying in the text use the ending division tag, 〈Div/〉 Repeat the above procedure of the market segment. Now let's turn our attention to the Main3.css file to see how we can animate them Scroll down the file until you see the coding to format the targetMarket division #targetMarket{ display:block; margin:150px auto; color:#ffe4e1; -webkit-border-radius: 10px; opacity:0.4; background:magenta; width:120px; height:25px; -webkit-transition:-webkit-transform 2s,opacity 2s, background 2s, width 2s, height 2s; } #targetMarket:hover{ -webkit-transform: rotate(360deg); opacity:2.5; background:#5959ab; width:450px; height:390px; } Notice that the descriptions start out with the number sign, #, followed by the Id name, followed by a left-facing curly brace. The parameters for the button are listed below, followed by a right-facing curly brace. We want to display the button a a block. We set he margin at 250 pixels and auto-centers the button. We set the color of the button next. -webkit-border-radius;10px; makes rounded corners for the button Opacity refers to transparency. Now we set the background color, width and height before the transformation. 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 Look at the coding for the targetMarket button to see how to animate or move it We first identify the division segment, next the hover properties. We want to rotate the button 360 degrees. We change the opacity, background color, width and height. Experiment with these properties in your css file until you get the desired effect. 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 I used article two box to create an graphical analysis of our break-even point The vertical axis was used for expenses The horizontal axis, for sales Lovebytes needs to sell almost3,000 dating packages at $34.95 to covers its nearly $100,000 of expenses. Get the information you need to prepare a break even chart form your Accounting Department. I suggest that you draw it out first on a piece of paper before coding the coordinates for the lines and text The procedure for doing this chart is just like when we created the organizational chart. The coding for the beak even analysis can be found in Chart2.js Make sure that your html file calls that link. Check lines inside script tags. Here is the information contained in the Chart2.css fie function doFirst(){ var x = document.getElementById('canvas'); canvas = x.getContext('2d'); // vertical axis canvas.moveTo(50,20); canvas.lineTo(50,500); canvas.stroke(); //horizontal axis canvas.moveTo(50,500); canvas.lineTo(500,500); canvas.stroke(); //$100,000 sales canvas.fillText('Expenses',0,10); canvas.fillText('$100,000' , 1,20); //$75,000 canvas.fillText('$75,000',2,125); //$50,000 canvas.fillText('$50,000',2,250); //$25,000 canvas.fillText('$25,000',2,375); // $0.00 canvas.fillText('$0.00',2,500); //0 on horizontal axis canvas.fillText('0',50,520); canvas.fillText('Packages Sold',100,530); //1500 packages canvas.fillText('1,500',250,520); // 3000 packages canvas.fillText('3,000',472,520); // line from 0,0 to top canvas.moveTo(50,500); canvas.lineTo(500,0); canvas.stroke(); // other line canvas.moveTo(50,40); canvas.lineTo(600,40); canvas.stroke(); //profit area canvas.fillText('Profit Area',500,30); //loss area canvas.fillStyle='rgb(255,0,0)'; canvas.strokeStyle='rgb(0,111,174)'; canvas.fillText('Loss Area',200,160); canvas.stroke(); // data section canvas.fillText('Breakeven dollars = $97,742',50,600); canvas.fillText('Dating Package Cost = $32.95',50,610); canvas.fillText('Dating Package That Need to be Sold = 2,966',50,620); } window.addEventListener("load", doFirst,false); Day 4 and 5 Marketing Industry Analysis We are going to use the side news box for the industry analysis information Obtain that information from your business plan. It should include identification of industry threats and comparative national trends. Include industry strengths and threats Compare company vision and experiences against averages of similar operations. 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 Use the financial section Financial Section of your business plan for the following part of the presentation. Load your html template file, make modifications and save it calling it Financial.html in your student folder. StylePresentation.css and Chart2.js files are also needed. Make sure that you link them to your html file. There are a number of ways you can show a balance sheet, income statement in your presentation I used Article 1 for the video. 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 janetbelch.com There are a number of screen capture programs that you can use to create a video. I used an excellent, easy to use program from TechSmith called Camtasia. While making the video,I recorded the screens first as I demonstrated the program and added the audio track afterwords. 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. 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 <video src="General Ledger/General Ledger.mp4" controls width="640" width="360" poster="LBLogo.jpg"> </video> 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 In the example above the movie, General Ledger.mp4, is in a folder by the same name. The size of the controls to play the video are 640 by 360 pixels. The poster tag allows you to put a picture above the controls when the video is not playing. I just used a jpeg of Lovebytes logo. Day 3 and 4 Financial page, Cash Flow Article two box was used for this next section. I used Microsoft's Excel spreadsheet program for the Cash Flow Estimate 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 Explain where you got your beginning cash balance. First column which should include cash from investment and business loan. For other months, November through April, show beginning cash balance, which is the ending cash balance of the previous month. Include income from open houses, trade fairs and grand openings Remember that the money from trade fair sales comes in the next month since they are charge sales Include your business contract each month and all your company expenses. You will want to how that you always have enough cash to cover your immediate expenses. Day 5 Financial Page, Side News box. I used the aside box for information concerning the Business Investment, Business Loan and Business Contract Obtain this information from the financial section of the business plan Save your file in your student folder. 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. I decided to use the ntml5 feature of drag and drop to make the Strengths, Weakneses, Threats, and Opportunities Page. Load in your template for html and save it in your student fole as SWOT.html Load in necessary style, StylePresentation.css and JavaScript files, jerry.js into Notepad++ Run the SWOT Page to see how the program works. Drag and Drop is used in many desktop applications, therefore, HTML5 needed the same functionality. 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 the idea is to drag the image of the Cupid one into the blank box of the same name. Once you let go of the mouse-drop, the information about that characteristic appears in the blank box. It seemed like a flashy way to present the SWOT information. <section id="strengthBlank"> <BR> <BR> <br> <BR> <BR> <br> <h1> STRENGTHS</h1> </section> <section id="strengthCupid"> <img id="facepic1" src="CupidStrengths.jpg" height=275 width=200> </section> Here is the coding that relates to the sections of the SWOT.html page. I created eight sections One for each with an image of Cupid and one that was blank. The Blank one contains the Words like Strengths or Weaknesses or Threats or Opportunities The sections with cupid use the image tag to load a picture of Cupid See Below for how they are coded in the style file, StylePresentation.css #strengthBlank{ float:left; width:200px; height:275px; margin:2px; border:3px solid blue; } #strengthCupid{ float:left; width:200px; height:275px; margin:2px; border:3px solid green; } #weakBlank{ float:left; width:200px; height:275px; margin:2px; border:3px solid blue; } #weakCupid{ float:left; width:200px; height:275px; margin:2px; border:3px solid green; } #opportunityBlank{ float:left; width:200px; height:275px; margin:2px; border:3px solid blue; } #opportunityCupid{ float:left; width:200px; height:275px; margin:2px; border:3px solid green; } #threatsBlank{ float:left; width:200px; height:275px; margin:2px; border:3px solid blue; } #threatsCupid{ float:left; width:200px; height:275px; margin:2px; border:3px solid green; } All of them are floated to the left. All have the same width and height They all have the same margins All the ones containing Cupid have solid green borders. The blank sections have solid blue borders The actual coding for the drag and drop function is in the jerry.js file. Listed below is that specific coding for the doFirst function. function doFirst(){ mypic = document.getElementById('facepic1'); mypic.addEventListener("dragstart", startDrag,false); mypic.addEventListener("dragend", endDrag,false); threatsBlank = document.getElementById('threatsBlank'); threatsBlank.addEventListener("dragenter",dragenter,false); threatsBlank.addEventListener("dragleave",dragleave,false); threatsBlank.addEventListener("dragover",function(e){e.preventDefault();},false); threatsBlank.addEventListener("drop",dropped,false); function endDrag(e){ pic = e.target; pic.style.visibility = 'hidden'; } function dragenter(e){ e.preventDefault(); threatsBlank.style.background = "SkyBlue"; threatsBlank.style.border = "3px solid red"; } function dragleave(e){ e.preventDefault(); threatsBlank.style.background = "White"; threatsBlank.style.border = "3px solid "; } function startDrag(e){ var code = '<img src="Cupid.jpg" height=275 width=200>'; e.dataTransfer.setData('Text', code); } function dropped(e){ e.preventDefault(); threatsBlank.innerHTML = e.dataTransfer.getData('Text'); threatsCupid.innerHTML =("Privacy issues. Lots of competition for teen market's discretionary income. Social networking sites as competitors. Everchanging technology. Free versions offered by competitors. Once competitors see our success in our market segment, they will want to compete. "); } } window.addEventListener("load", doFirst, false); } Explanation of how drag and drop works The script file came from TheNewBoston.org web site 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 Let's examine the coding for doFirst function. All functions are almost identical The function is called as soon as the page loads with the line window.addEventListener("load",doFirst,false); This line is at the bottom of the doFirst Function. just before the doSecond function. Next a variable called mypic is equated to document.getElementsById('facepic1'); 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 Each one of the facepic variables is slightly different. 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. 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. 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. 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. The line that states mypic.addEventListner("dragstart"),startdrag,false); fires as soon as the user starts to drag the image. dragstart is a keyword and cannot be changed 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. dragener is a reserved word. It will call a function by the name endDrag which we will create later. 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. 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. 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 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 The browser stores that information like X and Y position of the mouse. 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〉'; This line is how we store information about the picture e.dataTransfer.setData('Text', code); Drag End Function dragEnd function When we drop the image into the box to the left, we want to have the original image to disappear. First we assign e.target to a variable called pic. The endDrag function sets our picture's style for visibility to hidden so it can't be seen. Drag Enter Function 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. The next line sets the background to SkyBlue The next line sets a 3 pixel border around the box that is solid red. Drag Leave Function 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. The second line sets the background color of the strengthBlank box to white The third line puts a 3 pixel solid border around the box. It is the same color as before - green. Drag Over Function 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 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. Now we have to identify where are going to drop the image. It will be in the box called strengthBlank The rest of the line tells the browser to take the information that is stored and drop the text in the box. 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 The purpose of this page it to highlight our program and the way it works. It is inserts into Article 1 box. The header is "New Way to get a date Try Lovebytes" You might use it to insert a video commercial for your company. Again we are using the Camtasia Studio 8 program, which captures the screen and audio. The video is quite short and we have a poster above the controls when the video is not playing. Create a line in your html file to play the video. The footer identifies who wrote the software and their title. <video src="Lovebytes Presentation/Lovebytes Presentation.mp4" controls width="640" width="360" poster="LBLogo.jpg"> </video> Remember to play on the web using html5 the file needs to be in the MP4 format. As mentioned before, a video presentation can be done ahead of time. By creating a video of a demonstration there is no chance of the presenter messing up. Day 4 Lovebytes Questionnaire The header for this article2 is 〈Header〉 〈BR〉 〈h1>Lovebytes Survey Sample Questions〈/h1〉 〈h3>Questionnaire〈/h3〉 〈/Header〉 <Table cellspacing=0 cellpadding=0 width="100%" border = 1> <!-- Question 1 --> <TR> <TD Align=left><P>1. My idea of a romantic evening would be a walk on the beach.</TD> <TD align=left><P><input Type="Radio" Name="RomanticEvening" Value="AS" >Agree Strongly</TD> <TD align=feft><P><Input Type ="Radio" NAME="RomanticEvening" Value="AM" >Areee Moderately</TD> <TD align=feft><P><Input Type ="Radio" NAME="RomanticEvening" Value="DM" >Disareee Moderately</TD> <TD align=feft><P><Input Type ="Radio" NAME="RomanticEvening" Value="DS" >Disagree Strongly</TD> <TR> <TD Align=left><P>2. My favorite kind of movie is:</TD> <TD align=left><P><input Type="Radio" Name="Movie" Value="Drama" >Drama</TD> <TD align=feft><P><Input Type ="Radio" NAME="Movie" Value="Adventure" >Adventure</TD> <TD align=feft><P><Input Type ="Radio" NAME="Movie" Value="Comedy" >Comedy</TD> <TD align=feft><P><Input Type ="Radio" NAME="Movie" Value="ScienceFiction" >Science Fiction</TD> </TR> Article 2 is a sampling of the questionnaire that respondents fill out. It created in a true html format, so that you as the presenter can answer the questions. The questionnaire is put into a table. Respondents answer the questions by clicking on the radio button of their choice 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. You can choose what ever you want to go here. The header for this section is〈h1〉Lovebytes Survey Sample Questions〈/h1〉 〈h3〉Questionnaire〈/h3〉 The footer for this article is 〈Footer〉 〈p〉Questionnaire developed by LoveBytes.com〈/p〉〈/Footer〉 Day 5 Side New Section: Business Partners 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 Take a look at the Appendix Link The user enters numbers for terms of the loan and then hovers over a special button to make the calculations The showpay() function in the java script file is called and here is where the calculations are made. Load in your flexible box model html template and save it as Appendix.html in your student folder. Remember all the headings, format for the boxes, menu and navigation link are the same for all pages of your presentation. The JavaScript link is called janet.js. Make that adjustment in your html file. 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. 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. Below is a listing of the HTML file portion of the program that shows the loan program. <Section id="main_section"> <Article> <Header> <center><H1>Loan Amortization</h1> <H2>Business Loan</h2> </header> The results of this loan payment calculator are for comparison purposes only. They will be a close approximation of actual loan repayments if available at the terms entered, from a financial institution. This is being provided for you to plan your next loan application. To use, enter values for the Loan Amount, Number of Months for Loan, and the Interest Rate (e.g. 7.25), and click the Calculate button. <footer> <p>Loan Calculator Developed by Janet Belch, CFo</p> </Footer> <p> <BR> <center> <header> Find monthly payment for VEC Loan </header> <table width=60% border=0> <tr><th bgcolor="#aaaaaa" width=50%><font color=blue>Description</font></th> <th bgcolor="#aaaaaa" width=50%><font color=blue>Data Entry</font></th></tr> <tr><td bgcolor="#eeeee">Loan Amount</td><td bgcolor="#aaeeaa" align=right><input type=text name=loan size=10></td></tr> <tr><td bgcolor="#eeeee">Loan Length in Months</td><td bgcolor="#aaeeaa" align=right><input type=text name=months size=10></td></tr> <tr><td bgcolor="#eeeee">Interest Rate</td><td bgcolor="#aaeeaa" align=right><input type=text name=rate size=10></td></tr> <tr> <TD align=right><em>Calculated</em> <input type=text name=pay size=15></td></tr> </table> </form> <font size=1>Enter only numeric values (no commas), using decimal points where needed.<br> Non-numeric values will cause errors.</font> </center> </Article> <div id="box"> <!--<p id="text">Loan Amortization</p>--> <input type="button style = visibility:hidden" value="Loan Amortization" onMouseOut='showpay()'/> </br></p> <BR><BR><BR><BR><BR><BR><BR> <Footer> <rt>Button designed by Jerry</rt> </Footer> </Article> </section> The data entry portion of the calculator program is formatted in a table that utilizes 60% of the screen. The table has no border. Table Headings background color is gray The boxes where you enter the data are white. The box is our button. We have used this type of html5 button before. When it is clicked on it goes to the Java script file called janet.js and executes the showpay() function. 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. It returns the value of this function back to the HTML file as the word pay. 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 The part of the Appendix page is in the Aside_news box. The first two are excellent references for HTML5, CSS and JavaScript. The third link is for your company's business contract. 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. Spend the next two days checking out all links, spelling and grammar. Make certain all the JavaScript works and delivers the right answers and results To do well giving a presentation in front of judges, please practice your presentation in front of different groups. Each Department vice president should explain their portion of the presentation. 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
Day 1: HTML5 Features You can define HTML5 family as a new mark up language, Cascading Style Sheets 3 and JavaScript. HTML5 includes all the older HTML tags plus an array of new tags designed to build better and more interesting web pages. Currently regular HTML cannot play audio or video, do animations, or store data without a plug in like Flash or QuickTime. 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. 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. The business plan for Lovebytes is on Janet Belch's web site a Step By step lesson. Take a few minutes to familiarize yourself with this business plan, as this is our focus here. Day 2: HTML5 flexible box model. 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. The way they should look involves, fonts, colors, the way lists are displayed, the way headers and footers are formatted, etc. All the style sheets in this lesson are external 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. <!doc type html> <html lang="en"> <Head> <Meta char set="utf-8"/> <Title>Flexible Box Model Template</Title> <Link Rel="StyleSheet" href="Style.css"> </head> <body> <div id="big_wrapper"> <Header id="top_header"> <H1>Welcome</H1> </Header> <Nav id="top_menu"> <ul> <li>Home <li>About <li>Our Products <li>Contact us </ul> </Nav> <div id="new_div"> <Section id="main_section"> <Article> <Header> <hgroup> <h1>Title of Article 1</h1> <h2>Subtitle of Article 1</h2> </hgroup> </Header> <P>This is the beginning of the article</p> <Footer> <p>Written by </p> </Footer> </Article> <Article> <Header> <hgroup> <h1>Title of Article 2</h1> <h2>Subtitle of Article 2</h2> </hgroup> </Header> <P>This is the beginning of the second article</p> <Footer> <p>Written by </p> </Footer> </Article> </Section> <Aside id="side_news"> <H3>Headline of Side News</h3> </Aside> </div> <Footer id="the_footer"> <p>Copyright 2013</p> </Footer> </div> </Body> </html> Above in the scrollable box is the source code that creates the flexible box model. 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. The code in the scrollable box makes the flexible box model, when it is run. 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. Let's examine the coding for the flexible box model. 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 The second line informs the browser that the language is English The third line tells the browser that this is the head tag and which character set to use In the early days of the web the ASCII standard character set was used. Today that is quit limited. 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. The preferred encoding for e-mail and web pages today is UTF-8 which stands for Unicode Transformation Function The fourth line contains the meta tag information 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. 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. We will examine the Style.css file a little bit later. Line 7 is the ending head tag 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. 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 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. The next line ends the header, 〈/Header〉 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. The next lines layout an unordered list, the names of the different pages, in the web site: Home, About, Our Products, Contact us. This will contain the links to your other pages. Be thinking what these might be for your company. Notice the beginning and ending NAV tags. This word is a reserved word in HTML5 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. We give it and ID so we can reference this tag directly in the CSS file. The other elements in the sectioning category are 〈section〉, 〈article〉, and 〈aside〉, 〈hgroup〉. All these tags are meant to section off and group elements. 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. Be thinking about what you want to use for the two articles. Turn in these ideas to your instructor along with your progress Log for the week. 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. The 〈hgroup〉 is used to group headings The next major section of the web page is the 〈aside〉 The 〈aside〉 is used to define a section of the page that has content that is related, but not critical to the main content 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. *{ margin:0px; padding: 0px; } h1{ font: bold 20px Tahoma; color:#000000; } h2{ font: bold 18px Times New Roman; color:#800080; } h3{ font: bold 17px Comic Sans; color:#ff0000; } header,section, footer, aside, nav, article, hgroup { display:block; } body{ width=100%; border:5px solid orange; display:-webkit-box; -webkit-box-pack:center; } #big_wrapper{ max-width:1000px; margin: 20px 0px; display:-webkit-box; background:#ffffff; -webkit-box-orient:vertical; -webkit-box-flex:1; } #top_header{ background:yellow; border:3px solid black; padding:20px; } #top_menu{ border: 1px solid red; background:blue; color:white; } #top_menu li{ display:inline-block; list-style:none; padding:5px; font:bold 14px tahoma; } #new_div{ display:-webkit-box; -webkit-box-orient:horizontal; } #main_section{ border:1px solid blue; -webkit-box-flex:1; margin: 1px; padding:20px; } #side_news{ border:1px solid red; width:220px; margin:20px 0px; padding:30px; background:#afeeee; } #the_footer{ text-align:center; padding:20px; border-top:2px solid green; } The first lines of code are a housekeeping function to set margins and padding to 0. Next we set the way we want our headlines to appear: font, size, color, and style. 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. After the attribute, like text ,height, width, background, the colon (:) is like an equal sign. 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 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 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. The code tells the browser to display them as block elements. That means each one under the other one. 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. The border is set to a 5px solid orange line around it. 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. You will not want to change these lines. The WebKit reference is what makes this a flexible box model The line "-webkit-box-pack:center;": centers the web site. Now let's look at what the big wrapper code does. 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. The display parameter using -webkit-box helps adjust the size of the display. The code that refers to orienting the boxes or sections of the web page in a vertical fashion. -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. The top header characteristics are yellow background with a 3 pixel solid black border with 20 pixels of padding. The top menu box that contains the links to other pages has a one pixel solid red border, is blue with white text. 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. 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. The first div tag oriented things vertical, in the case of the new div we want to position them in a horizontal manner. 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. 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. 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. Click on the link for the flexible box model in this tutorial. Now lets shrink the web site 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? 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. Run Notepad++ Go to file on the menu bar. Click Open 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. 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". Load the Style.css file and SAVE it AS a different name as well. Make sure that it has a ".css extension" Find the line that refers to the #top_header. Change the background color to gray or #808080 Save the file 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. Save the file after your make the change click on your html file. This is the one we want to launch, not the css file Make sure the html tab file is highlighted Click Run on the very top menu bar and select Launch in Chrome. The top header box should now be Gray instead of yellow. 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 Red - Energy, passion, action, strong, masculine. Orange - Social communication and optimism Pink - Love, unconditional love, nurturing Yellow - Optimistic, cheerful Green - Balance and growth Blue - Color of trust and peace. Indigo - Intuition Purple - Imaginative, seek meaning of life, spiritual fulfillment Turquoise - Communication, clarity of mind. Magenta - Universal harmony and emotional balance Brown - Down-to-earth, security, material wealth Gray - Compromise, neither black or white. Silver - Feminine, energy Gold - Success, achievement, lucky, quality White- Complete, pure, color of perfection, purity, innocence Black- Secretive, hidden, unknown, mystery The following list examines the psychology of colors Adolescents like complex colors. They are used to playing video games with computer graphics Girls like shades of purple and pink. AS they get older they also like black Boys favor blue, turquoise, green, yellow, black, white, gray and silver. Serious business colors include darker colors like dark blue, dark green, indigo, black and gray Casual business colors are light hearted, bright red, orange, yellow, bright green, bright blue, pink and purple Some color preferences are climate based. For example, California favors bright and warm colors Eastern part of country prefers colder, cool colors. Competitors like Match.com and E-harmony.com used gray, black and blue colors. Their target market, however, is quite different than Lovebytes' market segment. The following list examines color palettes You want colors that go together and are pleasing to the eye. Here are a few palettes Palette one #404040 - Dark gray #6dbdd6 - Light blue #b71427 - Dark red #ffe658 - Light yellow Palette two #558c89 - Light teal #74afad - Blue gray #d9853b - Light brown #ececea - Light gray Palette three. You decide what colors are in palette three. Turn answers in with progress log #191919 #df3d82 #ffffff Palette four. You decide what colors these represent. Turn in you answers in with your progress log, #585858 #118c4e #c1e1a6 #ff9009 You should also examine the fonts used. Make sure that they are readable. I know there are so many to choose from. Try to find those that match your company image. Finalize your cascading style sheet file and save it with the colors and fonts you want. 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.
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.
The rest of the tags layout the sections of the web page. div, nav, section, article aside, etc are reserved words.
Now we examine the cascading style sheet code. It appears in the scrollable box below.
*{ margin:0px; padding: 0px; } h1{ font: bold 20px Tahoma; color:#000000; } h2{ font: bold 18px Times New Roman; color:#800080; } h3{ font: bold 17px Comic Sans; color:#ff0000; } header,section, footer, aside, nav, article, hgroup { display:block; } body{ width=100%; border:5px solid orange; display:-webkit-box; -webkit-box-pack:center; } #big_wrapper{ max-width:1000px; margin: 20px 0px; display:-webkit-box; background:#ffffff; -webkit-box-orient:vertical; -webkit-box-flex:1; } #top_header{ background:yellow; border:3px solid black; padding:20px; } #top_menu{ border: 1px solid red; background:blue; color:white; } #top_menu li{ display:inline-block; list-style:none; padding:5px; font:bold 14px tahoma; } #new_div{ display:-webkit-box; -webkit-box-orient:horizontal; } #main_section{ border:1px solid blue; -webkit-box-flex:1; margin: 1px; padding:20px; } #side_news{ border:1px solid red; width:220px; margin:20px 0px; padding:30px; background:#afeeee; } #the_footer{ text-align:center; padding:20px; border-top:2px solid green; }
Day 1: Matching presentation template with business plan elements. Making the navigation bar links. 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. Finalize what these other pages should be called and how many of them you need for this project. 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. 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. Open your html file in Notepad++ if it is not already list as a tab In the 〈Header="top_header"〉 Replace the word welcome with your company's name We need to add a logo here and any slogan that we use in our company. 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 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. Logos can be jpeg, gifs or bitmaps Use the height and width parameters to adjust the size of our picture <h1>Lovebytes Computer Dating Service</h1> <img src="New Logo.jpg" height=100 width=175 border =3> <Center><h2>Not Ready for Mr. Right or Miss Right. How about Mr. or Miss Right <u>Now?</u></h2></center> Day 2: Deciding what information to put on your first or home page. What do you want to be on your first page? Think of three different things. Remember the Article sections are the main part of the presentation and the side news is related information This is the first page of our presentation, so you want to capture their attention. It must load quickly, so no large graphics, etc. Open your templae html file in Notepa++ Use save As Index.html to save a working copy into your student folder. 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. 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. The side news box is a testimonial from a satisfied subscriber. Below is what the index.html or home page looks like in code. The style sheet file is called StylePresentation.css <!DOCTYPE html> <html lang="en"> <Head> <Meta char set="utf-8"/> <Title>Lovebytes Index</Title> <Link Rel="StyleSheet" href="StylePresentation.css"> </head> <body> <div id="big_wrapper"> <Header id="top_header"> <h1>Lovebytes Computer Dating Service</h1> <img src="New Logo.jpg" height=100 width=175 border =3> <Center><h2>Not Ready for Mr. Right or Miss Right. How about Mr. or Miss Right <u>Now?</u></h2></center> </Header> <Nav id="top_menu"> <ul> <LI><A href="index.html">Home</A> <li><A href="Introduction.html">Introduction</A> <li><A href="Management.html">Management</A> <li><A href="Marketing.html">Marketing</A> <LI><A href="Financial.html">Financial</A> <LI><A href="SWOT.html">SWOT</A> <LI><A href="LoveVideo.html">LoveBytes Video</A> <li><A href="Appendix.html">Appendix</A> </ul> </Nav> <div id="new_div"> <Section id="main_section"> <Article> <Header> <h1>A new way to get a date</h1> <h2>Try Lovebytes.com</h2> </Header> <P>A new computer dating service has come to town, Its called Lovebytes. A byte is a unit of digital information that consists of eight bits. Since a computer is used to find love, thus the name Lovebytes. It is not like any other dating service around. It is meant just for high school and college students. We help you find a date - not the forever kind, just one for right now. Most people believe that young people have no difficulty finding a date. Nothing could be further than from the truth according to CEO, Jerry Belch. He says that there are so many things competing for our time that dating just takes the back seat. No pun intended. </p> <Footer> <P>Written by Sherry Bell, <P>Editor of the Richmond High School Gazette.</p> </Footer> </Article> <Article> <Header> <BR> <h1>Lovebytes Dating Profile</h1> <h3>Respondent Janet Coy</h3> </Header> <P> <Textarea rows=50 cols=50 readonly> DATE POTENTIAL Janet is very romantic. She likes action films with car crashes, violence and lots of fights. She is not much of a sports fan and is not really thrilled with the prospect of spening her Sundays watch football. Miss Coy would enjoy staying at a cabin on the beach for a weekend with you. She wants to keep a pretty tight rein on your time. This potential date won't go near a surfboard since she may not be able to swim. Your prospective date is somewhat conservative when it comes to money spend on you while on a date. There is a good chance that your first ate might be a school dance. You have a good chance of being kissed goodnight on your first date. PERSONALITY This respondent would like to vacation at the beach. She doesn't get going until the afternoon. She has an appetite for many different types of food. If a free trip were won, she would like to see Europe.Janet enjoys Mexican food and it is a favorite. She likes to watch football. She is somewhat demanding when talking with people in stores and restaurants. Janet believes that most people should own a car. Janet believes that being grounded is not quite as severe as death. Miss Coy would have a very difficult time living without a cell phone. Janet believes that social media are an integral part of life. The latest fashions and accessories are not that important to her. JOB/CAREER Respondent is not very concerned about the type of work that she does, since weekends are more important. Janet believes that, in most cases, a husband and wife must work outside the home to make it financially. Miss Coy would like to get a four-year college degree. She believes that a job in which you help others is important. CHARACTER Respondent believes that making a lot of money is a moderately important goal. She is a pretty religious person. She is moderately sensitive toa hint of criticism and agrees that in a relationship, you should please yourself first, then the other person. She needs a moderate degree of emotional support and goes out of her way to avoid disappointing anyone. She is somewhat mindful of people's feelings and will not just say anything that needs to be said. Janet does not put things off on a regular basis. Careful, Miss Coy does not like to be crossed. Consider that she is pretty dangerous. She does not want to lose your friendship, but believes that it it not the end of the world. Sometimes Janet can simulate emotions she does not feel. </p> <Footer> <p>Profile generated by LoveBytes.exe</p> </Footer> </Article> </Section> <Aside id="side_news"> <H4>Testimonial</h4> I recently broke up with my boyfriend, just before the senior prom. I had already bought my dress and arranged to double date with my best friend. Lovebytes made it possible for me to go to my prom with one of the most popular, most interesting boys I have ever met. We had so much in common and lots to talk about. We are planning on seeing each other again. I would recommend this service to anyone in high school or college. Thank you to Lovebytes.com for making my senior year a great success. Sincerely Jessica S </Aside> </div> <Footer id="the_footer"> <Center> <p>Copyright© 2013 Lovebytes Incorporated Santa Barbara, California </p> </Footer> </div> </Body> </html> Now you complete your home page with your information. 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. 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 Look at the business plan rubric and my Introduction.html page in Notepad++ My Introduction page contains The same heading, logo, slogan, colors and fonts as the first page. An Executive summary An audio player Look over the code and the finished product of my page. 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. 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. 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. Substitute your information for the articles and side news Notice how the audio sound track is played directly with HTML5. It is a snap. It only takes a few lines. Make sure that you save your audio file in the same folder as the rest of your presentation file. <audio controls height= "100" width="100"> <source src="love.mp3" type="audio/mpeg"> <source src="love.ogg" type audio/ogg"> Your browser does not support the audio element. </audio> The first line sets the size of the audio player controls. The second line names the song - love.mp3 and tells it that it is an audio mpeg file The next line is for a music file in the .ogg format MP3 is the most commonly used format. If your song is not in the mp3 format, you can convert it to Mp3 using the I-tunes program The next line is one you hope your users do not see, They will only see it if they cannot play the audio file The last line ends the audio tag. Day 4 Introductory page:Business Object and Mission statement The Description - Create your company description put in the side news box Business Objectives. Create your own and put them in the Article 2 section Mission Statement- Write your own and put in the side news box. Save your html file and launch it in Chrome to see how it looks. 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 Open your html template file, Save it in your own folder or workspace and call it Management.html Make sure that your cascading Style Sheet file, StylePresentation.css, is also saved in the same folder. The management page consists of an organizational chart, job descriptions for our staff, Planning Strategies, and audio presentation. For Day 5 we will just look at how to do the organizational chart using the html5 canvas element and the Chart.js file. The new HTML 5 concepts introduced include the Canvas element, which was used to construct the organizational chart Open Management.html in Notepad++ There a few new things to learn here. In addition to a css file and html file we will add an external JavaScript file. 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. <Link Rel="StyleSheet" href="StylePresentation.css"> <script src = "Chart.js"> </script> </head> <body> Also locate the lines that relate to the Canvas Element in the HTML file. They are in Article one box. <canvas id="canvas" height="200" width="900"> Hopefully you do not see this. Get Google Chrome as your Browser </canvas> 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.. This is the area set aside to draw things in. Our canvas is 200 pixels high and 900 wide, Here is what the Chart.js file looks like function doFirst(){ var x = document.getElementById('canvas'); canvas = x.getContext('2d'); //canvas.beginPath(); canvas.moveTo(10,20); canvas.lineTo(249,20); canvas.stroke(); canvas.strokeRect(250,5,100,25); canvas.fillText('Chief Exe Officer',255,22); canvas.moveTo(350,20); canvas.lineTo(550,20); canvas.stroke(); //line down to first vp canvas.moveTo(40,20); canvas.lineTo(40,40); canvas.stroke(); // line down for second vp canvas.moveTo(180,20); canvas.lineTo(180,40); canvas.stroke(); // line down for third vp canvas.moveTo(420,20); canvas.lineTo(420,40); canvas.stroke(); // line down for fourth vp canvas.moveTo(520,20); canvas.lineTo(520,40); canvas.stroke(); //first vp box canvas.strokeRect(10,40,60,20); canvas.fillText('CFO',20,52); // Vp of It canvas.moveTo(150,40); canvas.lineTo(150,40); canvas.stroke(); canvas.strokeRect(150,40,60,20); canvas.fillText('IT VP',155,52); //administrative assistant canvas.moveTo(300,30); canvas.lineTo(300,40); canvas.stroke(); canvas.strokeRect(270,40,60,20); canvas.fillText('Adm Assist',275,55); // vp of sales canvas.strokeRect(390,40,60,20); canvas.fillText('VP Sales',395,55); // vp of human resources canvas.strokeRect(490,40,60,20); canvas.fillText('VP of HR',495,55); // payroll clerk line canvas.moveTo(10,80); canvas.lineTo(10,60); canvas.stroke(); // Ar Clerk canvas.moveTo(40,80); canvas.lineTo(40,60); canvas.stroke(); // banker Gl clerk canvas.moveTo(70,80); canvas.lineTo(70,60); canvas.stroke(); // web master line down canvas.moveTo(180,80); canvas.lineTo(180,60); canvas.stroke(); //sales clerk 1 - lines down canvas.moveTo(390,80); canvas.lineTo(390,60); canvas.stroke(); //sales clerk 2 - lines down canvas.moveTo(410,80); canvas.lineTo(410,60); canvas.stroke(); //sales clerk 3 - lines down canvas.moveTo(430,80); canvas.lineTo(430,60); canvas.stroke(); //sales clerk 4 - lines down canvas.moveTo(450,80); canvas.lineTo(450,60); canvas.stroke(); // payroll clerk box canvas.strokeRect(2,80,20,20); canvas.fillText('P',5,95); // AR clerk box canvas.strokeRect(30,80,20,20); canvas.fillText('AR',32,95); // banker clerk box canvas.strokeRect(60,80,20,20); canvas.fillText('B',66,95); // web master box canvas.strokeRect(150,80,60,20); canvas.fillText('Web Master', 152,93); // sales clerk 1 box canvas.strokeRect(380,80,20,20); canvas.fillText('S1',382,95); // sales clerk 2 box canvas.strokeRect(400,80,20,20); canvas.fillText('S2',405,95); // sales clerk 3 box canvas.strokeRect(420,80,20,20); canvas.fillText('S3',423,95); // sales clerk 4 box canvas.strokeRect(440,80,20,20); canvas.fillText('S4',443,95); // line for web 1 canvas.moveTo(150,100); canvas.lineTo(150,120); canvas.stroke(); // line for web 2 canvas.moveTo(170,100); canvas.lineTo(170,120); canvas.stroke(); // line for web 3 canvas.moveTo(190,100); canvas.lineTo(190,120); canvas.stroke(); // line for web 4 canvas.moveTo(210,100); canvas.lineTo(210,120); canvas.stroke(); // box for web 1 canvas.strokeRect(140,120,20,20); canvas.fillText('W1',142,132); // box for web 2 canvas.strokeRect(160,120,20,20); canvas.fillText('W2',162,132); // box for web 3 canvas.strokeRect(180,120,20,20); canvas.fillText('W3',182,132); // box for web 4 canvas.strokeRect(200,120,20,20); canvas.fillText('W4',202,132); } window.addEventListener("load", doFirst,false); We now need to explain how to draw the organizational chart on our canvas using the Chart,js file instructions. Do not panic. It is not as complicated as it seems. The top three lines begin a JavasSript function called doFirst Next we create a variable called X and set it equal the the canvas element in the html file The third line tells it to behave in a two dimensional way. 3D is on the way in HTML5 Even though there are many lines in between these, the last line should be added now. The last line tells the browser to run the doFirst Java Script function as soon as the page loads. The lines in the middle are the ones that map out how to draw the chart. We have a canvas that is 200 pixels high and 900 pixels wide. Our chart is much wider than it is tall. 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 If this chart matches up with your company organization, feel free to just use this file You can modify certain lines if you wish. 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 Today we are going to build an job Description table into our presentation on the Management.html page. Click on the line below and examine the Job Description Chart. The table will be included in Article 1 just below the organization chart Our table consists of 4 columns: Name, Position, Salary, Duties There 21 Rows. One for each employee Management Page To see the code that makes our table. proceed as follows With the Management.html page on your screen, Right-click and select view page Source. You can then see the coding of the page. Let's see how the table was constructed. The next line begins our table. 〈Table cellpadding="15" cellspacing="5" border=".3"〉 The next line begins a new row of the table 〈TR〉 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. 〈TD〉:Staff Member's Name〈/TD〉〈TD〉Position〈/TD〉〈TD〉Salary〈/TD〉〈TD〈Duties〉/TD〉 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 〈/TR〉 end the row of the table. 〈rt〉 stand for regular text. Any time the browser sees this tag, the text is formatted as described in the .css file. 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. When the user hovers over the duty box, they will be able to see the job description for that employee. Follow the format of table substituting your own company information. Day 2 : Planning Strategy to be put into an audio presentation. Today we are going to make an audio recording of our Planning Strategy in our Business Plan Presentation software. This part of the presentation goes into Article two box along with the job descriptions table. Get a written copy of the planning strategy from your written business plan. This will be your script Next plug in your microphone Go to the Sound Recorder program. This comes with all windows programs. It is located in the Accessories group Click START Select All Programs Accessories Folder Sound Recorder Click Start Recording button Read Your script. When finished, click Stop Recording The SaveDialog Box comes up Select folder where you want to store the file Type in file name and then Save File The file extension will be .wma, which stands for Windows Media Audio For this file to work properly in our html document, we need to convert it from wma to mp3 There a number of audio converter programs available. 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. 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" <audio controls> <source src="planning.mp3" type="audio/mp3"> <source src="planning.ogg" type audio/ogg"> Your browser does not support the audio element. </audio> Save your html file. Try out the audio player. Day 3 Day 3: Management Page, Aside Elements - Directing and Controlling Now it is time to work on the side news box. Check out Lovebytes Management page AS you can see there two paragraphs . One is about Directing and the other about Controlling 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. Load your html template. Save it and all it Marketing.html in your student working folder We will be adding information to each of the box elements Get out your business plan document and turn to the marketing section It is in the marketing section of the business plan that you will draw out the information needed for the presentation. In the Lovebytes Marketing plan we have a service business. Marketing Page for Lovebytes We want to explain the product or service and perhaps show a picture. The above information should go into Article 1 box Our computer dating company also has a deluxe package and it is outlined. Day 5:Placement, Price and Promotion The Placement ,Price and Promotion are laid out in tabular form. See box below for the code. <Table border=3 cellpading=5 cellspacing=5> <TR> <TD><h2>Placement</h2><img src="pv.ico" height=12 width=12 Title="Our placement used to get our service to the consumer is via the Internet. That is our only channel of distribution. The compiling of data, creating the files, finding the matches and profiles will be handled at our headquarters. No middlemen are needed in our venture thus saving costs." </TD><TD><h2>Price</h2><img src="pv.ico" height=12 width=12 Title="Price will be competitive. For example, Match.com charges $16.99 per month for six months or $34.95 for one month. Other sites have much the same pricing structure. Lovebytes.com will charge $16.95/month for the six months, or $32.95 for a one month's subscription. We will have trade show discounts and special promotions during December, March and April. Clients who introduce Lovebytes to their friends will receive a 5% discount." </TD><TD><h2>Promotion</h2><img src="pv.ico" height=12 width=12 Title="Promotion will be accomplished in a couple of ways. The web site will be listed in the Virtual Enterprise shopping mall and meta tag information will be sent to the major search engines. The questionnaire will be attached to the web page. We will create ads that run on the Internet, tied to other Virtual Enterprise sites. Email ads will be created and sent to all Virtual Enterprise companies in California. Special flyers with trade show deals will be circulated during each of the trade shows. We will run an ad in our school paper and have a spot on the school's TV station feauring popular students in school showing how cool it is to use Lovebytes to get a date for a school activity. We will attempt to obtain company to company contracts with other VE companies. "</TD> </TR> </Table> Obviously you could present this information in many ways. I chose a table. See instructions above for how to put data into a table. Remember beginning and ending table tags with information about padding and spacing and borders Table rows beginning and ending tags Table data with is the information that goes into each cell. 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. Inside Article 1 box we are going to do some special things to make the Target Market and Market Segment, real attention getting. Make sure that your external links are to Main.cs an Chart2.js 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. Try them out by running and then launching Marketing.html Just pass your mouse over the target market button an see what happens. Then move the mouse off the button. What Happens? Look at the coding of the Marketing.html page We are going to set up two divisions. One for target market the other for market segment 〈div id="targetMarket"〉 is the first division. The next we type is〈P id="text"〉 Now key in the text defining your company target market. After keying in the text use the ending division tag, 〈Div/〉 Repeat the above procedure of the market segment. Now let's turn our attention to the Main3.css file to see how we can animate them Scroll down the file until you see the coding to format the targetMarket division #targetMarket{ display:block; margin:150px auto; color:#ffe4e1; -webkit-border-radius: 10px; opacity:0.4; background:magenta; width:120px; height:25px; -webkit-transition:-webkit-transform 2s,opacity 2s, background 2s, width 2s, height 2s; } #targetMarket:hover{ -webkit-transform: rotate(360deg); opacity:2.5; background:#5959ab; width:450px; height:390px; } Notice that the descriptions start out with the number sign, #, followed by the Id name, followed by a left-facing curly brace. The parameters for the button are listed below, followed by a right-facing curly brace. We want to display the button a a block. We set he margin at 250 pixels and auto-centers the button. We set the color of the button next. -webkit-border-radius;10px; makes rounded corners for the button Opacity refers to transparency. Now we set the background color, width and height before the transformation. 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 Look at the coding for the targetMarket button to see how to animate or move it We first identify the division segment, next the hover properties. We want to rotate the button 360 degrees. We change the opacity, background color, width and height. Experiment with these properties in your css file until you get the desired effect. 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 I used article two box to create an graphical analysis of our break-even point The vertical axis was used for expenses The horizontal axis, for sales Lovebytes needs to sell almost3,000 dating packages at $34.95 to covers its nearly $100,000 of expenses. Get the information you need to prepare a break even chart form your Accounting Department. I suggest that you draw it out first on a piece of paper before coding the coordinates for the lines and text The procedure for doing this chart is just like when we created the organizational chart. The coding for the beak even analysis can be found in Chart2.js Make sure that your html file calls that link. Check lines inside script tags. Here is the information contained in the Chart2.css fie function doFirst(){ var x = document.getElementById('canvas'); canvas = x.getContext('2d'); // vertical axis canvas.moveTo(50,20); canvas.lineTo(50,500); canvas.stroke(); //horizontal axis canvas.moveTo(50,500); canvas.lineTo(500,500); canvas.stroke(); //$100,000 sales canvas.fillText('Expenses',0,10); canvas.fillText('$100,000' , 1,20); //$75,000 canvas.fillText('$75,000',2,125); //$50,000 canvas.fillText('$50,000',2,250); //$25,000 canvas.fillText('$25,000',2,375); // $0.00 canvas.fillText('$0.00',2,500); //0 on horizontal axis canvas.fillText('0',50,520); canvas.fillText('Packages Sold',100,530); //1500 packages canvas.fillText('1,500',250,520); // 3000 packages canvas.fillText('3,000',472,520); // line from 0,0 to top canvas.moveTo(50,500); canvas.lineTo(500,0); canvas.stroke(); // other line canvas.moveTo(50,40); canvas.lineTo(600,40); canvas.stroke(); //profit area canvas.fillText('Profit Area',500,30); //loss area canvas.fillStyle='rgb(255,0,0)'; canvas.strokeStyle='rgb(0,111,174)'; canvas.fillText('Loss Area',200,160); canvas.stroke(); // data section canvas.fillText('Breakeven dollars = $97,742',50,600); canvas.fillText('Dating Package Cost = $32.95',50,610); canvas.fillText('Dating Package That Need to be Sold = 2,966',50,620); } window.addEventListener("load", doFirst,false); Day 4 and 5 Marketing Industry Analysis We are going to use the side news box for the industry analysis information Obtain that information from your business plan. It should include identification of industry threats and comparative national trends. Include industry strengths and threats Compare company vision and experiences against averages of similar operations. 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 Use the financial section Financial Section of your business plan for the following part of the presentation. Load your html template file, make modifications and save it calling it Financial.html in your student folder. StylePresentation.css and Chart2.js files are also needed. Make sure that you link them to your html file. There are a number of ways you can show a balance sheet, income statement in your presentation I used Article 1 for the video. 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 janetbelch.com There are a number of screen capture programs that you can use to create a video. I used an excellent, easy to use program from TechSmith called Camtasia. While making the video,I recorded the screens first as I demonstrated the program and added the audio track afterwords. 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. 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 <video src="General Ledger/General Ledger.mp4" controls width="640" width="360" poster="LBLogo.jpg"> </video> 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 In the example above the movie, General Ledger.mp4, is in a folder by the same name. The size of the controls to play the video are 640 by 360 pixels. The poster tag allows you to put a picture above the controls when the video is not playing. I just used a jpeg of Lovebytes logo. Day 3 and 4 Financial page, Cash Flow Article two box was used for this next section. I used Microsoft's Excel spreadsheet program for the Cash Flow Estimate 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 Explain where you got your beginning cash balance. First column which should include cash from investment and business loan. For other months, November through April, show beginning cash balance, which is the ending cash balance of the previous month. Include income from open houses, trade fairs and grand openings Remember that the money from trade fair sales comes in the next month since they are charge sales Include your business contract each month and all your company expenses. You will want to how that you always have enough cash to cover your immediate expenses. Day 5 Financial Page, Side News box. I used the aside box for information concerning the Business Investment, Business Loan and Business Contract Obtain this information from the financial section of the business plan Save your file in your student folder. 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. I decided to use the ntml5 feature of drag and drop to make the Strengths, Weakneses, Threats, and Opportunities Page. Load in your template for html and save it in your student fole as SWOT.html Load in necessary style, StylePresentation.css and JavaScript files, jerry.js into Notepad++ Run the SWOT Page to see how the program works. Drag and Drop is used in many desktop applications, therefore, HTML5 needed the same functionality. 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 the idea is to drag the image of the Cupid one into the blank box of the same name. Once you let go of the mouse-drop, the information about that characteristic appears in the blank box. It seemed like a flashy way to present the SWOT information. <section id="strengthBlank"> <BR> <BR> <br> <BR> <BR> <br> <h1> STRENGTHS</h1> </section> <section id="strengthCupid"> <img id="facepic1" src="CupidStrengths.jpg" height=275 width=200> </section> Here is the coding that relates to the sections of the SWOT.html page. I created eight sections One for each with an image of Cupid and one that was blank. The Blank one contains the Words like Strengths or Weaknesses or Threats or Opportunities The sections with cupid use the image tag to load a picture of Cupid See Below for how they are coded in the style file, StylePresentation.css #strengthBlank{ float:left; width:200px; height:275px; margin:2px; border:3px solid blue; } #strengthCupid{ float:left; width:200px; height:275px; margin:2px; border:3px solid green; } #weakBlank{ float:left; width:200px; height:275px; margin:2px; border:3px solid blue; } #weakCupid{ float:left; width:200px; height:275px; margin:2px; border:3px solid green; } #opportunityBlank{ float:left; width:200px; height:275px; margin:2px; border:3px solid blue; } #opportunityCupid{ float:left; width:200px; height:275px; margin:2px; border:3px solid green; } #threatsBlank{ float:left; width:200px; height:275px; margin:2px; border:3px solid blue; } #threatsCupid{ float:left; width:200px; height:275px; margin:2px; border:3px solid green; } All of them are floated to the left. All have the same width and height They all have the same margins All the ones containing Cupid have solid green borders. The blank sections have solid blue borders The actual coding for the drag and drop function is in the jerry.js file. Listed below is that specific coding for the doFirst function. function doFirst(){ mypic = document.getElementById('facepic1'); mypic.addEventListener("dragstart", startDrag,false); mypic.addEventListener("dragend", endDrag,false); threatsBlank = document.getElementById('threatsBlank'); threatsBlank.addEventListener("dragenter",dragenter,false); threatsBlank.addEventListener("dragleave",dragleave,false); threatsBlank.addEventListener("dragover",function(e){e.preventDefault();},false); threatsBlank.addEventListener("drop",dropped,false); function endDrag(e){ pic = e.target; pic.style.visibility = 'hidden'; } function dragenter(e){ e.preventDefault(); threatsBlank.style.background = "SkyBlue"; threatsBlank.style.border = "3px solid red"; } function dragleave(e){ e.preventDefault(); threatsBlank.style.background = "White"; threatsBlank.style.border = "3px solid "; } function startDrag(e){ var code = '<img src="Cupid.jpg" height=275 width=200>'; e.dataTransfer.setData('Text', code); } function dropped(e){ e.preventDefault(); threatsBlank.innerHTML = e.dataTransfer.getData('Text'); threatsCupid.innerHTML =("Privacy issues. Lots of competition for teen market's discretionary income. Social networking sites as competitors. Everchanging technology. Free versions offered by competitors. Once competitors see our success in our market segment, they will want to compete. "); } } window.addEventListener("load", doFirst, false); } Explanation of how drag and drop works The script file came from TheNewBoston.org web site 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 Let's examine the coding for doFirst function. All functions are almost identical The function is called as soon as the page loads with the line window.addEventListener("load",doFirst,false); This line is at the bottom of the doFirst Function. just before the doSecond function. Next a variable called mypic is equated to document.getElementsById('facepic1'); 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 Each one of the facepic variables is slightly different. 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. 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. 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. 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. The line that states mypic.addEventListner("dragstart"),startdrag,false); fires as soon as the user starts to drag the image. dragstart is a keyword and cannot be changed 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. dragener is a reserved word. It will call a function by the name endDrag which we will create later. 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. 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. 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 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 The browser stores that information like X and Y position of the mouse. 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〉'; This line is how we store information about the picture e.dataTransfer.setData('Text', code); Drag End Function dragEnd function When we drop the image into the box to the left, we want to have the original image to disappear. First we assign e.target to a variable called pic. The endDrag function sets our picture's style for visibility to hidden so it can't be seen. Drag Enter Function 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. The next line sets the background to SkyBlue The next line sets a 3 pixel border around the box that is solid red. Drag Leave Function 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. The second line sets the background color of the strengthBlank box to white The third line puts a 3 pixel solid border around the box. It is the same color as before - green. Drag Over Function 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 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. Now we have to identify where are going to drop the image. It will be in the box called strengthBlank The rest of the line tells the browser to take the information that is stored and drop the text in the box. 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 The purpose of this page it to highlight our program and the way it works. It is inserts into Article 1 box. The header is "New Way to get a date Try Lovebytes" You might use it to insert a video commercial for your company. Again we are using the Camtasia Studio 8 program, which captures the screen and audio. The video is quite short and we have a poster above the controls when the video is not playing. Create a line in your html file to play the video. The footer identifies who wrote the software and their title. <video src="Lovebytes Presentation/Lovebytes Presentation.mp4" controls width="640" width="360" poster="LBLogo.jpg"> </video> Remember to play on the web using html5 the file needs to be in the MP4 format. As mentioned before, a video presentation can be done ahead of time. By creating a video of a demonstration there is no chance of the presenter messing up. Day 4 Lovebytes Questionnaire The header for this article2 is 〈Header〉 〈BR〉 〈h1>Lovebytes Survey Sample Questions〈/h1〉 〈h3>Questionnaire〈/h3〉 〈/Header〉 <Table cellspacing=0 cellpadding=0 width="100%" border = 1> <!-- Question 1 --> <TR> <TD Align=left><P>1. My idea of a romantic evening would be a walk on the beach.</TD> <TD align=left><P><input Type="Radio" Name="RomanticEvening" Value="AS" >Agree Strongly</TD> <TD align=feft><P><Input Type ="Radio" NAME="RomanticEvening" Value="AM" >Areee Moderately</TD> <TD align=feft><P><Input Type ="Radio" NAME="RomanticEvening" Value="DM" >Disareee Moderately</TD> <TD align=feft><P><Input Type ="Radio" NAME="RomanticEvening" Value="DS" >Disagree Strongly</TD> <TR> <TD Align=left><P>2. My favorite kind of movie is:</TD> <TD align=left><P><input Type="Radio" Name="Movie" Value="Drama" >Drama</TD> <TD align=feft><P><Input Type ="Radio" NAME="Movie" Value="Adventure" >Adventure</TD> <TD align=feft><P><Input Type ="Radio" NAME="Movie" Value="Comedy" >Comedy</TD> <TD align=feft><P><Input Type ="Radio" NAME="Movie" Value="ScienceFiction" >Science Fiction</TD> </TR> Article 2 is a sampling of the questionnaire that respondents fill out. It created in a true html format, so that you as the presenter can answer the questions. The questionnaire is put into a table. Respondents answer the questions by clicking on the radio button of their choice 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. You can choose what ever you want to go here. The header for this section is〈h1〉Lovebytes Survey Sample Questions〈/h1〉 〈h3〉Questionnaire〈/h3〉 The footer for this article is 〈Footer〉 〈p〉Questionnaire developed by LoveBytes.com〈/p〉〈/Footer〉 Day 5 Side New Section: Business Partners 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 Take a look at the Appendix Link The user enters numbers for terms of the loan and then hovers over a special button to make the calculations The showpay() function in the java script file is called and here is where the calculations are made. Load in your flexible box model html template and save it as Appendix.html in your student folder. Remember all the headings, format for the boxes, menu and navigation link are the same for all pages of your presentation. The JavaScript link is called janet.js. Make that adjustment in your html file. 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. 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. Below is a listing of the HTML file portion of the program that shows the loan program. <Section id="main_section"> <Article> <Header> <center><H1>Loan Amortization</h1> <H2>Business Loan</h2> </header> The results of this loan payment calculator are for comparison purposes only. They will be a close approximation of actual loan repayments if available at the terms entered, from a financial institution. This is being provided for you to plan your next loan application. To use, enter values for the Loan Amount, Number of Months for Loan, and the Interest Rate (e.g. 7.25), and click the Calculate button. <footer> <p>Loan Calculator Developed by Janet Belch, CFo</p> </Footer> <p> <BR> <center> <header> Find monthly payment for VEC Loan </header> <table width=60% border=0> <tr><th bgcolor="#aaaaaa" width=50%><font color=blue>Description</font></th> <th bgcolor="#aaaaaa" width=50%><font color=blue>Data Entry</font></th></tr> <tr><td bgcolor="#eeeee">Loan Amount</td><td bgcolor="#aaeeaa" align=right><input type=text name=loan size=10></td></tr> <tr><td bgcolor="#eeeee">Loan Length in Months</td><td bgcolor="#aaeeaa" align=right><input type=text name=months size=10></td></tr> <tr><td bgcolor="#eeeee">Interest Rate</td><td bgcolor="#aaeeaa" align=right><input type=text name=rate size=10></td></tr> <tr> <TD align=right><em>Calculated</em> <input type=text name=pay size=15></td></tr> </table> </form> <font size=1>Enter only numeric values (no commas), using decimal points where needed.<br> Non-numeric values will cause errors.</font> </center> </Article> <div id="box"> <!--<p id="text">Loan Amortization</p>--> <input type="button style = visibility:hidden" value="Loan Amortization" onMouseOut='showpay()'/> </br></p> <BR><BR><BR><BR><BR><BR><BR> <Footer> <rt>Button designed by Jerry</rt> </Footer> </Article> </section> The data entry portion of the calculator program is formatted in a table that utilizes 60% of the screen. The table has no border. Table Headings background color is gray The boxes where you enter the data are white. The box is our button. We have used this type of html5 button before. When it is clicked on it goes to the Java script file called janet.js and executes the showpay() function. 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. It returns the value of this function back to the HTML file as the word pay. 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 The part of the Appendix page is in the Aside_news box. The first two are excellent references for HTML5, CSS and JavaScript. The third link is for your company's business contract. 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. Spend the next two days checking out all links, spelling and grammar. Make certain all the JavaScript works and delivers the right answers and results To do well giving a presentation in front of judges, please practice your presentation in front of different groups. Each Department vice president should explain their portion of the presentation. 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
<h1>Lovebytes Computer Dating Service</h1> <img src="New Logo.jpg" height=100 width=175 border =3> <Center><h2>Not Ready for Mr. Right or Miss Right. How about Mr. or Miss Right <u>Now?</u></h2></center>
Day 2: Deciding what information to put on your first or home page. What do you want to be on your first page? Think of three different things. Remember the Article sections are the main part of the presentation and the side news is related information This is the first page of our presentation, so you want to capture their attention. It must load quickly, so no large graphics, etc. Open your templae html file in Notepa++ Use save As Index.html to save a working copy into your student folder. 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. 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. The side news box is a testimonial from a satisfied subscriber. Below is what the index.html or home page looks like in code. The style sheet file is called StylePresentation.css <!DOCTYPE html> <html lang="en"> <Head> <Meta char set="utf-8"/> <Title>Lovebytes Index</Title> <Link Rel="StyleSheet" href="StylePresentation.css"> </head> <body> <div id="big_wrapper"> <Header id="top_header"> <h1>Lovebytes Computer Dating Service</h1> <img src="New Logo.jpg" height=100 width=175 border =3> <Center><h2>Not Ready for Mr. Right or Miss Right. How about Mr. or Miss Right <u>Now?</u></h2></center> </Header> <Nav id="top_menu"> <ul> <LI><A href="index.html">Home</A> <li><A href="Introduction.html">Introduction</A> <li><A href="Management.html">Management</A> <li><A href="Marketing.html">Marketing</A> <LI><A href="Financial.html">Financial</A> <LI><A href="SWOT.html">SWOT</A> <LI><A href="LoveVideo.html">LoveBytes Video</A> <li><A href="Appendix.html">Appendix</A> </ul> </Nav> <div id="new_div"> <Section id="main_section"> <Article> <Header> <h1>A new way to get a date</h1> <h2>Try Lovebytes.com</h2> </Header> <P>A new computer dating service has come to town, Its called Lovebytes. A byte is a unit of digital information that consists of eight bits. Since a computer is used to find love, thus the name Lovebytes. It is not like any other dating service around. It is meant just for high school and college students. We help you find a date - not the forever kind, just one for right now. Most people believe that young people have no difficulty finding a date. Nothing could be further than from the truth according to CEO, Jerry Belch. He says that there are so many things competing for our time that dating just takes the back seat. No pun intended. </p> <Footer> <P>Written by Sherry Bell, <P>Editor of the Richmond High School Gazette.</p> </Footer> </Article> <Article> <Header> <BR> <h1>Lovebytes Dating Profile</h1> <h3>Respondent Janet Coy</h3> </Header> <P> <Textarea rows=50 cols=50 readonly> DATE POTENTIAL Janet is very romantic. She likes action films with car crashes, violence and lots of fights. She is not much of a sports fan and is not really thrilled with the prospect of spening her Sundays watch football. Miss Coy would enjoy staying at a cabin on the beach for a weekend with you. She wants to keep a pretty tight rein on your time. This potential date won't go near a surfboard since she may not be able to swim. Your prospective date is somewhat conservative when it comes to money spend on you while on a date. There is a good chance that your first ate might be a school dance. You have a good chance of being kissed goodnight on your first date. PERSONALITY This respondent would like to vacation at the beach. She doesn't get going until the afternoon. She has an appetite for many different types of food. If a free trip were won, she would like to see Europe.Janet enjoys Mexican food and it is a favorite. She likes to watch football. She is somewhat demanding when talking with people in stores and restaurants. Janet believes that most people should own a car. Janet believes that being grounded is not quite as severe as death. Miss Coy would have a very difficult time living without a cell phone. Janet believes that social media are an integral part of life. The latest fashions and accessories are not that important to her. JOB/CAREER Respondent is not very concerned about the type of work that she does, since weekends are more important. Janet believes that, in most cases, a husband and wife must work outside the home to make it financially. Miss Coy would like to get a four-year college degree. She believes that a job in which you help others is important. CHARACTER Respondent believes that making a lot of money is a moderately important goal. She is a pretty religious person. She is moderately sensitive toa hint of criticism and agrees that in a relationship, you should please yourself first, then the other person. She needs a moderate degree of emotional support and goes out of her way to avoid disappointing anyone. She is somewhat mindful of people's feelings and will not just say anything that needs to be said. Janet does not put things off on a regular basis. Careful, Miss Coy does not like to be crossed. Consider that she is pretty dangerous. She does not want to lose your friendship, but believes that it it not the end of the world. Sometimes Janet can simulate emotions she does not feel. </p> <Footer> <p>Profile generated by LoveBytes.exe</p> </Footer> </Article> </Section> <Aside id="side_news"> <H4>Testimonial</h4> I recently broke up with my boyfriend, just before the senior prom. I had already bought my dress and arranged to double date with my best friend. Lovebytes made it possible for me to go to my prom with one of the most popular, most interesting boys I have ever met. We had so much in common and lots to talk about. We are planning on seeing each other again. I would recommend this service to anyone in high school or college. Thank you to Lovebytes.com for making my senior year a great success. Sincerely Jessica S </Aside> </div> <Footer id="the_footer"> <Center> <p>Copyright© 2013 Lovebytes Incorporated Santa Barbara, California </p> </Footer> </div> </Body> </html> Now you complete your home page with your information. 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. 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 Look at the business plan rubric and my Introduction.html page in Notepad++ My Introduction page contains The same heading, logo, slogan, colors and fonts as the first page. An Executive summary An audio player Look over the code and the finished product of my page. 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. 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. 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. Substitute your information for the articles and side news Notice how the audio sound track is played directly with HTML5. It is a snap. It only takes a few lines. Make sure that you save your audio file in the same folder as the rest of your presentation file. <audio controls height= "100" width="100"> <source src="love.mp3" type="audio/mpeg"> <source src="love.ogg" type audio/ogg"> Your browser does not support the audio element. </audio> The first line sets the size of the audio player controls. The second line names the song - love.mp3 and tells it that it is an audio mpeg file The next line is for a music file in the .ogg format MP3 is the most commonly used format. If your song is not in the mp3 format, you can convert it to Mp3 using the I-tunes program The next line is one you hope your users do not see, They will only see it if they cannot play the audio file The last line ends the audio tag. Day 4 Introductory page:Business Object and Mission statement The Description - Create your company description put in the side news box Business Objectives. Create your own and put them in the Article 2 section Mission Statement- Write your own and put in the side news box. Save your html file and launch it in Chrome to see how it looks. 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 Open your html template file, Save it in your own folder or workspace and call it Management.html Make sure that your cascading Style Sheet file, StylePresentation.css, is also saved in the same folder. The management page consists of an organizational chart, job descriptions for our staff, Planning Strategies, and audio presentation. For Day 5 we will just look at how to do the organizational chart using the html5 canvas element and the Chart.js file. The new HTML 5 concepts introduced include the Canvas element, which was used to construct the organizational chart Open Management.html in Notepad++ There a few new things to learn here. In addition to a css file and html file we will add an external JavaScript file. 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. <Link Rel="StyleSheet" href="StylePresentation.css"> <script src = "Chart.js"> </script> </head> <body> Also locate the lines that relate to the Canvas Element in the HTML file. They are in Article one box. <canvas id="canvas" height="200" width="900"> Hopefully you do not see this. Get Google Chrome as your Browser </canvas> 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.. This is the area set aside to draw things in. Our canvas is 200 pixels high and 900 wide, Here is what the Chart.js file looks like function doFirst(){ var x = document.getElementById('canvas'); canvas = x.getContext('2d'); //canvas.beginPath(); canvas.moveTo(10,20); canvas.lineTo(249,20); canvas.stroke(); canvas.strokeRect(250,5,100,25); canvas.fillText('Chief Exe Officer',255,22); canvas.moveTo(350,20); canvas.lineTo(550,20); canvas.stroke(); //line down to first vp canvas.moveTo(40,20); canvas.lineTo(40,40); canvas.stroke(); // line down for second vp canvas.moveTo(180,20); canvas.lineTo(180,40); canvas.stroke(); // line down for third vp canvas.moveTo(420,20); canvas.lineTo(420,40); canvas.stroke(); // line down for fourth vp canvas.moveTo(520,20); canvas.lineTo(520,40); canvas.stroke(); //first vp box canvas.strokeRect(10,40,60,20); canvas.fillText('CFO',20,52); // Vp of It canvas.moveTo(150,40); canvas.lineTo(150,40); canvas.stroke(); canvas.strokeRect(150,40,60,20); canvas.fillText('IT VP',155,52); //administrative assistant canvas.moveTo(300,30); canvas.lineTo(300,40); canvas.stroke(); canvas.strokeRect(270,40,60,20); canvas.fillText('Adm Assist',275,55); // vp of sales canvas.strokeRect(390,40,60,20); canvas.fillText('VP Sales',395,55); // vp of human resources canvas.strokeRect(490,40,60,20); canvas.fillText('VP of HR',495,55); // payroll clerk line canvas.moveTo(10,80); canvas.lineTo(10,60); canvas.stroke(); // Ar Clerk canvas.moveTo(40,80); canvas.lineTo(40,60); canvas.stroke(); // banker Gl clerk canvas.moveTo(70,80); canvas.lineTo(70,60); canvas.stroke(); // web master line down canvas.moveTo(180,80); canvas.lineTo(180,60); canvas.stroke(); //sales clerk 1 - lines down canvas.moveTo(390,80); canvas.lineTo(390,60); canvas.stroke(); //sales clerk 2 - lines down canvas.moveTo(410,80); canvas.lineTo(410,60); canvas.stroke(); //sales clerk 3 - lines down canvas.moveTo(430,80); canvas.lineTo(430,60); canvas.stroke(); //sales clerk 4 - lines down canvas.moveTo(450,80); canvas.lineTo(450,60); canvas.stroke(); // payroll clerk box canvas.strokeRect(2,80,20,20); canvas.fillText('P',5,95); // AR clerk box canvas.strokeRect(30,80,20,20); canvas.fillText('AR',32,95); // banker clerk box canvas.strokeRect(60,80,20,20); canvas.fillText('B',66,95); // web master box canvas.strokeRect(150,80,60,20); canvas.fillText('Web Master', 152,93); // sales clerk 1 box canvas.strokeRect(380,80,20,20); canvas.fillText('S1',382,95); // sales clerk 2 box canvas.strokeRect(400,80,20,20); canvas.fillText('S2',405,95); // sales clerk 3 box canvas.strokeRect(420,80,20,20); canvas.fillText('S3',423,95); // sales clerk 4 box canvas.strokeRect(440,80,20,20); canvas.fillText('S4',443,95); // line for web 1 canvas.moveTo(150,100); canvas.lineTo(150,120); canvas.stroke(); // line for web 2 canvas.moveTo(170,100); canvas.lineTo(170,120); canvas.stroke(); // line for web 3 canvas.moveTo(190,100); canvas.lineTo(190,120); canvas.stroke(); // line for web 4 canvas.moveTo(210,100); canvas.lineTo(210,120); canvas.stroke(); // box for web 1 canvas.strokeRect(140,120,20,20); canvas.fillText('W1',142,132); // box for web 2 canvas.strokeRect(160,120,20,20); canvas.fillText('W2',162,132); // box for web 3 canvas.strokeRect(180,120,20,20); canvas.fillText('W3',182,132); // box for web 4 canvas.strokeRect(200,120,20,20); canvas.fillText('W4',202,132); } window.addEventListener("load", doFirst,false); We now need to explain how to draw the organizational chart on our canvas using the Chart,js file instructions. Do not panic. It is not as complicated as it seems. The top three lines begin a JavasSript function called doFirst Next we create a variable called X and set it equal the the canvas element in the html file The third line tells it to behave in a two dimensional way. 3D is on the way in HTML5 Even though there are many lines in between these, the last line should be added now. The last line tells the browser to run the doFirst Java Script function as soon as the page loads. The lines in the middle are the ones that map out how to draw the chart. We have a canvas that is 200 pixels high and 900 pixels wide. Our chart is much wider than it is tall. 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 If this chart matches up with your company organization, feel free to just use this file You can modify certain lines if you wish. 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 Today we are going to build an job Description table into our presentation on the Management.html page. Click on the line below and examine the Job Description Chart. The table will be included in Article 1 just below the organization chart Our table consists of 4 columns: Name, Position, Salary, Duties There 21 Rows. One for each employee Management Page To see the code that makes our table. proceed as follows With the Management.html page on your screen, Right-click and select view page Source. You can then see the coding of the page. Let's see how the table was constructed. The next line begins our table. 〈Table cellpadding="15" cellspacing="5" border=".3"〉 The next line begins a new row of the table 〈TR〉 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. 〈TD〉:Staff Member's Name〈/TD〉〈TD〉Position〈/TD〉〈TD〉Salary〈/TD〉〈TD〈Duties〉/TD〉 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 〈/TR〉 end the row of the table. 〈rt〉 stand for regular text. Any time the browser sees this tag, the text is formatted as described in the .css file. 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. When the user hovers over the duty box, they will be able to see the job description for that employee. Follow the format of table substituting your own company information. Day 2 : Planning Strategy to be put into an audio presentation. Today we are going to make an audio recording of our Planning Strategy in our Business Plan Presentation software. This part of the presentation goes into Article two box along with the job descriptions table. Get a written copy of the planning strategy from your written business plan. This will be your script Next plug in your microphone Go to the Sound Recorder program. This comes with all windows programs. It is located in the Accessories group Click START Select All Programs Accessories Folder Sound Recorder Click Start Recording button Read Your script. When finished, click Stop Recording The SaveDialog Box comes up Select folder where you want to store the file Type in file name and then Save File The file extension will be .wma, which stands for Windows Media Audio For this file to work properly in our html document, we need to convert it from wma to mp3 There a number of audio converter programs available. 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. 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" <audio controls> <source src="planning.mp3" type="audio/mp3"> <source src="planning.ogg" type audio/ogg"> Your browser does not support the audio element. </audio> Save your html file. Try out the audio player. Day 3 Day 3: Management Page, Aside Elements - Directing and Controlling Now it is time to work on the side news box. Check out Lovebytes Management page AS you can see there two paragraphs . One is about Directing and the other about Controlling 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. Load your html template. Save it and all it Marketing.html in your student working folder We will be adding information to each of the box elements Get out your business plan document and turn to the marketing section It is in the marketing section of the business plan that you will draw out the information needed for the presentation. In the Lovebytes Marketing plan we have a service business. Marketing Page for Lovebytes We want to explain the product or service and perhaps show a picture. The above information should go into Article 1 box Our computer dating company also has a deluxe package and it is outlined. Day 5:Placement, Price and Promotion The Placement ,Price and Promotion are laid out in tabular form. See box below for the code. <Table border=3 cellpading=5 cellspacing=5> <TR> <TD><h2>Placement</h2><img src="pv.ico" height=12 width=12 Title="Our placement used to get our service to the consumer is via the Internet. That is our only channel of distribution. The compiling of data, creating the files, finding the matches and profiles will be handled at our headquarters. No middlemen are needed in our venture thus saving costs." </TD><TD><h2>Price</h2><img src="pv.ico" height=12 width=12 Title="Price will be competitive. For example, Match.com charges $16.99 per month for six months or $34.95 for one month. Other sites have much the same pricing structure. Lovebytes.com will charge $16.95/month for the six months, or $32.95 for a one month's subscription. We will have trade show discounts and special promotions during December, March and April. Clients who introduce Lovebytes to their friends will receive a 5% discount." </TD><TD><h2>Promotion</h2><img src="pv.ico" height=12 width=12 Title="Promotion will be accomplished in a couple of ways. The web site will be listed in the Virtual Enterprise shopping mall and meta tag information will be sent to the major search engines. The questionnaire will be attached to the web page. We will create ads that run on the Internet, tied to other Virtual Enterprise sites. Email ads will be created and sent to all Virtual Enterprise companies in California. Special flyers with trade show deals will be circulated during each of the trade shows. We will run an ad in our school paper and have a spot on the school's TV station feauring popular students in school showing how cool it is to use Lovebytes to get a date for a school activity. We will attempt to obtain company to company contracts with other VE companies. "</TD> </TR> </Table> Obviously you could present this information in many ways. I chose a table. See instructions above for how to put data into a table. Remember beginning and ending table tags with information about padding and spacing and borders Table rows beginning and ending tags Table data with is the information that goes into each cell. 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. Inside Article 1 box we are going to do some special things to make the Target Market and Market Segment, real attention getting. Make sure that your external links are to Main.cs an Chart2.js 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. Try them out by running and then launching Marketing.html Just pass your mouse over the target market button an see what happens. Then move the mouse off the button. What Happens? Look at the coding of the Marketing.html page We are going to set up two divisions. One for target market the other for market segment 〈div id="targetMarket"〉 is the first division. The next we type is〈P id="text"〉 Now key in the text defining your company target market. After keying in the text use the ending division tag, 〈Div/〉 Repeat the above procedure of the market segment. Now let's turn our attention to the Main3.css file to see how we can animate them Scroll down the file until you see the coding to format the targetMarket division #targetMarket{ display:block; margin:150px auto; color:#ffe4e1; -webkit-border-radius: 10px; opacity:0.4; background:magenta; width:120px; height:25px; -webkit-transition:-webkit-transform 2s,opacity 2s, background 2s, width 2s, height 2s; } #targetMarket:hover{ -webkit-transform: rotate(360deg); opacity:2.5; background:#5959ab; width:450px; height:390px; } Notice that the descriptions start out with the number sign, #, followed by the Id name, followed by a left-facing curly brace. The parameters for the button are listed below, followed by a right-facing curly brace. We want to display the button a a block. We set he margin at 250 pixels and auto-centers the button. We set the color of the button next. -webkit-border-radius;10px; makes rounded corners for the button Opacity refers to transparency. Now we set the background color, width and height before the transformation. 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 Look at the coding for the targetMarket button to see how to animate or move it We first identify the division segment, next the hover properties. We want to rotate the button 360 degrees. We change the opacity, background color, width and height. Experiment with these properties in your css file until you get the desired effect. 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 I used article two box to create an graphical analysis of our break-even point The vertical axis was used for expenses The horizontal axis, for sales Lovebytes needs to sell almost3,000 dating packages at $34.95 to covers its nearly $100,000 of expenses. Get the information you need to prepare a break even chart form your Accounting Department. I suggest that you draw it out first on a piece of paper before coding the coordinates for the lines and text The procedure for doing this chart is just like when we created the organizational chart. The coding for the beak even analysis can be found in Chart2.js Make sure that your html file calls that link. Check lines inside script tags. Here is the information contained in the Chart2.css fie function doFirst(){ var x = document.getElementById('canvas'); canvas = x.getContext('2d'); // vertical axis canvas.moveTo(50,20); canvas.lineTo(50,500); canvas.stroke(); //horizontal axis canvas.moveTo(50,500); canvas.lineTo(500,500); canvas.stroke(); //$100,000 sales canvas.fillText('Expenses',0,10); canvas.fillText('$100,000' , 1,20); //$75,000 canvas.fillText('$75,000',2,125); //$50,000 canvas.fillText('$50,000',2,250); //$25,000 canvas.fillText('$25,000',2,375); // $0.00 canvas.fillText('$0.00',2,500); //0 on horizontal axis canvas.fillText('0',50,520); canvas.fillText('Packages Sold',100,530); //1500 packages canvas.fillText('1,500',250,520); // 3000 packages canvas.fillText('3,000',472,520); // line from 0,0 to top canvas.moveTo(50,500); canvas.lineTo(500,0); canvas.stroke(); // other line canvas.moveTo(50,40); canvas.lineTo(600,40); canvas.stroke(); //profit area canvas.fillText('Profit Area',500,30); //loss area canvas.fillStyle='rgb(255,0,0)'; canvas.strokeStyle='rgb(0,111,174)'; canvas.fillText('Loss Area',200,160); canvas.stroke(); // data section canvas.fillText('Breakeven dollars = $97,742',50,600); canvas.fillText('Dating Package Cost = $32.95',50,610); canvas.fillText('Dating Package That Need to be Sold = 2,966',50,620); } window.addEventListener("load", doFirst,false); Day 4 and 5 Marketing Industry Analysis We are going to use the side news box for the industry analysis information Obtain that information from your business plan. It should include identification of industry threats and comparative national trends. Include industry strengths and threats Compare company vision and experiences against averages of similar operations. 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 Use the financial section Financial Section of your business plan for the following part of the presentation. Load your html template file, make modifications and save it calling it Financial.html in your student folder. StylePresentation.css and Chart2.js files are also needed. Make sure that you link them to your html file. There are a number of ways you can show a balance sheet, income statement in your presentation I used Article 1 for the video. 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 janetbelch.com There are a number of screen capture programs that you can use to create a video. I used an excellent, easy to use program from TechSmith called Camtasia. While making the video,I recorded the screens first as I demonstrated the program and added the audio track afterwords. 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. 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 <video src="General Ledger/General Ledger.mp4" controls width="640" width="360" poster="LBLogo.jpg"> </video> 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 In the example above the movie, General Ledger.mp4, is in a folder by the same name. The size of the controls to play the video are 640 by 360 pixels. The poster tag allows you to put a picture above the controls when the video is not playing. I just used a jpeg of Lovebytes logo. Day 3 and 4 Financial page, Cash Flow Article two box was used for this next section. I used Microsoft's Excel spreadsheet program for the Cash Flow Estimate 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 Explain where you got your beginning cash balance. First column which should include cash from investment and business loan. For other months, November through April, show beginning cash balance, which is the ending cash balance of the previous month. Include income from open houses, trade fairs and grand openings Remember that the money from trade fair sales comes in the next month since they are charge sales Include your business contract each month and all your company expenses. You will want to how that you always have enough cash to cover your immediate expenses. Day 5 Financial Page, Side News box. I used the aside box for information concerning the Business Investment, Business Loan and Business Contract Obtain this information from the financial section of the business plan Save your file in your student folder. 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. I decided to use the ntml5 feature of drag and drop to make the Strengths, Weakneses, Threats, and Opportunities Page. Load in your template for html and save it in your student fole as SWOT.html Load in necessary style, StylePresentation.css and JavaScript files, jerry.js into Notepad++ Run the SWOT Page to see how the program works. Drag and Drop is used in many desktop applications, therefore, HTML5 needed the same functionality. 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 the idea is to drag the image of the Cupid one into the blank box of the same name. Once you let go of the mouse-drop, the information about that characteristic appears in the blank box. It seemed like a flashy way to present the SWOT information. <section id="strengthBlank"> <BR> <BR> <br> <BR> <BR> <br> <h1> STRENGTHS</h1> </section> <section id="strengthCupid"> <img id="facepic1" src="CupidStrengths.jpg" height=275 width=200> </section> Here is the coding that relates to the sections of the SWOT.html page. I created eight sections One for each with an image of Cupid and one that was blank. The Blank one contains the Words like Strengths or Weaknesses or Threats or Opportunities The sections with cupid use the image tag to load a picture of Cupid See Below for how they are coded in the style file, StylePresentation.css #strengthBlank{ float:left; width:200px; height:275px; margin:2px; border:3px solid blue; } #strengthCupid{ float:left; width:200px; height:275px; margin:2px; border:3px solid green; } #weakBlank{ float:left; width:200px; height:275px; margin:2px; border:3px solid blue; } #weakCupid{ float:left; width:200px; height:275px; margin:2px; border:3px solid green; } #opportunityBlank{ float:left; width:200px; height:275px; margin:2px; border:3px solid blue; } #opportunityCupid{ float:left; width:200px; height:275px; margin:2px; border:3px solid green; } #threatsBlank{ float:left; width:200px; height:275px; margin:2px; border:3px solid blue; } #threatsCupid{ float:left; width:200px; height:275px; margin:2px; border:3px solid green; } All of them are floated to the left. All have the same width and height They all have the same margins All the ones containing Cupid have solid green borders. The blank sections have solid blue borders The actual coding for the drag and drop function is in the jerry.js file. Listed below is that specific coding for the doFirst function. function doFirst(){ mypic = document.getElementById('facepic1'); mypic.addEventListener("dragstart", startDrag,false); mypic.addEventListener("dragend", endDrag,false); threatsBlank = document.getElementById('threatsBlank'); threatsBlank.addEventListener("dragenter",dragenter,false); threatsBlank.addEventListener("dragleave",dragleave,false); threatsBlank.addEventListener("dragover",function(e){e.preventDefault();},false); threatsBlank.addEventListener("drop",dropped,false); function endDrag(e){ pic = e.target; pic.style.visibility = 'hidden'; } function dragenter(e){ e.preventDefault(); threatsBlank.style.background = "SkyBlue"; threatsBlank.style.border = "3px solid red"; } function dragleave(e){ e.preventDefault(); threatsBlank.style.background = "White"; threatsBlank.style.border = "3px solid "; } function startDrag(e){ var code = '<img src="Cupid.jpg" height=275 width=200>'; e.dataTransfer.setData('Text', code); } function dropped(e){ e.preventDefault(); threatsBlank.innerHTML = e.dataTransfer.getData('Text'); threatsCupid.innerHTML =("Privacy issues. Lots of competition for teen market's discretionary income. Social networking sites as competitors. Everchanging technology. Free versions offered by competitors. Once competitors see our success in our market segment, they will want to compete. "); } } window.addEventListener("load", doFirst, false); } Explanation of how drag and drop works The script file came from TheNewBoston.org web site 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 Let's examine the coding for doFirst function. All functions are almost identical The function is called as soon as the page loads with the line window.addEventListener("load",doFirst,false); This line is at the bottom of the doFirst Function. just before the doSecond function. Next a variable called mypic is equated to document.getElementsById('facepic1'); 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 Each one of the facepic variables is slightly different. 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. 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. 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. 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. The line that states mypic.addEventListner("dragstart"),startdrag,false); fires as soon as the user starts to drag the image. dragstart is a keyword and cannot be changed 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. dragener is a reserved word. It will call a function by the name endDrag which we will create later. 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. 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. 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 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 The browser stores that information like X and Y position of the mouse. 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〉'; This line is how we store information about the picture e.dataTransfer.setData('Text', code); Drag End Function dragEnd function When we drop the image into the box to the left, we want to have the original image to disappear. First we assign e.target to a variable called pic. The endDrag function sets our picture's style for visibility to hidden so it can't be seen. Drag Enter Function 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. The next line sets the background to SkyBlue The next line sets a 3 pixel border around the box that is solid red. Drag Leave Function 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. The second line sets the background color of the strengthBlank box to white The third line puts a 3 pixel solid border around the box. It is the same color as before - green. Drag Over Function 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 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. Now we have to identify where are going to drop the image. It will be in the box called strengthBlank The rest of the line tells the browser to take the information that is stored and drop the text in the box. 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 The purpose of this page it to highlight our program and the way it works. It is inserts into Article 1 box. The header is "New Way to get a date Try Lovebytes" You might use it to insert a video commercial for your company. Again we are using the Camtasia Studio 8 program, which captures the screen and audio. The video is quite short and we have a poster above the controls when the video is not playing. Create a line in your html file to play the video. The footer identifies who wrote the software and their title. <video src="Lovebytes Presentation/Lovebytes Presentation.mp4" controls width="640" width="360" poster="LBLogo.jpg"> </video> Remember to play on the web using html5 the file needs to be in the MP4 format. As mentioned before, a video presentation can be done ahead of time. By creating a video of a demonstration there is no chance of the presenter messing up. Day 4 Lovebytes Questionnaire The header for this article2 is 〈Header〉 〈BR〉 〈h1>Lovebytes Survey Sample Questions〈/h1〉 〈h3>Questionnaire〈/h3〉 〈/Header〉 <Table cellspacing=0 cellpadding=0 width="100%" border = 1> <!-- Question 1 --> <TR> <TD Align=left><P>1. My idea of a romantic evening would be a walk on the beach.</TD> <TD align=left><P><input Type="Radio" Name="RomanticEvening" Value="AS" >Agree Strongly</TD> <TD align=feft><P><Input Type ="Radio" NAME="RomanticEvening" Value="AM" >Areee Moderately</TD> <TD align=feft><P><Input Type ="Radio" NAME="RomanticEvening" Value="DM" >Disareee Moderately</TD> <TD align=feft><P><Input Type ="Radio" NAME="RomanticEvening" Value="DS" >Disagree Strongly</TD> <TR> <TD Align=left><P>2. My favorite kind of movie is:</TD> <TD align=left><P><input Type="Radio" Name="Movie" Value="Drama" >Drama</TD> <TD align=feft><P><Input Type ="Radio" NAME="Movie" Value="Adventure" >Adventure</TD> <TD align=feft><P><Input Type ="Radio" NAME="Movie" Value="Comedy" >Comedy</TD> <TD align=feft><P><Input Type ="Radio" NAME="Movie" Value="ScienceFiction" >Science Fiction</TD> </TR> Article 2 is a sampling of the questionnaire that respondents fill out. It created in a true html format, so that you as the presenter can answer the questions. The questionnaire is put into a table. Respondents answer the questions by clicking on the radio button of their choice 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. You can choose what ever you want to go here. The header for this section is〈h1〉Lovebytes Survey Sample Questions〈/h1〉 〈h3〉Questionnaire〈/h3〉 The footer for this article is 〈Footer〉 〈p〉Questionnaire developed by LoveBytes.com〈/p〉〈/Footer〉 Day 5 Side New Section: Business Partners 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 Take a look at the Appendix Link The user enters numbers for terms of the loan and then hovers over a special button to make the calculations The showpay() function in the java script file is called and here is where the calculations are made. Load in your flexible box model html template and save it as Appendix.html in your student folder. Remember all the headings, format for the boxes, menu and navigation link are the same for all pages of your presentation. The JavaScript link is called janet.js. Make that adjustment in your html file. 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. 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. Below is a listing of the HTML file portion of the program that shows the loan program. <Section id="main_section"> <Article> <Header> <center><H1>Loan Amortization</h1> <H2>Business Loan</h2> </header> The results of this loan payment calculator are for comparison purposes only. They will be a close approximation of actual loan repayments if available at the terms entered, from a financial institution. This is being provided for you to plan your next loan application. To use, enter values for the Loan Amount, Number of Months for Loan, and the Interest Rate (e.g. 7.25), and click the Calculate button. <footer> <p>Loan Calculator Developed by Janet Belch, CFo</p> </Footer> <p> <BR> <center> <header> Find monthly payment for VEC Loan </header> <table width=60% border=0> <tr><th bgcolor="#aaaaaa" width=50%><font color=blue>Description</font></th> <th bgcolor="#aaaaaa" width=50%><font color=blue>Data Entry</font></th></tr> <tr><td bgcolor="#eeeee">Loan Amount</td><td bgcolor="#aaeeaa" align=right><input type=text name=loan size=10></td></tr> <tr><td bgcolor="#eeeee">Loan Length in Months</td><td bgcolor="#aaeeaa" align=right><input type=text name=months size=10></td></tr> <tr><td bgcolor="#eeeee">Interest Rate</td><td bgcolor="#aaeeaa" align=right><input type=text name=rate size=10></td></tr> <tr> <TD align=right><em>Calculated</em> <input type=text name=pay size=15></td></tr> </table> </form> <font size=1>Enter only numeric values (no commas), using decimal points where needed.<br> Non-numeric values will cause errors.</font> </center> </Article> <div id="box"> <!--<p id="text">Loan Amortization</p>--> <input type="button style = visibility:hidden" value="Loan Amortization" onMouseOut='showpay()'/> </br></p> <BR><BR><BR><BR><BR><BR><BR> <Footer> <rt>Button designed by Jerry</rt> </Footer> </Article> </section> The data entry portion of the calculator program is formatted in a table that utilizes 60% of the screen. The table has no border. Table Headings background color is gray The boxes where you enter the data are white. The box is our button. We have used this type of html5 button before. When it is clicked on it goes to the Java script file called janet.js and executes the showpay() function. 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. It returns the value of this function back to the HTML file as the word pay. 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 The part of the Appendix page is in the Aside_news box. The first two are excellent references for HTML5, CSS and JavaScript. The third link is for your company's business contract. 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. Spend the next two days checking out all links, spelling and grammar. Make certain all the JavaScript works and delivers the right answers and results To do well giving a presentation in front of judges, please practice your presentation in front of different groups. Each Department vice president should explain their portion of the presentation. 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
<!DOCTYPE html> <html lang="en"> <Head> <Meta char set="utf-8"/> <Title>Lovebytes Index</Title> <Link Rel="StyleSheet" href="StylePresentation.css"> </head> <body> <div id="big_wrapper"> <Header id="top_header"> <h1>Lovebytes Computer Dating Service</h1> <img src="New Logo.jpg" height=100 width=175 border =3> <Center><h2>Not Ready for Mr. Right or Miss Right. How about Mr. or Miss Right <u>Now?</u></h2></center> </Header> <Nav id="top_menu"> <ul> <LI><A href="index.html">Home</A> <li><A href="Introduction.html">Introduction</A> <li><A href="Management.html">Management</A> <li><A href="Marketing.html">Marketing</A> <LI><A href="Financial.html">Financial</A> <LI><A href="SWOT.html">SWOT</A> <LI><A href="LoveVideo.html">LoveBytes Video</A> <li><A href="Appendix.html">Appendix</A> </ul> </Nav> <div id="new_div"> <Section id="main_section"> <Article> <Header> <h1>A new way to get a date</h1> <h2>Try Lovebytes.com</h2> </Header> <P>A new computer dating service has come to town, Its called Lovebytes. A byte is a unit of digital information that consists of eight bits. Since a computer is used to find love, thus the name Lovebytes. It is not like any other dating service around. It is meant just for high school and college students. We help you find a date - not the forever kind, just one for right now. Most people believe that young people have no difficulty finding a date. Nothing could be further than from the truth according to CEO, Jerry Belch. He says that there are so many things competing for our time that dating just takes the back seat. No pun intended. </p> <Footer> <P>Written by Sherry Bell, <P>Editor of the Richmond High School Gazette.</p> </Footer> </Article> <Article> <Header> <BR> <h1>Lovebytes Dating Profile</h1> <h3>Respondent Janet Coy</h3> </Header> <P> <Textarea rows=50 cols=50 readonly> DATE POTENTIAL Janet is very romantic. She likes action films with car crashes, violence and lots of fights. She is not much of a sports fan and is not really thrilled with the prospect of spening her Sundays watch football. Miss Coy would enjoy staying at a cabin on the beach for a weekend with you. She wants to keep a pretty tight rein on your time. This potential date won't go near a surfboard since she may not be able to swim. Your prospective date is somewhat conservative when it comes to money spend on you while on a date. There is a good chance that your first ate might be a school dance. You have a good chance of being kissed goodnight on your first date. PERSONALITY This respondent would like to vacation at the beach. She doesn't get going until the afternoon. She has an appetite for many different types of food. If a free trip were won, she would like to see Europe.Janet enjoys Mexican food and it is a favorite. She likes to watch football. She is somewhat demanding when talking with people in stores and restaurants. Janet believes that most people should own a car. Janet believes that being grounded is not quite as severe as death. Miss Coy would have a very difficult time living without a cell phone. Janet believes that social media are an integral part of life. The latest fashions and accessories are not that important to her. JOB/CAREER Respondent is not very concerned about the type of work that she does, since weekends are more important. Janet believes that, in most cases, a husband and wife must work outside the home to make it financially. Miss Coy would like to get a four-year college degree. She believes that a job in which you help others is important. CHARACTER Respondent believes that making a lot of money is a moderately important goal. She is a pretty religious person. She is moderately sensitive toa hint of criticism and agrees that in a relationship, you should please yourself first, then the other person. She needs a moderate degree of emotional support and goes out of her way to avoid disappointing anyone. She is somewhat mindful of people's feelings and will not just say anything that needs to be said. Janet does not put things off on a regular basis. Careful, Miss Coy does not like to be crossed. Consider that she is pretty dangerous. She does not want to lose your friendship, but believes that it it not the end of the world. Sometimes Janet can simulate emotions she does not feel. </p> <Footer> <p>Profile generated by LoveBytes.exe</p> </Footer> </Article> </Section> <Aside id="side_news"> <H4>Testimonial</h4> I recently broke up with my boyfriend, just before the senior prom. I had already bought my dress and arranged to double date with my best friend. Lovebytes made it possible for me to go to my prom with one of the most popular, most interesting boys I have ever met. We had so much in common and lots to talk about. We are planning on seeing each other again. I would recommend this service to anyone in high school or college. Thank you to Lovebytes.com for making my senior year a great success. Sincerely Jessica S </Aside> </div> <Footer id="the_footer"> <Center> <p>Copyright© 2013 Lovebytes Incorporated Santa Barbara, California </p> </Footer> </div> </Body> </html>
Day 3: The Introduction Page of the presentation. 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 Look at the business plan rubric and my Introduction.html page in Notepad++ My Introduction page contains The same heading, logo, slogan, colors and fonts as the first page. An Executive summary An audio player Look over the code and the finished product of my page. 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. 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. 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. Substitute your information for the articles and side news Notice how the audio sound track is played directly with HTML5. It is a snap. It only takes a few lines. Make sure that you save your audio file in the same folder as the rest of your presentation file. <audio controls height= "100" width="100"> <source src="love.mp3" type="audio/mpeg"> <source src="love.ogg" type audio/ogg"> Your browser does not support the audio element. </audio> The first line sets the size of the audio player controls. The second line names the song - love.mp3 and tells it that it is an audio mpeg file The next line is for a music file in the .ogg format MP3 is the most commonly used format. If your song is not in the mp3 format, you can convert it to Mp3 using the I-tunes program The next line is one you hope your users do not see, They will only see it if they cannot play the audio file The last line ends the audio tag. Day 4 Introductory page:Business Object and Mission statement The Description - Create your company description put in the side news box Business Objectives. Create your own and put them in the Article 2 section Mission Statement- Write your own and put in the side news box. Save your html file and launch it in Chrome to see how it looks. 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 Open your html template file, Save it in your own folder or workspace and call it Management.html Make sure that your cascading Style Sheet file, StylePresentation.css, is also saved in the same folder. The management page consists of an organizational chart, job descriptions for our staff, Planning Strategies, and audio presentation. For Day 5 we will just look at how to do the organizational chart using the html5 canvas element and the Chart.js file. The new HTML 5 concepts introduced include the Canvas element, which was used to construct the organizational chart Open Management.html in Notepad++ There a few new things to learn here. In addition to a css file and html file we will add an external JavaScript file. 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. <Link Rel="StyleSheet" href="StylePresentation.css"> <script src = "Chart.js"> </script> </head> <body> Also locate the lines that relate to the Canvas Element in the HTML file. They are in Article one box. <canvas id="canvas" height="200" width="900"> Hopefully you do not see this. Get Google Chrome as your Browser </canvas> 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.. This is the area set aside to draw things in. Our canvas is 200 pixels high and 900 wide, Here is what the Chart.js file looks like function doFirst(){ var x = document.getElementById('canvas'); canvas = x.getContext('2d'); //canvas.beginPath(); canvas.moveTo(10,20); canvas.lineTo(249,20); canvas.stroke(); canvas.strokeRect(250,5,100,25); canvas.fillText('Chief Exe Officer',255,22); canvas.moveTo(350,20); canvas.lineTo(550,20); canvas.stroke(); //line down to first vp canvas.moveTo(40,20); canvas.lineTo(40,40); canvas.stroke(); // line down for second vp canvas.moveTo(180,20); canvas.lineTo(180,40); canvas.stroke(); // line down for third vp canvas.moveTo(420,20); canvas.lineTo(420,40); canvas.stroke(); // line down for fourth vp canvas.moveTo(520,20); canvas.lineTo(520,40); canvas.stroke(); //first vp box canvas.strokeRect(10,40,60,20); canvas.fillText('CFO',20,52); // Vp of It canvas.moveTo(150,40); canvas.lineTo(150,40); canvas.stroke(); canvas.strokeRect(150,40,60,20); canvas.fillText('IT VP',155,52); //administrative assistant canvas.moveTo(300,30); canvas.lineTo(300,40); canvas.stroke(); canvas.strokeRect(270,40,60,20); canvas.fillText('Adm Assist',275,55); // vp of sales canvas.strokeRect(390,40,60,20); canvas.fillText('VP Sales',395,55); // vp of human resources canvas.strokeRect(490,40,60,20); canvas.fillText('VP of HR',495,55); // payroll clerk line canvas.moveTo(10,80); canvas.lineTo(10,60); canvas.stroke(); // Ar Clerk canvas.moveTo(40,80); canvas.lineTo(40,60); canvas.stroke(); // banker Gl clerk canvas.moveTo(70,80); canvas.lineTo(70,60); canvas.stroke(); // web master line down canvas.moveTo(180,80); canvas.lineTo(180,60); canvas.stroke(); //sales clerk 1 - lines down canvas.moveTo(390,80); canvas.lineTo(390,60); canvas.stroke(); //sales clerk 2 - lines down canvas.moveTo(410,80); canvas.lineTo(410,60); canvas.stroke(); //sales clerk 3 - lines down canvas.moveTo(430,80); canvas.lineTo(430,60); canvas.stroke(); //sales clerk 4 - lines down canvas.moveTo(450,80); canvas.lineTo(450,60); canvas.stroke(); // payroll clerk box canvas.strokeRect(2,80,20,20); canvas.fillText('P',5,95); // AR clerk box canvas.strokeRect(30,80,20,20); canvas.fillText('AR',32,95); // banker clerk box canvas.strokeRect(60,80,20,20); canvas.fillText('B',66,95); // web master box canvas.strokeRect(150,80,60,20); canvas.fillText('Web Master', 152,93); // sales clerk 1 box canvas.strokeRect(380,80,20,20); canvas.fillText('S1',382,95); // sales clerk 2 box canvas.strokeRect(400,80,20,20); canvas.fillText('S2',405,95); // sales clerk 3 box canvas.strokeRect(420,80,20,20); canvas.fillText('S3',423,95); // sales clerk 4 box canvas.strokeRect(440,80,20,20); canvas.fillText('S4',443,95); // line for web 1 canvas.moveTo(150,100); canvas.lineTo(150,120); canvas.stroke(); // line for web 2 canvas.moveTo(170,100); canvas.lineTo(170,120); canvas.stroke(); // line for web 3 canvas.moveTo(190,100); canvas.lineTo(190,120); canvas.stroke(); // line for web 4 canvas.moveTo(210,100); canvas.lineTo(210,120); canvas.stroke(); // box for web 1 canvas.strokeRect(140,120,20,20); canvas.fillText('W1',142,132); // box for web 2 canvas.strokeRect(160,120,20,20); canvas.fillText('W2',162,132); // box for web 3 canvas.strokeRect(180,120,20,20); canvas.fillText('W3',182,132); // box for web 4 canvas.strokeRect(200,120,20,20); canvas.fillText('W4',202,132); } window.addEventListener("load", doFirst,false); We now need to explain how to draw the organizational chart on our canvas using the Chart,js file instructions. Do not panic. It is not as complicated as it seems. The top three lines begin a JavasSript function called doFirst Next we create a variable called X and set it equal the the canvas element in the html file The third line tells it to behave in a two dimensional way. 3D is on the way in HTML5 Even though there are many lines in between these, the last line should be added now. The last line tells the browser to run the doFirst Java Script function as soon as the page loads. The lines in the middle are the ones that map out how to draw the chart. We have a canvas that is 200 pixels high and 900 pixels wide. Our chart is much wider than it is tall. 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 If this chart matches up with your company organization, feel free to just use this file You can modify certain lines if you wish. 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 Today we are going to build an job Description table into our presentation on the Management.html page. Click on the line below and examine the Job Description Chart. The table will be included in Article 1 just below the organization chart Our table consists of 4 columns: Name, Position, Salary, Duties There 21 Rows. One for each employee Management Page To see the code that makes our table. proceed as follows With the Management.html page on your screen, Right-click and select view page Source. You can then see the coding of the page. Let's see how the table was constructed. The next line begins our table. 〈Table cellpadding="15" cellspacing="5" border=".3"〉 The next line begins a new row of the table 〈TR〉 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. 〈TD〉:Staff Member's Name〈/TD〉〈TD〉Position〈/TD〉〈TD〉Salary〈/TD〉〈TD〈Duties〉/TD〉 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 〈/TR〉 end the row of the table. 〈rt〉 stand for regular text. Any time the browser sees this tag, the text is formatted as described in the .css file. 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. When the user hovers over the duty box, they will be able to see the job description for that employee. Follow the format of table substituting your own company information. Day 2 : Planning Strategy to be put into an audio presentation. Today we are going to make an audio recording of our Planning Strategy in our Business Plan Presentation software. This part of the presentation goes into Article two box along with the job descriptions table. Get a written copy of the planning strategy from your written business plan. This will be your script Next plug in your microphone Go to the Sound Recorder program. This comes with all windows programs. It is located in the Accessories group Click START Select All Programs Accessories Folder Sound Recorder Click Start Recording button Read Your script. When finished, click Stop Recording The SaveDialog Box comes up Select folder where you want to store the file Type in file name and then Save File The file extension will be .wma, which stands for Windows Media Audio For this file to work properly in our html document, we need to convert it from wma to mp3 There a number of audio converter programs available. 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. 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" <audio controls> <source src="planning.mp3" type="audio/mp3"> <source src="planning.ogg" type audio/ogg"> Your browser does not support the audio element. </audio> Save your html file. Try out the audio player. Day 3 Day 3: Management Page, Aside Elements - Directing and Controlling Now it is time to work on the side news box. Check out Lovebytes Management page AS you can see there two paragraphs . One is about Directing and the other about Controlling 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. Load your html template. Save it and all it Marketing.html in your student working folder We will be adding information to each of the box elements Get out your business plan document and turn to the marketing section It is in the marketing section of the business plan that you will draw out the information needed for the presentation. In the Lovebytes Marketing plan we have a service business. Marketing Page for Lovebytes We want to explain the product or service and perhaps show a picture. The above information should go into Article 1 box Our computer dating company also has a deluxe package and it is outlined. Day 5:Placement, Price and Promotion The Placement ,Price and Promotion are laid out in tabular form. See box below for the code. <Table border=3 cellpading=5 cellspacing=5> <TR> <TD><h2>Placement</h2><img src="pv.ico" height=12 width=12 Title="Our placement used to get our service to the consumer is via the Internet. That is our only channel of distribution. The compiling of data, creating the files, finding the matches and profiles will be handled at our headquarters. No middlemen are needed in our venture thus saving costs." </TD><TD><h2>Price</h2><img src="pv.ico" height=12 width=12 Title="Price will be competitive. For example, Match.com charges $16.99 per month for six months or $34.95 for one month. Other sites have much the same pricing structure. Lovebytes.com will charge $16.95/month for the six months, or $32.95 for a one month's subscription. We will have trade show discounts and special promotions during December, March and April. Clients who introduce Lovebytes to their friends will receive a 5% discount." </TD><TD><h2>Promotion</h2><img src="pv.ico" height=12 width=12 Title="Promotion will be accomplished in a couple of ways. The web site will be listed in the Virtual Enterprise shopping mall and meta tag information will be sent to the major search engines. The questionnaire will be attached to the web page. We will create ads that run on the Internet, tied to other Virtual Enterprise sites. Email ads will be created and sent to all Virtual Enterprise companies in California. Special flyers with trade show deals will be circulated during each of the trade shows. We will run an ad in our school paper and have a spot on the school's TV station feauring popular students in school showing how cool it is to use Lovebytes to get a date for a school activity. We will attempt to obtain company to company contracts with other VE companies. "</TD> </TR> </Table> Obviously you could present this information in many ways. I chose a table. See instructions above for how to put data into a table. Remember beginning and ending table tags with information about padding and spacing and borders Table rows beginning and ending tags Table data with is the information that goes into each cell. 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. Inside Article 1 box we are going to do some special things to make the Target Market and Market Segment, real attention getting. Make sure that your external links are to Main.cs an Chart2.js 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. Try them out by running and then launching Marketing.html Just pass your mouse over the target market button an see what happens. Then move the mouse off the button. What Happens? Look at the coding of the Marketing.html page We are going to set up two divisions. One for target market the other for market segment 〈div id="targetMarket"〉 is the first division. The next we type is〈P id="text"〉 Now key in the text defining your company target market. After keying in the text use the ending division tag, 〈Div/〉 Repeat the above procedure of the market segment. Now let's turn our attention to the Main3.css file to see how we can animate them Scroll down the file until you see the coding to format the targetMarket division #targetMarket{ display:block; margin:150px auto; color:#ffe4e1; -webkit-border-radius: 10px; opacity:0.4; background:magenta; width:120px; height:25px; -webkit-transition:-webkit-transform 2s,opacity 2s, background 2s, width 2s, height 2s; } #targetMarket:hover{ -webkit-transform: rotate(360deg); opacity:2.5; background:#5959ab; width:450px; height:390px; } Notice that the descriptions start out with the number sign, #, followed by the Id name, followed by a left-facing curly brace. The parameters for the button are listed below, followed by a right-facing curly brace. We want to display the button a a block. We set he margin at 250 pixels and auto-centers the button. We set the color of the button next. -webkit-border-radius;10px; makes rounded corners for the button Opacity refers to transparency. Now we set the background color, width and height before the transformation. 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 Look at the coding for the targetMarket button to see how to animate or move it We first identify the division segment, next the hover properties. We want to rotate the button 360 degrees. We change the opacity, background color, width and height. Experiment with these properties in your css file until you get the desired effect. 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 I used article two box to create an graphical analysis of our break-even point The vertical axis was used for expenses The horizontal axis, for sales Lovebytes needs to sell almost3,000 dating packages at $34.95 to covers its nearly $100,000 of expenses. Get the information you need to prepare a break even chart form your Accounting Department. I suggest that you draw it out first on a piece of paper before coding the coordinates for the lines and text The procedure for doing this chart is just like when we created the organizational chart. The coding for the beak even analysis can be found in Chart2.js Make sure that your html file calls that link. Check lines inside script tags. Here is the information contained in the Chart2.css fie function doFirst(){ var x = document.getElementById('canvas'); canvas = x.getContext('2d'); // vertical axis canvas.moveTo(50,20); canvas.lineTo(50,500); canvas.stroke(); //horizontal axis canvas.moveTo(50,500); canvas.lineTo(500,500); canvas.stroke(); //$100,000 sales canvas.fillText('Expenses',0,10); canvas.fillText('$100,000' , 1,20); //$75,000 canvas.fillText('$75,000',2,125); //$50,000 canvas.fillText('$50,000',2,250); //$25,000 canvas.fillText('$25,000',2,375); // $0.00 canvas.fillText('$0.00',2,500); //0 on horizontal axis canvas.fillText('0',50,520); canvas.fillText('Packages Sold',100,530); //1500 packages canvas.fillText('1,500',250,520); // 3000 packages canvas.fillText('3,000',472,520); // line from 0,0 to top canvas.moveTo(50,500); canvas.lineTo(500,0); canvas.stroke(); // other line canvas.moveTo(50,40); canvas.lineTo(600,40); canvas.stroke(); //profit area canvas.fillText('Profit Area',500,30); //loss area canvas.fillStyle='rgb(255,0,0)'; canvas.strokeStyle='rgb(0,111,174)'; canvas.fillText('Loss Area',200,160); canvas.stroke(); // data section canvas.fillText('Breakeven dollars = $97,742',50,600); canvas.fillText('Dating Package Cost = $32.95',50,610); canvas.fillText('Dating Package That Need to be Sold = 2,966',50,620); } window.addEventListener("load", doFirst,false); Day 4 and 5 Marketing Industry Analysis We are going to use the side news box for the industry analysis information Obtain that information from your business plan. It should include identification of industry threats and comparative national trends. Include industry strengths and threats Compare company vision and experiences against averages of similar operations. 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 Use the financial section Financial Section of your business plan for the following part of the presentation. Load your html template file, make modifications and save it calling it Financial.html in your student folder. StylePresentation.css and Chart2.js files are also needed. Make sure that you link them to your html file. There are a number of ways you can show a balance sheet, income statement in your presentation I used Article 1 for the video. 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 janetbelch.com There are a number of screen capture programs that you can use to create a video. I used an excellent, easy to use program from TechSmith called Camtasia. While making the video,I recorded the screens first as I demonstrated the program and added the audio track afterwords. 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. 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 <video src="General Ledger/General Ledger.mp4" controls width="640" width="360" poster="LBLogo.jpg"> </video> 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 In the example above the movie, General Ledger.mp4, is in a folder by the same name. The size of the controls to play the video are 640 by 360 pixels. The poster tag allows you to put a picture above the controls when the video is not playing. I just used a jpeg of Lovebytes logo. Day 3 and 4 Financial page, Cash Flow Article two box was used for this next section. I used Microsoft's Excel spreadsheet program for the Cash Flow Estimate 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 Explain where you got your beginning cash balance. First column which should include cash from investment and business loan. For other months, November through April, show beginning cash balance, which is the ending cash balance of the previous month. Include income from open houses, trade fairs and grand openings Remember that the money from trade fair sales comes in the next month since they are charge sales Include your business contract each month and all your company expenses. You will want to how that you always have enough cash to cover your immediate expenses. Day 5 Financial Page, Side News box. I used the aside box for information concerning the Business Investment, Business Loan and Business Contract Obtain this information from the financial section of the business plan Save your file in your student folder. 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. I decided to use the ntml5 feature of drag and drop to make the Strengths, Weakneses, Threats, and Opportunities Page. Load in your template for html and save it in your student fole as SWOT.html Load in necessary style, StylePresentation.css and JavaScript files, jerry.js into Notepad++ Run the SWOT Page to see how the program works. Drag and Drop is used in many desktop applications, therefore, HTML5 needed the same functionality. 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 the idea is to drag the image of the Cupid one into the blank box of the same name. Once you let go of the mouse-drop, the information about that characteristic appears in the blank box. It seemed like a flashy way to present the SWOT information. <section id="strengthBlank"> <BR> <BR> <br> <BR> <BR> <br> <h1> STRENGTHS</h1> </section> <section id="strengthCupid"> <img id="facepic1" src="CupidStrengths.jpg" height=275 width=200> </section> Here is the coding that relates to the sections of the SWOT.html page. I created eight sections One for each with an image of Cupid and one that was blank. The Blank one contains the Words like Strengths or Weaknesses or Threats or Opportunities The sections with cupid use the image tag to load a picture of Cupid See Below for how they are coded in the style file, StylePresentation.css #strengthBlank{ float:left; width:200px; height:275px; margin:2px; border:3px solid blue; } #strengthCupid{ float:left; width:200px; height:275px; margin:2px; border:3px solid green; } #weakBlank{ float:left; width:200px; height:275px; margin:2px; border:3px solid blue; } #weakCupid{ float:left; width:200px; height:275px; margin:2px; border:3px solid green; } #opportunityBlank{ float:left; width:200px; height:275px; margin:2px; border:3px solid blue; } #opportunityCupid{ float:left; width:200px; height:275px; margin:2px; border:3px solid green; } #threatsBlank{ float:left; width:200px; height:275px; margin:2px; border:3px solid blue; } #threatsCupid{ float:left; width:200px; height:275px; margin:2px; border:3px solid green; } All of them are floated to the left. All have the same width and height They all have the same margins All the ones containing Cupid have solid green borders. The blank sections have solid blue borders The actual coding for the drag and drop function is in the jerry.js file. Listed below is that specific coding for the doFirst function. function doFirst(){ mypic = document.getElementById('facepic1'); mypic.addEventListener("dragstart", startDrag,false); mypic.addEventListener("dragend", endDrag,false); threatsBlank = document.getElementById('threatsBlank'); threatsBlank.addEventListener("dragenter",dragenter,false); threatsBlank.addEventListener("dragleave",dragleave,false); threatsBlank.addEventListener("dragover",function(e){e.preventDefault();},false); threatsBlank.addEventListener("drop",dropped,false); function endDrag(e){ pic = e.target; pic.style.visibility = 'hidden'; } function dragenter(e){ e.preventDefault(); threatsBlank.style.background = "SkyBlue"; threatsBlank.style.border = "3px solid red"; } function dragleave(e){ e.preventDefault(); threatsBlank.style.background = "White"; threatsBlank.style.border = "3px solid "; } function startDrag(e){ var code = '<img src="Cupid.jpg" height=275 width=200>'; e.dataTransfer.setData('Text', code); } function dropped(e){ e.preventDefault(); threatsBlank.innerHTML = e.dataTransfer.getData('Text'); threatsCupid.innerHTML =("Privacy issues. Lots of competition for teen market's discretionary income. Social networking sites as competitors. Everchanging technology. Free versions offered by competitors. Once competitors see our success in our market segment, they will want to compete. "); } } window.addEventListener("load", doFirst, false); } Explanation of how drag and drop works The script file came from TheNewBoston.org web site 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 Let's examine the coding for doFirst function. All functions are almost identical The function is called as soon as the page loads with the line window.addEventListener("load",doFirst,false); This line is at the bottom of the doFirst Function. just before the doSecond function. Next a variable called mypic is equated to document.getElementsById('facepic1'); 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 Each one of the facepic variables is slightly different. 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. 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. 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. 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. The line that states mypic.addEventListner("dragstart"),startdrag,false); fires as soon as the user starts to drag the image. dragstart is a keyword and cannot be changed 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. dragener is a reserved word. It will call a function by the name endDrag which we will create later. 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. 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. 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 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 The browser stores that information like X and Y position of the mouse. 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〉'; This line is how we store information about the picture e.dataTransfer.setData('Text', code); Drag End Function dragEnd function When we drop the image into the box to the left, we want to have the original image to disappear. First we assign e.target to a variable called pic. The endDrag function sets our picture's style for visibility to hidden so it can't be seen. Drag Enter Function 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. The next line sets the background to SkyBlue The next line sets a 3 pixel border around the box that is solid red. Drag Leave Function 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. The second line sets the background color of the strengthBlank box to white The third line puts a 3 pixel solid border around the box. It is the same color as before - green. Drag Over Function 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 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. Now we have to identify where are going to drop the image. It will be in the box called strengthBlank The rest of the line tells the browser to take the information that is stored and drop the text in the box. 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 The purpose of this page it to highlight our program and the way it works. It is inserts into Article 1 box. The header is "New Way to get a date Try Lovebytes" You might use it to insert a video commercial for your company. Again we are using the Camtasia Studio 8 program, which captures the screen and audio. The video is quite short and we have a poster above the controls when the video is not playing. Create a line in your html file to play the video. The footer identifies who wrote the software and their title. <video src="Lovebytes Presentation/Lovebytes Presentation.mp4" controls width="640" width="360" poster="LBLogo.jpg"> </video> Remember to play on the web using html5 the file needs to be in the MP4 format. As mentioned before, a video presentation can be done ahead of time. By creating a video of a demonstration there is no chance of the presenter messing up. Day 4 Lovebytes Questionnaire The header for this article2 is 〈Header〉 〈BR〉 〈h1>Lovebytes Survey Sample Questions〈/h1〉 〈h3>Questionnaire〈/h3〉 〈/Header〉 <Table cellspacing=0 cellpadding=0 width="100%" border = 1> <!-- Question 1 --> <TR> <TD Align=left><P>1. My idea of a romantic evening would be a walk on the beach.</TD> <TD align=left><P><input Type="Radio" Name="RomanticEvening" Value="AS" >Agree Strongly</TD> <TD align=feft><P><Input Type ="Radio" NAME="RomanticEvening" Value="AM" >Areee Moderately</TD> <TD align=feft><P><Input Type ="Radio" NAME="RomanticEvening" Value="DM" >Disareee Moderately</TD> <TD align=feft><P><Input Type ="Radio" NAME="RomanticEvening" Value="DS" >Disagree Strongly</TD> <TR> <TD Align=left><P>2. My favorite kind of movie is:</TD> <TD align=left><P><input Type="Radio" Name="Movie" Value="Drama" >Drama</TD> <TD align=feft><P><Input Type ="Radio" NAME="Movie" Value="Adventure" >Adventure</TD> <TD align=feft><P><Input Type ="Radio" NAME="Movie" Value="Comedy" >Comedy</TD> <TD align=feft><P><Input Type ="Radio" NAME="Movie" Value="ScienceFiction" >Science Fiction</TD> </TR> Article 2 is a sampling of the questionnaire that respondents fill out. It created in a true html format, so that you as the presenter can answer the questions. The questionnaire is put into a table. Respondents answer the questions by clicking on the radio button of their choice 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. You can choose what ever you want to go here. The header for this section is〈h1〉Lovebytes Survey Sample Questions〈/h1〉 〈h3〉Questionnaire〈/h3〉 The footer for this article is 〈Footer〉 〈p〉Questionnaire developed by LoveBytes.com〈/p〉〈/Footer〉 Day 5 Side New Section: Business Partners 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 Take a look at the Appendix Link The user enters numbers for terms of the loan and then hovers over a special button to make the calculations The showpay() function in the java script file is called and here is where the calculations are made. Load in your flexible box model html template and save it as Appendix.html in your student folder. Remember all the headings, format for the boxes, menu and navigation link are the same for all pages of your presentation. The JavaScript link is called janet.js. Make that adjustment in your html file. 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. 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. Below is a listing of the HTML file portion of the program that shows the loan program. <Section id="main_section"> <Article> <Header> <center><H1>Loan Amortization</h1> <H2>Business Loan</h2> </header> The results of this loan payment calculator are for comparison purposes only. They will be a close approximation of actual loan repayments if available at the terms entered, from a financial institution. This is being provided for you to plan your next loan application. To use, enter values for the Loan Amount, Number of Months for Loan, and the Interest Rate (e.g. 7.25), and click the Calculate button. <footer> <p>Loan Calculator Developed by Janet Belch, CFo</p> </Footer> <p> <BR> <center> <header> Find monthly payment for VEC Loan </header> <table width=60% border=0> <tr><th bgcolor="#aaaaaa" width=50%><font color=blue>Description</font></th> <th bgcolor="#aaaaaa" width=50%><font color=blue>Data Entry</font></th></tr> <tr><td bgcolor="#eeeee">Loan Amount</td><td bgcolor="#aaeeaa" align=right><input type=text name=loan size=10></td></tr> <tr><td bgcolor="#eeeee">Loan Length in Months</td><td bgcolor="#aaeeaa" align=right><input type=text name=months size=10></td></tr> <tr><td bgcolor="#eeeee">Interest Rate</td><td bgcolor="#aaeeaa" align=right><input type=text name=rate size=10></td></tr> <tr> <TD align=right><em>Calculated</em> <input type=text name=pay size=15></td></tr> </table> </form> <font size=1>Enter only numeric values (no commas), using decimal points where needed.<br> Non-numeric values will cause errors.</font> </center> </Article> <div id="box"> <!--<p id="text">Loan Amortization</p>--> <input type="button style = visibility:hidden" value="Loan Amortization" onMouseOut='showpay()'/> </br></p> <BR><BR><BR><BR><BR><BR><BR> <Footer> <rt>Button designed by Jerry</rt> </Footer> </Article> </section> The data entry portion of the calculator program is formatted in a table that utilizes 60% of the screen. The table has no border. Table Headings background color is gray The boxes where you enter the data are white. The box is our button. We have used this type of html5 button before. When it is clicked on it goes to the Java script file called janet.js and executes the showpay() function. 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. It returns the value of this function back to the HTML file as the word pay. 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 The part of the Appendix page is in the Aside_news box. The first two are excellent references for HTML5, CSS and JavaScript. The third link is for your company's business contract. 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. Spend the next two days checking out all links, spelling and grammar. Make certain all the JavaScript works and delivers the right answers and results To do well giving a presentation in front of judges, please practice your presentation in front of different groups. Each Department vice president should explain their portion of the presentation. 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
<audio controls height= "100" width="100"> <source src="love.mp3" type="audio/mpeg"> <source src="love.ogg" type audio/ogg"> Your browser does not support the audio element. </audio>
Day 5 The Management.html page: Organization chart Open your html template file, Save it in your own folder or workspace and call it Management.html Make sure that your cascading Style Sheet file, StylePresentation.css, is also saved in the same folder. The management page consists of an organizational chart, job descriptions for our staff, Planning Strategies, and audio presentation. For Day 5 we will just look at how to do the organizational chart using the html5 canvas element and the Chart.js file. The new HTML 5 concepts introduced include the Canvas element, which was used to construct the organizational chart Open Management.html in Notepad++ There a few new things to learn here. In addition to a css file and html file we will add an external JavaScript file. 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. <Link Rel="StyleSheet" href="StylePresentation.css"> <script src = "Chart.js"> </script> </head> <body> Also locate the lines that relate to the Canvas Element in the HTML file. They are in Article one box. <canvas id="canvas" height="200" width="900"> Hopefully you do not see this. Get Google Chrome as your Browser </canvas> 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.. This is the area set aside to draw things in. Our canvas is 200 pixels high and 900 wide, Here is what the Chart.js file looks like function doFirst(){ var x = document.getElementById('canvas'); canvas = x.getContext('2d'); //canvas.beginPath(); canvas.moveTo(10,20); canvas.lineTo(249,20); canvas.stroke(); canvas.strokeRect(250,5,100,25); canvas.fillText('Chief Exe Officer',255,22); canvas.moveTo(350,20); canvas.lineTo(550,20); canvas.stroke(); //line down to first vp canvas.moveTo(40,20); canvas.lineTo(40,40); canvas.stroke(); // line down for second vp canvas.moveTo(180,20); canvas.lineTo(180,40); canvas.stroke(); // line down for third vp canvas.moveTo(420,20); canvas.lineTo(420,40); canvas.stroke(); // line down for fourth vp canvas.moveTo(520,20); canvas.lineTo(520,40); canvas.stroke(); //first vp box canvas.strokeRect(10,40,60,20); canvas.fillText('CFO',20,52); // Vp of It canvas.moveTo(150,40); canvas.lineTo(150,40); canvas.stroke(); canvas.strokeRect(150,40,60,20); canvas.fillText('IT VP',155,52); //administrative assistant canvas.moveTo(300,30); canvas.lineTo(300,40); canvas.stroke(); canvas.strokeRect(270,40,60,20); canvas.fillText('Adm Assist',275,55); // vp of sales canvas.strokeRect(390,40,60,20); canvas.fillText('VP Sales',395,55); // vp of human resources canvas.strokeRect(490,40,60,20); canvas.fillText('VP of HR',495,55); // payroll clerk line canvas.moveTo(10,80); canvas.lineTo(10,60); canvas.stroke(); // Ar Clerk canvas.moveTo(40,80); canvas.lineTo(40,60); canvas.stroke(); // banker Gl clerk canvas.moveTo(70,80); canvas.lineTo(70,60); canvas.stroke(); // web master line down canvas.moveTo(180,80); canvas.lineTo(180,60); canvas.stroke(); //sales clerk 1 - lines down canvas.moveTo(390,80); canvas.lineTo(390,60); canvas.stroke(); //sales clerk 2 - lines down canvas.moveTo(410,80); canvas.lineTo(410,60); canvas.stroke(); //sales clerk 3 - lines down canvas.moveTo(430,80); canvas.lineTo(430,60); canvas.stroke(); //sales clerk 4 - lines down canvas.moveTo(450,80); canvas.lineTo(450,60); canvas.stroke(); // payroll clerk box canvas.strokeRect(2,80,20,20); canvas.fillText('P',5,95); // AR clerk box canvas.strokeRect(30,80,20,20); canvas.fillText('AR',32,95); // banker clerk box canvas.strokeRect(60,80,20,20); canvas.fillText('B',66,95); // web master box canvas.strokeRect(150,80,60,20); canvas.fillText('Web Master', 152,93); // sales clerk 1 box canvas.strokeRect(380,80,20,20); canvas.fillText('S1',382,95); // sales clerk 2 box canvas.strokeRect(400,80,20,20); canvas.fillText('S2',405,95); // sales clerk 3 box canvas.strokeRect(420,80,20,20); canvas.fillText('S3',423,95); // sales clerk 4 box canvas.strokeRect(440,80,20,20); canvas.fillText('S4',443,95); // line for web 1 canvas.moveTo(150,100); canvas.lineTo(150,120); canvas.stroke(); // line for web 2 canvas.moveTo(170,100); canvas.lineTo(170,120); canvas.stroke(); // line for web 3 canvas.moveTo(190,100); canvas.lineTo(190,120); canvas.stroke(); // line for web 4 canvas.moveTo(210,100); canvas.lineTo(210,120); canvas.stroke(); // box for web 1 canvas.strokeRect(140,120,20,20); canvas.fillText('W1',142,132); // box for web 2 canvas.strokeRect(160,120,20,20); canvas.fillText('W2',162,132); // box for web 3 canvas.strokeRect(180,120,20,20); canvas.fillText('W3',182,132); // box for web 4 canvas.strokeRect(200,120,20,20); canvas.fillText('W4',202,132); } window.addEventListener("load", doFirst,false); We now need to explain how to draw the organizational chart on our canvas using the Chart,js file instructions. Do not panic. It is not as complicated as it seems. The top three lines begin a JavasSript function called doFirst Next we create a variable called X and set it equal the the canvas element in the html file The third line tells it to behave in a two dimensional way. 3D is on the way in HTML5 Even though there are many lines in between these, the last line should be added now. The last line tells the browser to run the doFirst Java Script function as soon as the page loads. The lines in the middle are the ones that map out how to draw the chart. We have a canvas that is 200 pixels high and 900 pixels wide. Our chart is much wider than it is tall. 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 If this chart matches up with your company organization, feel free to just use this file You can modify certain lines if you wish. 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 Today we are going to build an job Description table into our presentation on the Management.html page. Click on the line below and examine the Job Description Chart. The table will be included in Article 1 just below the organization chart Our table consists of 4 columns: Name, Position, Salary, Duties There 21 Rows. One for each employee Management Page To see the code that makes our table. proceed as follows With the Management.html page on your screen, Right-click and select view page Source. You can then see the coding of the page. Let's see how the table was constructed. The next line begins our table. 〈Table cellpadding="15" cellspacing="5" border=".3"〉 The next line begins a new row of the table 〈TR〉 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. 〈TD〉:Staff Member's Name〈/TD〉〈TD〉Position〈/TD〉〈TD〉Salary〈/TD〉〈TD〈Duties〉/TD〉 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 〈/TR〉 end the row of the table. 〈rt〉 stand for regular text. Any time the browser sees this tag, the text is formatted as described in the .css file. 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. When the user hovers over the duty box, they will be able to see the job description for that employee. Follow the format of table substituting your own company information. Day 2 : Planning Strategy to be put into an audio presentation. Today we are going to make an audio recording of our Planning Strategy in our Business Plan Presentation software. This part of the presentation goes into Article two box along with the job descriptions table. Get a written copy of the planning strategy from your written business plan. This will be your script Next plug in your microphone Go to the Sound Recorder program. This comes with all windows programs. It is located in the Accessories group Click START Select All Programs Accessories Folder Sound Recorder Click Start Recording button Read Your script. When finished, click Stop Recording The SaveDialog Box comes up Select folder where you want to store the file Type in file name and then Save File The file extension will be .wma, which stands for Windows Media Audio For this file to work properly in our html document, we need to convert it from wma to mp3 There a number of audio converter programs available. 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. 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" <audio controls> <source src="planning.mp3" type="audio/mp3"> <source src="planning.ogg" type audio/ogg"> Your browser does not support the audio element. </audio> Save your html file. Try out the audio player. Day 3 Day 3: Management Page, Aside Elements - Directing and Controlling Now it is time to work on the side news box. Check out Lovebytes Management page AS you can see there two paragraphs . One is about Directing and the other about Controlling 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. Load your html template. Save it and all it Marketing.html in your student working folder We will be adding information to each of the box elements Get out your business plan document and turn to the marketing section It is in the marketing section of the business plan that you will draw out the information needed for the presentation. In the Lovebytes Marketing plan we have a service business. Marketing Page for Lovebytes We want to explain the product or service and perhaps show a picture. The above information should go into Article 1 box Our computer dating company also has a deluxe package and it is outlined. Day 5:Placement, Price and Promotion The Placement ,Price and Promotion are laid out in tabular form. See box below for the code. <Table border=3 cellpading=5 cellspacing=5> <TR> <TD><h2>Placement</h2><img src="pv.ico" height=12 width=12 Title="Our placement used to get our service to the consumer is via the Internet. That is our only channel of distribution. The compiling of data, creating the files, finding the matches and profiles will be handled at our headquarters. No middlemen are needed in our venture thus saving costs." </TD><TD><h2>Price</h2><img src="pv.ico" height=12 width=12 Title="Price will be competitive. For example, Match.com charges $16.99 per month for six months or $34.95 for one month. Other sites have much the same pricing structure. Lovebytes.com will charge $16.95/month for the six months, or $32.95 for a one month's subscription. We will have trade show discounts and special promotions during December, March and April. Clients who introduce Lovebytes to their friends will receive a 5% discount." </TD><TD><h2>Promotion</h2><img src="pv.ico" height=12 width=12 Title="Promotion will be accomplished in a couple of ways. The web site will be listed in the Virtual Enterprise shopping mall and meta tag information will be sent to the major search engines. The questionnaire will be attached to the web page. We will create ads that run on the Internet, tied to other Virtual Enterprise sites. Email ads will be created and sent to all Virtual Enterprise companies in California. Special flyers with trade show deals will be circulated during each of the trade shows. We will run an ad in our school paper and have a spot on the school's TV station feauring popular students in school showing how cool it is to use Lovebytes to get a date for a school activity. We will attempt to obtain company to company contracts with other VE companies. "</TD> </TR> </Table> Obviously you could present this information in many ways. I chose a table. See instructions above for how to put data into a table. Remember beginning and ending table tags with information about padding and spacing and borders Table rows beginning and ending tags Table data with is the information that goes into each cell. 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. Inside Article 1 box we are going to do some special things to make the Target Market and Market Segment, real attention getting. Make sure that your external links are to Main.cs an Chart2.js 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. Try them out by running and then launching Marketing.html Just pass your mouse over the target market button an see what happens. Then move the mouse off the button. What Happens? Look at the coding of the Marketing.html page We are going to set up two divisions. One for target market the other for market segment 〈div id="targetMarket"〉 is the first division. The next we type is〈P id="text"〉 Now key in the text defining your company target market. After keying in the text use the ending division tag, 〈Div/〉 Repeat the above procedure of the market segment. Now let's turn our attention to the Main3.css file to see how we can animate them Scroll down the file until you see the coding to format the targetMarket division #targetMarket{ display:block; margin:150px auto; color:#ffe4e1; -webkit-border-radius: 10px; opacity:0.4; background:magenta; width:120px; height:25px; -webkit-transition:-webkit-transform 2s,opacity 2s, background 2s, width 2s, height 2s; } #targetMarket:hover{ -webkit-transform: rotate(360deg); opacity:2.5; background:#5959ab; width:450px; height:390px; } Notice that the descriptions start out with the number sign, #, followed by the Id name, followed by a left-facing curly brace. The parameters for the button are listed below, followed by a right-facing curly brace. We want to display the button a a block. We set he margin at 250 pixels and auto-centers the button. We set the color of the button next. -webkit-border-radius;10px; makes rounded corners for the button Opacity refers to transparency. Now we set the background color, width and height before the transformation. 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 Look at the coding for the targetMarket button to see how to animate or move it We first identify the division segment, next the hover properties. We want to rotate the button 360 degrees. We change the opacity, background color, width and height. Experiment with these properties in your css file until you get the desired effect. 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 I used article two box to create an graphical analysis of our break-even point The vertical axis was used for expenses The horizontal axis, for sales Lovebytes needs to sell almost3,000 dating packages at $34.95 to covers its nearly $100,000 of expenses. Get the information you need to prepare a break even chart form your Accounting Department. I suggest that you draw it out first on a piece of paper before coding the coordinates for the lines and text The procedure for doing this chart is just like when we created the organizational chart. The coding for the beak even analysis can be found in Chart2.js Make sure that your html file calls that link. Check lines inside script tags. Here is the information contained in the Chart2.css fie function doFirst(){ var x = document.getElementById('canvas'); canvas = x.getContext('2d'); // vertical axis canvas.moveTo(50,20); canvas.lineTo(50,500); canvas.stroke(); //horizontal axis canvas.moveTo(50,500); canvas.lineTo(500,500); canvas.stroke(); //$100,000 sales canvas.fillText('Expenses',0,10); canvas.fillText('$100,000' , 1,20); //$75,000 canvas.fillText('$75,000',2,125); //$50,000 canvas.fillText('$50,000',2,250); //$25,000 canvas.fillText('$25,000',2,375); // $0.00 canvas.fillText('$0.00',2,500); //0 on horizontal axis canvas.fillText('0',50,520); canvas.fillText('Packages Sold',100,530); //1500 packages canvas.fillText('1,500',250,520); // 3000 packages canvas.fillText('3,000',472,520); // line from 0,0 to top canvas.moveTo(50,500); canvas.lineTo(500,0); canvas.stroke(); // other line canvas.moveTo(50,40); canvas.lineTo(600,40); canvas.stroke(); //profit area canvas.fillText('Profit Area',500,30); //loss area canvas.fillStyle='rgb(255,0,0)'; canvas.strokeStyle='rgb(0,111,174)'; canvas.fillText('Loss Area',200,160); canvas.stroke(); // data section canvas.fillText('Breakeven dollars = $97,742',50,600); canvas.fillText('Dating Package Cost = $32.95',50,610); canvas.fillText('Dating Package That Need to be Sold = 2,966',50,620); } window.addEventListener("load", doFirst,false); Day 4 and 5 Marketing Industry Analysis We are going to use the side news box for the industry analysis information Obtain that information from your business plan. It should include identification of industry threats and comparative national trends. Include industry strengths and threats Compare company vision and experiences against averages of similar operations. 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 Use the financial section Financial Section of your business plan for the following part of the presentation. Load your html template file, make modifications and save it calling it Financial.html in your student folder. StylePresentation.css and Chart2.js files are also needed. Make sure that you link them to your html file. There are a number of ways you can show a balance sheet, income statement in your presentation I used Article 1 for the video. 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 janetbelch.com There are a number of screen capture programs that you can use to create a video. I used an excellent, easy to use program from TechSmith called Camtasia. While making the video,I recorded the screens first as I demonstrated the program and added the audio track afterwords. 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. 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 <video src="General Ledger/General Ledger.mp4" controls width="640" width="360" poster="LBLogo.jpg"> </video> 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 In the example above the movie, General Ledger.mp4, is in a folder by the same name. The size of the controls to play the video are 640 by 360 pixels. The poster tag allows you to put a picture above the controls when the video is not playing. I just used a jpeg of Lovebytes logo. Day 3 and 4 Financial page, Cash Flow Article two box was used for this next section. I used Microsoft's Excel spreadsheet program for the Cash Flow Estimate 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 Explain where you got your beginning cash balance. First column which should include cash from investment and business loan. For other months, November through April, show beginning cash balance, which is the ending cash balance of the previous month. Include income from open houses, trade fairs and grand openings Remember that the money from trade fair sales comes in the next month since they are charge sales Include your business contract each month and all your company expenses. You will want to how that you always have enough cash to cover your immediate expenses. Day 5 Financial Page, Side News box. I used the aside box for information concerning the Business Investment, Business Loan and Business Contract Obtain this information from the financial section of the business plan Save your file in your student folder. 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. I decided to use the ntml5 feature of drag and drop to make the Strengths, Weakneses, Threats, and Opportunities Page. Load in your template for html and save it in your student fole as SWOT.html Load in necessary style, StylePresentation.css and JavaScript files, jerry.js into Notepad++ Run the SWOT Page to see how the program works. Drag and Drop is used in many desktop applications, therefore, HTML5 needed the same functionality. 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 the idea is to drag the image of the Cupid one into the blank box of the same name. Once you let go of the mouse-drop, the information about that characteristic appears in the blank box. It seemed like a flashy way to present the SWOT information. <section id="strengthBlank"> <BR> <BR> <br> <BR> <BR> <br> <h1> STRENGTHS</h1> </section> <section id="strengthCupid"> <img id="facepic1" src="CupidStrengths.jpg" height=275 width=200> </section> Here is the coding that relates to the sections of the SWOT.html page. I created eight sections One for each with an image of Cupid and one that was blank. The Blank one contains the Words like Strengths or Weaknesses or Threats or Opportunities The sections with cupid use the image tag to load a picture of Cupid See Below for how they are coded in the style file, StylePresentation.css #strengthBlank{ float:left; width:200px; height:275px; margin:2px; border:3px solid blue; } #strengthCupid{ float:left; width:200px; height:275px; margin:2px; border:3px solid green; } #weakBlank{ float:left; width:200px; height:275px; margin:2px; border:3px solid blue; } #weakCupid{ float:left; width:200px; height:275px; margin:2px; border:3px solid green; } #opportunityBlank{ float:left; width:200px; height:275px; margin:2px; border:3px solid blue; } #opportunityCupid{ float:left; width:200px; height:275px; margin:2px; border:3px solid green; } #threatsBlank{ float:left; width:200px; height:275px; margin:2px; border:3px solid blue; } #threatsCupid{ float:left; width:200px; height:275px; margin:2px; border:3px solid green; } All of them are floated to the left. All have the same width and height They all have the same margins All the ones containing Cupid have solid green borders. The blank sections have solid blue borders The actual coding for the drag and drop function is in the jerry.js file. Listed below is that specific coding for the doFirst function. function doFirst(){ mypic = document.getElementById('facepic1'); mypic.addEventListener("dragstart", startDrag,false); mypic.addEventListener("dragend", endDrag,false); threatsBlank = document.getElementById('threatsBlank'); threatsBlank.addEventListener("dragenter",dragenter,false); threatsBlank.addEventListener("dragleave",dragleave,false); threatsBlank.addEventListener("dragover",function(e){e.preventDefault();},false); threatsBlank.addEventListener("drop",dropped,false); function endDrag(e){ pic = e.target; pic.style.visibility = 'hidden'; } function dragenter(e){ e.preventDefault(); threatsBlank.style.background = "SkyBlue"; threatsBlank.style.border = "3px solid red"; } function dragleave(e){ e.preventDefault(); threatsBlank.style.background = "White"; threatsBlank.style.border = "3px solid "; } function startDrag(e){ var code = '<img src="Cupid.jpg" height=275 width=200>'; e.dataTransfer.setData('Text', code); } function dropped(e){ e.preventDefault(); threatsBlank.innerHTML = e.dataTransfer.getData('Text'); threatsCupid.innerHTML =("Privacy issues. Lots of competition for teen market's discretionary income. Social networking sites as competitors. Everchanging technology. Free versions offered by competitors. Once competitors see our success in our market segment, they will want to compete. "); } } window.addEventListener("load", doFirst, false); } Explanation of how drag and drop works The script file came from TheNewBoston.org web site 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 Let's examine the coding for doFirst function. All functions are almost identical The function is called as soon as the page loads with the line window.addEventListener("load",doFirst,false); This line is at the bottom of the doFirst Function. just before the doSecond function. Next a variable called mypic is equated to document.getElementsById('facepic1'); 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 Each one of the facepic variables is slightly different. 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. 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. 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. 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. The line that states mypic.addEventListner("dragstart"),startdrag,false); fires as soon as the user starts to drag the image. dragstart is a keyword and cannot be changed 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. dragener is a reserved word. It will call a function by the name endDrag which we will create later. 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. 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. 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 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 The browser stores that information like X and Y position of the mouse. 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〉'; This line is how we store information about the picture e.dataTransfer.setData('Text', code); Drag End Function dragEnd function When we drop the image into the box to the left, we want to have the original image to disappear. First we assign e.target to a variable called pic. The endDrag function sets our picture's style for visibility to hidden so it can't be seen. Drag Enter Function 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. The next line sets the background to SkyBlue The next line sets a 3 pixel border around the box that is solid red. Drag Leave Function 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. The second line sets the background color of the strengthBlank box to white The third line puts a 3 pixel solid border around the box. It is the same color as before - green. Drag Over Function 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 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. Now we have to identify where are going to drop the image. It will be in the box called strengthBlank The rest of the line tells the browser to take the information that is stored and drop the text in the box. 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 The purpose of this page it to highlight our program and the way it works. It is inserts into Article 1 box. The header is "New Way to get a date Try Lovebytes" You might use it to insert a video commercial for your company. Again we are using the Camtasia Studio 8 program, which captures the screen and audio. The video is quite short and we have a poster above the controls when the video is not playing. Create a line in your html file to play the video. The footer identifies who wrote the software and their title. <video src="Lovebytes Presentation/Lovebytes Presentation.mp4" controls width="640" width="360" poster="LBLogo.jpg"> </video> Remember to play on the web using html5 the file needs to be in the MP4 format. As mentioned before, a video presentation can be done ahead of time. By creating a video of a demonstration there is no chance of the presenter messing up. Day 4 Lovebytes Questionnaire The header for this article2 is 〈Header〉 〈BR〉 〈h1>Lovebytes Survey Sample Questions〈/h1〉 〈h3>Questionnaire〈/h3〉 〈/Header〉 <Table cellspacing=0 cellpadding=0 width="100%" border = 1> <!-- Question 1 --> <TR> <TD Align=left><P>1. My idea of a romantic evening would be a walk on the beach.</TD> <TD align=left><P><input Type="Radio" Name="RomanticEvening" Value="AS" >Agree Strongly</TD> <TD align=feft><P><Input Type ="Radio" NAME="RomanticEvening" Value="AM" >Areee Moderately</TD> <TD align=feft><P><Input Type ="Radio" NAME="RomanticEvening" Value="DM" >Disareee Moderately</TD> <TD align=feft><P><Input Type ="Radio" NAME="RomanticEvening" Value="DS" >Disagree Strongly</TD> <TR> <TD Align=left><P>2. My favorite kind of movie is:</TD> <TD align=left><P><input Type="Radio" Name="Movie" Value="Drama" >Drama</TD> <TD align=feft><P><Input Type ="Radio" NAME="Movie" Value="Adventure" >Adventure</TD> <TD align=feft><P><Input Type ="Radio" NAME="Movie" Value="Comedy" >Comedy</TD> <TD align=feft><P><Input Type ="Radio" NAME="Movie" Value="ScienceFiction" >Science Fiction</TD> </TR> Article 2 is a sampling of the questionnaire that respondents fill out. It created in a true html format, so that you as the presenter can answer the questions. The questionnaire is put into a table. Respondents answer the questions by clicking on the radio button of their choice 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. You can choose what ever you want to go here. The header for this section is〈h1〉Lovebytes Survey Sample Questions〈/h1〉 〈h3〉Questionnaire〈/h3〉 The footer for this article is 〈Footer〉 〈p〉Questionnaire developed by LoveBytes.com〈/p〉〈/Footer〉 Day 5 Side New Section: Business Partners 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 Take a look at the Appendix Link The user enters numbers for terms of the loan and then hovers over a special button to make the calculations The showpay() function in the java script file is called and here is where the calculations are made. Load in your flexible box model html template and save it as Appendix.html in your student folder. Remember all the headings, format for the boxes, menu and navigation link are the same for all pages of your presentation. The JavaScript link is called janet.js. Make that adjustment in your html file. 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. 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. Below is a listing of the HTML file portion of the program that shows the loan program. <Section id="main_section"> <Article> <Header> <center><H1>Loan Amortization</h1> <H2>Business Loan</h2> </header> The results of this loan payment calculator are for comparison purposes only. They will be a close approximation of actual loan repayments if available at the terms entered, from a financial institution. This is being provided for you to plan your next loan application. To use, enter values for the Loan Amount, Number of Months for Loan, and the Interest Rate (e.g. 7.25), and click the Calculate button. <footer> <p>Loan Calculator Developed by Janet Belch, CFo</p> </Footer> <p> <BR> <center> <header> Find monthly payment for VEC Loan </header> <table width=60% border=0> <tr><th bgcolor="#aaaaaa" width=50%><font color=blue>Description</font></th> <th bgcolor="#aaaaaa" width=50%><font color=blue>Data Entry</font></th></tr> <tr><td bgcolor="#eeeee">Loan Amount</td><td bgcolor="#aaeeaa" align=right><input type=text name=loan size=10></td></tr> <tr><td bgcolor="#eeeee">Loan Length in Months</td><td bgcolor="#aaeeaa" align=right><input type=text name=months size=10></td></tr> <tr><td bgcolor="#eeeee">Interest Rate</td><td bgcolor="#aaeeaa" align=right><input type=text name=rate size=10></td></tr> <tr> <TD align=right><em>Calculated</em> <input type=text name=pay size=15></td></tr> </table> </form> <font size=1>Enter only numeric values (no commas), using decimal points where needed.<br> Non-numeric values will cause errors.</font> </center> </Article> <div id="box"> <!--<p id="text">Loan Amortization</p>--> <input type="button style = visibility:hidden" value="Loan Amortization" onMouseOut='showpay()'/> </br></p> <BR><BR><BR><BR><BR><BR><BR> <Footer> <rt>Button designed by Jerry</rt> </Footer> </Article> </section> The data entry portion of the calculator program is formatted in a table that utilizes 60% of the screen. The table has no border. Table Headings background color is gray The boxes where you enter the data are white. The box is our button. We have used this type of html5 button before. When it is clicked on it goes to the Java script file called janet.js and executes the showpay() function. 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. It returns the value of this function back to the HTML file as the word pay. 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 The part of the Appendix page is in the Aside_news box. The first two are excellent references for HTML5, CSS and JavaScript. The third link is for your company's business contract. 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. Spend the next two days checking out all links, spelling and grammar. Make certain all the JavaScript works and delivers the right answers and results To do well giving a presentation in front of judges, please practice your presentation in front of different groups. Each Department vice president should explain their portion of the presentation. 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
<Link Rel="StyleSheet" href="StylePresentation.css"> <script src = "Chart.js"> </script> </head> <body>
<canvas id="canvas" height="200" width="900"> Hopefully you do not see this. Get Google Chrome as your Browser </canvas>
function doFirst(){ var x = document.getElementById('canvas'); canvas = x.getContext('2d'); //canvas.beginPath(); canvas.moveTo(10,20); canvas.lineTo(249,20); canvas.stroke(); canvas.strokeRect(250,5,100,25); canvas.fillText('Chief Exe Officer',255,22); canvas.moveTo(350,20); canvas.lineTo(550,20); canvas.stroke(); //line down to first vp canvas.moveTo(40,20); canvas.lineTo(40,40); canvas.stroke(); // line down for second vp canvas.moveTo(180,20); canvas.lineTo(180,40); canvas.stroke(); // line down for third vp canvas.moveTo(420,20); canvas.lineTo(420,40); canvas.stroke(); // line down for fourth vp canvas.moveTo(520,20); canvas.lineTo(520,40); canvas.stroke(); //first vp box canvas.strokeRect(10,40,60,20); canvas.fillText('CFO',20,52); // Vp of It canvas.moveTo(150,40); canvas.lineTo(150,40); canvas.stroke(); canvas.strokeRect(150,40,60,20); canvas.fillText('IT VP',155,52); //administrative assistant canvas.moveTo(300,30); canvas.lineTo(300,40); canvas.stroke(); canvas.strokeRect(270,40,60,20); canvas.fillText('Adm Assist',275,55); // vp of sales canvas.strokeRect(390,40,60,20); canvas.fillText('VP Sales',395,55); // vp of human resources canvas.strokeRect(490,40,60,20); canvas.fillText('VP of HR',495,55); // payroll clerk line canvas.moveTo(10,80); canvas.lineTo(10,60); canvas.stroke(); // Ar Clerk canvas.moveTo(40,80); canvas.lineTo(40,60); canvas.stroke(); // banker Gl clerk canvas.moveTo(70,80); canvas.lineTo(70,60); canvas.stroke(); // web master line down canvas.moveTo(180,80); canvas.lineTo(180,60); canvas.stroke(); //sales clerk 1 - lines down canvas.moveTo(390,80); canvas.lineTo(390,60); canvas.stroke(); //sales clerk 2 - lines down canvas.moveTo(410,80); canvas.lineTo(410,60); canvas.stroke(); //sales clerk 3 - lines down canvas.moveTo(430,80); canvas.lineTo(430,60); canvas.stroke(); //sales clerk 4 - lines down canvas.moveTo(450,80); canvas.lineTo(450,60); canvas.stroke(); // payroll clerk box canvas.strokeRect(2,80,20,20); canvas.fillText('P',5,95); // AR clerk box canvas.strokeRect(30,80,20,20); canvas.fillText('AR',32,95); // banker clerk box canvas.strokeRect(60,80,20,20); canvas.fillText('B',66,95); // web master box canvas.strokeRect(150,80,60,20); canvas.fillText('Web Master', 152,93); // sales clerk 1 box canvas.strokeRect(380,80,20,20); canvas.fillText('S1',382,95); // sales clerk 2 box canvas.strokeRect(400,80,20,20); canvas.fillText('S2',405,95); // sales clerk 3 box canvas.strokeRect(420,80,20,20); canvas.fillText('S3',423,95); // sales clerk 4 box canvas.strokeRect(440,80,20,20); canvas.fillText('S4',443,95); // line for web 1 canvas.moveTo(150,100); canvas.lineTo(150,120); canvas.stroke(); // line for web 2 canvas.moveTo(170,100); canvas.lineTo(170,120); canvas.stroke(); // line for web 3 canvas.moveTo(190,100); canvas.lineTo(190,120); canvas.stroke(); // line for web 4 canvas.moveTo(210,100); canvas.lineTo(210,120); canvas.stroke(); // box for web 1 canvas.strokeRect(140,120,20,20); canvas.fillText('W1',142,132); // box for web 2 canvas.strokeRect(160,120,20,20); canvas.fillText('W2',162,132); // box for web 3 canvas.strokeRect(180,120,20,20); canvas.fillText('W3',182,132); // box for web 4 canvas.strokeRect(200,120,20,20); canvas.fillText('W4',202,132); } window.addEventListener("load", doFirst,false);
Printer Friendly Version - Week 2
Management Page
Day 2 : Planning Strategy to be put into an audio presentation. Today we are going to make an audio recording of our Planning Strategy in our Business Plan Presentation software. This part of the presentation goes into Article two box along with the job descriptions table. Get a written copy of the planning strategy from your written business plan. This will be your script Next plug in your microphone Go to the Sound Recorder program. This comes with all windows programs. It is located in the Accessories group Click START Select All Programs Accessories Folder Sound Recorder Click Start Recording button Read Your script. When finished, click Stop Recording The SaveDialog Box comes up Select folder where you want to store the file Type in file name and then Save File The file extension will be .wma, which stands for Windows Media Audio For this file to work properly in our html document, we need to convert it from wma to mp3 There a number of audio converter programs available. 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. 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" <audio controls> <source src="planning.mp3" type="audio/mp3"> <source src="planning.ogg" type audio/ogg"> Your browser does not support the audio element. </audio> Save your html file. Try out the audio player. Day 3 Day 3: Management Page, Aside Elements - Directing and Controlling Now it is time to work on the side news box. Check out Lovebytes Management page AS you can see there two paragraphs . One is about Directing and the other about Controlling 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. Load your html template. Save it and all it Marketing.html in your student working folder We will be adding information to each of the box elements Get out your business plan document and turn to the marketing section It is in the marketing section of the business plan that you will draw out the information needed for the presentation. In the Lovebytes Marketing plan we have a service business. Marketing Page for Lovebytes We want to explain the product or service and perhaps show a picture. The above information should go into Article 1 box Our computer dating company also has a deluxe package and it is outlined. Day 5:Placement, Price and Promotion The Placement ,Price and Promotion are laid out in tabular form. See box below for the code. <Table border=3 cellpading=5 cellspacing=5> <TR> <TD><h2>Placement</h2><img src="pv.ico" height=12 width=12 Title="Our placement used to get our service to the consumer is via the Internet. That is our only channel of distribution. The compiling of data, creating the files, finding the matches and profiles will be handled at our headquarters. No middlemen are needed in our venture thus saving costs." </TD><TD><h2>Price</h2><img src="pv.ico" height=12 width=12 Title="Price will be competitive. For example, Match.com charges $16.99 per month for six months or $34.95 for one month. Other sites have much the same pricing structure. Lovebytes.com will charge $16.95/month for the six months, or $32.95 for a one month's subscription. We will have trade show discounts and special promotions during December, March and April. Clients who introduce Lovebytes to their friends will receive a 5% discount." </TD><TD><h2>Promotion</h2><img src="pv.ico" height=12 width=12 Title="Promotion will be accomplished in a couple of ways. The web site will be listed in the Virtual Enterprise shopping mall and meta tag information will be sent to the major search engines. The questionnaire will be attached to the web page. We will create ads that run on the Internet, tied to other Virtual Enterprise sites. Email ads will be created and sent to all Virtual Enterprise companies in California. Special flyers with trade show deals will be circulated during each of the trade shows. We will run an ad in our school paper and have a spot on the school's TV station feauring popular students in school showing how cool it is to use Lovebytes to get a date for a school activity. We will attempt to obtain company to company contracts with other VE companies. "</TD> </TR> </Table> Obviously you could present this information in many ways. I chose a table. See instructions above for how to put data into a table. Remember beginning and ending table tags with information about padding and spacing and borders Table rows beginning and ending tags Table data with is the information that goes into each cell. 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. Inside Article 1 box we are going to do some special things to make the Target Market and Market Segment, real attention getting. Make sure that your external links are to Main.cs an Chart2.js 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. Try them out by running and then launching Marketing.html Just pass your mouse over the target market button an see what happens. Then move the mouse off the button. What Happens? Look at the coding of the Marketing.html page We are going to set up two divisions. One for target market the other for market segment 〈div id="targetMarket"〉 is the first division. The next we type is〈P id="text"〉 Now key in the text defining your company target market. After keying in the text use the ending division tag, 〈Div/〉 Repeat the above procedure of the market segment. Now let's turn our attention to the Main3.css file to see how we can animate them Scroll down the file until you see the coding to format the targetMarket division #targetMarket{ display:block; margin:150px auto; color:#ffe4e1; -webkit-border-radius: 10px; opacity:0.4; background:magenta; width:120px; height:25px; -webkit-transition:-webkit-transform 2s,opacity 2s, background 2s, width 2s, height 2s; } #targetMarket:hover{ -webkit-transform: rotate(360deg); opacity:2.5; background:#5959ab; width:450px; height:390px; } Notice that the descriptions start out with the number sign, #, followed by the Id name, followed by a left-facing curly brace. The parameters for the button are listed below, followed by a right-facing curly brace. We want to display the button a a block. We set he margin at 250 pixels and auto-centers the button. We set the color of the button next. -webkit-border-radius;10px; makes rounded corners for the button Opacity refers to transparency. Now we set the background color, width and height before the transformation. 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 Look at the coding for the targetMarket button to see how to animate or move it We first identify the division segment, next the hover properties. We want to rotate the button 360 degrees. We change the opacity, background color, width and height. Experiment with these properties in your css file until you get the desired effect. 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 I used article two box to create an graphical analysis of our break-even point The vertical axis was used for expenses The horizontal axis, for sales Lovebytes needs to sell almost3,000 dating packages at $34.95 to covers its nearly $100,000 of expenses. Get the information you need to prepare a break even chart form your Accounting Department. I suggest that you draw it out first on a piece of paper before coding the coordinates for the lines and text The procedure for doing this chart is just like when we created the organizational chart. The coding for the beak even analysis can be found in Chart2.js Make sure that your html file calls that link. Check lines inside script tags. Here is the information contained in the Chart2.css fie function doFirst(){ var x = document.getElementById('canvas'); canvas = x.getContext('2d'); // vertical axis canvas.moveTo(50,20); canvas.lineTo(50,500); canvas.stroke(); //horizontal axis canvas.moveTo(50,500); canvas.lineTo(500,500); canvas.stroke(); //$100,000 sales canvas.fillText('Expenses',0,10); canvas.fillText('$100,000' , 1,20); //$75,000 canvas.fillText('$75,000',2,125); //$50,000 canvas.fillText('$50,000',2,250); //$25,000 canvas.fillText('$25,000',2,375); // $0.00 canvas.fillText('$0.00',2,500); //0 on horizontal axis canvas.fillText('0',50,520); canvas.fillText('Packages Sold',100,530); //1500 packages canvas.fillText('1,500',250,520); // 3000 packages canvas.fillText('3,000',472,520); // line from 0,0 to top canvas.moveTo(50,500); canvas.lineTo(500,0); canvas.stroke(); // other line canvas.moveTo(50,40); canvas.lineTo(600,40); canvas.stroke(); //profit area canvas.fillText('Profit Area',500,30); //loss area canvas.fillStyle='rgb(255,0,0)'; canvas.strokeStyle='rgb(0,111,174)'; canvas.fillText('Loss Area',200,160); canvas.stroke(); // data section canvas.fillText('Breakeven dollars = $97,742',50,600); canvas.fillText('Dating Package Cost = $32.95',50,610); canvas.fillText('Dating Package That Need to be Sold = 2,966',50,620); } window.addEventListener("load", doFirst,false);
<audio controls> <source src="planning.mp3" type="audio/mp3"> <source src="planning.ogg" type audio/ogg"> Your browser does not support the audio element. </audio>
Day 4: Marketing page, Article 1 Marketing Plan and Components of the Marketing Mix. Load your html template. Save it and all it Marketing.html in your student working folder We will be adding information to each of the box elements Get out your business plan document and turn to the marketing section It is in the marketing section of the business plan that you will draw out the information needed for the presentation. In the Lovebytes Marketing plan we have a service business. Marketing Page for Lovebytes We want to explain the product or service and perhaps show a picture. The above information should go into Article 1 box Our computer dating company also has a deluxe package and it is outlined. Day 5:Placement, Price and Promotion The Placement ,Price and Promotion are laid out in tabular form. See box below for the code. <Table border=3 cellpading=5 cellspacing=5> <TR> <TD><h2>Placement</h2><img src="pv.ico" height=12 width=12 Title="Our placement used to get our service to the consumer is via the Internet. That is our only channel of distribution. The compiling of data, creating the files, finding the matches and profiles will be handled at our headquarters. No middlemen are needed in our venture thus saving costs." </TD><TD><h2>Price</h2><img src="pv.ico" height=12 width=12 Title="Price will be competitive. For example, Match.com charges $16.99 per month for six months or $34.95 for one month. Other sites have much the same pricing structure. Lovebytes.com will charge $16.95/month for the six months, or $32.95 for a one month's subscription. We will have trade show discounts and special promotions during December, March and April. Clients who introduce Lovebytes to their friends will receive a 5% discount." </TD><TD><h2>Promotion</h2><img src="pv.ico" height=12 width=12 Title="Promotion will be accomplished in a couple of ways. The web site will be listed in the Virtual Enterprise shopping mall and meta tag information will be sent to the major search engines. The questionnaire will be attached to the web page. We will create ads that run on the Internet, tied to other Virtual Enterprise sites. Email ads will be created and sent to all Virtual Enterprise companies in California. Special flyers with trade show deals will be circulated during each of the trade shows. We will run an ad in our school paper and have a spot on the school's TV station feauring popular students in school showing how cool it is to use Lovebytes to get a date for a school activity. We will attempt to obtain company to company contracts with other VE companies. "</TD> </TR> </Table> Obviously you could present this information in many ways. I chose a table. See instructions above for how to put data into a table. Remember beginning and ending table tags with information about padding and spacing and borders Table rows beginning and ending tags Table data with is the information that goes into each cell. 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. Inside Article 1 box we are going to do some special things to make the Target Market and Market Segment, real attention getting. Make sure that your external links are to Main.cs an Chart2.js 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. Try them out by running and then launching Marketing.html Just pass your mouse over the target market button an see what happens. Then move the mouse off the button. What Happens? Look at the coding of the Marketing.html page We are going to set up two divisions. One for target market the other for market segment 〈div id="targetMarket"〉 is the first division. The next we type is〈P id="text"〉 Now key in the text defining your company target market. After keying in the text use the ending division tag, 〈Div/〉 Repeat the above procedure of the market segment. Now let's turn our attention to the Main3.css file to see how we can animate them Scroll down the file until you see the coding to format the targetMarket division #targetMarket{ display:block; margin:150px auto; color:#ffe4e1; -webkit-border-radius: 10px; opacity:0.4; background:magenta; width:120px; height:25px; -webkit-transition:-webkit-transform 2s,opacity 2s, background 2s, width 2s, height 2s; } #targetMarket:hover{ -webkit-transform: rotate(360deg); opacity:2.5; background:#5959ab; width:450px; height:390px; } Notice that the descriptions start out with the number sign, #, followed by the Id name, followed by a left-facing curly brace. The parameters for the button are listed below, followed by a right-facing curly brace. We want to display the button a a block. We set he margin at 250 pixels and auto-centers the button. We set the color of the button next. -webkit-border-radius;10px; makes rounded corners for the button Opacity refers to transparency. Now we set the background color, width and height before the transformation. 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 Look at the coding for the targetMarket button to see how to animate or move it We first identify the division segment, next the hover properties. We want to rotate the button 360 degrees. We change the opacity, background color, width and height. Experiment with these properties in your css file until you get the desired effect. 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 I used article two box to create an graphical analysis of our break-even point The vertical axis was used for expenses The horizontal axis, for sales Lovebytes needs to sell almost3,000 dating packages at $34.95 to covers its nearly $100,000 of expenses. Get the information you need to prepare a break even chart form your Accounting Department. I suggest that you draw it out first on a piece of paper before coding the coordinates for the lines and text The procedure for doing this chart is just like when we created the organizational chart. The coding for the beak even analysis can be found in Chart2.js Make sure that your html file calls that link. Check lines inside script tags. Here is the information contained in the Chart2.css fie function doFirst(){ var x = document.getElementById('canvas'); canvas = x.getContext('2d'); // vertical axis canvas.moveTo(50,20); canvas.lineTo(50,500); canvas.stroke(); //horizontal axis canvas.moveTo(50,500); canvas.lineTo(500,500); canvas.stroke(); //$100,000 sales canvas.fillText('Expenses',0,10); canvas.fillText('$100,000' , 1,20); //$75,000 canvas.fillText('$75,000',2,125); //$50,000 canvas.fillText('$50,000',2,250); //$25,000 canvas.fillText('$25,000',2,375); // $0.00 canvas.fillText('$0.00',2,500); //0 on horizontal axis canvas.fillText('0',50,520); canvas.fillText('Packages Sold',100,530); //1500 packages canvas.fillText('1,500',250,520); // 3000 packages canvas.fillText('3,000',472,520); // line from 0,0 to top canvas.moveTo(50,500); canvas.lineTo(500,0); canvas.stroke(); // other line canvas.moveTo(50,40); canvas.lineTo(600,40); canvas.stroke(); //profit area canvas.fillText('Profit Area',500,30); //loss area canvas.fillStyle='rgb(255,0,0)'; canvas.strokeStyle='rgb(0,111,174)'; canvas.fillText('Loss Area',200,160); canvas.stroke(); // data section canvas.fillText('Breakeven dollars = $97,742',50,600); canvas.fillText('Dating Package Cost = $32.95',50,610); canvas.fillText('Dating Package That Need to be Sold = 2,966',50,620); } window.addEventListener("load", doFirst,false);
Printer Friendly Version - Week 3
Day 1 and 2 Marketing page, Target Market and Market Segment. Inside Article 1 box we are going to do some special things to make the Target Market and Market Segment, real attention getting. Make sure that your external links are to Main.cs an Chart2.js 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. Try them out by running and then launching Marketing.html Just pass your mouse over the target market button an see what happens. Then move the mouse off the button. What Happens? Look at the coding of the Marketing.html page We are going to set up two divisions. One for target market the other for market segment 〈div id="targetMarket"〉 is the first division. The next we type is〈P id="text"〉 Now key in the text defining your company target market. After keying in the text use the ending division tag, 〈Div/〉 Repeat the above procedure of the market segment. Now let's turn our attention to the Main3.css file to see how we can animate them Scroll down the file until you see the coding to format the targetMarket division #targetMarket{ display:block; margin:150px auto; color:#ffe4e1; -webkit-border-radius: 10px; opacity:0.4; background:magenta; width:120px; height:25px; -webkit-transition:-webkit-transform 2s,opacity 2s, background 2s, width 2s, height 2s; } #targetMarket:hover{ -webkit-transform: rotate(360deg); opacity:2.5; background:#5959ab; width:450px; height:390px; } Notice that the descriptions start out with the number sign, #, followed by the Id name, followed by a left-facing curly brace. The parameters for the button are listed below, followed by a right-facing curly brace. We want to display the button a a block. We set he margin at 250 pixels and auto-centers the button. We set the color of the button next. -webkit-border-radius;10px; makes rounded corners for the button Opacity refers to transparency. Now we set the background color, width and height before the transformation. 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 Look at the coding for the targetMarket button to see how to animate or move it We first identify the division segment, next the hover properties. We want to rotate the button 360 degrees. We change the opacity, background color, width and height. Experiment with these properties in your css file until you get the desired effect. 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 I used article two box to create an graphical analysis of our break-even point The vertical axis was used for expenses The horizontal axis, for sales Lovebytes needs to sell almost3,000 dating packages at $34.95 to covers its nearly $100,000 of expenses. Get the information you need to prepare a break even chart form your Accounting Department. I suggest that you draw it out first on a piece of paper before coding the coordinates for the lines and text The procedure for doing this chart is just like when we created the organizational chart. The coding for the beak even analysis can be found in Chart2.js Make sure that your html file calls that link. Check lines inside script tags. Here is the information contained in the Chart2.css fie function doFirst(){ var x = document.getElementById('canvas'); canvas = x.getContext('2d'); // vertical axis canvas.moveTo(50,20); canvas.lineTo(50,500); canvas.stroke(); //horizontal axis canvas.moveTo(50,500); canvas.lineTo(500,500); canvas.stroke(); //$100,000 sales canvas.fillText('Expenses',0,10); canvas.fillText('$100,000' , 1,20); //$75,000 canvas.fillText('$75,000',2,125); //$50,000 canvas.fillText('$50,000',2,250); //$25,000 canvas.fillText('$25,000',2,375); // $0.00 canvas.fillText('$0.00',2,500); //0 on horizontal axis canvas.fillText('0',50,520); canvas.fillText('Packages Sold',100,530); //1500 packages canvas.fillText('1,500',250,520); // 3000 packages canvas.fillText('3,000',472,520); // line from 0,0 to top canvas.moveTo(50,500); canvas.lineTo(500,0); canvas.stroke(); // other line canvas.moveTo(50,40); canvas.lineTo(600,40); canvas.stroke(); //profit area canvas.fillText('Profit Area',500,30); //loss area canvas.fillStyle='rgb(255,0,0)'; canvas.strokeStyle='rgb(0,111,174)'; canvas.fillText('Loss Area',200,160); canvas.stroke(); // data section canvas.fillText('Breakeven dollars = $97,742',50,600); canvas.fillText('Dating Package Cost = $32.95',50,610); canvas.fillText('Dating Package That Need to be Sold = 2,966',50,620); } window.addEventListener("load", doFirst,false);
#targetMarket{ display:block; margin:150px auto; color:#ffe4e1; -webkit-border-radius: 10px; opacity:0.4; background:magenta; width:120px; height:25px; -webkit-transition:-webkit-transform 2s,opacity 2s, background 2s, width 2s, height 2s; } #targetMarket:hover{ -webkit-transform: rotate(360deg); opacity:2.5; background:#5959ab; width:450px; height:390px; }
Hover Event for Target Market button
function doFirst(){ var x = document.getElementById('canvas'); canvas = x.getContext('2d'); // vertical axis canvas.moveTo(50,20); canvas.lineTo(50,500); canvas.stroke(); //horizontal axis canvas.moveTo(50,500); canvas.lineTo(500,500); canvas.stroke(); //$100,000 sales canvas.fillText('Expenses',0,10); canvas.fillText('$100,000' , 1,20); //$75,000 canvas.fillText('$75,000',2,125); //$50,000 canvas.fillText('$50,000',2,250); //$25,000 canvas.fillText('$25,000',2,375); // $0.00 canvas.fillText('$0.00',2,500); //0 on horizontal axis canvas.fillText('0',50,520); canvas.fillText('Packages Sold',100,530); //1500 packages canvas.fillText('1,500',250,520); // 3000 packages canvas.fillText('3,000',472,520); // line from 0,0 to top canvas.moveTo(50,500); canvas.lineTo(500,0); canvas.stroke(); // other line canvas.moveTo(50,40); canvas.lineTo(600,40); canvas.stroke(); //profit area canvas.fillText('Profit Area',500,30); //loss area canvas.fillStyle='rgb(255,0,0)'; canvas.strokeStyle='rgb(0,111,174)'; canvas.fillText('Loss Area',200,160); canvas.stroke(); // data section canvas.fillText('Breakeven dollars = $97,742',50,600); canvas.fillText('Dating Package Cost = $32.95',50,610); canvas.fillText('Dating Package That Need to be Sold = 2,966',50,620); } window.addEventListener("load", doFirst,false);
Day 4 and 5 Marketing Industry Analysis We are going to use the side news box for the industry analysis information Obtain that information from your business plan. It should include identification of industry threats and comparative national trends. Include industry strengths and threats Compare company vision and experiences against averages of similar operations. 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 Use the financial section Financial Section of your business plan for the following part of the presentation. Load your html template file, make modifications and save it calling it Financial.html in your student folder. StylePresentation.css and Chart2.js files are also needed. Make sure that you link them to your html file. There are a number of ways you can show a balance sheet, income statement in your presentation I used Article 1 for the video. 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 janetbelch.com There are a number of screen capture programs that you can use to create a video. I used an excellent, easy to use program from TechSmith called Camtasia. While making the video,I recorded the screens first as I demonstrated the program and added the audio track afterwords. 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. 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 <video src="General Ledger/General Ledger.mp4" controls width="640" width="360" poster="LBLogo.jpg"> </video> 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 In the example above the movie, General Ledger.mp4, is in a folder by the same name. The size of the controls to play the video are 640 by 360 pixels. The poster tag allows you to put a picture above the controls when the video is not playing. I just used a jpeg of Lovebytes logo. Day 3 and 4 Financial page, Cash Flow Article two box was used for this next section. I used Microsoft's Excel spreadsheet program for the Cash Flow Estimate 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 Explain where you got your beginning cash balance. First column which should include cash from investment and business loan. For other months, November through April, show beginning cash balance, which is the ending cash balance of the previous month. Include income from open houses, trade fairs and grand openings Remember that the money from trade fair sales comes in the next month since they are charge sales Include your business contract each month and all your company expenses. You will want to how that you always have enough cash to cover your immediate expenses. Day 5 Financial Page, Side News box. I used the aside box for information concerning the Business Investment, Business Loan and Business Contract Obtain this information from the financial section of the business plan Save your file in your student folder. 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. I decided to use the ntml5 feature of drag and drop to make the Strengths, Weakneses, Threats, and Opportunities Page. Load in your template for html and save it in your student fole as SWOT.html Load in necessary style, StylePresentation.css and JavaScript files, jerry.js into Notepad++ Run the SWOT Page to see how the program works. Drag and Drop is used in many desktop applications, therefore, HTML5 needed the same functionality. 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 the idea is to drag the image of the Cupid one into the blank box of the same name. Once you let go of the mouse-drop, the information about that characteristic appears in the blank box. It seemed like a flashy way to present the SWOT information. <section id="strengthBlank"> <BR> <BR> <br> <BR> <BR> <br> <h1> STRENGTHS</h1> </section> <section id="strengthCupid"> <img id="facepic1" src="CupidStrengths.jpg" height=275 width=200> </section> Here is the coding that relates to the sections of the SWOT.html page. I created eight sections One for each with an image of Cupid and one that was blank. The Blank one contains the Words like Strengths or Weaknesses or Threats or Opportunities The sections with cupid use the image tag to load a picture of Cupid See Below for how they are coded in the style file, StylePresentation.css #strengthBlank{ float:left; width:200px; height:275px; margin:2px; border:3px solid blue; } #strengthCupid{ float:left; width:200px; height:275px; margin:2px; border:3px solid green; } #weakBlank{ float:left; width:200px; height:275px; margin:2px; border:3px solid blue; } #weakCupid{ float:left; width:200px; height:275px; margin:2px; border:3px solid green; } #opportunityBlank{ float:left; width:200px; height:275px; margin:2px; border:3px solid blue; } #opportunityCupid{ float:left; width:200px; height:275px; margin:2px; border:3px solid green; } #threatsBlank{ float:left; width:200px; height:275px; margin:2px; border:3px solid blue; } #threatsCupid{ float:left; width:200px; height:275px; margin:2px; border:3px solid green; } All of them are floated to the left. All have the same width and height They all have the same margins All the ones containing Cupid have solid green borders. The blank sections have solid blue borders The actual coding for the drag and drop function is in the jerry.js file. Listed below is that specific coding for the doFirst function. function doFirst(){ mypic = document.getElementById('facepic1'); mypic.addEventListener("dragstart", startDrag,false); mypic.addEventListener("dragend", endDrag,false); threatsBlank = document.getElementById('threatsBlank'); threatsBlank.addEventListener("dragenter",dragenter,false); threatsBlank.addEventListener("dragleave",dragleave,false); threatsBlank.addEventListener("dragover",function(e){e.preventDefault();},false); threatsBlank.addEventListener("drop",dropped,false); function endDrag(e){ pic = e.target; pic.style.visibility = 'hidden'; } function dragenter(e){ e.preventDefault(); threatsBlank.style.background = "SkyBlue"; threatsBlank.style.border = "3px solid red"; } function dragleave(e){ e.preventDefault(); threatsBlank.style.background = "White"; threatsBlank.style.border = "3px solid "; } function startDrag(e){ var code = '<img src="Cupid.jpg" height=275 width=200>'; e.dataTransfer.setData('Text', code); } function dropped(e){ e.preventDefault(); threatsBlank.innerHTML = e.dataTransfer.getData('Text'); threatsCupid.innerHTML =("Privacy issues. Lots of competition for teen market's discretionary income. Social networking sites as competitors. Everchanging technology. Free versions offered by competitors. Once competitors see our success in our market segment, they will want to compete. "); } } window.addEventListener("load", doFirst, false); } Explanation of how drag and drop works The script file came from TheNewBoston.org web site 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 Let's examine the coding for doFirst function. All functions are almost identical The function is called as soon as the page loads with the line window.addEventListener("load",doFirst,false); This line is at the bottom of the doFirst Function. just before the doSecond function. Next a variable called mypic is equated to document.getElementsById('facepic1'); 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 Each one of the facepic variables is slightly different. 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. 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. 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. 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. The line that states mypic.addEventListner("dragstart"),startdrag,false); fires as soon as the user starts to drag the image. dragstart is a keyword and cannot be changed 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. dragener is a reserved word. It will call a function by the name endDrag which we will create later. 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. 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. 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 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 The browser stores that information like X and Y position of the mouse. 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〉'; This line is how we store information about the picture e.dataTransfer.setData('Text', code); Drag End Function dragEnd function When we drop the image into the box to the left, we want to have the original image to disappear. First we assign e.target to a variable called pic. The endDrag function sets our picture's style for visibility to hidden so it can't be seen. Drag Enter Function 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. The next line sets the background to SkyBlue The next line sets a 3 pixel border around the box that is solid red. Drag Leave Function 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. The second line sets the background color of the strengthBlank box to white The third line puts a 3 pixel solid border around the box. It is the same color as before - green. Drag Over Function 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 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. Now we have to identify where are going to drop the image. It will be in the box called strengthBlank The rest of the line tells the browser to take the information that is stored and drop the text in the box. 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 The purpose of this page it to highlight our program and the way it works. It is inserts into Article 1 box. The header is "New Way to get a date Try Lovebytes" You might use it to insert a video commercial for your company. Again we are using the Camtasia Studio 8 program, which captures the screen and audio. The video is quite short and we have a poster above the controls when the video is not playing. Create a line in your html file to play the video. The footer identifies who wrote the software and their title. <video src="Lovebytes Presentation/Lovebytes Presentation.mp4" controls width="640" width="360" poster="LBLogo.jpg"> </video> Remember to play on the web using html5 the file needs to be in the MP4 format. As mentioned before, a video presentation can be done ahead of time. By creating a video of a demonstration there is no chance of the presenter messing up. Day 4 Lovebytes Questionnaire The header for this article2 is 〈Header〉 〈BR〉 〈h1>Lovebytes Survey Sample Questions〈/h1〉 〈h3>Questionnaire〈/h3〉 〈/Header〉 <Table cellspacing=0 cellpadding=0 width="100%" border = 1> <!-- Question 1 --> <TR> <TD Align=left><P>1. My idea of a romantic evening would be a walk on the beach.</TD> <TD align=left><P><input Type="Radio" Name="RomanticEvening" Value="AS" >Agree Strongly</TD> <TD align=feft><P><Input Type ="Radio" NAME="RomanticEvening" Value="AM" >Areee Moderately</TD> <TD align=feft><P><Input Type ="Radio" NAME="RomanticEvening" Value="DM" >Disareee Moderately</TD> <TD align=feft><P><Input Type ="Radio" NAME="RomanticEvening" Value="DS" >Disagree Strongly</TD> <TR> <TD Align=left><P>2. My favorite kind of movie is:</TD> <TD align=left><P><input Type="Radio" Name="Movie" Value="Drama" >Drama</TD> <TD align=feft><P><Input Type ="Radio" NAME="Movie" Value="Adventure" >Adventure</TD> <TD align=feft><P><Input Type ="Radio" NAME="Movie" Value="Comedy" >Comedy</TD> <TD align=feft><P><Input Type ="Radio" NAME="Movie" Value="ScienceFiction" >Science Fiction</TD> </TR> Article 2 is a sampling of the questionnaire that respondents fill out. It created in a true html format, so that you as the presenter can answer the questions. The questionnaire is put into a table. Respondents answer the questions by clicking on the radio button of their choice 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. You can choose what ever you want to go here. The header for this section is〈h1〉Lovebytes Survey Sample Questions〈/h1〉 〈h3〉Questionnaire〈/h3〉 The footer for this article is 〈Footer〉 〈p〉Questionnaire developed by LoveBytes.com〈/p〉〈/Footer〉 Day 5 Side New Section: Business Partners 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 Take a look at the Appendix Link The user enters numbers for terms of the loan and then hovers over a special button to make the calculations The showpay() function in the java script file is called and here is where the calculations are made. Load in your flexible box model html template and save it as Appendix.html in your student folder. Remember all the headings, format for the boxes, menu and navigation link are the same for all pages of your presentation. The JavaScript link is called janet.js. Make that adjustment in your html file. 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. 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. Below is a listing of the HTML file portion of the program that shows the loan program. <Section id="main_section"> <Article> <Header> <center><H1>Loan Amortization</h1> <H2>Business Loan</h2> </header> The results of this loan payment calculator are for comparison purposes only. They will be a close approximation of actual loan repayments if available at the terms entered, from a financial institution. This is being provided for you to plan your next loan application. To use, enter values for the Loan Amount, Number of Months for Loan, and the Interest Rate (e.g. 7.25), and click the Calculate button. <footer> <p>Loan Calculator Developed by Janet Belch, CFo</p> </Footer> <p> <BR> <center> <header> Find monthly payment for VEC Loan </header> <table width=60% border=0> <tr><th bgcolor="#aaaaaa" width=50%><font color=blue>Description</font></th> <th bgcolor="#aaaaaa" width=50%><font color=blue>Data Entry</font></th></tr> <tr><td bgcolor="#eeeee">Loan Amount</td><td bgcolor="#aaeeaa" align=right><input type=text name=loan size=10></td></tr> <tr><td bgcolor="#eeeee">Loan Length in Months</td><td bgcolor="#aaeeaa" align=right><input type=text name=months size=10></td></tr> <tr><td bgcolor="#eeeee">Interest Rate</td><td bgcolor="#aaeeaa" align=right><input type=text name=rate size=10></td></tr> <tr> <TD align=right><em>Calculated</em> <input type=text name=pay size=15></td></tr> </table> </form> <font size=1>Enter only numeric values (no commas), using decimal points where needed.<br> Non-numeric values will cause errors.</font> </center> </Article> <div id="box"> <!--<p id="text">Loan Amortization</p>--> <input type="button style = visibility:hidden" value="Loan Amortization" onMouseOut='showpay()'/> </br></p> <BR><BR><BR><BR><BR><BR><BR> <Footer> <rt>Button designed by Jerry</rt> </Footer> </Article> </section> The data entry portion of the calculator program is formatted in a table that utilizes 60% of the screen. The table has no border. Table Headings background color is gray The boxes where you enter the data are white. The box is our button. We have used this type of html5 button before. When it is clicked on it goes to the Java script file called janet.js and executes the showpay() function. 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. It returns the value of this function back to the HTML file as the word pay. 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 The part of the Appendix page is in the Aside_news box. The first two are excellent references for HTML5, CSS and JavaScript. The third link is for your company's business contract. 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. Spend the next two days checking out all links, spelling and grammar. Make certain all the JavaScript works and delivers the right answers and results To do well giving a presentation in front of judges, please practice your presentation in front of different groups. Each Department vice president should explain their portion of the presentation. 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
Printer Friendly Week 4
Day 1 and 2 Financial page, general ledger reports Use the financial section Financial Section of your business plan for the following part of the presentation. Load your html template file, make modifications and save it calling it Financial.html in your student folder. StylePresentation.css and Chart2.js files are also needed. Make sure that you link them to your html file. There are a number of ways you can show a balance sheet, income statement in your presentation I used Article 1 for the video. 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 janetbelch.com There are a number of screen capture programs that you can use to create a video. I used an excellent, easy to use program from TechSmith called Camtasia. While making the video,I recorded the screens first as I demonstrated the program and added the audio track afterwords. 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. 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 <video src="General Ledger/General Ledger.mp4" controls width="640" width="360" poster="LBLogo.jpg"> </video> 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 In the example above the movie, General Ledger.mp4, is in a folder by the same name. The size of the controls to play the video are 640 by 360 pixels. The poster tag allows you to put a picture above the controls when the video is not playing. I just used a jpeg of Lovebytes logo. Day 3 and 4 Financial page, Cash Flow Article two box was used for this next section. I used Microsoft's Excel spreadsheet program for the Cash Flow Estimate 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 Explain where you got your beginning cash balance. First column which should include cash from investment and business loan. For other months, November through April, show beginning cash balance, which is the ending cash balance of the previous month. Include income from open houses, trade fairs and grand openings Remember that the money from trade fair sales comes in the next month since they are charge sales Include your business contract each month and all your company expenses. You will want to how that you always have enough cash to cover your immediate expenses. Day 5 Financial Page, Side News box. I used the aside box for information concerning the Business Investment, Business Loan and Business Contract Obtain this information from the financial section of the business plan Save your file in your student folder. 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. I decided to use the ntml5 feature of drag and drop to make the Strengths, Weakneses, Threats, and Opportunities Page. Load in your template for html and save it in your student fole as SWOT.html Load in necessary style, StylePresentation.css and JavaScript files, jerry.js into Notepad++ Run the SWOT Page to see how the program works. Drag and Drop is used in many desktop applications, therefore, HTML5 needed the same functionality. 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 the idea is to drag the image of the Cupid one into the blank box of the same name. Once you let go of the mouse-drop, the information about that characteristic appears in the blank box. It seemed like a flashy way to present the SWOT information. <section id="strengthBlank"> <BR> <BR> <br> <BR> <BR> <br> <h1> STRENGTHS</h1> </section> <section id="strengthCupid"> <img id="facepic1" src="CupidStrengths.jpg" height=275 width=200> </section> Here is the coding that relates to the sections of the SWOT.html page. I created eight sections One for each with an image of Cupid and one that was blank. The Blank one contains the Words like Strengths or Weaknesses or Threats or Opportunities The sections with cupid use the image tag to load a picture of Cupid See Below for how they are coded in the style file, StylePresentation.css #strengthBlank{ float:left; width:200px; height:275px; margin:2px; border:3px solid blue; } #strengthCupid{ float:left; width:200px; height:275px; margin:2px; border:3px solid green; } #weakBlank{ float:left; width:200px; height:275px; margin:2px; border:3px solid blue; } #weakCupid{ float:left; width:200px; height:275px; margin:2px; border:3px solid green; } #opportunityBlank{ float:left; width:200px; height:275px; margin:2px; border:3px solid blue; } #opportunityCupid{ float:left; width:200px; height:275px; margin:2px; border:3px solid green; } #threatsBlank{ float:left; width:200px; height:275px; margin:2px; border:3px solid blue; } #threatsCupid{ float:left; width:200px; height:275px; margin:2px; border:3px solid green; } All of them are floated to the left. All have the same width and height They all have the same margins All the ones containing Cupid have solid green borders. The blank sections have solid blue borders The actual coding for the drag and drop function is in the jerry.js file. Listed below is that specific coding for the doFirst function. function doFirst(){ mypic = document.getElementById('facepic1'); mypic.addEventListener("dragstart", startDrag,false); mypic.addEventListener("dragend", endDrag,false); threatsBlank = document.getElementById('threatsBlank'); threatsBlank.addEventListener("dragenter",dragenter,false); threatsBlank.addEventListener("dragleave",dragleave,false); threatsBlank.addEventListener("dragover",function(e){e.preventDefault();},false); threatsBlank.addEventListener("drop",dropped,false); function endDrag(e){ pic = e.target; pic.style.visibility = 'hidden'; } function dragenter(e){ e.preventDefault(); threatsBlank.style.background = "SkyBlue"; threatsBlank.style.border = "3px solid red"; } function dragleave(e){ e.preventDefault(); threatsBlank.style.background = "White"; threatsBlank.style.border = "3px solid "; } function startDrag(e){ var code = '<img src="Cupid.jpg" height=275 width=200>'; e.dataTransfer.setData('Text', code); } function dropped(e){ e.preventDefault(); threatsBlank.innerHTML = e.dataTransfer.getData('Text'); threatsCupid.innerHTML =("Privacy issues. Lots of competition for teen market's discretionary income. Social networking sites as competitors. Everchanging technology. Free versions offered by competitors. Once competitors see our success in our market segment, they will want to compete. "); } } window.addEventListener("load", doFirst, false); } Explanation of how drag and drop works The script file came from TheNewBoston.org web site 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 Let's examine the coding for doFirst function. All functions are almost identical The function is called as soon as the page loads with the line window.addEventListener("load",doFirst,false); This line is at the bottom of the doFirst Function. just before the doSecond function. Next a variable called mypic is equated to document.getElementsById('facepic1'); 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 Each one of the facepic variables is slightly different. 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. 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. 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. 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. The line that states mypic.addEventListner("dragstart"),startdrag,false); fires as soon as the user starts to drag the image. dragstart is a keyword and cannot be changed 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. dragener is a reserved word. It will call a function by the name endDrag which we will create later. 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. 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. 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 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 The browser stores that information like X and Y position of the mouse. 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〉'; This line is how we store information about the picture e.dataTransfer.setData('Text', code); Drag End Function dragEnd function When we drop the image into the box to the left, we want to have the original image to disappear. First we assign e.target to a variable called pic. The endDrag function sets our picture's style for visibility to hidden so it can't be seen. Drag Enter Function 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. The next line sets the background to SkyBlue The next line sets a 3 pixel border around the box that is solid red. Drag Leave Function 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. The second line sets the background color of the strengthBlank box to white The third line puts a 3 pixel solid border around the box. It is the same color as before - green. Drag Over Function 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 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. Now we have to identify where are going to drop the image. It will be in the box called strengthBlank The rest of the line tells the browser to take the information that is stored and drop the text in the box. 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 The purpose of this page it to highlight our program and the way it works. It is inserts into Article 1 box. The header is "New Way to get a date Try Lovebytes" You might use it to insert a video commercial for your company. Again we are using the Camtasia Studio 8 program, which captures the screen and audio. The video is quite short and we have a poster above the controls when the video is not playing. Create a line in your html file to play the video. The footer identifies who wrote the software and their title. <video src="Lovebytes Presentation/Lovebytes Presentation.mp4" controls width="640" width="360" poster="LBLogo.jpg"> </video> Remember to play on the web using html5 the file needs to be in the MP4 format. As mentioned before, a video presentation can be done ahead of time. By creating a video of a demonstration there is no chance of the presenter messing up. Day 4 Lovebytes Questionnaire The header for this article2 is 〈Header〉 〈BR〉 〈h1>Lovebytes Survey Sample Questions〈/h1〉 〈h3>Questionnaire〈/h3〉 〈/Header〉 <Table cellspacing=0 cellpadding=0 width="100%" border = 1> <!-- Question 1 --> <TR> <TD Align=left><P>1. My idea of a romantic evening would be a walk on the beach.</TD> <TD align=left><P><input Type="Radio" Name="RomanticEvening" Value="AS" >Agree Strongly</TD> <TD align=feft><P><Input Type ="Radio" NAME="RomanticEvening" Value="AM" >Areee Moderately</TD> <TD align=feft><P><Input Type ="Radio" NAME="RomanticEvening" Value="DM" >Disareee Moderately</TD> <TD align=feft><P><Input Type ="Radio" NAME="RomanticEvening" Value="DS" >Disagree Strongly</TD> <TR> <TD Align=left><P>2. My favorite kind of movie is:</TD> <TD align=left><P><input Type="Radio" Name="Movie" Value="Drama" >Drama</TD> <TD align=feft><P><Input Type ="Radio" NAME="Movie" Value="Adventure" >Adventure</TD> <TD align=feft><P><Input Type ="Radio" NAME="Movie" Value="Comedy" >Comedy</TD> <TD align=feft><P><Input Type ="Radio" NAME="Movie" Value="ScienceFiction" >Science Fiction</TD> </TR> Article 2 is a sampling of the questionnaire that respondents fill out. It created in a true html format, so that you as the presenter can answer the questions. The questionnaire is put into a table. Respondents answer the questions by clicking on the radio button of their choice 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. You can choose what ever you want to go here. The header for this section is〈h1〉Lovebytes Survey Sample Questions〈/h1〉 〈h3〉Questionnaire〈/h3〉 The footer for this article is 〈Footer〉 〈p〉Questionnaire developed by LoveBytes.com〈/p〉〈/Footer〉 Day 5 Side New Section: Business Partners 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 Take a look at the Appendix Link The user enters numbers for terms of the loan and then hovers over a special button to make the calculations The showpay() function in the java script file is called and here is where the calculations are made. Load in your flexible box model html template and save it as Appendix.html in your student folder. Remember all the headings, format for the boxes, menu and navigation link are the same for all pages of your presentation. The JavaScript link is called janet.js. Make that adjustment in your html file. 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. 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. Below is a listing of the HTML file portion of the program that shows the loan program. <Section id="main_section"> <Article> <Header> <center><H1>Loan Amortization</h1> <H2>Business Loan</h2> </header> The results of this loan payment calculator are for comparison purposes only. They will be a close approximation of actual loan repayments if available at the terms entered, from a financial institution. This is being provided for you to plan your next loan application. To use, enter values for the Loan Amount, Number of Months for Loan, and the Interest Rate (e.g. 7.25), and click the Calculate button. <footer> <p>Loan Calculator Developed by Janet Belch, CFo</p> </Footer> <p> <BR> <center> <header> Find monthly payment for VEC Loan </header> <table width=60% border=0> <tr><th bgcolor="#aaaaaa" width=50%><font color=blue>Description</font></th> <th bgcolor="#aaaaaa" width=50%><font color=blue>Data Entry</font></th></tr> <tr><td bgcolor="#eeeee">Loan Amount</td><td bgcolor="#aaeeaa" align=right><input type=text name=loan size=10></td></tr> <tr><td bgcolor="#eeeee">Loan Length in Months</td><td bgcolor="#aaeeaa" align=right><input type=text name=months size=10></td></tr> <tr><td bgcolor="#eeeee">Interest Rate</td><td bgcolor="#aaeeaa" align=right><input type=text name=rate size=10></td></tr> <tr> <TD align=right><em>Calculated</em> <input type=text name=pay size=15></td></tr> </table> </form> <font size=1>Enter only numeric values (no commas), using decimal points where needed.<br> Non-numeric values will cause errors.</font> </center> </Article> <div id="box"> <!--<p id="text">Loan Amortization</p>--> <input type="button style = visibility:hidden" value="Loan Amortization" onMouseOut='showpay()'/> </br></p> <BR><BR><BR><BR><BR><BR><BR> <Footer> <rt>Button designed by Jerry</rt> </Footer> </Article> </section> The data entry portion of the calculator program is formatted in a table that utilizes 60% of the screen. The table has no border. Table Headings background color is gray The boxes where you enter the data are white. The box is our button. We have used this type of html5 button before. When it is clicked on it goes to the Java script file called janet.js and executes the showpay() function. 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. It returns the value of this function back to the HTML file as the word pay. 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 The part of the Appendix page is in the Aside_news box. The first two are excellent references for HTML5, CSS and JavaScript. The third link is for your company's business contract. 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. Spend the next two days checking out all links, spelling and grammar. Make certain all the JavaScript works and delivers the right answers and results To do well giving a presentation in front of judges, please practice your presentation in front of different groups. Each Department vice president should explain their portion of the presentation. 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
Day 3 and 4 Financial page, Cash Flow Article two box was used for this next section. I used Microsoft's Excel spreadsheet program for the Cash Flow Estimate 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 Explain where you got your beginning cash balance. First column which should include cash from investment and business loan. For other months, November through April, show beginning cash balance, which is the ending cash balance of the previous month. Include income from open houses, trade fairs and grand openings Remember that the money from trade fair sales comes in the next month since they are charge sales Include your business contract each month and all your company expenses. You will want to how that you always have enough cash to cover your immediate expenses. Day 5 Financial Page, Side News box. I used the aside box for information concerning the Business Investment, Business Loan and Business Contract Obtain this information from the financial section of the business plan Save your file in your student folder. 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. I decided to use the ntml5 feature of drag and drop to make the Strengths, Weakneses, Threats, and Opportunities Page. Load in your template for html and save it in your student fole as SWOT.html Load in necessary style, StylePresentation.css and JavaScript files, jerry.js into Notepad++ Run the SWOT Page to see how the program works. Drag and Drop is used in many desktop applications, therefore, HTML5 needed the same functionality. 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 the idea is to drag the image of the Cupid one into the blank box of the same name. Once you let go of the mouse-drop, the information about that characteristic appears in the blank box. It seemed like a flashy way to present the SWOT information. <section id="strengthBlank"> <BR> <BR> <br> <BR> <BR> <br> <h1> STRENGTHS</h1> </section> <section id="strengthCupid"> <img id="facepic1" src="CupidStrengths.jpg" height=275 width=200> </section> Here is the coding that relates to the sections of the SWOT.html page. I created eight sections One for each with an image of Cupid and one that was blank. The Blank one contains the Words like Strengths or Weaknesses or Threats or Opportunities The sections with cupid use the image tag to load a picture of Cupid See Below for how they are coded in the style file, StylePresentation.css #strengthBlank{ float:left; width:200px; height:275px; margin:2px; border:3px solid blue; } #strengthCupid{ float:left; width:200px; height:275px; margin:2px; border:3px solid green; } #weakBlank{ float:left; width:200px; height:275px; margin:2px; border:3px solid blue; } #weakCupid{ float:left; width:200px; height:275px; margin:2px; border:3px solid green; } #opportunityBlank{ float:left; width:200px; height:275px; margin:2px; border:3px solid blue; } #opportunityCupid{ float:left; width:200px; height:275px; margin:2px; border:3px solid green; } #threatsBlank{ float:left; width:200px; height:275px; margin:2px; border:3px solid blue; } #threatsCupid{ float:left; width:200px; height:275px; margin:2px; border:3px solid green; } All of them are floated to the left. All have the same width and height They all have the same margins All the ones containing Cupid have solid green borders. The blank sections have solid blue borders The actual coding for the drag and drop function is in the jerry.js file. Listed below is that specific coding for the doFirst function. function doFirst(){ mypic = document.getElementById('facepic1'); mypic.addEventListener("dragstart", startDrag,false); mypic.addEventListener("dragend", endDrag,false); threatsBlank = document.getElementById('threatsBlank'); threatsBlank.addEventListener("dragenter",dragenter,false); threatsBlank.addEventListener("dragleave",dragleave,false); threatsBlank.addEventListener("dragover",function(e){e.preventDefault();},false); threatsBlank.addEventListener("drop",dropped,false); function endDrag(e){ pic = e.target; pic.style.visibility = 'hidden'; } function dragenter(e){ e.preventDefault(); threatsBlank.style.background = "SkyBlue"; threatsBlank.style.border = "3px solid red"; } function dragleave(e){ e.preventDefault(); threatsBlank.style.background = "White"; threatsBlank.style.border = "3px solid "; } function startDrag(e){ var code = '<img src="Cupid.jpg" height=275 width=200>'; e.dataTransfer.setData('Text', code); } function dropped(e){ e.preventDefault(); threatsBlank.innerHTML = e.dataTransfer.getData('Text'); threatsCupid.innerHTML =("Privacy issues. Lots of competition for teen market's discretionary income. Social networking sites as competitors. Everchanging technology. Free versions offered by competitors. Once competitors see our success in our market segment, they will want to compete. "); } } window.addEventListener("load", doFirst, false); } Explanation of how drag and drop works The script file came from TheNewBoston.org web site 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 Let's examine the coding for doFirst function. All functions are almost identical The function is called as soon as the page loads with the line window.addEventListener("load",doFirst,false); This line is at the bottom of the doFirst Function. just before the doSecond function. Next a variable called mypic is equated to document.getElementsById('facepic1'); 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 Each one of the facepic variables is slightly different. 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. 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. 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. 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. The line that states mypic.addEventListner("dragstart"),startdrag,false); fires as soon as the user starts to drag the image. dragstart is a keyword and cannot be changed 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. dragener is a reserved word. It will call a function by the name endDrag which we will create later. 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. 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. 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 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 The browser stores that information like X and Y position of the mouse. 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〉'; This line is how we store information about the picture e.dataTransfer.setData('Text', code); Drag End Function dragEnd function When we drop the image into the box to the left, we want to have the original image to disappear. First we assign e.target to a variable called pic. The endDrag function sets our picture's style for visibility to hidden so it can't be seen. Drag Enter Function 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. The next line sets the background to SkyBlue The next line sets a 3 pixel border around the box that is solid red. Drag Leave Function 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. The second line sets the background color of the strengthBlank box to white The third line puts a 3 pixel solid border around the box. It is the same color as before - green. Drag Over Function 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 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. Now we have to identify where are going to drop the image. It will be in the box called strengthBlank The rest of the line tells the browser to take the information that is stored and drop the text in the box. 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 The purpose of this page it to highlight our program and the way it works. It is inserts into Article 1 box. The header is "New Way to get a date Try Lovebytes" You might use it to insert a video commercial for your company. Again we are using the Camtasia Studio 8 program, which captures the screen and audio. The video is quite short and we have a poster above the controls when the video is not playing. Create a line in your html file to play the video. The footer identifies who wrote the software and their title. <video src="Lovebytes Presentation/Lovebytes Presentation.mp4" controls width="640" width="360" poster="LBLogo.jpg"> </video> Remember to play on the web using html5 the file needs to be in the MP4 format. As mentioned before, a video presentation can be done ahead of time. By creating a video of a demonstration there is no chance of the presenter messing up. Day 4 Lovebytes Questionnaire The header for this article2 is 〈Header〉 〈BR〉 〈h1>Lovebytes Survey Sample Questions〈/h1〉 〈h3>Questionnaire〈/h3〉 〈/Header〉 <Table cellspacing=0 cellpadding=0 width="100%" border = 1> <!-- Question 1 --> <TR> <TD Align=left><P>1. My idea of a romantic evening would be a walk on the beach.</TD> <TD align=left><P><input Type="Radio" Name="RomanticEvening" Value="AS" >Agree Strongly</TD> <TD align=feft><P><Input Type ="Radio" NAME="RomanticEvening" Value="AM" >Areee Moderately</TD> <TD align=feft><P><Input Type ="Radio" NAME="RomanticEvening" Value="DM" >Disareee Moderately</TD> <TD align=feft><P><Input Type ="Radio" NAME="RomanticEvening" Value="DS" >Disagree Strongly</TD> <TR> <TD Align=left><P>2. My favorite kind of movie is:</TD> <TD align=left><P><input Type="Radio" Name="Movie" Value="Drama" >Drama</TD> <TD align=feft><P><Input Type ="Radio" NAME="Movie" Value="Adventure" >Adventure</TD> <TD align=feft><P><Input Type ="Radio" NAME="Movie" Value="Comedy" >Comedy</TD> <TD align=feft><P><Input Type ="Radio" NAME="Movie" Value="ScienceFiction" >Science Fiction</TD> </TR> Article 2 is a sampling of the questionnaire that respondents fill out. It created in a true html format, so that you as the presenter can answer the questions. The questionnaire is put into a table. Respondents answer the questions by clicking on the radio button of their choice 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. You can choose what ever you want to go here. The header for this section is〈h1〉Lovebytes Survey Sample Questions〈/h1〉 〈h3〉Questionnaire〈/h3〉 The footer for this article is 〈Footer〉 〈p〉Questionnaire developed by LoveBytes.com〈/p〉〈/Footer〉 Day 5 Side New Section: Business Partners 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 Take a look at the Appendix Link The user enters numbers for terms of the loan and then hovers over a special button to make the calculations The showpay() function in the java script file is called and here is where the calculations are made. Load in your flexible box model html template and save it as Appendix.html in your student folder. Remember all the headings, format for the boxes, menu and navigation link are the same for all pages of your presentation. The JavaScript link is called janet.js. Make that adjustment in your html file. 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. 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. Below is a listing of the HTML file portion of the program that shows the loan program. <Section id="main_section"> <Article> <Header> <center><H1>Loan Amortization</h1> <H2>Business Loan</h2> </header> The results of this loan payment calculator are for comparison purposes only. They will be a close approximation of actual loan repayments if available at the terms entered, from a financial institution. This is being provided for you to plan your next loan application. To use, enter values for the Loan Amount, Number of Months for Loan, and the Interest Rate (e.g. 7.25), and click the Calculate button. <footer> <p>Loan Calculator Developed by Janet Belch, CFo</p> </Footer> <p> <BR> <center> <header> Find monthly payment for VEC Loan </header> <table width=60% border=0> <tr><th bgcolor="#aaaaaa" width=50%><font color=blue>Description</font></th> <th bgcolor="#aaaaaa" width=50%><font color=blue>Data Entry</font></th></tr> <tr><td bgcolor="#eeeee">Loan Amount</td><td bgcolor="#aaeeaa" align=right><input type=text name=loan size=10></td></tr> <tr><td bgcolor="#eeeee">Loan Length in Months</td><td bgcolor="#aaeeaa" align=right><input type=text name=months size=10></td></tr> <tr><td bgcolor="#eeeee">Interest Rate</td><td bgcolor="#aaeeaa" align=right><input type=text name=rate size=10></td></tr> <tr> <TD align=right><em>Calculated</em> <input type=text name=pay size=15></td></tr> </table> </form> <font size=1>Enter only numeric values (no commas), using decimal points where needed.<br> Non-numeric values will cause errors.</font> </center> </Article> <div id="box"> <!--<p id="text">Loan Amortization</p>--> <input type="button style = visibility:hidden" value="Loan Amortization" onMouseOut='showpay()'/> </br></p> <BR><BR><BR><BR><BR><BR><BR> <Footer> <rt>Button designed by Jerry</rt> </Footer> </Article> </section> The data entry portion of the calculator program is formatted in a table that utilizes 60% of the screen. The table has no border. Table Headings background color is gray The boxes where you enter the data are white. The box is our button. We have used this type of html5 button before. When it is clicked on it goes to the Java script file called janet.js and executes the showpay() function. 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. It returns the value of this function back to the HTML file as the word pay. 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 The part of the Appendix page is in the Aside_news box. The first two are excellent references for HTML5, CSS and JavaScript. The third link is for your company's business contract. 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. Spend the next two days checking out all links, spelling and grammar. Make certain all the JavaScript works and delivers the right answers and results To do well giving a presentation in front of judges, please practice your presentation in front of different groups. Each Department vice president should explain their portion of the presentation. 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
Cash Flow Estimate
Day 5 Financial Page, Side News box. I used the aside box for information concerning the Business Investment, Business Loan and Business Contract Obtain this information from the financial section of the business plan Save your file in your student folder. 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. I decided to use the ntml5 feature of drag and drop to make the Strengths, Weakneses, Threats, and Opportunities Page. Load in your template for html and save it in your student fole as SWOT.html Load in necessary style, StylePresentation.css and JavaScript files, jerry.js into Notepad++ Run the SWOT Page to see how the program works. Drag and Drop is used in many desktop applications, therefore, HTML5 needed the same functionality. 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 the idea is to drag the image of the Cupid one into the blank box of the same name. Once you let go of the mouse-drop, the information about that characteristic appears in the blank box. It seemed like a flashy way to present the SWOT information. <section id="strengthBlank"> <BR> <BR> <br> <BR> <BR> <br> <h1> STRENGTHS</h1> </section> <section id="strengthCupid"> <img id="facepic1" src="CupidStrengths.jpg" height=275 width=200> </section> Here is the coding that relates to the sections of the SWOT.html page. I created eight sections One for each with an image of Cupid and one that was blank. The Blank one contains the Words like Strengths or Weaknesses or Threats or Opportunities The sections with cupid use the image tag to load a picture of Cupid See Below for how they are coded in the style file, StylePresentation.css #strengthBlank{ float:left; width:200px; height:275px; margin:2px; border:3px solid blue; } #strengthCupid{ float:left; width:200px; height:275px; margin:2px; border:3px solid green; } #weakBlank{ float:left; width:200px; height:275px; margin:2px; border:3px solid blue; } #weakCupid{ float:left; width:200px; height:275px; margin:2px; border:3px solid green; } #opportunityBlank{ float:left; width:200px; height:275px; margin:2px; border:3px solid blue; } #opportunityCupid{ float:left; width:200px; height:275px; margin:2px; border:3px solid green; } #threatsBlank{ float:left; width:200px; height:275px; margin:2px; border:3px solid blue; } #threatsCupid{ float:left; width:200px; height:275px; margin:2px; border:3px solid green; } All of them are floated to the left. All have the same width and height They all have the same margins All the ones containing Cupid have solid green borders. The blank sections have solid blue borders The actual coding for the drag and drop function is in the jerry.js file. Listed below is that specific coding for the doFirst function. function doFirst(){ mypic = document.getElementById('facepic1'); mypic.addEventListener("dragstart", startDrag,false); mypic.addEventListener("dragend", endDrag,false); threatsBlank = document.getElementById('threatsBlank'); threatsBlank.addEventListener("dragenter",dragenter,false); threatsBlank.addEventListener("dragleave",dragleave,false); threatsBlank.addEventListener("dragover",function(e){e.preventDefault();},false); threatsBlank.addEventListener("drop",dropped,false); function endDrag(e){ pic = e.target; pic.style.visibility = 'hidden'; } function dragenter(e){ e.preventDefault(); threatsBlank.style.background = "SkyBlue"; threatsBlank.style.border = "3px solid red"; } function dragleave(e){ e.preventDefault(); threatsBlank.style.background = "White"; threatsBlank.style.border = "3px solid "; } function startDrag(e){ var code = '<img src="Cupid.jpg" height=275 width=200>'; e.dataTransfer.setData('Text', code); } function dropped(e){ e.preventDefault(); threatsBlank.innerHTML = e.dataTransfer.getData('Text'); threatsCupid.innerHTML =("Privacy issues. Lots of competition for teen market's discretionary income. Social networking sites as competitors. Everchanging technology. Free versions offered by competitors. Once competitors see our success in our market segment, they will want to compete. "); } } window.addEventListener("load", doFirst, false); } Explanation of how drag and drop works The script file came from TheNewBoston.org web site 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 Let's examine the coding for doFirst function. All functions are almost identical The function is called as soon as the page loads with the line window.addEventListener("load",doFirst,false); This line is at the bottom of the doFirst Function. just before the doSecond function. Next a variable called mypic is equated to document.getElementsById('facepic1'); 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 Each one of the facepic variables is slightly different. 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. 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. 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. 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. The line that states mypic.addEventListner("dragstart"),startdrag,false); fires as soon as the user starts to drag the image. dragstart is a keyword and cannot be changed 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. dragener is a reserved word. It will call a function by the name endDrag which we will create later. 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. 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. 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 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 The browser stores that information like X and Y position of the mouse. 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〉'; This line is how we store information about the picture e.dataTransfer.setData('Text', code); Drag End Function dragEnd function When we drop the image into the box to the left, we want to have the original image to disappear. First we assign e.target to a variable called pic. The endDrag function sets our picture's style for visibility to hidden so it can't be seen. Drag Enter Function 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. The next line sets the background to SkyBlue The next line sets a 3 pixel border around the box that is solid red. Drag Leave Function 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. The second line sets the background color of the strengthBlank box to white The third line puts a 3 pixel solid border around the box. It is the same color as before - green. Drag Over Function 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 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. Now we have to identify where are going to drop the image. It will be in the box called strengthBlank The rest of the line tells the browser to take the information that is stored and drop the text in the box. 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 The purpose of this page it to highlight our program and the way it works. It is inserts into Article 1 box. The header is "New Way to get a date Try Lovebytes" You might use it to insert a video commercial for your company. Again we are using the Camtasia Studio 8 program, which captures the screen and audio. The video is quite short and we have a poster above the controls when the video is not playing. Create a line in your html file to play the video. The footer identifies who wrote the software and their title. <video src="Lovebytes Presentation/Lovebytes Presentation.mp4" controls width="640" width="360" poster="LBLogo.jpg"> </video> Remember to play on the web using html5 the file needs to be in the MP4 format. As mentioned before, a video presentation can be done ahead of time. By creating a video of a demonstration there is no chance of the presenter messing up. Day 4 Lovebytes Questionnaire The header for this article2 is 〈Header〉 〈BR〉 〈h1>Lovebytes Survey Sample Questions〈/h1〉 〈h3>Questionnaire〈/h3〉 〈/Header〉 <Table cellspacing=0 cellpadding=0 width="100%" border = 1> <!-- Question 1 --> <TR> <TD Align=left><P>1. My idea of a romantic evening would be a walk on the beach.</TD> <TD align=left><P><input Type="Radio" Name="RomanticEvening" Value="AS" >Agree Strongly</TD> <TD align=feft><P><Input Type ="Radio" NAME="RomanticEvening" Value="AM" >Areee Moderately</TD> <TD align=feft><P><Input Type ="Radio" NAME="RomanticEvening" Value="DM" >Disareee Moderately</TD> <TD align=feft><P><Input Type ="Radio" NAME="RomanticEvening" Value="DS" >Disagree Strongly</TD> <TR> <TD Align=left><P>2. My favorite kind of movie is:</TD> <TD align=left><P><input Type="Radio" Name="Movie" Value="Drama" >Drama</TD> <TD align=feft><P><Input Type ="Radio" NAME="Movie" Value="Adventure" >Adventure</TD> <TD align=feft><P><Input Type ="Radio" NAME="Movie" Value="Comedy" >Comedy</TD> <TD align=feft><P><Input Type ="Radio" NAME="Movie" Value="ScienceFiction" >Science Fiction</TD> </TR> Article 2 is a sampling of the questionnaire that respondents fill out. It created in a true html format, so that you as the presenter can answer the questions. The questionnaire is put into a table. Respondents answer the questions by clicking on the radio button of their choice 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. You can choose what ever you want to go here. The header for this section is〈h1〉Lovebytes Survey Sample Questions〈/h1〉 〈h3〉Questionnaire〈/h3〉 The footer for this article is 〈Footer〉 〈p〉Questionnaire developed by LoveBytes.com〈/p〉〈/Footer〉 Day 5 Side New Section: Business Partners 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 Take a look at the Appendix Link The user enters numbers for terms of the loan and then hovers over a special button to make the calculations The showpay() function in the java script file is called and here is where the calculations are made. Load in your flexible box model html template and save it as Appendix.html in your student folder. Remember all the headings, format for the boxes, menu and navigation link are the same for all pages of your presentation. The JavaScript link is called janet.js. Make that adjustment in your html file. 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. 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. Below is a listing of the HTML file portion of the program that shows the loan program. <Section id="main_section"> <Article> <Header> <center><H1>Loan Amortization</h1> <H2>Business Loan</h2> </header> The results of this loan payment calculator are for comparison purposes only. They will be a close approximation of actual loan repayments if available at the terms entered, from a financial institution. This is being provided for you to plan your next loan application. To use, enter values for the Loan Amount, Number of Months for Loan, and the Interest Rate (e.g. 7.25), and click the Calculate button. <footer> <p>Loan Calculator Developed by Janet Belch, CFo</p> </Footer> <p> <BR> <center> <header> Find monthly payment for VEC Loan </header> <table width=60% border=0> <tr><th bgcolor="#aaaaaa" width=50%><font color=blue>Description</font></th> <th bgcolor="#aaaaaa" width=50%><font color=blue>Data Entry</font></th></tr> <tr><td bgcolor="#eeeee">Loan Amount</td><td bgcolor="#aaeeaa" align=right><input type=text name=loan size=10></td></tr> <tr><td bgcolor="#eeeee">Loan Length in Months</td><td bgcolor="#aaeeaa" align=right><input type=text name=months size=10></td></tr> <tr><td bgcolor="#eeeee">Interest Rate</td><td bgcolor="#aaeeaa" align=right><input type=text name=rate size=10></td></tr> <tr> <TD align=right><em>Calculated</em> <input type=text name=pay size=15></td></tr> </table> </form> <font size=1>Enter only numeric values (no commas), using decimal points where needed.<br> Non-numeric values will cause errors.</font> </center> </Article> <div id="box"> <!--<p id="text">Loan Amortization</p>--> <input type="button style = visibility:hidden" value="Loan Amortization" onMouseOut='showpay()'/> </br></p> <BR><BR><BR><BR><BR><BR><BR> <Footer> <rt>Button designed by Jerry</rt> </Footer> </Article> </section> The data entry portion of the calculator program is formatted in a table that utilizes 60% of the screen. The table has no border. Table Headings background color is gray The boxes where you enter the data are white. The box is our button. We have used this type of html5 button before. When it is clicked on it goes to the Java script file called janet.js and executes the showpay() function. 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. It returns the value of this function back to the HTML file as the word pay. 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 The part of the Appendix page is in the Aside_news box. The first two are excellent references for HTML5, CSS and JavaScript. The third link is for your company's business contract. 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. Spend the next two days checking out all links, spelling and grammar. Make certain all the JavaScript works and delivers the right answers and results To do well giving a presentation in front of judges, please practice your presentation in front of different groups. Each Department vice president should explain their portion of the presentation. 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
Printer Friendly Week 5
Day 1 and Day 2 SWOT Analysis. I decided to use the ntml5 feature of drag and drop to make the Strengths, Weakneses, Threats, and Opportunities Page. Load in your template for html and save it in your student fole as SWOT.html Load in necessary style, StylePresentation.css and JavaScript files, jerry.js into Notepad++ Run the SWOT Page to see how the program works. Drag and Drop is used in many desktop applications, therefore, HTML5 needed the same functionality. 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 the idea is to drag the image of the Cupid one into the blank box of the same name. Once you let go of the mouse-drop, the information about that characteristic appears in the blank box. It seemed like a flashy way to present the SWOT information. <section id="strengthBlank"> <BR> <BR> <br> <BR> <BR> <br> <h1> STRENGTHS</h1> </section> <section id="strengthCupid"> <img id="facepic1" src="CupidStrengths.jpg" height=275 width=200> </section> Here is the coding that relates to the sections of the SWOT.html page. I created eight sections One for each with an image of Cupid and one that was blank. The Blank one contains the Words like Strengths or Weaknesses or Threats or Opportunities The sections with cupid use the image tag to load a picture of Cupid See Below for how they are coded in the style file, StylePresentation.css #strengthBlank{ float:left; width:200px; height:275px; margin:2px; border:3px solid blue; } #strengthCupid{ float:left; width:200px; height:275px; margin:2px; border:3px solid green; } #weakBlank{ float:left; width:200px; height:275px; margin:2px; border:3px solid blue; } #weakCupid{ float:left; width:200px; height:275px; margin:2px; border:3px solid green; } #opportunityBlank{ float:left; width:200px; height:275px; margin:2px; border:3px solid blue; } #opportunityCupid{ float:left; width:200px; height:275px; margin:2px; border:3px solid green; } #threatsBlank{ float:left; width:200px; height:275px; margin:2px; border:3px solid blue; } #threatsCupid{ float:left; width:200px; height:275px; margin:2px; border:3px solid green; } All of them are floated to the left. All have the same width and height They all have the same margins All the ones containing Cupid have solid green borders. The blank sections have solid blue borders The actual coding for the drag and drop function is in the jerry.js file. Listed below is that specific coding for the doFirst function. function doFirst(){ mypic = document.getElementById('facepic1'); mypic.addEventListener("dragstart", startDrag,false); mypic.addEventListener("dragend", endDrag,false); threatsBlank = document.getElementById('threatsBlank'); threatsBlank.addEventListener("dragenter",dragenter,false); threatsBlank.addEventListener("dragleave",dragleave,false); threatsBlank.addEventListener("dragover",function(e){e.preventDefault();},false); threatsBlank.addEventListener("drop",dropped,false); function endDrag(e){ pic = e.target; pic.style.visibility = 'hidden'; } function dragenter(e){ e.preventDefault(); threatsBlank.style.background = "SkyBlue"; threatsBlank.style.border = "3px solid red"; } function dragleave(e){ e.preventDefault(); threatsBlank.style.background = "White"; threatsBlank.style.border = "3px solid "; } function startDrag(e){ var code = '<img src="Cupid.jpg" height=275 width=200>'; e.dataTransfer.setData('Text', code); } function dropped(e){ e.preventDefault(); threatsBlank.innerHTML = e.dataTransfer.getData('Text'); threatsCupid.innerHTML =("Privacy issues. Lots of competition for teen market's discretionary income. Social networking sites as competitors. Everchanging technology. Free versions offered by competitors. Once competitors see our success in our market segment, they will want to compete. "); } } window.addEventListener("load", doFirst, false); } Explanation of how drag and drop works The script file came from TheNewBoston.org web site 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 Let's examine the coding for doFirst function. All functions are almost identical The function is called as soon as the page loads with the line window.addEventListener("load",doFirst,false); This line is at the bottom of the doFirst Function. just before the doSecond function. Next a variable called mypic is equated to document.getElementsById('facepic1'); 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 Each one of the facepic variables is slightly different. 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. 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. 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. 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. The line that states mypic.addEventListner("dragstart"),startdrag,false); fires as soon as the user starts to drag the image. dragstart is a keyword and cannot be changed 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. dragener is a reserved word. It will call a function by the name endDrag which we will create later. 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. 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. 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 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 The browser stores that information like X and Y position of the mouse. 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〉'; This line is how we store information about the picture e.dataTransfer.setData('Text', code); Drag End Function dragEnd function When we drop the image into the box to the left, we want to have the original image to disappear. First we assign e.target to a variable called pic. The endDrag function sets our picture's style for visibility to hidden so it can't be seen. Drag Enter Function 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. The next line sets the background to SkyBlue The next line sets a 3 pixel border around the box that is solid red. Drag Leave Function 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. The second line sets the background color of the strengthBlank box to white The third line puts a 3 pixel solid border around the box. It is the same color as before - green. Drag Over Function 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 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. Now we have to identify where are going to drop the image. It will be in the box called strengthBlank The rest of the line tells the browser to take the information that is stored and drop the text in the box. 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 The purpose of this page it to highlight our program and the way it works. It is inserts into Article 1 box. The header is "New Way to get a date Try Lovebytes" You might use it to insert a video commercial for your company. Again we are using the Camtasia Studio 8 program, which captures the screen and audio. The video is quite short and we have a poster above the controls when the video is not playing. Create a line in your html file to play the video. The footer identifies who wrote the software and their title. <video src="Lovebytes Presentation/Lovebytes Presentation.mp4" controls width="640" width="360" poster="LBLogo.jpg"> </video> Remember to play on the web using html5 the file needs to be in the MP4 format. As mentioned before, a video presentation can be done ahead of time. By creating a video of a demonstration there is no chance of the presenter messing up. Day 4 Lovebytes Questionnaire The header for this article2 is 〈Header〉 〈BR〉 〈h1>Lovebytes Survey Sample Questions〈/h1〉 〈h3>Questionnaire〈/h3〉 〈/Header〉 <Table cellspacing=0 cellpadding=0 width="100%" border = 1> <!-- Question 1 --> <TR> <TD Align=left><P>1. My idea of a romantic evening would be a walk on the beach.</TD> <TD align=left><P><input Type="Radio" Name="RomanticEvening" Value="AS" >Agree Strongly</TD> <TD align=feft><P><Input Type ="Radio" NAME="RomanticEvening" Value="AM" >Areee Moderately</TD> <TD align=feft><P><Input Type ="Radio" NAME="RomanticEvening" Value="DM" >Disareee Moderately</TD> <TD align=feft><P><Input Type ="Radio" NAME="RomanticEvening" Value="DS" >Disagree Strongly</TD> <TR> <TD Align=left><P>2. My favorite kind of movie is:</TD> <TD align=left><P><input Type="Radio" Name="Movie" Value="Drama" >Drama</TD> <TD align=feft><P><Input Type ="Radio" NAME="Movie" Value="Adventure" >Adventure</TD> <TD align=feft><P><Input Type ="Radio" NAME="Movie" Value="Comedy" >Comedy</TD> <TD align=feft><P><Input Type ="Radio" NAME="Movie" Value="ScienceFiction" >Science Fiction</TD> </TR> Article 2 is a sampling of the questionnaire that respondents fill out. It created in a true html format, so that you as the presenter can answer the questions. The questionnaire is put into a table. Respondents answer the questions by clicking on the radio button of their choice 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. You can choose what ever you want to go here. The header for this section is〈h1〉Lovebytes Survey Sample Questions〈/h1〉 〈h3〉Questionnaire〈/h3〉 The footer for this article is 〈Footer〉 〈p〉Questionnaire developed by LoveBytes.com〈/p〉〈/Footer〉 Day 5 Side New Section: Business Partners 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 Take a look at the Appendix Link The user enters numbers for terms of the loan and then hovers over a special button to make the calculations The showpay() function in the java script file is called and here is where the calculations are made. Load in your flexible box model html template and save it as Appendix.html in your student folder. Remember all the headings, format for the boxes, menu and navigation link are the same for all pages of your presentation. The JavaScript link is called janet.js. Make that adjustment in your html file. 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. 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. Below is a listing of the HTML file portion of the program that shows the loan program. <Section id="main_section"> <Article> <Header> <center><H1>Loan Amortization</h1> <H2>Business Loan</h2> </header> The results of this loan payment calculator are for comparison purposes only. They will be a close approximation of actual loan repayments if available at the terms entered, from a financial institution. This is being provided for you to plan your next loan application. To use, enter values for the Loan Amount, Number of Months for Loan, and the Interest Rate (e.g. 7.25), and click the Calculate button. <footer> <p>Loan Calculator Developed by Janet Belch, CFo</p> </Footer> <p> <BR> <center> <header> Find monthly payment for VEC Loan </header> <table width=60% border=0> <tr><th bgcolor="#aaaaaa" width=50%><font color=blue>Description</font></th> <th bgcolor="#aaaaaa" width=50%><font color=blue>Data Entry</font></th></tr> <tr><td bgcolor="#eeeee">Loan Amount</td><td bgcolor="#aaeeaa" align=right><input type=text name=loan size=10></td></tr> <tr><td bgcolor="#eeeee">Loan Length in Months</td><td bgcolor="#aaeeaa" align=right><input type=text name=months size=10></td></tr> <tr><td bgcolor="#eeeee">Interest Rate</td><td bgcolor="#aaeeaa" align=right><input type=text name=rate size=10></td></tr> <tr> <TD align=right><em>Calculated</em> <input type=text name=pay size=15></td></tr> </table> </form> <font size=1>Enter only numeric values (no commas), using decimal points where needed.<br> Non-numeric values will cause errors.</font> </center> </Article> <div id="box"> <!--<p id="text">Loan Amortization</p>--> <input type="button style = visibility:hidden" value="Loan Amortization" onMouseOut='showpay()'/> </br></p> <BR><BR><BR><BR><BR><BR><BR> <Footer> <rt>Button designed by Jerry</rt> </Footer> </Article> </section> The data entry portion of the calculator program is formatted in a table that utilizes 60% of the screen. The table has no border. Table Headings background color is gray The boxes where you enter the data are white. The box is our button. We have used this type of html5 button before. When it is clicked on it goes to the Java script file called janet.js and executes the showpay() function. 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. It returns the value of this function back to the HTML file as the word pay. 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 The part of the Appendix page is in the Aside_news box. The first two are excellent references for HTML5, CSS and JavaScript. The third link is for your company's business contract. 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. Spend the next two days checking out all links, spelling and grammar. Make certain all the JavaScript works and delivers the right answers and results To do well giving a presentation in front of judges, please practice your presentation in front of different groups. Each Department vice president should explain their portion of the presentation. 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
<section id="strengthBlank"> <BR> <BR> <br> <BR> <BR> <br> <h1> STRENGTHS</h1> </section> <section id="strengthCupid"> <img id="facepic1" src="CupidStrengths.jpg" height=275 width=200> </section>
#strengthBlank{ float:left; width:200px; height:275px; margin:2px; border:3px solid blue; } #strengthCupid{ float:left; width:200px; height:275px; margin:2px; border:3px solid green; } #weakBlank{ float:left; width:200px; height:275px; margin:2px; border:3px solid blue; } #weakCupid{ float:left; width:200px; height:275px; margin:2px; border:3px solid green; } #opportunityBlank{ float:left; width:200px; height:275px; margin:2px; border:3px solid blue; } #opportunityCupid{ float:left; width:200px; height:275px; margin:2px; border:3px solid green; } #threatsBlank{ float:left; width:200px; height:275px; margin:2px; border:3px solid blue; } #threatsCupid{ float:left; width:200px; height:275px; margin:2px; border:3px solid green; }
function doFirst(){ mypic = document.getElementById('facepic1'); mypic.addEventListener("dragstart", startDrag,false); mypic.addEventListener("dragend", endDrag,false); threatsBlank = document.getElementById('threatsBlank'); threatsBlank.addEventListener("dragenter",dragenter,false); threatsBlank.addEventListener("dragleave",dragleave,false); threatsBlank.addEventListener("dragover",function(e){e.preventDefault();},false); threatsBlank.addEventListener("drop",dropped,false); function endDrag(e){ pic = e.target; pic.style.visibility = 'hidden'; } function dragenter(e){ e.preventDefault(); threatsBlank.style.background = "SkyBlue"; threatsBlank.style.border = "3px solid red"; } function dragleave(e){ e.preventDefault(); threatsBlank.style.background = "White"; threatsBlank.style.border = "3px solid "; } function startDrag(e){ var code = '<img src="Cupid.jpg" height=275 width=200>'; e.dataTransfer.setData('Text', code); } function dropped(e){ e.preventDefault(); threatsBlank.innerHTML = e.dataTransfer.getData('Text'); threatsCupid.innerHTML =("Privacy issues. Lots of competition for teen market's discretionary income. Social networking sites as competitors. Everchanging technology. Free versions offered by competitors. Once competitors see our success in our market segment, they will want to compete. "); } } window.addEventListener("load", doFirst, false); }
Day 3 Lovebytes Video The purpose of this page it to highlight our program and the way it works. It is inserts into Article 1 box. The header is "New Way to get a date Try Lovebytes" You might use it to insert a video commercial for your company. Again we are using the Camtasia Studio 8 program, which captures the screen and audio. The video is quite short and we have a poster above the controls when the video is not playing. Create a line in your html file to play the video. The footer identifies who wrote the software and their title. <video src="Lovebytes Presentation/Lovebytes Presentation.mp4" controls width="640" width="360" poster="LBLogo.jpg"> </video> Remember to play on the web using html5 the file needs to be in the MP4 format. As mentioned before, a video presentation can be done ahead of time. By creating a video of a demonstration there is no chance of the presenter messing up. Day 4 Lovebytes Questionnaire The header for this article2 is 〈Header〉 〈BR〉 〈h1>Lovebytes Survey Sample Questions〈/h1〉 〈h3>Questionnaire〈/h3〉 〈/Header〉 <Table cellspacing=0 cellpadding=0 width="100%" border = 1> <!-- Question 1 --> <TR> <TD Align=left><P>1. My idea of a romantic evening would be a walk on the beach.</TD> <TD align=left><P><input Type="Radio" Name="RomanticEvening" Value="AS" >Agree Strongly</TD> <TD align=feft><P><Input Type ="Radio" NAME="RomanticEvening" Value="AM" >Areee Moderately</TD> <TD align=feft><P><Input Type ="Radio" NAME="RomanticEvening" Value="DM" >Disareee Moderately</TD> <TD align=feft><P><Input Type ="Radio" NAME="RomanticEvening" Value="DS" >Disagree Strongly</TD> <TR> <TD Align=left><P>2. My favorite kind of movie is:</TD> <TD align=left><P><input Type="Radio" Name="Movie" Value="Drama" >Drama</TD> <TD align=feft><P><Input Type ="Radio" NAME="Movie" Value="Adventure" >Adventure</TD> <TD align=feft><P><Input Type ="Radio" NAME="Movie" Value="Comedy" >Comedy</TD> <TD align=feft><P><Input Type ="Radio" NAME="Movie" Value="ScienceFiction" >Science Fiction</TD> </TR> Article 2 is a sampling of the questionnaire that respondents fill out. It created in a true html format, so that you as the presenter can answer the questions. The questionnaire is put into a table. Respondents answer the questions by clicking on the radio button of their choice 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. You can choose what ever you want to go here. The header for this section is〈h1〉Lovebytes Survey Sample Questions〈/h1〉 〈h3〉Questionnaire〈/h3〉 The footer for this article is 〈Footer〉 〈p〉Questionnaire developed by LoveBytes.com〈/p〉〈/Footer〉 Day 5 Side New Section: Business Partners 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 Take a look at the Appendix Link The user enters numbers for terms of the loan and then hovers over a special button to make the calculations The showpay() function in the java script file is called and here is where the calculations are made. Load in your flexible box model html template and save it as Appendix.html in your student folder. Remember all the headings, format for the boxes, menu and navigation link are the same for all pages of your presentation. The JavaScript link is called janet.js. Make that adjustment in your html file. 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. 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. Below is a listing of the HTML file portion of the program that shows the loan program. <Section id="main_section"> <Article> <Header> <center><H1>Loan Amortization</h1> <H2>Business Loan</h2> </header> The results of this loan payment calculator are for comparison purposes only. They will be a close approximation of actual loan repayments if available at the terms entered, from a financial institution. This is being provided for you to plan your next loan application. To use, enter values for the Loan Amount, Number of Months for Loan, and the Interest Rate (e.g. 7.25), and click the Calculate button. <footer> <p>Loan Calculator Developed by Janet Belch, CFo</p> </Footer> <p> <BR> <center> <header> Find monthly payment for VEC Loan </header> <table width=60% border=0> <tr><th bgcolor="#aaaaaa" width=50%><font color=blue>Description</font></th> <th bgcolor="#aaaaaa" width=50%><font color=blue>Data Entry</font></th></tr> <tr><td bgcolor="#eeeee">Loan Amount</td><td bgcolor="#aaeeaa" align=right><input type=text name=loan size=10></td></tr> <tr><td bgcolor="#eeeee">Loan Length in Months</td><td bgcolor="#aaeeaa" align=right><input type=text name=months size=10></td></tr> <tr><td bgcolor="#eeeee">Interest Rate</td><td bgcolor="#aaeeaa" align=right><input type=text name=rate size=10></td></tr> <tr> <TD align=right><em>Calculated</em> <input type=text name=pay size=15></td></tr> </table> </form> <font size=1>Enter only numeric values (no commas), using decimal points where needed.<br> Non-numeric values will cause errors.</font> </center> </Article> <div id="box"> <!--<p id="text">Loan Amortization</p>--> <input type="button style = visibility:hidden" value="Loan Amortization" onMouseOut='showpay()'/> </br></p> <BR><BR><BR><BR><BR><BR><BR> <Footer> <rt>Button designed by Jerry</rt> </Footer> </Article> </section> The data entry portion of the calculator program is formatted in a table that utilizes 60% of the screen. The table has no border. Table Headings background color is gray The boxes where you enter the data are white. The box is our button. We have used this type of html5 button before. When it is clicked on it goes to the Java script file called janet.js and executes the showpay() function. 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. It returns the value of this function back to the HTML file as the word pay. 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 The part of the Appendix page is in the Aside_news box. The first two are excellent references for HTML5, CSS and JavaScript. The third link is for your company's business contract. 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. Spend the next two days checking out all links, spelling and grammar. Make certain all the JavaScript works and delivers the right answers and results To do well giving a presentation in front of judges, please practice your presentation in front of different groups. Each Department vice president should explain their portion of the presentation. 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
<video src="Lovebytes Presentation/Lovebytes Presentation.mp4" controls width="640" width="360" poster="LBLogo.jpg"> </video>
Day 4 Lovebytes Questionnaire The header for this article2 is 〈Header〉 〈BR〉 〈h1>Lovebytes Survey Sample Questions〈/h1〉 〈h3>Questionnaire〈/h3〉 〈/Header〉 <Table cellspacing=0 cellpadding=0 width="100%" border = 1> <!-- Question 1 --> <TR> <TD Align=left><P>1. My idea of a romantic evening would be a walk on the beach.</TD> <TD align=left><P><input Type="Radio" Name="RomanticEvening" Value="AS" >Agree Strongly</TD> <TD align=feft><P><Input Type ="Radio" NAME="RomanticEvening" Value="AM" >Areee Moderately</TD> <TD align=feft><P><Input Type ="Radio" NAME="RomanticEvening" Value="DM" >Disareee Moderately</TD> <TD align=feft><P><Input Type ="Radio" NAME="RomanticEvening" Value="DS" >Disagree Strongly</TD> <TR> <TD Align=left><P>2. My favorite kind of movie is:</TD> <TD align=left><P><input Type="Radio" Name="Movie" Value="Drama" >Drama</TD> <TD align=feft><P><Input Type ="Radio" NAME="Movie" Value="Adventure" >Adventure</TD> <TD align=feft><P><Input Type ="Radio" NAME="Movie" Value="Comedy" >Comedy</TD> <TD align=feft><P><Input Type ="Radio" NAME="Movie" Value="ScienceFiction" >Science Fiction</TD> </TR> Article 2 is a sampling of the questionnaire that respondents fill out. It created in a true html format, so that you as the presenter can answer the questions. The questionnaire is put into a table. Respondents answer the questions by clicking on the radio button of their choice 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. You can choose what ever you want to go here. The header for this section is〈h1〉Lovebytes Survey Sample Questions〈/h1〉 〈h3〉Questionnaire〈/h3〉 The footer for this article is 〈Footer〉 〈p〉Questionnaire developed by LoveBytes.com〈/p〉〈/Footer〉 Day 5 Side New Section: Business Partners 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 Take a look at the Appendix Link The user enters numbers for terms of the loan and then hovers over a special button to make the calculations The showpay() function in the java script file is called and here is where the calculations are made. Load in your flexible box model html template and save it as Appendix.html in your student folder. Remember all the headings, format for the boxes, menu and navigation link are the same for all pages of your presentation. The JavaScript link is called janet.js. Make that adjustment in your html file. 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. 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. Below is a listing of the HTML file portion of the program that shows the loan program. <Section id="main_section"> <Article> <Header> <center><H1>Loan Amortization</h1> <H2>Business Loan</h2> </header> The results of this loan payment calculator are for comparison purposes only. They will be a close approximation of actual loan repayments if available at the terms entered, from a financial institution. This is being provided for you to plan your next loan application. To use, enter values for the Loan Amount, Number of Months for Loan, and the Interest Rate (e.g. 7.25), and click the Calculate button. <footer> <p>Loan Calculator Developed by Janet Belch, CFo</p> </Footer> <p> <BR> <center> <header> Find monthly payment for VEC Loan </header> <table width=60% border=0> <tr><th bgcolor="#aaaaaa" width=50%><font color=blue>Description</font></th> <th bgcolor="#aaaaaa" width=50%><font color=blue>Data Entry</font></th></tr> <tr><td bgcolor="#eeeee">Loan Amount</td><td bgcolor="#aaeeaa" align=right><input type=text name=loan size=10></td></tr> <tr><td bgcolor="#eeeee">Loan Length in Months</td><td bgcolor="#aaeeaa" align=right><input type=text name=months size=10></td></tr> <tr><td bgcolor="#eeeee">Interest Rate</td><td bgcolor="#aaeeaa" align=right><input type=text name=rate size=10></td></tr> <tr> <TD align=right><em>Calculated</em> <input type=text name=pay size=15></td></tr> </table> </form> <font size=1>Enter only numeric values (no commas), using decimal points where needed.<br> Non-numeric values will cause errors.</font> </center> </Article> <div id="box"> <!--<p id="text">Loan Amortization</p>--> <input type="button style = visibility:hidden" value="Loan Amortization" onMouseOut='showpay()'/> </br></p> <BR><BR><BR><BR><BR><BR><BR> <Footer> <rt>Button designed by Jerry</rt> </Footer> </Article> </section> The data entry portion of the calculator program is formatted in a table that utilizes 60% of the screen. The table has no border. Table Headings background color is gray The boxes where you enter the data are white. The box is our button. We have used this type of html5 button before. When it is clicked on it goes to the Java script file called janet.js and executes the showpay() function. 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. It returns the value of this function back to the HTML file as the word pay. 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 The part of the Appendix page is in the Aside_news box. The first two are excellent references for HTML5, CSS and JavaScript. The third link is for your company's business contract. 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. Spend the next two days checking out all links, spelling and grammar. Make certain all the JavaScript works and delivers the right answers and results To do well giving a presentation in front of judges, please practice your presentation in front of different groups. Each Department vice president should explain their portion of the presentation. 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
Day 5 Side New Section: Business Partners 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 Take a look at the Appendix Link The user enters numbers for terms of the loan and then hovers over a special button to make the calculations The showpay() function in the java script file is called and here is where the calculations are made. Load in your flexible box model html template and save it as Appendix.html in your student folder. Remember all the headings, format for the boxes, menu and navigation link are the same for all pages of your presentation. The JavaScript link is called janet.js. Make that adjustment in your html file. 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. 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. Below is a listing of the HTML file portion of the program that shows the loan program. <Section id="main_section"> <Article> <Header> <center><H1>Loan Amortization</h1> <H2>Business Loan</h2> </header> The results of this loan payment calculator are for comparison purposes only. They will be a close approximation of actual loan repayments if available at the terms entered, from a financial institution. This is being provided for you to plan your next loan application. To use, enter values for the Loan Amount, Number of Months for Loan, and the Interest Rate (e.g. 7.25), and click the Calculate button. <footer> <p>Loan Calculator Developed by Janet Belch, CFo</p> </Footer> <p> <BR> <center> <header> Find monthly payment for VEC Loan </header> <table width=60% border=0> <tr><th bgcolor="#aaaaaa" width=50%><font color=blue>Description</font></th> <th bgcolor="#aaaaaa" width=50%><font color=blue>Data Entry</font></th></tr> <tr><td bgcolor="#eeeee">Loan Amount</td><td bgcolor="#aaeeaa" align=right><input type=text name=loan size=10></td></tr> <tr><td bgcolor="#eeeee">Loan Length in Months</td><td bgcolor="#aaeeaa" align=right><input type=text name=months size=10></td></tr> <tr><td bgcolor="#eeeee">Interest Rate</td><td bgcolor="#aaeeaa" align=right><input type=text name=rate size=10></td></tr> <tr> <TD align=right><em>Calculated</em> <input type=text name=pay size=15></td></tr> </table> </form> <font size=1>Enter only numeric values (no commas), using decimal points where needed.<br> Non-numeric values will cause errors.</font> </center> </Article> <div id="box"> <!--<p id="text">Loan Amortization</p>--> <input type="button style = visibility:hidden" value="Loan Amortization" onMouseOut='showpay()'/> </br></p> <BR><BR><BR><BR><BR><BR><BR> <Footer> <rt>Button designed by Jerry</rt> </Footer> </Article> </section> The data entry portion of the calculator program is formatted in a table that utilizes 60% of the screen. The table has no border. Table Headings background color is gray The boxes where you enter the data are white. The box is our button. We have used this type of html5 button before. When it is clicked on it goes to the Java script file called janet.js and executes the showpay() function. 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. It returns the value of this function back to the HTML file as the word pay. 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 The part of the Appendix page is in the Aside_news box. The first two are excellent references for HTML5, CSS and JavaScript. The third link is for your company's business contract. 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. Spend the next two days checking out all links, spelling and grammar. Make certain all the JavaScript works and delivers the right answers and results To do well giving a presentation in front of judges, please practice your presentation in front of different groups. Each Department vice president should explain their portion of the presentation. 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
Printer Friendly version week 6
Day 1 and 2 Appendix: Loan Amortization Take a look at the Appendix Link The user enters numbers for terms of the loan and then hovers over a special button to make the calculations The showpay() function in the java script file is called and here is where the calculations are made. Load in your flexible box model html template and save it as Appendix.html in your student folder. Remember all the headings, format for the boxes, menu and navigation link are the same for all pages of your presentation. The JavaScript link is called janet.js. Make that adjustment in your html file. 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. 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. Below is a listing of the HTML file portion of the program that shows the loan program. <Section id="main_section"> <Article> <Header> <center><H1>Loan Amortization</h1> <H2>Business Loan</h2> </header> The results of this loan payment calculator are for comparison purposes only. They will be a close approximation of actual loan repayments if available at the terms entered, from a financial institution. This is being provided for you to plan your next loan application. To use, enter values for the Loan Amount, Number of Months for Loan, and the Interest Rate (e.g. 7.25), and click the Calculate button. <footer> <p>Loan Calculator Developed by Janet Belch, CFo</p> </Footer> <p> <BR> <center> <header> Find monthly payment for VEC Loan </header> <table width=60% border=0> <tr><th bgcolor="#aaaaaa" width=50%><font color=blue>Description</font></th> <th bgcolor="#aaaaaa" width=50%><font color=blue>Data Entry</font></th></tr> <tr><td bgcolor="#eeeee">Loan Amount</td><td bgcolor="#aaeeaa" align=right><input type=text name=loan size=10></td></tr> <tr><td bgcolor="#eeeee">Loan Length in Months</td><td bgcolor="#aaeeaa" align=right><input type=text name=months size=10></td></tr> <tr><td bgcolor="#eeeee">Interest Rate</td><td bgcolor="#aaeeaa" align=right><input type=text name=rate size=10></td></tr> <tr> <TD align=right><em>Calculated</em> <input type=text name=pay size=15></td></tr> </table> </form> <font size=1>Enter only numeric values (no commas), using decimal points where needed.<br> Non-numeric values will cause errors.</font> </center> </Article> <div id="box"> <!--<p id="text">Loan Amortization</p>--> <input type="button style = visibility:hidden" value="Loan Amortization" onMouseOut='showpay()'/> </br></p> <BR><BR><BR><BR><BR><BR><BR> <Footer> <rt>Button designed by Jerry</rt> </Footer> </Article> </section> The data entry portion of the calculator program is formatted in a table that utilizes 60% of the screen. The table has no border. Table Headings background color is gray The boxes where you enter the data are white. The box is our button. We have used this type of html5 button before. When it is clicked on it goes to the Java script file called janet.js and executes the showpay() function. 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. It returns the value of this function back to the HTML file as the word pay. 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 The part of the Appendix page is in the Aside_news box. The first two are excellent references for HTML5, CSS and JavaScript. The third link is for your company's business contract. 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. Spend the next two days checking out all links, spelling and grammar. Make certain all the JavaScript works and delivers the right answers and results To do well giving a presentation in front of judges, please practice your presentation in front of different groups. Each Department vice president should explain their portion of the presentation. 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
<Section id="main_section"> <Article> <Header> <center><H1>Loan Amortization</h1> <H2>Business Loan</h2> </header> The results of this loan payment calculator are for comparison purposes only. They will be a close approximation of actual loan repayments if available at the terms entered, from a financial institution. This is being provided for you to plan your next loan application. To use, enter values for the Loan Amount, Number of Months for Loan, and the Interest Rate (e.g. 7.25), and click the Calculate button. <footer> <p>Loan Calculator Developed by Janet Belch, CFo</p> </Footer> <p> <BR> <center> <header> Find monthly payment for VEC Loan </header> <table width=60% border=0> <tr><th bgcolor="#aaaaaa" width=50%><font color=blue>Description</font></th> <th bgcolor="#aaaaaa" width=50%><font color=blue>Data Entry</font></th></tr> <tr><td bgcolor="#eeeee">Loan Amount</td><td bgcolor="#aaeeaa" align=right><input type=text name=loan size=10></td></tr> <tr><td bgcolor="#eeeee">Loan Length in Months</td><td bgcolor="#aaeeaa" align=right><input type=text name=months size=10></td></tr> <tr><td bgcolor="#eeeee">Interest Rate</td><td bgcolor="#aaeeaa" align=right><input type=text name=rate size=10></td></tr> <tr> <TD align=right><em>Calculated</em> <input type=text name=pay size=15></td></tr> </table> </form> <font size=1>Enter only numeric values (no commas), using decimal points where needed.<br> Non-numeric values will cause errors.</font> </center> </Article> <div id="box"> <!--<p id="text">Loan Amortization</p>--> <input type="button style = visibility:hidden" value="Loan Amortization" onMouseOut='showpay()'/> </br></p> <BR><BR><BR><BR><BR><BR><BR> <Footer> <rt>Button designed by Jerry</rt> </Footer> </Article> </section>
Day 3 Appendix: Important Links The part of the Appendix page is in the Aside_news box. The first two are excellent references for HTML5, CSS and JavaScript. The third link is for your company's business contract. 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. Spend the next two days checking out all links, spelling and grammar. Make certain all the JavaScript works and delivers the right answers and results To do well giving a presentation in front of judges, please practice your presentation in front of different groups. Each Department vice president should explain their portion of the presentation. 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
Day 4 and 5 Debug and test out all pages. Spend the next two days checking out all links, spelling and grammar. Make certain all the JavaScript works and delivers the right answers and results To do well giving a presentation in front of judges, please practice your presentation in front of different groups. Each Department vice president should explain their portion of the presentation. 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
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
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