Enhancing Student Learning and Retention with Community Partnerships George Kontos, Ed.D. University College, Professional Studies Western Kentucky University

A Student-Community Collaboration Project Community Service Example: Web Page Design A Student-Community Collaboration Project George Kontos, Ed.D. Associate Professor University College, Professional Studies Western Kentucky University

How to do a Student-Community Website Project? Research local businesses Make a list of local businesses Choose an interested business Meet business representatives to discuss Plan the web site Implement the plan Revise as needed Complete project to the business’ satisfaction Web Page Design ... (Kontos)

Two Steps are Essential in Developing the Web Site: Planning Implementation Web Page Design ... (Kontos)

Web Page Design ... (Kontos) STEP 1: PLANNING Identify the purpose and target audience Determine what web pages to include Sketch the navigation structure Review and revise the sketch Determine the content for each page Design the web pages by sketching the page layouts Review and revise Web Page Design ... (Kontos)

Navigation Structure (sketch) 11/24/2018 4:34 AM Navigation Structure (sketch) The home page typically contains links to web pages of specific topics. The organization of the pages in a website is called its navigation structure. Using rectangles and lines to represent web pages and their relationships, the navigation structure should be sketched during the planning stage of website development. A sketch usually goes through several revisions before being finalized. This sketch represents the navigation structure of a restaurant’s website. The arrangement of the pages in a navigation structure should be from general to specific. For example, the menus page is more general than the specific pages for breakfast and lunch. The hierarchy should not be too deep or too shallow and each page should be about one topic. SLIDE 7 Web Page Design ... (Kontos)

11/24/2018 4:34 AM Web Page Layout A web page layout refers to the arrangement of the elements on the page. Elements can be in the form of text, images, Flash movies, or other media and include navigation bars, a logo or heading, copyright information, and content. The top area is called the header and includes a logo or heading, top global navigation bar, and possibly a breadcrumb trail. The bottom area is called the footer and includes a bottom global navigation bar and other information such as a copyright notice, the date of the last update, and a link to contact the author. A page layout should be sketched for each page of a website. The sketches should show the general placement of the content elements. The links in the navigation bars can be listed separately or written on the sketch where the links will appear. Page layout should be similar for each page. By consistently placing elements in the same location, the user quickly becomes familiar with the website and can navigate easily. The home page acts as the starting point of a website and should therefore have a slightly different layout to quickly identify it as the home page. SLIDE 9 Web Page Design ... (Kontos)

11/24/2018 4:34 AM Navigation Bars A navigation bar is a set of hyperlinks that give users a way to display the different pages in a website. Most websites contain more than one kind of navigation bar for better usability. For example, this web page includes navigation bars and a breadcrumb trail. The top global navigation bar typically contains a link to each page on the first and second levels of the website’s navigation structure, and should be placed near the top of each page. The bottom global navigation bar should appear near the bottom of the page and is often centered. It should contain text links to all of the pages in the website if possible. A local navigation bar—positioned either below the top global navigation bar or vertically along the left side of a page—contains links to the child pages of the current page. A breadcrumb trail, also called the path, displays the page names in order of level, from the home page to the current page. It provides a point of reference and allows the user to navigate by backtracking through the site. Each page name in the path should be separated by a symbol, most commonly the “greater than” sign (>). SLIDE 10 Web Page Design ... (Kontos)

The Four Concepts of Design Appropriateness Match purpose and target audience Placement Follow standards based on user expectations Consistency Use consistent visual cues Usability Make it easy on the user to navigate through Appropriateness: How well the elements in the website match the purpose and target audience. Do the images fit the purpose of the website? Are they appropriate for the audience? Placement: Follow generally accepted standards, with a header, a footer, and content in between. These standards are based on user expectations. Web pages should have a similar design but different content. The most important elements should be placed near the top of a web page (as above the fold in newspapers) so that they are visible right away. Consistency: Use consistent visual cues. Repetition in the placement of elements creates and maintains expectations for the user. As an example, if you use a logo, put it in the upper left corner on the web pages. Usability: The usability is indicated by how easily the user navigates through the web pages to find the information. Make it easy on the user to navigate through the website. If the website isn’t usable, it won’t get used. The object is to keep users at a website long enough to find information that is useful to them. SLIDE 11 Web Page Design ... (Kontos)

Web Page Design ... (Kontos) Review / Summary STEP 2: IMPLEMENTATION Using Dreamweaver (or other tool), define the web site and organize the files and folders Create the web pages and link them together Review the web site in a browser Make changes or corrections Repeat steps 3 and 4 until complete Web Page Design ... (Kontos)

Web Page Design ... (Kontos) Who Benefits? The business The student Web Page Design ... (Kontos)

Benefits if Student Projects Involve the Community Students: Make new contacts Work with potential future employers Apply class knowledge to real life Boost resume Businesses: Get help to complete unfinished projects Get to know potential future employees Web Page Design ... (Kontos)

Web Page Design ... (Kontos) Reasons why a local business would welcome help in having their web site created Lack of : knowledge to create an effective web site resources needed to create it money to finance creating it time to devote in its design and implementation Web Page Design ... (Kontos)

Closing Comments: To Enhance the Project’s Effectiveness, Assessment should also be conducted on any level other than the end-product itself (the website) Students should journal throughout the course of the project and document what they have learned through the process Web Page Design ... (Kontos)

Directions for Preparing the Journal How did you search for businesses that might be interested in developing a web page for them? Did you use the phone book? Contacts, phone, email, Internet? Write the name and other contact info of the one business that you actually selected. Write the date that you made the initial contact with this business. Web Page Design ... (Kontos)

Directions for Preparing the Journal (cont.) Write a brief summary of what was discussed at each of the meetings that you had with this business, including date for each meeting. Were the meetings conducted by phone, email, or how? Other info such as what you learned through the process about this business in general and about their needs for having you develop a website for them. Web Page Design ... (Kontos)

Directions for Preparing the Journal (cont.) What experience did you gain while working on this project? Whatever else you think is relevant with this project Web Page Design ... (Kontos)

What is Service-Learning? Service-learning can be described as “learning by doing while helping others.” It is considered a form of experiential learning in which students participate in an organized activity that meets learning objectives and identified community needs at the same time. Course content improves the quality of student service projects. The service experience enhances student learning. Service-learning can be described as “learning by doing while helping others.” It is considered a form of experiential learning in which students participate in an organized activity that meets learning objectives and identified community needs at the same time. In service-learning classes, students work in the community on issues that make education relevant and exciting. Course content, such as training, lectures, and readings, improve the quality of student service projects. In turn, the service experience enhances the classroom dialogue, skill development, application of knowledge, and student learning. Service-learning may take the form of community placements, projects, or community-based research.

Web Page Design ... (Kontos)

Web Page Design ... (Kontos) Questions? George Kontos George.Kontos@wku.edu MYKONOS, GREECE Web Page Design ... (Kontos)