IT Amber – Semester Wrap Up

  • Review Grades
  • Peer Evaluation – Due Friday – May 5, 2017 – Emailed to all faculty
  • Course Evaluations – Please fill out 3 times (Once for Each Faculty Member)
  • Project Presentation – Thursday May 4, 2017 – 1:30pm

We hope you have a great Summer and we look forward to seeing you all in the Fall. If any of you are looking for project work for the Summer please let us know and we’ll try to pass along opportunities as they present themselves.

Final Presentations & Wrap Up

  • Final Project Guidelines
    • Due May 9, 10:30am
    • Site URL
    • A brief description of the sites purpose and target audience
    • 1-2 pages outlining the takeaways from the course. (What you learned, What you’d like to investigate further, ideas for improvement)
  • Course Evaluations

I’ve enjoyed working with each of you and I look forward to hearing from you in the future. Please let me know if you need assistance with recommendations or freelance opportunities.

Analytics and Geolocation

Introduction to JavaScript

Assignment

Additional Reading and Study – Javascript 101

Read the following Article on Progressive Enhancement. Send me an email (tswallace@ualr.edu) explaining progressive enhancement in your own words. Please discuss why it is important to use progressive enhancement and include a link to another article you found and read relating to the topic. Due before class Wednesday.

Responsive Image Techniques

Assignment

Using your own images and breakpoints create a working responsive image demo using one of the techniques covered in class today.  Please send the working demo to me. Remember that I’d like to see this technique implemented in your final project. Keep that in mind as you work through the design of your demo.

Bootstrap Wrap Up

Assignment

Please review and research the current state of responsive images. In class on Tuesday we’ll look at current techniques and polyfiills.  Here are a few resources to get you started.

Bootstrap Rapid Prototype Lab

Finish up work on your Bootstrap prototypes today submit the URL for review.  I will have the classroom open if you choose to work there. If you are having difficulties with Bootstrap, I encourage you to collaborate with your classmates or send me a link to your code to look over so I may assist. Please try to have the prototype finished up by Thursday so we can discuss theming and introduce concepts relating to responsive media. I’ll see you Thursday.

Site Planning and Prototyping

Assignment

Refine your site concept and create a preliminary sitemap for the site/app using a service discover in class. Experiment with one of the prototyping tools we discussed in class and build a prototype of the desktop and mobile views of your new site. This only needs to an outline.

Use Kuler or a similar tool to generate a color scheme for your web site. You should make note of the hexadecimal color values of your scheme. If you need more information check out the following post on deciding on good colors.

You should have a wireframe of the homepage in both desktop and mobile views before class on Thursday. We will use it in class please come prepared to work.

Creating Site Imagery

Assignment

Create Banner image for your sample page in Fireworks. The image should be as wide as your container div and between 80px and 200px tall and less than 40kb in size. Emailed tswallace@ualr.edu before class on Wednesday. Have fun with this. You can make an image for anything. It could be a company, an event, a hobby etc. I’d like to see the following elements present in your design. Typographical Element, some sort of photographic element or vector artwork, and a consistent color scheme (Try Kuler).

Next class I’ll show you how to integrate this image into your template page properly. Please bring the file to class.

Adaptive Design

For today’s out of class assignment, I’d like you to watch the video below and then share with me via email 5 takeaways (ideas, technical concepts, techniques). You should be able to complete this assignment in the time allotted to class. Please be thoughtful in your responses and be prepared to discuss on Tuesday. I also encourage you to check out some of the additional content on the speakers web site. (http://bradfrostweb.com/blog/)

Beyond Media Queries: An Anatomy of an Adaptive Web Experience from marc thiele on Vimeo.

Working with Photography

Working with Photography

Image Optimization

Assignment

Email me the completed optimized samples of the images you created in class. Due when we return from Spring Break.

HTML5 Video & Audio

Assignment

Provide a working example of both an Audio and Video implementation using HTML5. This should be cross browser.  In addition, I’d like you to implement one of the many prebuilt video/audio players.  Using the video/audio files provided build a working demo leveraging one of these players. Be prepared to discuss the implementation in class on Tuesday. Included on the page should be the url of technique you used and a list of browsers and devices you were able to support.

Positioning Lab Review – Introduction to Graphic Design Tools

  • Review Positioning Exercises
  • Fireworks Workspace
  • Creating Shapes
  • Working with Typography
  • Cropping and Resizing

Assignment

Complete the following tutorials and submit the folder icon you create in the 3rd tutorial.

You should email this icon to me before class on Monday, March 27, 2017. Late submissions will not be accepted. I do not expect you to perfectly replicate the icon in the tutorial but I would like to see a solid effort from each of you. This is a challenging assignment so I encourage you to not wait until the night before it is due. Good Luck! If you’d like you can download a 30 day trial of Fireworks on your own computer so you can work off campus.

Web IDE’s and FTP

Assignment

Introduction to JavaScript Libraries

Assignment

Read the following Article on Progressive Enhancement. Write a blog post explaining progressive enhancement in your own words. Please discuss why it is important to use progressive enhancement and include a link to another article you found and read relating to the topic. Due before class Thursday.

Mobile Resume Peer Feedback

  • Show and Tell
  • Class Activity: Peer Feedback

Assignment

In this activity I’d like you to partner with a classmate (or someone outside of class with web development experience) and ask them to use your site. The should evaluate on Mobile and Desktop. I’d like the to provide you with something they like and 3 constructive criticisms. Your home work will be to address the issues identified by your reviewer and resubmit your page to me with an email that outlines the criticisms/suggestions you received and what you did to address them. This is due next Tuesday.

FTP and Publishing to the Web

Assignment

HTML Reference – Code Guide | Introduction to HTML | Be prepared for a Quiz on Monday covering all class materials and readings thus far.

Responsive Resume Wrap-up & Lab

In today’s lab you should complete the build out of a desktop view to the mobile resume we created in class. This assignment is graded and should be submitted to me by Monday so I can look it over prior to class on Tuesday. I’d like to see at a minimum of two media queries addressing tablet and  desktop view. Please send the url to the project and remember to make this your own. It doesn’t need to look exactly like the initial resume we built.

Introduction to HTML5

Assignment

HTML Reference – Code Guide | Introduction to HTML

Responsive Resume (Desktop/Tablet)

  • General comments about Mobile First Implementations
    • Body Padding
    • Remove Design Time Styles

I’d like you spend today’s lab building out a desktop view to the mobile resume we created in class. If you need help in creating the proper media queries make sure to reference this article. This assignment is graded and should be submitted to me by Monday so I can look it over prior to class on Tuesday. I’d like to see at a minimum of two media queries addressing tablet and  desktop view. Please send the url to the project and remember to make this your own. It doesn’t need to look exactly like the initial resume we built. Personalize it. This might be someones first impression of you.