AJAX Uploader

[ajax-file-upload unique_identifier=”AJAX Uploader”
max_size=10000
set_background_image=”.cover-photo-container”
allowed_extensions=png,jpg,bmp,gif,txt,mp3,mp4,3gp,avi,mov
on_success_set_input_value=”#my_hidden_input”
on_success_alert=”Your file was successfully uploaded!”
set_background_image=”.cover-photo-container”
set_image_source=”img.profile-pic”
on_fail_alert=”We’re sorry. Your file failed to upload.”
on_fail_alert_error_message=”true”
on_success_set_input_value=”#my_hidden_input”
on_success_dialog_prompt_value=”Upload Complete! Copy the URL below to save your upload.”]

 

Project: The above AJAX uploader was configured to accept the following file extensions: png, jpg, bmp, gif, txt, mp3, mp4. If you would like to produce an error, please choose an unlisted format.  

The three buttons allow visitors of all access levels to select, upload and remove files. Upon successfully adding files to the media library through the uploader a pop-up displays an unpublished URL that allows contributors to access the file at a later date.

Enhanced Accordion Menu

The enhanced accordion attached below builds off of the jQuery accordion constructed in Level I of Design Studio. Please feel free to expand the menu items below for a list of improvements and custom elements that have been incorporated in this latest iteration.

This is an updated version of the accordion created in Level I of Design Studio.
Note the fully responsive design, allowing for easy viewing on a number of devices and screen resolutions.
While the original accordion included similar functionality, menus have been updated to incorporate icons for additional context.
Updated functions allow for increased control, giving users the ability to expand multiple accordion menu items instead of viewing one item at a time.
Built by modifying an existing WordPress plugin, the enhanced accordion menu allows for increased customization to suit a wide variety of needs.

HTML5 Elements

Upon completing the “Getting to Know HTML5” training modules, I was able to update the code on my site by applying current HTML5 elements to the following areas:

Updates to to HTML5 Doctype
Updates to HTML5 Encoding
Updates to HTML5 Semantic Elements in CSS

 

[codeblock name=’HTML5 Updates’]

Interactive Canvas Element

Using a Canvas Element, I was able to apply interactive HotSpots to a static image. In the following example, I outlined 11 common desktop items found in a stock image pulled from Pexels.com, and designated unique URLs that direct to their Amazon product pages.

As a fan of Amazon’s affiliate marketing platform, I find this approach to be particularly engaging vs. traditional image hyperlinking, as this process allows for multiple products to be featured in a single photograph. While designating HotSpots for certain shapes did prove challenging, I feel that the ability to bundle links provides an organic experience that promotes exploration for clickable elements within the image, especially when not explicitly mentioned.

Interactive elements include:
Apple iMac 27″ Desktop
Apple Cinema Thunderbolt Display 27″
Apple Magic Trackpad
Apple Magic Bluetooth Mouse
Black Moleskine Classic Hard Cover Pocket Notebook
Blue ecosystem Journal
Apple Magic Keyboard
Rustic Style Wood Succulent Planter
Red Nescafe Mug
Apple iPhone 7
Apple MacBook Pro

 

 

About Aaron

My name is Aaron Hagenbuch (hey·guhn·boo). Graduate of Bloomsburg University, and current graduate student at Penn State University, studying Learning, Design and Technology.

Obsessed with all things tech, I frequently speak in movie quotes, and am interested in site building, blogging, marketing, data analytics and graphic design.

When not working or studying, I love to surf the internet, drink coffee, hang out with friends, and keep current on my ever-growing Netflix queue. Feel free to connect with me on social media, or send me an email through my contact form.

Facebook Twitter Google+ Linkedin Email

Introduction

After working with sites.psu.edu, I quickly realized that the ease of getting a site up and running came with some drawbacks. With a limited number of plugins available, functionality was severely limited in order to provide increased security for introductory web design capabilities. Not being able to modify source code was a huge setback, so I imported content from sites.psu.edu/ldt550a to the current URL beyuuum.com.

This site will act as a digital sandbox, allowing me to share my projects, reflect on my progression, and hopefully bring everything together in the form of a completed project.

My Idea

One of the biggest challenges I have faced, is trying to wrangle all of the skills learned over the course of My Learning Pathway, and turn them into something tangible. While I have been progressing through the modules, I have not been adequately playing around with the tools that I have been learning to use. It wasn’t until I reached the database module that I found the inspiration to take action.

The ability to store large amounts of data and call them up to serve a specific purpose inspired an idea for an jukebox-style app. While there are existing solutions out there, may of them come with a price. Whether it is an up-front charge, or a subscription-based model that pulls account information from a platform like Spotify, I wanted to see if there was a way to break the current system and create something that was totally free of charge.

The concept is relatively simple. Create the infrastructure that allows users to suggest songs via any connected device, and essentially generate a crowd-sourced playlist of songs. Just like physical jukeboxes of yesterday, song suggestions would be entered into a queue, and be heard by anybody who was in proximity of the speaker. Instead of quarters to reserve a spot for a song, this would operate on a credit system, preventing any single user from suggesting too many songs, and overtaking the playlist.

Additional functionality that would make for an interesting application could incorporate Pandora-like thumbs-up/down buttons that could veto or skip a song and move onto the next track. Aside from preventing the gathering from being Rick-rolled, this democratic approach places emphasis on the current mood of the party, while also allowing individuals to share their personal taste in music.

Obviously, this would require a significant amount of work, so building the basic infrastructure for data population and and recall is the first priority. To be continued…