Lesson Plan. Preparation

Transcription

1 Lesson Plan Course Title: Web Technologies Session Title: Planning & Designing Client Websites Lesson Duration: Varies but would be a minimum of one week. Performance Objective: Upon completion of this assignment, the student as part of a team will be able to plan, design, and test a website for a 3rd party client, working within the client's parameters and timelines. Specific Objectives: The students will work as a team to complete a web design project work with a client to conduct a needs assessment work with a client to create a development plan work with the client in the testing and revision of information and design start assembling their portfolio Preparation TEKS Correlations: (1)(D) employ effective verbal and nonverbal communication skills; (1)(F) demonstrate leadership skills and function effectively as a team member; (2)(C) describe understanding of the functions of résumés and portfolios; (2)(D) create a portfolio; (6)(B) demonstrate skill in testing the accuracy and validity of information acquired. Instructor/Trainer References: Content developer knowledge Prerequisites: Before starting this lesson, students should have completed all other web technology lessons and have a working knowledge of graphics, web coding language, and style sheets. For this lesson, the client will be referred to as the sponsor. The teacher should assemble a list of school clubs and organizations and the people that will be the club sponsors. The sponsors of the involved clubs and organizations must be open to this project and willing to work with the students. The students should be divided into teams of 2 or 3. Each group should be assigned a specific club. 1

2 Instructional Aids: Presentation Computers with Internet access for each student Materials Needed: Printout of the presentation (1 per student) Pre-Assessment Form (1 per team) Needs Assessment Guide (1 per team) Website Design Plan Guide (1 per team) Sponsor Evaluation Form to be provided to the club sponsors (1 per team) Design Rubric (1 per team) Wrap-Up activity (1 per student) Lesson Quiz (1 per student) Equipment Needed: Each student will need access to a computer with web authoring, graphic editing, and word processing software. Learner Introduction MI Introduction (LSI Quadrant I): To introduce this lesson, the instructor should review with the students their preferred web coding language and style sheet design techniques. The teacher should give the students an overview of the project and have the class look at some of the club and student organization websites that currently exist at the school. Outline MI Outline (LSI Quadrant II): Instructor Notes: I. Lesson preparation (teacher only) a. Establish a list of clubs and organizations at the school. Sponsors from these should be aware and willing to participate in the project. b. Group students into teams of 2 or 3. The participating clubs and organizations must be established before starting the lesson. II. III. Lesson presentation a. Completing a needs assessment b. Creating a development plan c. Testing and revision Assign students to their teams and to their 2

3 IV. clubs a. Students should conduct a preassessment of their assigned club s site. i. The team should look at any existing website their club has. ii. The team should look at other websites that similar clubs have at other schools. iii. The students need to learn about the club, its mission statement, club colors (if any), logos, state or national meetings, and any other special information about the club or organization. Teams should meet with the sponsor of their assigned clubs to complete a needs assessment and design plan for their website. The instructor should consult with each team following their meeting with the club sponsors to review the needs assessments and design plans. V. Design the website a. Students should build the websites for their assigned clubs. b. The needs assessment and design plan should be carefully followed VI. Testing and revision meeting a. Students should meet with the sponsor for final approval of the site. b. Students should note any changes requested by the client. c. Changes should be made and represented to the sponsor. Carefully monitor the students while they are completing the preassessment of their club. Some teams may need guidance in gathering the necessary information. Students should be prepared to make suggestions based on what they learned in their pre-assessments. Allow plenty of time for this phase. Closely monitor student progress. When the website is complete, the team should meet with the sponsor again to review the site. When complete, the team should provide the sponsor with the evaluation form. VII. Wrap-up activity a. After completing the client website, students should work on their employability by creating a resume and portfolio. Students will start working on their resume and portfolio. Application MI Guided Practice (LSI Quadrant III): Convey to the students the importance of being prepared before any meeting with a potential client or sponsor. Let them know that it is very likely that their client/sponsor may not know what his/her site should have on it or how it should be designed, especially if they don't currently have a website. It will be the students responsibility 3

4 MI MI MI to guide him/her and make recommendations. After being assigned teams and clubs, students should conduct a pre-assessment of their assigned clubs. The instructor should carefully monitor each team to assure that they are on task and gathering accurate information. The teams should complete a pre-assessment form, and the instructor should take time to visit with each team individually to go over their pre-assessment form. Independent Practice (LSI Quadrant III): Students will be working directly with the club sponsors. They should meet with them at least twice: first to complete the needs assessment and design plan, the second for the testing and review phase. Review (LSI Quadrants I and IV): Summary Following the completion of the websites, discuss with students the challenges they faced: which were expected and which were unexpected? It is important for the student to understand the client needs to be happy with the website. Evaluation Informal Assessment (LSI Quadrant III): Have students present their club's websites to the class. The class should discuss and provide feedback on the design of the sites that were created. MI Formal Assessment (LSI Quadrant III, IV): 1. Customer Satisfaction: After completing the website, the students should provide the club sponsor with the evaluation form. The form should be completed by the sponsor and returned directly to the teacher. 2. Website Design: The teacher should complete the design rubric on each site to assign a grade for the design concepts used in the site. 3. Students should complete the short quiz following the lesson. Extension MI Extension/Enrichment (LSI Quadrant IV): After completing the project, students should start working on their portfolio. A wrapup activity has been provided to start guiding them through the process. Students can also start working on posting the website online and researching domain names for their site. 4

5 Icon MI Teaching Strategies Verbal/ Linguistic Logical/ Mathematical Visual/Spatial Musical/ Rhythmic Bodily/ Kinesthetic Intrapersonal Interpersonal Lecture, discussion, journal writing, cooperative learning, word origins Problem solving, number games, critical thinking, classifying and organizing, Socratic questioning Mind-mapping, reflective time, graphic organizers, color-coding systems, drawings, designs, video, DVD, charts, maps Use music, compose songs or raps, use musical language or metaphors Use manipulatives, hand signals, pantomime, real life situations, puzzles and board games, activities, roleplaying, action problems Reflective teaching, interviews, reflective listening, KWL charts Cooperative learning, roleplaying, group brainstorming, cross-cultural interactions Personal Development Strategies Reading, highlighting, outlining, teaching others, reciting information Organizing material logically, explaining things sequentially, finding patterns, developing systems, outlining, charting, graphing, analyzing information Developing graphic organizers, mindmapping, charting, graphing, organizing with color, mental imagery (drawing in the mind s eye) Creating rhythms out of words, creating rhythms with instruments, playing an instrument, putting words to existing songs Moving while learning, pacing while reciting, acting out scripts of material, designing games, moving fingers under words while reading Reflecting on personal meaning of information, studying in quiet settings, imagining experiments, visualizing information, journaling Studying in a group, discussing information, using flash cards with other, teaching others Naturalist Existentialist Natural objects as manipulatives and as background for learning Socratic questions, real life situations, global problems/questions Connecting with nature, forming study groups with like-minded people Considering personal relationship to larger context 5

6 Client Website Pre-Assessment Before meeting with your sponsor, you must be prepared. Your client/sponsor will be a representative of a school club or organization. You need to learn all you can about the club to which you have been assigned. The sponsor may know what he/she wants on the website, but you will likely need to guide him/her through the organization and set up of the site. The client/sponsor will also be looking for you to suggest other information that might have been overlooked. Use this form to gather information that will help you prepare for your meeting. Name of assigned club: Sponsor / Contact: Sponsor's address: PART I If your assigned club has a website, complete the following evaluation. If the club does not have a website, mark NO on all items. Does the club currently have a website? YES NO Does the website describe the organization? YES NO Does the website "sell" the club? YES NO Does the website include information about joining? YES NO Does the website include meeting dates/times/location? YES NO Does the website include a calendar of events? YES NO Are important documents provided on the website? YES NO Does the website include important contacts / officers? YES NO 6

7 PART II Research the club you were assigned to and answer the following questions. You may use the club's current website, state or national websites, club publications, flyers, etc. 1. What is the mission or purpose of the club? 2. When are the regular meeting dates and locations? 3. If applicable, when and where are the state and national meetings of the club? 4. What are the club's colors? 7

8 5. Does the club have an official logo? 6. List a minimum of 5 pages or links that the club's new website should include. 7. List all items that you marked NO on in Part What other suggestions can you make to your client? 8

9 Needs Assessment Guide You should take this needs assessment form and your client website pre-assessment form with you to your meeting with your sponsor. You should complete this form with your sponsor's input. 1. What is the purpose of the website? What does the sponsor/club want to achieve by having the site? 2. What are the website's specific goals? There should be at least three. 3. What special things must be included for the site to be complete? (Example: database information, credit-card processing, a counter detailing the number of visitors, etc). 4. Describe the target audience for the website. 5. What information does the sponsor want to provide on the website? 9

10 Website Design Plan Guide The Design Plan should be completed after the needs assessment at the meeting with the client. The sponsor must be involved in this phase. He/she will be discussing the design requirements for the website. When building the site, you must work within the parameters defined here. Site Completion Date: Website Style - Define each of the style elements below. Color scheme used on site Font style to be used Specific graphics or logo How the site will be updated: Discuss how the site is to be updated. Will the sponsor update the site? If so, will they need training? Page Layout - In the space below, sketch the layout for the website. This layout should be used on all the pages of the site and be able to accommodate the required information on each page. With the sponsor's input, determine the positioning of the heading/banner, primary navigation, primary content area, secondary content area, and any graphics that are to be included. 10

11 Website Pages: List each of the pages that should be included on the website and briefly describe what is to be included on each page. Storyboard: In the space below, sketch out the arrangement of each of the pages. You should follow a hierarchical site structure with the homepage at the top. 11

12 Design Rubric After completing the website, the teacher should review the team's design plan and website to complete this evaluation. The website should be checked for proper coding and design techniques. Team: Criteria Site followed the design plan: The website should follow the design plan established with the sponsor. Structure and navigation: Links for navigation are clearly labeled, consistently placed, allow the reader to easily move from one page to related pages (forward and backward), and take the reader where they expect to go. Style sheets: External style sheets were used to control the site s overall style. All general styles such as background, headings, lists, etc. are set using the external style sheet. Color scheme and appearance: A consistent color scheme is used throughout the site. All text can be easily seen on all the pages, and the background is not distracting. All graphics are related to the individual page s topic and enhance the page s appearance. No unnecessary or pointless graphics are used. Each page contains pertinent images enhancing the page appearance. All graphics use the site's established color scheme. Page layout: Content on all pages is well balanced. Advanced table layout techniques are demonstrated. Pages should not look cluttered; images should be properly aligned. Contents should not just be centered down each page. Design mechanics: Proper and well-structured coding techniques are used on each page of the site. Rating /25 /15 /10 /20 /20 /10 Comments: Score: /100 Deductions (list here): 12

13 Sponsor Evaluation Team Names: The students should provide this form to the club sponsor after the website has been completed. ATTENTION SPONSOR: Please take a few minutes to evaluate the services you received from the team that designed your website. This is to help prepare them as professionals, so your comments and suggestions are very important. DO NOT return this form to the students. It must be returned directly to the teacher. Each item will count as 10% of the team's grade on the project. 1. Was the team prepared for their first meeting with you? YES NO Comments: 2. Was the team open to your suggestions? YES NO Comments: 3. Did the team involve you in completing the Needs Assessment? YES NO Comments: 4. Is all the content on the website complete? YES NO Comments: 5. Is the page layout and navigation exactly as agreed upon? YES NO Comments 6. Is the color scheme on the site what you requested? YES NO Comments 7. Are the graphics integrated well? YES NO Comments 8. Did the team discuss how the site is to be updated? YES NO Comments 9. Was the website completed by the agreed upon date? YES NO Comments 10. Does the site achieve its purpose as discussed with the team? YES NO Comments Sponsor Signature Date 13

14 Name Date Wrap-up Activity Now that you have real world experience developing a website for a client, you should start preparing your portfolio. Your portfolio is a collection of work samples that you can provide to potential clients. You will only start it with this activity because it will always be a work in progress. As you take on more jobs, you can add to your portfolio. It should always accurately represent your skill level. Required supplies: Your portfolio should be portable, therefore you will need 1 flash drive or CD for this activity so you can save your work Required parts: resume samples of work welcome access page Creating the resume: You should create a resume on word processing software. Your resume should include the following: Personal information and summary o name o address o phone & o a short summary detailing your qualifications and aspirations Education o current school and expected graduation date o any training in website design Work experience o your current and previous employers should be listed here. Describe your duties with these positions o your client website should be listed here Involvement o if you are involved in any school activities or groups outside of school (boy/girl scouts, volunteer work, church, etc), you should list them here and describe what you do with these organizations 14

15 References o simply state that they will be provided upon request Samples of your work: You should include the client website that you created for this project on your CD or flash drive. If you have created any other websites, those may be included as well. Be sure to create separate directories for each of your websites. Including your websites on the media will allow the site to be viewed without an Internet connection. Welcome access page: The welcome page should be the first page that is opened when viewing your portfolio. A sample page is illustrated below. Don't forget to make the page visually appealing. Your Name Contact Information Link to Online Portfolio if available Personal Resume: Add a link to your resume here About Me: Give a short introduction of yourself Illustrations of Work: Link to your client website Links to other websites you have created 15

16 Lesson Quiz Name Date 1. The purpose of the pre-assessment is a. to figure out what the client wants b. to plan the site's layout c. to determine the way the content is to be arranged d. to prepare for the initial meeting with the client 2. The purpose of the needs assessment is a. to determine what the website should look like b. to determine what the client wants from the site c. to determine how the site should be organized d. to design the style of the site 3. What should be considered in the needs assessment phase? a. the purpose of the site b. the website's goals c. the site's target audience d. all of the above 4. What should be considered in the development phase? a. the layout of the site b. the goals of the website c. whether the site works d. all of the above 5. Websites are designed for specific groups of individuals called the a. web users b. visitors c. target audience d. site purpose 6. If a website's purpose is to establish an organization's presence, it is described as a. informative b. sales/service c. entertainment d. research 16

17 7. An illustration of the site structure, or blueprint of how the pages in the website are arranged, is known as a(n) a. organization chart b. storyboard c. page layout d. site map 8. Which of the following is NOT defined by the site s style? a. font typography b. color scheme c. positioning d. content 9. Page layout should address each of the following except a. location of graphics b. navigation location c. primary and secondary content area d. color scheme 10. A collection of your work samples that you provide to potential clients is called a a. blog b. portfolio c. resume d. website 17

18 Lesson Quiz - KEY Name Date 1. The purpose of the pre-assessment is a. to figure out what the client wants b. to plan the site's layout c. to determine the way the content is to be arranged d. to prepare for the initial meeting with the client. 2. The purpose of the needs assessment is a. to determine what the website should look like b. to determine the things the client wants from the site c. to determine how the site should be organized d. to design the style of the site 3. What should be considered in the needs assessment phase? a. the purpose of the site b. the website's goals c. the site's target audience d. all of the above 4. What should be considered in the development phase? a. the layout of the site b. the goals of the website c. whether the site works d. all of the above 5. Websites are designed for specific groups of individuals called the a. web users b. visitors c. target audience d. site purpose 6. If a website's purpose is to establish an organization's presence, it is described as a. informative b. sales/service c. entertainment d. research 18

19 1. An illustration of the site structure, or blueprint of how the pages in the website are arranged, is known as a(n) a. organization chart b. storyboard c. page layout d. site map 2. Which of the following is NOT defined by the site s style? a. font typography b. color scheme c. positioning d. content 3. Page layout should address each of the following except a. location of graphics b. navigation location c. primary and secondary content area d. color scheme 4. A collection of your work samples that you provide to potential clients is called a a. blog b. portfolio c. resume d. website 19