Dr. Heath's Distance Learning Log
Reflective thoughts about my Distance Learning...
Computer Programming- Data Visualization (Week of 3/16 - 3/20)
Designing mobile/desktop applications, creating and customizing web pages, and presenting data in an interactive, engaging way are three of my top priorities in learning how to program. Currently, I've undertaken the task of the latter: learning the nuances of interactive data visualization.
To be clear, I'm starting from the place of a complete beginner. Other than copying and pasting some code under step by step direction from Youtube, I literally have no idea what I'm doing. I started this process by Googling data visualization and looking for interactive graphics that I found interesting and aesthetically pleasing. The results after a day of searching and review led me to dive deeper into "d3", a specific library that is used in tandem with Javascript coding (if this last sentence sounds like a foreign language I get it... it didn't make any sense to me a few days ago either).
Once I figured that "d3" was where I was going, I searched for an ebook with high reviews on Amazon that explored the d3 library in more depth. My search led me to the book Interactive Data Visualization for the Web: An Introduction to Designing with D3 (2 ed.) (Murray, 2017). I started to read the book and understood about the first 5 pages... from that point on I was completely lost. The terminology, concepts. and well.... everything made absolutely no sense to me. Time to back up...
At this point I bought another book that I figured would be more my speed: HTML5 and CSS3 All-In One for Dummies (3 ed.) (Harris, 2014). This book is really helping me to understand the basics of computer coding. So far, I've learned that there are a variety of different coding "languages". Many of these languages share concepts and syntax which is helping to make digesting the basics manageable.
Currently I'm messing around with these languages:
- Hypertext Mark-up Language (HTML): The skeletal, behind the scenes structure of web-based programing
- Cascading Style Sheets (CSS): The language that defines many of the aesthetic "front of the house" items that we are familiar with seeing on web-based programs
- Javascript: A powerful, client-side language that has the ability to control many interactive components of web-based programs. These components range from simple to complex but appear to be really customizable as programmers become more proficient
- Data Drive Documents (D3): A library of interactive, Javascript items specifically designed for the purpose of data visualization.
- PHP: A server-side language that I'm struggling to follow
- MySQL: Not technically a programming language, but more of a data-management program that specifies in housing accessible data needed to work with web-based programming
At this point, I've been following the Dummies book, working with the practice programs that they provide for each language. I also have a side project that I'm using to play with to explore the programming potential for interactively graphing attendance data. I'm using this attendance project as a sandbox to make more education-specific connections to what I'm learning.
I've recently begun reading the Interactive Data Visualization book again and it seems to be making more sense (I'm able to read past page 5 without feeling lost! That's a win...). I've also copied some interactive, line graph code from a random coding page to manipulate just to see what's possible in a low stakes environment.
So far I'm finding this process rewarding, it's cool to see the letters, numbers, and symbols that I'm entering transformed into graphics and animations on the screen... Hopefully this process will continue to keep my interest. I still feel like this would be a really useful skill to know.
EGSD Virtual Chat Norms Video Pt 1- Adobe Premiere Pro (3/24)
After spending some time searching the Internet for a "video chat etiquette" tutorial, I eventually found this gem: Sample- Video Conferencing Etiquette.
Ultimately, I selected this video for 2 reasons. (1) I don't think it will be too difficult to recreate... the learning curve feels just right and (2) I don't know how to do text animations in Premiere Pro. It seems to me that this video displays exemplary, beginner-level animations that should allow me to find success without sacrificing the quality of my end product.
Along with it's relatively simple color scheme, the video utilizes custom icons to help keep viewers engaged. I plan on using the same technique but will have to recreate similar icons using Adobe Illustrator. Right now I feel like this is going to kind of kill 2 birds with 1 stone in the sense that I'll be strengthening my Illustrator skills while being productive on the Premiere front as well.
Finally, if things go to plan, I am hoping to add some of my own flare to the video. My primary goal right now will be to adjust the color scheme of my video to more closely align with the colors of Cole and EGHS.
After finding the video I watched a few tutorials on youtube that helped me to better understand the basic interface, windows, and functionality of Adobe Premiere Pro. Lucky for me, the Adobe suite tends to use similar formatting across their programs so I already feel like I might be slightly ahead of my expected learning curve.
I spent some time clicking around my "New Project" but really didn't make too much progresso on the actual video. I plan on diving back into the program first thing in the AM.
EGSD Virtual Chat Norms Video Pt 2- Adobe Premiere Pro (3/25)
Today I began the day by continuing to work on last night's project: create a brief video (60-90s) summarizing the district's guidelines for remote (online) learning.
I began the day in Adobe Illustrator creating all of my icons. I have some prior experience with Illustrator so this process went fairly well. The biggest challenge was getting through the tedium of making 15-18 simple icons using the district's maroon and white color scheme. To decide what each icon would look like I loosely referenced similar icons online by searching phrases like "clock icon" and "mic off Icon".
Once inside of Premiere Pro, I ran into some trouble early. First, my Illustrator icons were not formatting properly. When imported, the pictures stood alone, centered over a black background. This did not look in any way like my vision for using the district's colors (maroon and white) for a background. To fix the issue I called upon a skill that I've used before: importing the PNG files into Microsoft Powerpoint. From here I was able to use Powerpoint to format the pictures and appropriate colored background (one maroon square, and one white). I made sure to group all of the elements so that I could then right click and save them as "Save as a Picture". After going through this process, the imported pictures worked really nicely.
After I figured out the icon formatting issue, I then hit some snags with my animations. Between messing with the "Position" parameters, "Keyframe" times, and "Text" effects, there was a significant amount of troubleshooting that I had to do if I wanted to match the general spirit of my sample video. Once again, after watching some Youtube videos as well as sandboxing the issue with trial and error, I was able to edit each variable to a level that I was happy with.
My final hurdle of the day came in the way of "adding tracks". Because of the overlapping nature of the slides on the video, I had to explore the structural components of the project (i,e. how the text, images, audio, and animations come together on the "Gantt-like" project interface). After some trial and error I stumbled upon a structure that worked to achieve the slide in /slide out and fade-in/fade-out effects I was going for. Because the structure ended up being somewhat heirarchical, I had to add a large number of "track" lines. In the end, the final project will have just about 30 tracks.
I plan on putting the finishing touches on the video tomorrow morning, specifically relating to fade animations on the present text. Once finished, I plan on compressing the file using Adobe's Media Encoder and uploading the final product to Youtube for sharing.
Check out the finished product by following the link below:
EGSD Remote Learning Guidelines (6-12) (LINK)