UT Instapoll & Vue.js!

The past few weeks I was given the opportunity to take a break from Vlabs and learn something new! I worked with Chris Pittman to learn Vue.js and create a Vue component for UT Instapoll grading options… with a lot of help from Chris.

Vue is a progressive framework of javascript built for creating user interfaces, or as Chris called it, the “hipster” competitor of React.js. Vue allows programmers to create “components” (in our case, forms) which can be dropped anywhere into the site instead of recoding the component each time it’s needed.

To gain a better understanding of Vue.js check out the “Learn” section on their site: https://vuejs.org/v2/guide/index.html

Here are some screen shots of my less than successful attempt to create this component. Thankfully Chris and I ended up walking through the full process together to accomplish this task. Still these shots provide an example of our final component’s appearance and function.

It was difficult for me to dive back into javascript after not writing in it for a year or so, but I really enjoyed the experience and am excited to dive into more coding and UX projects with Chris this fall!

8-bit GIF!

This week every STA was assigned the task of creating an 8-bit GIF sized 80X80 pixels. This was my first time making a GIF and it was a lot harder than I anticipated. Working pixel by pixel is something I’m used to with CSS but not when creating my own artwork. I’m inspired to create more GIFs in the future and now consider going back to this original attempt and cleaning it up a bit!

Oh, this is a dog because I love them. They’re better than humans sometimes.. most of the time 🙂

Not much is new, except I’m still working on the Knowledge Base table of contents, vlabs, and also a new project updating some pages for the LAITS site (they aren’t published yet so I can’t post anything for that yet). Some other STAs have been making suggestions for things to add to the KB, so Ive been adding those, plus my own pages. I also did this assignment where I made a little 80 x 80 gif, which was really fun (I’ve never made one before). Here’s what I made:

And here’s an interactive I made recently with a fade animation:

More interactives…

LAITS Knowledge Base

Not much to add since last time… I’ve still mainly been working on Cascade and Vlabs. I also started making a table of contents page for the LAITS Knowledge Base site, which will be a resource for new STAs. It organizes the most recent and up-to-date posts so they’re easier to find and all in one place. Suloni asked me if there was anything I would add to the current table of contents, so I added a few new topics that I think should be covered (they’re grayed out until I create pages for them). Over the next few weeks I’ll be filling these in and updating this blog as I make progress. I tried to add topics that covered key information people need to know when they’re being introduced to Cascade/the Web Editor, to make the learning curve a little less steep. One thing that’s difficult at first is trying to figure out which things you edit in Cascade and which things you edit using the Editor, so hopefully the overview pages will make that clearer.

http://sites.la.utexas.edu/kb/2019/07/24/sta-training-table-of-contents/

– Podcasting site –

Since our last meeting in May I’ve made many changes to the podcasting sites with the help of Suloni, Stacy, Jaclyn and feedback from Jacob.

The biggest update is the new homepage for all LAITS produced podcasts – https://podcasts.la.utexas.edu .

I used Jaclyn’s mockup  to create cards similar to the style of our podcasting search pages. Jacob requested an option to feature certain podcasts so we added the orange tag and commanded posts with the featured tag to appear first in the queue.

Along with creating adequate media queries I’m still struggling to properly align the header elements and need to decide which audio player to place in the cards but for now I’m waiting on Stacy’s feedback and guidance. Still much work to be done!

We also added a footer to the site with LAITS branding and necessary links as well as a homepage for each podcast. Again, still having trouble with placing the podcast logo and site title, especially moving into tablet and mobile view.

A lot of additional work happened on the backend of the WordPress site. Stacy and I created a “Podcasting Help” section to help Jacob and other site administrators set up their podcast pages with our decided preferences and show them their options for customization.

– Vlabs –

Starting in June I took a much needed break from WordPress to assist with canvasser interactives and asset creation for Vlabs. I’ve definitely become very familiar with canvasser at this point and through working on asset creation I’ve become much more comfortable with Photoshop.

Now I’m beginning to perform “last looks” on the GRAV site which involves reformating our html for consistency and making sure all interactives are present and functional!Here’s the current checklist to follow when performing the final looks:

As you perform your LAST LOOKS, assignments, COMPARE the FLASH pages with the GRAV pages, while using the checklist below. ……………………………………………………………………………………………………………………..

1. For content accuracy: -We want to ensure that the Anthropology students have all that they need per lab, per-section, so that they can study and learn the complete and accurate information they need to pass their exams.

2. Interactives though the lens of pedagogy (SORT OF!)

“how knowledge and skills are imparted in an educational context, and it considers the interactions that take place during learning”

*** Make sure that the redesigned interactives have enough content to be able to stand stand alone, and deliver the lesson the students need to learn. Interactives should not to depend on the html page text content to make sense.

3. For consistent visual style: We want to ensure that Anthropology students have a consistent experience as far a visual and conventions go, from page to page, from interactive to interactive.
……………………………………………………………………………………………………………………..

LAST LOOKS CHECK LIST

CONTENT CHECK – IS IT ALL THERE?

1. All of the Content needs to be in the section HTML TEXT VIDEOS INTERACTIVES

HTML TEXT – COPY EDITOR

2. all of the HTML text has to be correct – ex: words like “Click Here” need to be edited out of the HTML – spelling needs to be corrected -if words runtogether/spacing , correct the spacing -if words need to be bolded, bold them

CONTENT FLOW

3. All of the content needs to flow and be laid out as best as possible – “group” text & other content from separate cards into one card if it helps content flow better
& indent sub headings as needed to show sub-content in the flow of one card. – Center video as needed, or if it’s a list of videos right align?
DOES IT ALL MAKE SENSE?

INTERACTIVES & HTML

3a. All of the Interactives need to be sensibly laid out and pair sensibly with the HTML text, but not depend on the html text.

3b. This step is mostly necessary for the older Interactives & the ones that are not “teal”: Is there enough context (text and images) in the interactive for the interactive to make sense? if the text was edited & re-worded does the resulting text support the content of the interactive? ** It is ok if there is some redundancy between the interactive content & HTML content.

3c. When you see that visual conventions are not following the style guide for Interactives make a note on basecamp and on the spread sheet. ***ALSO let us know that this needs to be re-worked for the content in the interactive to make sense for the student trying to learn the points. – ……………………………………………………………………………………………………………………..

(TEAL DEAL)
4. Valerie will keep track of the teal replacement Interactives on the spread sheet and will make corresponding new to-dos on bc for these

Vlabs Highlights

Cascade Highlights