Category: Working with HTML5 & jQuery

For my first module in Level II of Design Studio, I became familiar with HTML5 and jQuery to make updates to my website and explore functional elements to enhance the overall user experience. I documented this process and included hyperlinks below to view project-specific elements.

Primary Objectives: Incorporate the following HTML5 Elements…

Primary Objective: In this module, HTML5, CSS, jQuery and jQueryUI was used to create a web form that is easy to use, and incorporates the following functionality:

• Date picker
• Drop-down menu
• Checkbox to show/hide additional fields
• Submit button and related action

This project was challenging, as I was hoping to create a form that I would actually use. Because I often have guests staying at my place, I thought it would be fun to create a form that allowed people to simply submit reservations on a first come, first served basis that would forward to my personal email.

The Arrival/Departure date picker provides information related to how long a prospective guest would like to stay. Using a drop-down menu allows users to choose their desired Sleeping arrangement and the date and time that this is submitted places priority to earlier reservations.

Additionally, in the event that a guest would require special accommodations, they may indicate this by choosing Yes, and allowing a text field to display in order to provide details that will determine if they will be able to be comfortable during their stay. The flexibility of the text box allows one to disclose any difficulties related to illness or disabilities that might prohibit them from staying at my place.

Upon clicking Submit at the bottom of the form, visitors receive the following message: Your form was successfully submitted, and will receive a custom email that includes the name field and a verification link to ensure that everything was received correctly.

Though I am not one to identify with the title of photographer I do take a lot of pictures. Creating galleries to be viewed on my website is something that I always wanted to do, as it allows me to take ownership of my images outside of traditional social media channels.

The following gallery was created with photos takes over the course of the semester and the act of curating images that show my activities over this period in time was quite fun. Visually reflecting on these moments through adding tags was a wonderful exercise that reminded me of what Google is doing with Photos. This platform uses AI to categorize images and actually identify what is being uploaded.

Integrated with search functionality,  my tagging process was quite personal as I attempted to emphasize key elements related to how the photo was captured, as well as what words adequately describe the subject if I would like to leverage the same search functions within my own gallery. This information was used to create an interactive tag cloud which displays pictures related to that tag. Though this is a manual process, the practice of structuring data in order to provide a more fluid user experience when navigating large sets of images is quite fun, and I am looking forward to expanding on such functions in my future updates.

PROJECT: Choose a photo gallery, either one you created in the lynda.psu.edu exercises or from another photo gallery plugin, and use what you know about jQuery and CSS to modify it and make it your own.

1 2 ... 5 ►

For the second project of the first Level II module of Design Studio, I expanded upon previous knowledge of HTML & jQuery in order to make the website fully responsive.

Primary Objective: Update an existing website that has at least five pages and a navigation menu. Use the techniques covered in the activities to give it an attractive design and make it responsive. It should have at least three breakpoints (mobile, medium, large desktop) but the exact details are up to you.

The source code below allows for set breakpoints to occur at the following screen resolutions:

(min-width: 44.375em) -or- 710px
(min-width: 48.9375em) -or- 783px
(min-width: 56.875em) -or- 910px
(min-width: 61.5625em) -or- 985px
(min-width: 75em) -or- 1200px

These widths designate specific snap points that allow site elements to re-order themselves in order to prioritze important content at the top of the page when viewing the site on a smaller screen.

PROJECT: In this module, I created an AJAX uploader. Though this works quite well for loading various forms of content for the purposes of this project, I went off topic slightly upon finding inspiration.

Given the technology focus of the blog and the speed in which the field advances, I thought it would be nice to allow guest submissions in the hope of leveraging the collective population to increase the number of topics covered.

Though not relying on AJAX, the form below makes it possible for visitors to submit guest posts to the blog, which are uploaded to WordPress in a queue for administrative approval. The ease in which this integrates with the user interface is accomplished through structured fields, helping to organize data and provide a “checklist” of items that should be included when posting online.

The form includes a site-specific field with regard to existing categories and the ability to upload up to 10 images to accompany post text. Successful submissions reload the page and trigger an email to confirm that the submission was received. Failed events, while rare, trigger from issues related to connectivity, with errors displaying when required fields are not filled out.