Project Specification
I created my showcase of work from the semester in Adobe Dreamweaver using ECU’s “myweb” space. The landing page features a background image from Adobe Stock at 90 percent opacity of people engaging in various types of bookish technology work. The “favicon” color and the background color of the header used throughout the website mirrors the color of a cloud in the image; a lighter hue of the color is used on each of the other pages. Copyright information is given in the footer of each page, centered. The page is accessible, offering alt-tags for images, and multiple means of viewing the content, when possible.
A navigation bar shows “LE” as the page icon; and contains links to the “home” page, where, at this time, a web-page I created for EDTC 6135 can also be found; a link to this portfolio; and a drop-down menu of pages (6) in the showcase.
In the page body, there are six “cards” (I used Bootstrap CSS in creating the page) with titles, brief descriptions, and links to each project completed for the course (the whole card is a link, not just the blue underlined text). The ease of navigation back to the showcase page and to other pages in the showcase via the navigation bar made me decide against having each page open in a new tab. (Though links within pages to outside resources or to other pages within the showcase do open in new tabs.)
Though the presentation of the material varies from page to page, the consistent use of the navigation bar, the header, and the header background color, and body background color unify the pages within the site. Repeated features are found from page to page (buttons, cards, collapsible accordion menus, horizontal rules), where appropriate.
Project Development Process
I decided how to organize the information on each page individually by assessing what content I wanted to present and how I could best accomplish it. The software evaluations, are presented in three tables that use a hover feature to place a shadow on the row where the cursor is into. A link (that opens in a new tab) to each program being evaluated is given in the table header. Since the tables are lengthly, a “go to top” button can be found in the header of the second and third (of three) evaluations, and a button to jump down the page can be found for each at the top. A horizontal rule separates tables 1 and 2, and tables 2 and 3.
For the digital resources page, with five distinct areas to include information about, I used an accordion menu. The “instructional context” section is in text, using HTML tags for headers, paragraph, ordered lists, and bold text. The “storyboard” I created for the tutorial is embedded as a PDF the next item on the menu: for this, I used the object data HTML attribute. “Images” is the next section, and includes a thumbnail photo and caption of 58 pictures (with alt-tags) I took for the project. The images appear in rows of 6, except on a small screen when they appear one at a time. The next section, “audio,” has brief description of both embedded audio clips, separated by a horizontal rule. The description of the clip from a podcast includes a link to the podcast. “Videos”, with two embedded YouTube videos, each with a brief description and separated by a horizontal rule, is the final element on the page.
In the tutorial page, I first embedded the Nearpod tutorial. Below the embedded lesson are two cards, side-by-side. One is a note about a video that is not functioning in the embedded tutorial, and where to find it. The other offers additional ways to view the tutorial: a direct link to Nearpod, and the code to access from Nearpod without the direct link. An embedded (using the object data attribute, as in the resources page) PDF of the tutorial is included as a failsafe.
The final three pages each have a small failure: there was something I wanted to do, but I lack the knowledge to have pulled it off without spending an unreasonable amount of time. I believe my work-arounds are effective (i.e., showing a video of the functional product instead of having a working model of it on the page).
After spending a long time trying to figure out if I could use modals to show the animations I made in Adobe Animate (no, an HTML file cannot be placed in a modal), I retained the three original HTML files for these animations, and made the appearance consistent with the rest of the site. From each animation page, the user can go back to animations (not to the showcase, as on the higher-level pages), or can re-watch the animation. To achieve the animation reload, I used a JavaScript refresh page function in a button.
The next most time-consuming failure (after the modal) was on the Python app page, where I really wanted to implement the app. The solutions I identified to do this were beyond what I felt comfortable taking on for this website. Using an accordion menu, the page presents 1) a photo of the code, taken from the HTML text editor; 2) a 23-second video of the app in use; and 3) a note on the code, the copyable code, and (another failure) a link to download the .py file that does not work. The “a href” includes “download”, the file has the correct path in the file tree, yet “Files wasn’t available on site” is the response to clicking it. (Edited to add, 9/27: the download link does not work in Chrome, but does work in Firefox. This suggests to me that the issue may be the browser settings; the default security permissions have to be changed to view the un-secure page in Chrome at all.)
The 3D Animations in Blender page brought the most challenging success of this process: using the model viewer attribute to present the 3D objects as interactive 3D objects. I did not, however, manage to get the 3D animations to run, so videos of the animations (5 and 8 seconds) are included on the page. The page is arranged in cards (6), with each of four objects in a card, and two video demonstrations. Each card has a title.
Project’s Connection to Professional Goals & Objectives
Evaluating educational web programs, designing and creating a tutorial, learning the basics of two animation programs, including working with 3D images for the first time, and creating an app in Python, and then bringing it all together in a website helped me think critically about instructional apps, learn new skills, and continue developing others that are directly applicable to my professional and academic goals, principally to continue improving my current courses and create a comprehensive series of online Latin courses that is engaging and effective. Learning the basics of the programs I used to create projects this semester gives me more tools to turn to when I’m creating course materials; spending so much time coding in HTML (and a little css and javascript) and solving challenging problems to complete a complex project gives me the confidence necessary to take on more.