Design an app in one week

Screen shots: Oneshot

This is an excellent case study: OneShot, a one week design case study

This is the app’s website.

Read. Learn.

Advertisements

Week 7 assignments: Next steps with HTML and CSS

Don’t delete your Codecademy account — you’ll be using it again for JavaScript next!

This week you’ll be the same “type” you were last week. Find your type below and do all the work listed there, to be finished in the week of Feb. 23 – 27.

Review the Checklist for your HTML5 and CSS knowledge.

Also, read the assigned articles linked on the Course Schedule page.

Continue reading

Examples of interactive journalism – Week 15

As always, add your own example for extra credit by providing a link in a reply to this post. (You still have one more chance to post, in Week 16.)

This week’s example — Time 100: The Most Influential People in the World in 2014 — was designed by students in a Communication and Multimedia Design course at a university in the Netherlands. Spend some time clicking on people and then returning to the grid. Do you have ideas for how this might be improved?

Time 100

Your Reply

Leave a comment on this post to submit your example for this week. Rules are on the Required Work page.

Make sure your link is correct and functional.

Include the title or headline of the example you are linking to.

Write one sentence about why we should appreciate it.

Examples of interactive journalism – Week 14

As always, add your own example for extra credit by providing a link in a reply to this post. (You still have two more chances to post, Weeks 15 and 16.)

A total of 18 animated and interactive charts make up this graphic from Bloomberg News: How Americans Die (published April 17). Sure, it’s not exactly a cheerful topic — but there’s good news in there. Our life expectancy has steadily improved since 1970.

How Americans Die chart 2 How Americans Die chart 1

What technologies were used? JavaScript! Specifically, a library called D3.js:

How Americans Die 3

Your Reply

Leave a comment on this post to submit your example for this week. Rules are on the Required Work page.

Make sure your link is correct and functional.

Include the title or headline of the example you are linking to.

Write one sentence about why we should appreciate it.

Examples of interactive journalism – Week 13

As always, add your own example for extra credit by providing a link in a reply to this post. (You still have three more chances to post, Weeks 14–16.)

The charts in Fewer Helmets, More Deaths (from The New York Times) react to your scrolling. New data comes into the charts and they change. But what’s super innovative about this story is the way it responds on a phone. See the second image below. Be sure to open this on your own phone and observe the differences!

Desktop: Fewer Helmets, More Deaths

Mobile: Fewer Helmets, More Deaths

Your Reply

Leave a comment on this post to submit your example for this week. Rules are on the Required Work page.

Make sure your link is correct and functional.

Include the title or headline of the example you are linking to.

Write one sentence about why we should appreciate it.

Week 13 assignments: Practice with jQuery, JavaScript

For Monday, March 31, you will complete four (4) jQuery or JavaScript tutorials and produce your own version of the project(s) from each tutorial. So you will have at least four different Web pages (on your hard drive) to show me. Files from the Lynda.com downloads will not suffice. Make your own files.

Your files need not be as complex as the exercise files downloaded from Lynda.com! You can make a simple file with a very plain design to test and experiment with what the tutorial taught. That’s what I want to see.

This will definitely take seven hours, so please be sure to start early and work daily on these assignments.

Choose from ONLY these tutorials at Lynda.com (log in here for free access):

See the benchmark (Week 13). Do not substitute any other tutorials. Choose four from the list above only.

I recommend that you code along with the videos. Arrange the video window beside your TextWrangler and type everything that is typed in the video. Of course, you can pause the video as needed.

NOTE: When you show your work, I will need to be convinced that you did MORE than simply COPY the exercise files downloaded from Lynda.com. Make your own variations. Play with the code. 

Week 7 assignments: Next steps with HTML and CSS

Don’t delete your Codecademy account — you’ll be using it again for JavaScript next week!

This week you’ll be the same “type” you were last week. Find your type below and do all the work listed there, to be finished by Feb. 17.

Review the Checklist for your HTML5 and CSS knowledge.

Also, read the two assigned articles linked on the Course Schedule page.

Please keep in mind that the goal for this class is STILL to work about one hour every day, seven days a week. Play and experiment to make sure you really know how the code works. The more you understand, the more you will be able to learn about JavaScript and jQuery.

You will show me your pages and your CSS style sheet. Expect to be questioned about any item appearing on your style sheet.

Student type 1

Using what you reviewed (in Codecademy) last week, create three new Web pages that all use the same CSS style sheet. Create a brand-new CSS style sheet and make certain you understand  each and every line in it. Do not include any extra or unnecessary selectors or declarations. For example, if you don’t have any H3’s in your HTML, then there should not be any H3’s in your CSS style sheet. Use only hexadecimal codes for colors. Use Google Web fonts as explained below.

Here’s what your three pages must include:

(a) Google Web Fonts (learn about them here)

Produce at least one HTML page that uses three different Google Web fonts: One for the H1 heading, another for a large-font introduction paragraph after the H1, and a third for the regular paragraph text of the page. You may use Lorem Ipsum text for the paragraphs. Do not embed any CSS styles in the HTML page — put them all in your separate CSS file. You may show this to me on your laptop (you do not need to upload it to a server).

Good advice: CSS Typography: Techniques and Best Practices (read it).

Be prepared to explain the difference between: (1) the use of Google Web fonts, and (2) the use of @font-face. You need to be able to explain which one is better, and why.

(b) A wrapper div that encloses all the content in the body (on every page)

View source and the CSS for this page to figure our how the wrapper can center the page content automatically.

(c) Nested lists: These were covered in Codecademy HTML Basics II (Section 1 of 3)

Create two separate nested lists, both on one HTML page. One list must use only OL lists. The other must contain only UL lists. Each of the two lists must have at least one correctly coded nested list.

(d) Tables: These were covered in Codecademy HTML Basics III (Section 2 of 3)

Create two separate tables, both on one HTML page.

  • Table 1 must contain at least 4 rows and at least 4 columns, and the table background color must be different from the surrounding background color. This table must have visible lines (borders). You may use any content, but it must make sense. Example: name of a TV show, network, name of the lead actor, type of show (e.g. drama, sitcom).
  • Table 2 must not have any visible lines (yay, CSS!), and it must contain at least 5 rows and exactly 3 columns. The content of Table 2 must be hexadecimal color codes (column 1), the matching color filling a cell completely (column 2), and the name of the color, such as lilac, which you can choose (column 3).

(e) Pseudo classes: Link all three pages to one another. Your CSS must include correct declarations for all link styles, including a:focus.

(f) Correct CSS: You may use a CSS reset style sheet, or not. It’s your choice, but be prepared to explain your choice. Apart from one reset style sheet (optional), you must have only one style sheet for all your pages in this assignment. Make sure all styles are in the style sheet and NO styles in the HTML.

You have freedom with the colors you choose, the font-families, and the page layout. You may use HTML5 tags or plain old DIV tags (your choice). Each page will be different. You can choose what goes on each of the three pages, as long as you meet all the criteria listed above. You must show me three different HTML pages that all use the same CSS style sheet (and optionally an additional reset CSS).

Note that you should be experimenting and testing how things work in HTML, how the CSS changes things, and trying your best to create pages that look good, attractive and professional.

Student type 2

You must do everything that Student type 1 must do, PLUS  the form project at Codecademy: Web Form (complete all seven parts). Copy the final result as a standalone HTML document and a standalone CSS document on your own hard drive. Make enhancements to the CSS for your form to make it look beautiful.

Note that you can make a CSS style sheet that affects only the form elements and selectors, and use it in addition to the style sheet you use for all the other pages. By linking the form style sheet after the general style sheet in the HEAD, you can efficiently use all the same styles that you made for your other pages in this assignment. Thus your form page can look like the other pages in this assignment.

Student type 3

Choose one of these popular frameworks to use for this assignment: Bootstrap, Foundation or Skeleton.

Read this: Comparing Responsive CSS Frameworks

Your assignment is to make a mini-site with three pages that utilize responsive design. Choose a topic suitable to a collection of similar modules, such as a database of birds, or cars, or roses (things that can be represented with photos). You can use Wikipedia for all the data and images — just make sure you attribute the information with a link on each page. The point is not to have you spending a lot of time on research — rather you should spend your time on the code. But do choose a subject that you like for the collection.

Include at least one nested list and at least one table on your three pages.

Include at least one image on every page.

Questions?

If you have any questions about your assigned benchmarks, email me!