Thomas Wallace

Lectures and Resources

Mobile Web Development

Spring 2018 | IFSC 3342

Semester Wrap Up

Final Project due: 10:00am Tuesday, May 8, 2018. Late Submissions will not be accepted. Submission should include the following:

  • Site URL
  • Digital Wireframes / Concept art for multiple breakpoints.
  • A brief description of the sites purpose and target audience.
  • Feedback you collected from at least 3 individuals and how you addressed the concerns / issues identified in that process.
  • 1-2 pages outlining the takeaways from the course. (What you learned, What you’d like to investigate further, ideas for improvement)

Please submit everything in a single email with subject: Mobile Web Final – Your Name.

Assignments you need Listed on your course index.

  • Fluid Grid
  • Responsive Resume
  • Audio/Video
  • Bootstrap
  • Responsive Images
  • Figma Prototype URL
  • Final Project

Responsive Images and Native Multimedia

HTML5 Native Multimedia

Assignment

On your course index page, provide links to working examples of both an Audio and Video implementation using HTML5. In addition, I’ll provide extra points if you to implement one of the many prebuilt video/audio 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.

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 post the working demo to your course index page. 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 Lab

Using the visual prototype/wireframe you created for your final project, create a low-fidelity prototype of your homepage concept using Bootstrap. This should built in your work environment and added to the workspace landing page you created earlier this semester.

Rapid Prototyping with Bootstrap

Using the visual prototype/wireframe you created for your final project, create a low-fidelity prototype of your homepage concept using Bootstrap. This should built in your work environment and added to the workspace landing page you created earlier this semester.

Assignment

Continue working on your prototype design. Be prepared to share with the class next Tuesday.

Site Prototyping & Final Project

Assignment

Decide on the concept for your final project. This can be on any topic you’d like. A local business, a non-profit, a charity, an event you attend(ed), a state park, etc. This can be a new site or a redesign of an existing site.

You are to design/redesign the site using current web technologies and workflows covered in this course. As you consider your options, keep in mind that that you have 5 weeks to complete this project. Be realistic about what you can create in that time frame given your skill set and time available. I am looking for a well executed final product more than a large content rich site. Focus on quality over quantity. Be prepared to pitch your ideas to your classmates on Thursday.

If you’d like to get ahead I encourage you to go ahead and create a Figma account and begin experimenting with the functionality. You will use this tool to create the prototype of your final project.

 

Microdata and JSON-LD

Assignment

Complete the responsive resume project. This project should attempt to integrate the technologies and approaches presented in this course. Your resume should be responsive (minimum of 3 breakpoints), valid html5, leverage appropriate uses of modern layout and design practices, and contain some sort of valid microdata implementation (JSON-LD/Schema). You have had multiple weeks to polish and refine this project and  your work should reflect that.  To submit, please send me the URL of the project on cloud 9 and a short reflective statement on the process. This should include the strengths and weakness of your overall implementation, lessons learned, things you’d like to improve if you were to start over on the project, and a discussion of the feedback you received and how you addressed those concerns. I look forward to seeing your work.  Due to me March 26, 2018. Late submissions will not be accepted. Have a safe and enjoyable Spring Break.

Providing Grid fallbacks

Peer Review

Spend the remaining class time to day sharing your resume with a classmate. Solicit feedback regarding what they like and suggestions for improvement. Reflect on the feedback you receive and implement suggestions/changes as appropriate. When your submit your resume for grading, the feedback you receive should be included in a short reflective statement on the project.

 

Assignment

Finish up work on your responsive resume. You should have a minimum of 3 breakpoints/media queries for the final submission.

Mobile First Resume

Assignment

Complete the styling of your mobile first resume and post a link on you C9 workspace index page. be prepared to begin working on your tablet view next week. We will do a bit of show and tell in class on Tuesday to see what you came up with. Good Luck!

Additional Reading

Mobile First Demo and Schema

Assignment

Using the source code in the following pen – Microdata Resume Starter, do the following.

  1. Create a new project directory on Cloud9 named resume.
  2. Using HTML5 Boilerplate as your starting point, add the html and css from codepen to the appropriate locations in your files. Make sure add appropriate values to the head of the boilerplate document (title,lang,description).
  3. Populate the resume template with your information. Pay special attention to the markup when adding content as to not break the structure of the underlying schema.
  4. Once you have everything in place, validate your html and run the url through Google’s Structured data testing tool.
  5. Be sure add a link to the course index in your dev space.
  6. Be prepared to discuss your experience and findings on Tuesday.

 

Additional Reading

Introduction to Media Queries

Assignment

Please review today’s codecast. Make a copy and experiment. Please bring questions to class with you on Thursday.

If you have a resume please track it down and bring a digital copy with you to class on Thursday. Over the next few weeks, we will be designing a grid-based, responsive resume with microdata support. This will be a multi-stage project with several grade components. It is imperative you have something to build around. If you do not have anything I will provide a template you can work from that contains minimal information.

The Flexible Grid

The Flexible Grid

The Future of the 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 cloud9. Be sure to link it up from your workspace index. If you need a bit of help here is the general workflow…

  1. Create directory structure and base html. You can use the html from the codepen along with boilerplate if you like.
  2. Generate a Grid ( Experiment with Different Tools )
  3. Implement grid on the sample html file using pixels
  4. Convert to percentage-based grid
  5. Publish

Boilerplate Wrap Up and Grid Based Design

Grid-Based Design

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.

Mastering the Chrome Inspector

Your assignment for the day is to complete the first two chapters of the Explore and Master Chrome tools course at Code School. Please complete all of the challenges associated with these two chapters. While you are not required to create an account, I recommend doing so you can track you progress and take advantage of some of the other content on the site. Be prepared to demo a tip or trick you learned from the exercise in class on Thursday. We will be leveraging these skills throughout the semester so it is imperative that you learn how to use this tool. Feel free to complete the remainder of the chapters depending on your level of experience with the tool. Email a screen shot of your completion badges for these two chapters.

http://discover-devtools.codeschool.com/

Supplemental Material

Skills Review and HTML5 Structural Elements

Assignment

Set up an index page for your web space. This will be the landing page for this course where you will link all published assignments. Please send me the URL of your web space so I have a place to visit and check in on assignments you are working on throughout the semester.

Read An Overview of HTML5 Semantics

Additional Reading

Pre-Assessment Lab and Q&A

  • Cloud9
    • Choosing a Workspace Type
    • How to Preview Files
    • Finding the proper URL to submit
  • Pre-Assessment

Assignment

The completed pre-assessment should be published to your workspace and a link shared with me no later than January 30, 2018 before class. This is a Credit/NoCredit Assignment designed to make sure you have a good foundation to proceed in the course.

Setting up our Work Environment

Assignment

Begin Working on the Pre-Assessment activity and bring questions to class on Thursday. The completed activity should be published to your workspace and a link shared with me no later than January 30, 2018 before class. This is a Credit/NoCredit Assignment designed to make sure you have a good foundation to proceed in the course.