Mike Schroll

Insights from Security Expert turned Web Entrepreneur

School of the Museum of Fine Arts, Boston

I’m taking Intermediate Web Design at the School of the Museum of Fine Arts, Boston with Pascal Rettig. Here I’m documenting the work I’ve done for the class:

My class code can be found in this public github repo

Things I’ve learned which have helped me along the way: Github Pages

Lecture 1: Slides

Homework: Buy the book and read chapters 1 & 2 Sign up for the class Mailing List Read many articles for the next class: 1, 2, 3, 4, 5, 6.

Lecture 2: Slides

Homework: Read Chapters 3 & 16 Code Assignment:

  • 3 Sites, 2 user stories per site, 1 page sketches of 1 page per site
  • Include navigation, main page elements, content layout
  • Get your sketches onto a computer and add them to the 2/ directory on github and publish
  • Pick 1 site and rewrite the index.html file
  • Choose from:
    • Shop
    • Blog
    • Agency
    • Portfolio
    • Band Site
    • Restaurant

Site 1: House of Chang: Sketch, my index.html (src, HTML Validated & Lint Validated)

User story 1: Someone from mobile phone checking website for their hours User story 2: Someone from desktop checking website for menu to learn if there are gluten free options

Site 2: SocialSci: Sketch

User story 1: Participant visiting site to login and take new studies User story 2: User visiting to signup as participant User story 3: Researcher trying to learn more about SocialSci and whether to use it User story 4: Researcher trying to quickly log in and work on a study

Site 3: West Side Auto Body & Sales: Sketch

User story 1: Local resident visiting to find out hours and rates to get service done User story 2: Local resident checking used car inventory and pricing

Lecture 3: Slides

Homework: Read Sections and outlines of an HTML document Code:

Lecture 4 & 5: Slides

Coding Homework:

Lecture 9: Slides

Reading Homework: Taking the Guesswork Out of Design Art Direction and Design Coding Homework: Take one of your designs (or the cat and dog design if you don’t have one that’s chopped and worked) and make it responsive.

Final Project Proposal

Online presence/blog Replacing Wordpress, about.me & google profile

Do mockups

DONE - Use Jekyll (through octopress) with github DONE - Blog entries Updateable from iPhone using dropbox

Responsive design so it works from iPhone/iPad Custom fonts JavaScript & jquery will no doubt be present!

Social media integration My own URL shortener integration

Cross-use heroku - write ruby code for either some dynamic parts, or just some weekend project that I highlight on my page.

Integrate Picasa Integrate site & product recommendations, bookmarks - Lots of referral links using my URL shortener

Course Synopsis

Intermediate Web Design Pascal Rettig

This course is for students who have experience with Web design using HTML, Flash or Dreamweaver. You will be introduced to new ways of thinking about how people use the Internet, both for business and creative expression, while learning the basics of scripting and programming. We will survey the fundamentals of interactive multimedia design and development, with an introduction to PHP, JavaScript and JQuery and explore the possibilities for sophisticated interaction design using HTML5 and CSS. All of these elements will work together to help you produce complex, well-organized Web designs featuring graphics, animation, sound and video. We will also consider the potential for integrating social media with your customized designs, allowing you to take advantage of the Web’s diverse and growing resources.

Comments