Articulate Weekly Challenges
By day, I am an e-Developer for Briljent. By night, I sharpen my skills demonstrating a solution to a weekly challenge prompted by Articulate.
417 'alawa Accessibility Makeover | Review 360
I revisited one of my first challenge story files for this quick demo. I focused on some of the "core skills" of digital accessibility.
Features:
Programmatically defining structure with sequential headings.
Adding concise alternative text.
Ensuring a logical reading order.
Testing for keyboard navigation.
Increasing contrast.
Using plain language.
Providing choice/adaptability of how content is presented.
407 'alawa How to Author Accessibly in Microsoft Word | Review 360
First Rise 360 Microlearning course used to introduce a synchronous training I provided about authoring accessibly in Microsoft Word. The course presents formally, for participant future reference.
If you're curious about document accessibility or Section 508 conformance, this might be a handy introduction.
Features:
Rise 360 microlearning format
Stepped navigation
Rise 360 features: Flip card, horizontal file tabs, vertical accordion tabs
Link to downloadable Word guideline and demonstration document included.
400 'alawa Short Form Video | Review 360
38 second short explainer video about upgrading a password to a passphrase. Tips include reliably using your own system of special characters and numbers to substitute for vowels and consonants in a pass phrase.
Needs work: Closed captions, subtitles, or an audio transcript must be added for improved usability and accessibility.
Features:
Video taken via cell phone in portrait orientation
Video editing and text overlay added in Storyline 360
Storyline player allows for pausing, playing, and adjusting video volume.
399 'alawa 2023 Pantone Color of the Year | Review360
Happy Holidays, all! The E-Learning Heroes Challenges community has been a valuable place to spend my time. It's opened up opportunities for meaningful work and friendships. Thanks to David Anderson, Articulate, and the esteemed ELH challengers!
I played with a mix of Rise360 and Storyline360 this week. Take a dive into the Magentaverse palette and learn about additive color models.
Features:
Single page website aesthetic with Rise360 tabs and collapsible accordions
Storyline interactive elements: Dial and Slider for color changing
Multiple state changes applied throughout palette exploration activity
Liter of Light (Isang Litrong Liwanag) has been a charity I have been following for over 10 years. It was especially important to me not only because of its human and ecological impact, but personally because it shed light on my mother's upbringing on a Post-WWII, off-grid farm in the Philippines.
The sections about how the inventions work are included, but brief, because I really wanted to set the stage for the affective portion of this storytelling - the reality that moved me even a decade ago. I may add to the "how it works" section in time.
Features:
Motion paths, drag and drop interaction to aid storytelling
Embedded video to give context to "how it works" topic
Multiple triggers for controlling the fluid navigation response of the project
I learned that sepia is represented on the web by a unique color: Hex #704214
I navigated to the following website to generate tints and shades of sepia and used the copy feature to build out my color theme in Storyline360: https://maketintsandshades.com/
Features:
Created a demo company, applied bespoke design features thematically
Use of subtle transition and object animation
Content Library photography with sepia tint applied, contrast, and brightness adjusted
On the developer side, I created many line motion paths, and drew every graphic in Storyline. I wanted to play with features to see what I could create. I also used my first Dialog layer to share some Developer Notes (aka nerdy ramblings).
Features:
Line motion path title to coordinate with Universal Serial Bus defintion
Use of Dialog Layer
Graphics drawn in Storyline360
I was curious about allowing the user to explore nutrition data for the recipe as well as laying the ground work for an accessible smoothie simulation. I played with leveraging the timeline to create a basic animated blending effect. I'll add alternative text and resource links the next time I have a couple of spare evening hours.
Features:
Nutrition data explorable by user action
Accessible-friendly recipe simulation
Coming: alternative text, focus order
Screencast: Creating a Scalable Vector Graphic in Google Slides. I used Articulate Replay for the first time to put my video together. It was simple and straightforward to use, and I could also publish the video to Review360. I also hosted the video on Youtube to add closed captions.
Features:
Closed Captions
Screencast demonstration of creating an .SVG in Google Slides
After work tonight, I sat and thought about what things in my life must follow a sequence, and considered my calendar. Here's an example of conditional navigation, using a Mid-Century Modern Desert .emf I drew in Storyline. The future dates are disabled until the user clicks the immediate date, which changes the state of the subsequent dates to normal.
Features:
Change of states, initial states set to disabled
States triggered by user action, subsequent links "unlocked"
I really just wanted to play with using video, music, and images from the first Indie Game of the Year (2020), and one I want to make time to beat. I emailed the company for copyright permissions and was sent a link to their generous credited use policy.
Features:
Customized quiz triggers, using a visible scoring system to inform the user.
Adding music, video, and images from another created with credited use.
Thanks to Jonathan Hill's comment about Challenge #273, I modified the Javascript of Preethi Ravisankar, his own, and Chris Hodgson's to attempt to simulate a "Scrolly Telling" style website that triggers actions based on scrollbar position. I was not able to make it as smooth as I'd like yet, though it seems to work best with slow and steady scrolling.
Features:
Execute JavaScript for Scrollbar Area
Animations timed using cue points
Text / colors that meets WCAG 2.1 AA (Large) Guidelines for contrast and size
I modified Storyline's "Resonate" template with an attempt at a Brutalist flair. Brutalist-esque style + Flat design elements + Office-themed photography (Content Library). Interactions are select-to-reveal, this time using change of states with initial states of key items set to "Hidden" and made "Normal" upon user selection.
Features:
Alt-Text and Custom Focus Order for keyboard / screen reader users
Exploration of select-to-reveal using only change of states.
Text / colors that meets WCAG 2.1 AA (Large) Guidelines for contrast and size
Happy 10 years, ELH Challenges!
This anniversary challenge helped me reflect on where the last 10+ years have gone. I compared Skeuomorphism / Flat / Glassmorphism because I did not have a strong understanding of what each trend was (and doing is learning for me). I dug up my own archived art examples, created month / year calendar examples, and wrote hypothetical productivity styles to describe the vibe of each design trend.
Features:
Alt-Text and Custom Focus Order for keyboard / screen reader users
Exploration of meeting accessibility standards using layers
Text / colors that meets WCAG 2.1 AAA (Large) Guidelines for contrast and size
I continued my exploration of triggering interactions on a single slide using cue points, while leveraging the timeline to show how I layered Storyline360 shapes to form these pictogram musicians.
Features:
Gender-neutral Alt-Text
Triggers based on Cue Points
Text that meets WCAG 2.1 AAA (Large) Guidelines for contrast and size
I experimented with making Zoom Regions triggered by user click using this video tutorial by Veronica Budnikas: https://www.youtube.com/watch?v=VD7fdqiTIns&t=1s
The resulting single-slide project allows you to magnify four different regions that discuss tips for file management when juggling contracts and multiple clients.
Features:
Zoom regions enabled by user click
Triggers based on Cue Points
Text that meets WCAG 2.1 AAA Guidelines for contrast and size