Waterfall

Mobile Web Development – Spring 2015

To view lecture notes for a given lesson follow the links below. Lecture notes will be added the day of each lecture. Assignments will be listed for each section. Assignments are due before class.

Subscribe to the RSS Feed for Internet Technologies

Geolocation - April 23, 2015

Assignment

Site Prototyping & HTML5 Video and Audio - April 7, 2015

Assignment

Provide a working example of both an Audio and Video implementation using HTML5. This should be cross browser and work in IE 9 as well as modern browsers. Be prepared to discuss the implementation in class on Thursday. Included on the page should be the url of technique you used and a list of browsers and devices you were able to support.

For next Tuesday please have wireframe of your your final project ready. We will do a rapid prototyping exercise in class using the Bootstrap framework.

Site Planning and Prototyping - April 2, 2015

Assignment

I’d like you to come up with and idea for a final project responsive web site. I’d like this project to incorporate the the use of responsive design practices and utilize some of the new html5 api’s. This can be for a fictitious client or a real world client or project. Be creative. Pick something you are interested in learning more about. I’d like you to write a paragraph or two explaining the project and what you hope to accomplish/learn by completing the project. In addition I’d like you to create a preliminary sitemap for your site and complete the client questionnaire.

Please email this to me before class on the Tuesday. Be prepared to discuss your idea in class.

Responsive Resume Lab - March 17, 2015

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.

Understanding Media Queries - March 12, 2015

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.

The Flexible Grid - March 3, 2015

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 - February 26, 2015

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 - February 19, 2015

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.

 

HTML5 Microdata - February 12, 2015

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.

HTML5 Structural Elements and ARIA Roles - February 10, 2015

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.

What is new in HTML5? - January 27, 2015

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