Project: COLA Website Refresher
Client /Prof: N/A (College of Liberal Arts)
completion status: started on August 25, 2021
staff guidance: Michelle Vanhoose, Chris Rankin
STA team members: Rahul, Adrian
description/plans: Begin to grow comfortable with Pages and create a practice page, start to transfer content from Cascade beginning with content from the Office of the Dean.
To be completed: TBD (long-term)

So — worked on IDs, Cascade feedback, and really got the ball rolling on the web refresher project! Below are some screenshots from my work on my practice site, which I made entirely about calicos, snowballing from a love for Pirate.

I also continued to part 2 of the Pages training, by drafting and sending an email to Michelle, Chris, and Crystal describing my work, what went well & what didn’t, and any suggestions I have. I’m including it below (also in BC) because why not, let’s let this blog post be a big boy.

 

Hello,

I am writing to let you all know of my current progress on the COLA web refresh project. As of now, I have created a parent page for myself under “Undergraduate Students” (with my name as the title). The home/landing page simply contains a hero image. There are two personal pages contained therein. I chose to construct my pages’ content around my cat roommate, Pirate, and educating the audience about calicos in general. The first subpage includes two images of Pirate in the card component format. Next, I included a FAQ centered around calicos, this time as an accordion component. The last component of this page is a callout, featuring a highly publicized calico-related news event. The second subpage included some more information about calicos, starting with some featured famous calico-loving artists, rendered as image buttons. Next, I included some more calico information, represented as tabs, covering what differentiates calicos from torties and torticos. Lastly, I embedded a short video with some quick facts about calicos. Across all pages, I demarcated different section of information by using the header text formatting. 

Overall, I thought this activity went well. I was able to attain some familiarity with different Pages components and how they work in practice. The preview option (much easier to use than Cascade) was also a great resource to check my page as I went along with my edits. The drag and drop functionality was also pretty useful, as well as being able to view different Pages components as layers. As someone who often works in Photoshop, this was a really great and familiar tool. 

As for things that did not go quite as smoothly, there were a few barriers. First of all, as far as I could see, there was no way to resize pictures within this platform. I ended up cropping some of the image assets I used in Photoshop before so that they would show up proportionally. Let me know if there is an easier way to do this. Moreover, the CMS’ canvas being small was a bit of a challenge, especially working on the large Mac monitor here in the office. 

Lastly, I had a couple of possible improvements or functionalities I’d like to suggest. As I have very limited web development experience or insight into the workload of those on that team, I understand if they’re unrealistic requests, but they are features I wished I had while creating my page. First of all, perhaps some kind of table of contents kind of component could be useful. This component, already present in the HTML of some present COLA Cascade pages, would link certain topics or questions to relevant sections of the page. One last suggestion I have is that maybe there could be a way, in the case of image components, to toggle a basic color overlay from one of the branding colors like the blue/orange/dark/light text box options in the card components. This could maybe create a little bit of cohesiveness across pages, but I also realize this could be too much.

I hope you are all doing well. Let me know if there’s anything I should add or change, or if you need any clarification!

Sincerely,
Ingrid Alberding

https://sta.laits.utexas.edu/blog/2021/08/30/40536-2/

Stinger – Animation Refresh Planning

 

project: Stinger – Animation Refresh
Client /Prof: N/A
completion status: Started August 25 2021
staff guidance: Maddy
STA team members: Rachel and Megan
description/plans: Refresh the stingers for the course graphics to add light animation.
To be completed: N/A

 

For this project, I started working on planning out the steps to make the overall creation of the stingers simple for future STAs.

 

Notes:

Current Stingers: 

• Chat
• instapoll
• Quiz
• Survey
• TA

Questions to Consider:

• Easily customizable After Effects File
  • Color
  • Background Images
  • Fonts? Segment title
• Standard animations for each segment??
• Standard animation for title??
• How long do the animations need to be? (2 seconds + additional second for static image) 

*** Standard AE composition with the layout of each element (Title, background, animation). ***

• Duplicate “standard” composition
• Edit the Title and Background Image
• Insert/open the different icon animation compositions into “standard composition”

After Effects File Requirements:

• Placement of Title with small animation
• Placement for icon with animation
• Background image placement (static)

Title Animation Ideas:

*** Left side of the graphic (simple) ***

• Typing 
• Fade in
• Slide in from left or bottom

 

Stinger Animation Ideas:

*** Right side of the graphic (Fade in first) ***

Chat:

• Multiple Chat bubbles appear?
• iMessage chat

Instapoll:

• Revolving circle around install with moving bars?

Quiz:

• Blinking/transitioning between filled question mark and open. Switch to check mark after?

Survey:

• Toggle back and forward

TA:

• Interchanging the chat bubbles

 

Files:

I already began creating the AI files for the different stingers. Once we have decided on the animation for each icon, we can began making the different frames in AI or creating the different piece to animate in AfterEffects.

 

I also began creating the After Effects Template for the animation composition. There is a “main composition” that will hold the final completed animation that will be sent off. Within the main composition, there is the Title, that can be changed, the background composition, and the animated stinger composition. There will also be a composition that the STA can use to change the background image.

 

Hello, it’s Rahul. It’s been a very eventful week, from meeting my fellow STAs and other staff members to starting work. This week I’ve mostly been going through the WebDev trainings and getting familiar with the browser inspect tool as well as good website accessibility. Below are two screenshots of one accessible website (Billboards) and one inaccessible website (Yale Art).

 

Another training that I have done is the Web Browser Inspect Tool. In that training I utilized the inspect tool and changing some lines of HTML and CSS was able to manipulate the website, including changing images, font style, and size. You can see some of the changes below.

I have also attended the training for the COLA Refresh project and will began working on some of the trainings, including making a personal page.

Classes have also started this week so it’s been busy, but I’m sure it will all get settled into a rhythm soon. All in all, it’s going pretty well, and I’m excited to continue working on the COLA Refresh project.

Hello again, it’s me. The semester is starting tomorrow and I am not ready… but also happy to be in the office and amongst people again! Maybe I’ll stop having one-sided conversations with cats…

This week I kind of bopped around, working on photo IDs and finishing the animation project script. Excited to see where the animation project goes! It’s definitely been slow-going, as we’ve all just been working on it in our downtime, but we’re definitely starting to make some significant progress.

Also, I’ll include a couple IDs here for reference

 

I also worked a bit on web support and updating the STA blog as well as reviewing the documentation for the COLA web refresher project, which me and a couple other STAs will start helping with beginning tomorrow. I am storing my current questions here.

Also I have an important announcement. After careful consideration, Pirate has decided she is not open to photographs at this time.

Green Screen Training

For the green screen training, I decided to use this image:

I was able to successfully remove the green screen background and color adjust the image.

I decided to add in a forest background to the image. Since the background image was lighter, I edited the photo to make the image fit better with the background.

 

Photo IDs

Here are some photo IDs that I recently completed. 🙂