Author Archives: Thomas

Creating Imagery for your Site

Posted on by

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.

Introduction to JavaScript Libraries

Posted on by

Assignment

Over Spring Break you should complete your personal web site project (Requirements) The project will be due on the Thursday following Spring Break. We will spend the Tuesday class session debugging and implementing Javascript on the site. You should have a working prototype in class to review with me on Tuesday. Good Luck.

Fireworks: Working with Photography

Posted on by

Woking 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.

Introduction to JavaScript Libraries

Posted on by

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 Tuesday.

Responsive Resume Lab

Posted on by

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 Friday  so I can look it over prior to class on Tuesday after Spring Break. 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.

Introduction to Fireworks

Posted on by
  • 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 31, 2014. 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 Forms, HTML5 Boilerplate & Introduction to Javascript

Posted on by

Web Forms

HTML5 Boilerplate

Introduction to JavaScript

Assignment

Complete Getting Started with programming at Codecademy. Send me a a screenshot of the completion page. I recommend creating an account so you can save your progress and completion other modules in the future.

Understanding Media Queries

Posted on by

Assignment

Begin the mobile first styling of you resume using this module for guidance. I’d like you design to reflect your own taste and not replicate what we did in class. Please read the following Article and be prepared apply the concepts included within to your work in lab on Tuesday. Next Week you will have a lab in which you add a desktop view to your site using media queries.

Segway Project Wrap-up / Site Planning

Posted on by

Segway Q & A

  • Open Discussion / Review Techniques

Site Planning

Working with HTML5 Boilerplate

Individual Web Site Project

Assignment

Watch the HTML5 Boilerplate Video | Download the Files (If you haven’t done so already) Review the HTML and CSS Documentation while looking through the boilerplate files. Be prepared to discuss on Thursday.

Begin thinking about a topic for your individual web project. By next Tuesday I should have a planning document and site map for the new site.

The Flexible Grid

Posted on by

Reading Discussion

  • Class Feedback

Grid-Based Design

The Flexible Grid

Assignment

Read Chapter 3
Create your own grid based page using the sample html we generated in class. You should use different dimensions and gutters for this assignment. Use the approach we covered in class to make sure you understand the process. Please upload the assignment to your web space in a directory on your web space and send me the url. If you need a bit of help here is the general workflow…

  • Create directory structure and base html
  • Generate a Grid
  • Implement grid on the sample html file using pixels
  • Convert to percentage-based grid
  • Publish

Adaptive Web Design

Posted on by

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.

Microdata Wrap and Grid-Based Design

Posted on by

Grid-Based Design

Files

Clearfix

Assignment

Read Chapter 2  – Responsive Web Design:  The Flexible Grid

Read Chapter 4 in Responsive Design / Experiment implementing your own grid on the example html we worked with in class. Try using one of the grid-generators we examined in class. Be prepared to review in class on Tuesday.

 

Web IDE’s and Introduction to CSS

Posted on by

Assignment

Read: CSS Specificity & Class vs. ID. Be prepared for a quiz covering readings from the last several weeks.

HTML5 Microdata

Posted on by

Putting it all together…

Microdata

In-class Lab – Please Complete the following Tutorial and submit your online Resume to me via Email.

Note: If you are uncomfortable with sharing any personal information with me  (or Google!) feel free use fictitious information. You may skips steps 8-10 if you’d like.

For more information on the subject check out the following resources

The goal of this exercise is familiarize you with the proposed Microdata Spec and to get your brain wrapped around its use. Don’t spend too much time playing with the CSS. We are going to restyle the resume in coming exercises.  Be prepared to discuss in class on Tuesday. Submit the url of the completed resume prior to class on Tuesday. We will continue to build of of this assignment in the coming weeks. Failure to complete could impact your ability to complete those assignments.

Publishing to the Web

Posted on by

Assignment

  • Create and Validate a prototype HTML document that includes examples of all HTML elements covered thus far. For a list of requirements view this page.
  • You can email the html document to me or for additional credit upload to the server and send me the url. Send to tswallace@ualr.edu before 2.16.15.
  • Reading Assignment: CSS Basics

HTML5 Structural Elements and ARIA Roles

Posted on by

Today’s Codecast

Adding Browser Support

Making it Accessible

Development and Debugging Tools

Prepping a Document for Mobile

Putting it all together…

Microdata

Assignment

Read the following articles in preparation for the class exercise on Thursday.

Working with HTML5

Posted on by

Assignment

Read the following resource as a review. We’ll have a quiz next week over all of the reading and discussion so far. – Getting to know HTML

Bringing it all Together

Posted on by

Segway Project

Assignment

  1. Begin work on the Segway Project
  2. Optimize and post to your blog the Clone Stamp and Marquee Tool exercise images we worked on in class last week. Please describe the techniques you used in the exercise.
  3. Email me an optimized version of your header graphic you created in class.

Image Optimization

Posted on by

Assignment

Please read the following article on image optimization and write a shot blog post discussing three takeaways from the article.

Review the HTML & CSS concepts covered last semester and bring questions/need for clarification to class on Thursday. We’ll begin a web design project on Thursday. If you need some review this site covers a good chunk of what we discussed last semester.

Creating Imagery for your Site

Posted on by

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 the Thursday. 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 optimized file to class.

What is new in HTML5?

Posted on by

In Class Assignment

Visit 10 Websites / Services you frequent. For each you should provide me with the site url, declared doctype, and a list of linked resources with the relationships. Only include the relationship information for elements we have not discussed. I’d like for you to discover as many new relationship types as possible. There is no need to list all relationship attributes for the site, only ones that are new to you. Once completed select one of the new relationship types and provide me with an explanation of its purpose.

Please email this assignment to me prior to class on Thursday.

Homework Reading

Structure, Content, Design & Behavior

Posted on by

Assignment

Evaluate your favorite web site based on our discussion of Structure, Content, Design, and Behavior. This is a written assignment that should be emailed to me (tswallace@ualr.edu) no later than 1-28-15. Make sure you discuss the following elements: Site URL, An assessment of the Structure, Content, Design, and Behavior of the site, Things you like about the site, Things you would change.

Introduction Fireworks

Posted on by

My Reading List – Import into a reader of your choice. I use Feedly
Thomas Wallace Reading List (Right-click save as or import via URL)

Woking with Photography

Image Optimization

Assignment

Post optimized samples of the images you created to your blog with an explanation of the tools and approach you used.

Introduction to Fireworks

Posted on by
  • Fireworks Workspace
  • Creating Shapes
  • Working with Typography
  • Cropping and Resizing

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 Thursday. 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!

My Reading List – Import into a reader of your choice. I use Feedly
Thomas Wallace Reading List (Right-click save as or import via URL)

Introduction to Fireworks

Posted on by
  • Fireworks Workspace
  • Creating Shapes
  • Working with Typography
  • Cropping and Resizing

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

You should email this icon to me before class next Thursday. 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!