Running head: EDUCATIONAL REPORT ETEC 5373

Educational Report ETEC 5373 Web Design Nelson B. Brock University of Arkansas

Educational Report ETEC 5373 Abstract The major project for ETEC 5373 was to develop a website. The purpose of the website was to provide information about the Greenwood FBC Praise Team and educate

users about worship music. I have included this project as a part of my ETEC e-portfolio because it satisfies some of the standards set forth by the Association for Educational Communications and Technology (AECT). The project required much planning and use of web development skills learned throughout this course.

Educational Report ETEC 5373

Project Description This project involved three AECT standards: development, utilization, and management. It was a culmination of principles and skills learned throughout the ETEC 5373 Web Design course. Mr. Muessig, the instructor, provided excellent guidance in developing a website. I chose to create a website for the Greenwood FBC Praise Team of which I am a tenor member. I enlisted our worship arts minister, Tom McCone, as a SME (Subject Matter Expert). I also recruited two other individuals to provide feedback and advice for the project. I developed two personas to represent the intended audience for my website. This allowed me to evaluate the type of persons that may use the web site and create initial elements of the website. Through this process I envisioned pages that would offer lyrics, sample song demos, and team member biographies. I created my first mock-up of the website. It was peer reviewed by a fellow ETEC 5373 classmate. She recommended creating a logo banner to communicate to users what the site was about. I used Photoshop to create an eye catching logo that aesthetically contributed to the website. But, looks are not everything to a website. Usability is a major part of designing a website. Determining how a user navigates, finds information, and interacts with a website are all components of understanding the ease of use of a website. I provided questionnaires for my web team to fill out as they navigated and used the initial mock-up site. Feedback from the team provided good suggestions for informational content navigation and welcomed praise for the logo banner graphic.

Educational Report ETEC 5373 I worked with two ways of creating a navigation bar in CSS (Cascading Style Sheets). I initially created a vertical side navigation bar, but eventually chose an interactive horizontal top navigation bar for my final iteration of this website. Feedback from peers as well as family members confirmed that I had made a good choice in going with the horizontal top navigation bar. I also applied principles of search engine optimization, accessibility, copyright and fair use while creating this site. Paying attention to what keywords and meta tags I

used will help people to find my site. Using alt tags on all graphics and pictures provided greater accessibility for people with disabilities. Making sure that the right copyright licenses where adhered to provided confidence in the publication of some of the material presented in the website. I used Adobe Dreamweaver to create the website. Learning about xhtml coding increased my ability to create a better site than previous attempts in a previous course where I learned the basics of web design. This course went into more details and provided various options to explore. Some of the design elements that I learned about were spry tools, designing a template, adding behaviors to certain page elements, and modifying styles in CSS and javascript. Using tutorials in Lynda.com afforded me greater insight into many of the design elements of Adobe Dreamweaver. I validated my html code using the Firefox html validation tool. This process identified potential problems that may arise in deliverability or usability of the webpages. It took three iterations of design to arrive at the website that I was confident could be used for informing the public about our group. Since the websites creation it has been linked to Greenwood FBCs website.

Educational Report ETEC 5373

I believe my inclusion of this website project in my e-Portfolio exhibits my ability to integrate instructional materials using two or more media forms, to create visual materials that enhance the learning process, and to create interactive media presentations. It also shows my ability to utilize and implement various media and to identify and address barriers impacting media-based learning. This website is an example of a webbased project that disseminates and allows for media-based learning. I effectively utilized project management techniques to create and implement instructional technologies for a project that contained multiple components.

Program Identification Standard #2: Development 2.2 Integrate Instructional Materials Using Two or More Media Forms I included a variety of pictures to inform the users of the website of who the team members were, what instruments they played, and places we had visited. Using audio recordings linked from outside sources provided samples of our sound. Videos linked from You Tube and another outside source provided the user a way to see and hear our group at the same time. These inclusions took into account auditory and visual learners. 2.3 Create Visual Materials that Enhance the Learning Process The banner logo graphic that I created using Photoshop greatly enhanced the users ability to learn more about the website. The banner was comprised of three elements: a background picture of the Praise Team, a piano keys stamp visual I acquired from www.brusheezy.com, and a header text box using the phrases, Greenwood FBC and Praise Team. The picture helps the viewer to instantly connect with the people that comprise the team and what they do. The piano keys stamp visual helps viewers to

Educational Report ETEC 5373 recognize the musical nature of the web site. Care was taken in creating the text. I selected a different font for the topography of the title than for the rest of the webpage

text in order to grab the viewers attention. I used colors extracted from the picture in the banner for the font colors. In fact, I used those colors throughout the website to provide continuity of theme color. I used different size font for the banner text to provide contrast so viewers would be able to distinguish each word. The Praise Team is a part of Greenwood FBC so I wanted to separate those two phrases somehow. Using the two different font types created that affect. I made the Praise Team phrase slant up to the right to further distinguish it from the words Greenwood FBC, but also accomplished another goal of not covering team members faces in the photo. Placing the text over the piano keys provided more contrast. 2.4 Create Interactive Media Presentations On the lyrics page I used a javascript spry tool to allow the user to choose the song they want to view lyrics for. As the viewer selects the title of a song the frame expands to reveal the lyrics. This allowed the page to be delivered in a more compact manner while allowing the user to be able to focus on one song at a time.

Standard #3: Utilization 3.1 Utilize and Implement Various Media I utilized various media in this project such as You Tube video, a link to an outside source video, and a variety of photos depicting our team. I wanted to provide visitors of the site with samples of our music since that was a primary goal of the website, to inform visitors of who the Greenwood FBC Praise Team is and what they do. I chose

Educational Report ETEC 5373 to embed a YouTube video of a promotional video we had produced prior to our trip to Hungary. I also inserted a link to a publication that showcased our service at a state conference we were asked to supply music for. That state online magazine had

embedded a video of one of our song presentations. I used photos throughout the website to help introduce the team members and show some of the activities the team. These photos were taken by some of the team members as well as a local professional photographer. On the vocal and instrumentalist pages I experimented with a javascript tool that I learned while studying with Lynda.com, a video technology tutorial website. This tool allows the visitor of the site to click on thumbnail images to see a larger image. This worked although I had difficulty in getting descriptive text to appear with the larger image when it was displayed. 3.4 Identify and Address Barriers Impacting Media-based Learning Becoming aware of the obstacles that can prevent users from easily accessing my site was an eye opener for me. I learned about the importance of using alt tags on all graphics and pictures, and about writing styles and html code to accommodate screen readers and text enlargement tools. Even if a person were deaf, they would still be able to look up the lyrics of a song and get the message that the song was intended to communicate.

Standard #4: Management 4.1 Utilize Project Management Techniques for Creating And Implementing Instructional Technologies

Educational Report ETEC 5373 I had to utilize various project management techniques to create and implement

the instructional technology components of this website. I had to schedule a time to take pictures of team members, procure photos and copyright license information from my SME, coordinate reviews of the different design iterations of the website, and coordinate having the website linked to our church website. 4.2 Effectively Manage Projects with Multiple Components This project contained various components such as photos, audio, video, graphics, and text. Coordinating the creation, review, and implementation of these components took time and planning. The coursework in ETEC 5373 and the guidance of my instructor helped me to effectively manage this project by breaking it up into smaller manageable tasks. Being able to write reflections about the design process of this website allowed me to carefully consider the multiple components of this website.

Educational Reflection Before enrolling into the educational technology masters program I had the desire to learn how to design and create websites. I did not fully realize until I started this program that I would indeed get the opportunity to learn this valuable skill. Learning about how to write html code, create style sheets, javascript, as well as other web design elements has been very rewarding. I now have the opportunity to effectively use this tool in the classroom and in other venues of communication. One anecdotal event stemming from my learning about web design concerns coding for color. The fact that each color has a numerical code that displays that color in digital format has become an asset for me. During a recent project in a geometry class

Educational Report ETEC 5373 that I teach, I asked the students to create character shapes from the book Flatland. When they had to use colors like mauve, gamboge, and burnt umber they did not have any idea about what those colors looked like. I had them look them up on Wikipedia. It provided a color swatch sample along with its numerical codes (both R-G-B and hex). The students were then able to program those custom colors into the Geometers Sketchpad application to get the exact color that the book mentioned for the characters.

The greatest moment came for me when a student said, Mr. Brock, these color codes are awesome. Now I will be able to really know what colors I am looking at, for you see I am color blind. That was a WOW moment for me, because I had just seen adaptation and accessibility portrayed at its best. By introducing that concept to my classes I had delivered the opportunity for at least one student to see color in a different way. I am sure that I will observe many other benefits from learning about web design. I appreciate all the different components that go into web design. These include html coding, creating CSS style sheets, the benefits of creating a template to use for the site, accessibility, copyright and fair use, usability, navigation, and design tools. The ability to learn how to use Adobe Dreamweaver and put assets up on a server is invaluable. I can also apply what I have learned about web design with other applications such as Photoshop, Moodle, Blackboard, Wix.com, and Weebly.com. These principles and concepts will equip me to adapt to many more instructional situations in the future.