Final Project Details 2017

In the week of Nov. 13–17, we will have our last quiz, and you’ll turn in your last weekly assignment.

That’s also the week when your project work begins!

The project has several deadlines. You are graded on EACH deadline, and you cannot make them up later.

  • Sun Nov 12 – Project proposal due
  • Tue Nov 28 AND Tue Dec 5 – Project presentations in class
  • Sun Nov 26 – Project Week 1 due
  • Fri Dec 1 – Project Week 2 due
  • Fri Dec 8 – Project Week 3 due
  • Mon Dec 11 (finals week) – Project Final due – posted on your own website (not GitHub)

During this time there are no quizzes or other assignments. Class continues to meet, and attendance will be taken. Friday workshop hours will be discontinued with one exception: On Friday, Dec. 8, I will be available if you tell me in advance you want to come in. Classes end on Dec. 6. Our class WILL meet on Tuesday, Dec. 5 (and we may need to move to a different room that day; I will tell you closer to that date).

Inspiration

Design examples

What is a good project?

Above all, I want you to create a web apps project that will be a great addition to your personal portfolio.

Your project must be about something, or it helps the users to do something. Before you choose the subject, imagine showing it in a job interview. The person interviewing you will probably ask WHY you built an app about this topic. Now, I can imagine two different ideas in that person’s head: (1) “Why in the world would anyone make a web app about this?” Or: (2) “Interesting! I wonder why he/she picked this?” That (1) is a pretty negative thought, and it’s not what you want that person to be thinking! So aim for (2) when you plan your app, and be able to answer the question.

Here are criteria for your project:

  1. Your project must NOT be a personal website, a website about you or a friend or a small business, or a resume or portfolio website.
  2. It must use HTML, CSS and JavaScript.
  3. All images must be fully legal to use and fully attributed and linked (if they are your own images, made by you, that fact must be explicitly stated in text that is visible on your page).
  4. Any videos, music, maps, charts, illustrations, etc., that you use must be fully attributed and linked to their sources. No copyrights can be violated. Plagiarism rules from this course’s syllabus ARE in effect.
  5. JavaScript must be included in a way that is useful. Including Highcharts charts and/or Leaflet maps qualifies as useful JavaScript, but those are not the only ways we can use JavaScript. You could create a game or a quiz from scratch. You could use a JavaScript library for animations. There are lots of possibilities. (You are not required to include Highcharts charts and/or Leaflet maps.)
  6. Interactivity is expected. Your users should not just be staring at text and images. They should be able to DO THINGS on your page.
  7. All pages are fully responsive. I will test them at very large widths and very small widths, and also for iPhone 6 in the Chrome Dev Tools.
  8. Your app may include more than one page, but many web apps today are completely contained on just one page. In fact, it is more common nowadays to see a one-page app. So I encourage you to create a one-page app that demonstrates current best practices in web design.
  9. You MAY use Bootstrap, but it is not required. If you do not use Bootstrap, you will still be held to professional standards of design, including: correct font stacks; fully responsive design; accessibility of images and form controls; page layout with thoughtful spacing and arrangement of elements.
  10. If you use Bootstrap, you MAY use a free or paid theme. Using a Bootstrap theme is NOT easy; you will learn lots of new things if you try this (just Google bootstrap themes). Once you have mastered a Bootstrap theme, you have a new and very valuable skill. Make sure any theme you use is specifically for Bootstrap 4. Whether you use a theme or not, you will be graded on correct use of Bootstrap styles.

If you have questions about the project, please post them HERE as a reply to this post.

Advertisements

JavaScript tips for Assignment 6

Until now, you’ve been using two markup languages, HTML and CSS. This week, you’ll begin using JavaScript, a programming language.

Markup languages change how things look.

A programming language makes things happen.

I’ve given you lots of resources for getting started with JavaScript.

This post provides a quick reference related to the assignment.

  1. What is a variable? How does it work? Watch this video. Also see Robbins, pages 465–466.
  2. What are the alert, prompt, and confirm dialogs? See figure 19-5 on page 464 in Robbins.
  3. How do I use the JavaScript console? Same video, at the 1:00 mark. Note: Use Chrome.
  4. How do I change the value of a variable? Same video.
  5. How can I use alert, prompt, and confirm dialogs? That’s in this video, at the beginning.
  6. What is an if-statement, and how can I use one? See Robbins, pages 470–471, and this video, starting at 6:59. This shows you everything a beginner needs to understand a basic if-statement in JavaScript.
  7. What is an array? Watch this video. See Robbins, page 468.
  8. What is a for-loop and how does it work? See this video at 6:54. See Robbins, pages 471–473.
  9. For-loops are continued in this video. How to loop over an array is specifically shown around 2:53 in that video.

NOTE that when you write console.log() in JavaScript, the string or instructions in parentheses will ONLY be seen in the JavaScript console. If you want something to appear in an alert, confirm or prompt dialog, you cannot use console.log() in your code.

One final note about this assignment: The point is NOT to teach you how to use alert, confirm and prompt dialogs. The point is to teach you how to use variables and arrays, which contain values that can be changed, and to use if-statements and for-loops to get work done.

Hurricane week updates (week 4)

Unless I hear compelling arguments from students in this class, I’m going to keep the deadlines and the syllabus unchanged.

We will have workshop hours on Friday from noon until 4 p.m. in Weimer 3020.

Note, please, that Assignment 3 is going to take more time to complete than the previous assignments.

You’re starting to use CSS on this assignment. Right now we are focused on using the background and color properties correctly. We have not yet covered fonts, margin, padding, and many other elements of CSS. Do not use what we have not covered.

The assignment requires you to use several HTML tags we have not used before: article, aside, header, footer, figure, and figurecap. It’s important that you use them correctly, as instructed in the assignment.

I sent a lengthy email to the class Listserv earlier today. Check your UF email to find it.

 

Final Project Details

In the week of Nov. 14–18, we will have our last quiz, and you’ll turn in your last weekly assignment.

That’s also the week when your project work begins!

As I mentioned in class this week, the project has several deadlines. You are graded on EACH deadline, and you cannot make them up later.

  • Sun Nov 13 – Project proposal due
  • Tue Nov 29 AND Tue Dec 6 – Project presentations in class
  • Sun Nov 27 – Project Week 1 due
  • Fri Dec 2 – Project Week 2 due
  • Fri Dec 9 – Project Week 3 due
  • Mon Dec 12 (finals week) – Project Final due – posted on your own website (not GitHub)

During this time there are no quizzes or other assignments. Class continues to meet, and attendance will be taken. Friday workshop hours will be discontinued with one exception: On Friday, Dec. 9, I will be available if you tell me in advance you want to come in.  Classes end on Dec. 7. Our class WILL meet on Tuesday, Dec. 6 (and we have to move to a different room that day; I will remind you closer to that date).

Inspiration

Design Examples

What is a good project?

Above all, I want you to create a web apps project that will be a great addition to your personal portfolio.

Your project must be about something, or it helps the users to do something. Before you choose the subject, imagine showing it in a job interview. The person interviewing you will probably ask WHY you built an app about this topic. Now, I can imagine two different ideas in that person’s head: (1) “Why in the world would anyone make a web app about this?” Or: (2) “Interesting! I wonder why he/she picked this?” That (1) is a pretty negative thought, and it’s not what you want that person to be thinking! So aim for (2) when you plan your app.

Here are some criteria:

  1. Your project must NOT be a personal website, a website about you or a friend, or a resume or portfolio website.
  2. It must use HTML, CSS and JavaScript.
  3. All images must be fully legal to use and fully attributed and linked (if they are your own images, made by you, that fact must be explicitly stated in text that is visible on your page).
  4. JavaScript must be included in a way that is useful. Including Highcharts charts and/or Leaflet maps qualifies as useful JavaScript, but those are not the only ways we can use JavaScript. You could create a game or a quiz from scratch. You could use a JavaScript library for animations. There are lots of possibilities. (You are not required to include Highcharts charts and/or Leaflet maps.)
  5. Interactivity is expected. Your users should not just be staring at text and images. They should be able to DO THINGS on your page. Please look at the sites linked above under “Inspiration.”
  6. All pages are fully responsive. I will test them at a large width of more than 2500 pixels; a medium width of 768 pixels, and a small phone width of less than 415 pixels.
  7. Your app may include more than one page, but many web apps today are completely contained on just one page. In fact, it is more common nowadays to see a one-page app. So I encourage you to create a one-page app that demonstrates current best practices in web design.
  8. You MAY use Bootstrap, but it is not required. If you do not use Bootstrap, you will still be held to professional standards of design, including: correct font stacks; fully responsive design; accessibility of images and form controls; page layout with thoughtful spacing and arrangement of elements.
  9. If you use Bootstrap, you MAY use a free or paid theme. Using a Bootstrap theme is NOT easy; you will learn lots of new things if you try this (just Google bootstrap themes). Once you have mastered a Bootstrap theme, you have a new and very valuable skill.

If you have questions about the project, please post them HERE as a reply to this post.

Your final project

Refer to the five assignments posted in Canvas for details about the project requirements.

Sunday, Nov. 30 — Post all your work (so far) on this project to GitHub, in a gh-pages branch. Post the URL of your GitHub repo in Canvas.

Tuesday, Dec. 1 — Half of the students will make individual presentations in class.

Friday, Dec. 4 — Update your GitHub repo in the same gh-pages branch. In Canvas, post a brief, clear, well-organized list of things you have completed in the past week (since Nov. 30).

Tuesday, Dec. 8 — The other half of the students will make individual presentations in class.

Friday, Dec. 11 — Update your GitHub repo in the same gh-pages branch. In Canvas, post a brief, clear, well-organized list of things you have completed in the past week (since Dec. 4). Note any serious outstanding issues (problems not yet solved) — and your plans for solving them.

Monday, Dec. 14 — Upload the completed project to your own website, and post the URL in Canvas.

Observations from Assignment 3

Here are some things you need to think about and understand.

A CSS rule for body is a rule for most things

Several students had color: #000 for the body selector, and then later repeated color: #000 for other selectors such as article. This repetition is completely unnecessary. When you specify color in a rule for body, just about everything on the page will have that color. The same goes for background and font-family when declared in a rule for the body selector.

The only reason to include color in rules for selectors other than body is to change the color.

Avoid adding anything to your CSS that is not doing a job!

Elements: header, footer, article, aside, figure

Do we need a header element on every Web page? No. Do we need a footer element on every Web page? No.

When do we need them? When the structure of the document calls for them. Please try never to use any unnecessary tags or elements in HTML. If you have a simple single page — an invitation to an event, for example — it might have no header, no footer, no article, no aside, and no section — and it would be perfectly CORRECT.

Likewise for figure. On most pages, for most images, the simple img element alone will be just fine.

Use of comments in CSS

Many of you noticed a few comments I put into the CSS, like this:

/* add your pseudo classes below this line */

It’s very helpful for beginners to divide their CSS file with comments in this way, especially as the CSS gets more complex. I suggest you don’t go crazy and add too many comments, but a few — well placed — might really help you keep your CSS rules neatly organized. That can help you to avoid errors.

Use of comments in HTML

Of course, HTML has comments too. A few students went overboard with these. It’s good to write a comment if you think it will help you avoid a mistake later (if you come back to the file to copy some markup, for example). However, too many comments just clutter up the HTML, and they certainly do not look professional.

The link pseudo classes

The order of these in your CSS literally affects the way they work — in terms of whether users see the hover color, focus, active, etc. So it’s really important to get the order correct.

That said, most of the super-correct, standards-following Web designers today will write their CSS for links like this:

a {
    color: #2455c3;
    }
a:hover, a:focus {
    color: #487ffa;
    }

They style ALL anchors (the a element) one way, and then follow that rule with a change for only a:hover and a:focus. It is perfectly fine if you follow this example. But be sure to do it exactly as shown! You can add more declarations inside the curly braces, of course.

If you need to change link colors for part of a page — say, the footer — remember to use the selector in front of each a.

footer a {
    color: #2455c3;
    }
footer a:hover, footer a:focus {
    color: #487ffa;
    }

Double selectors are bad

What I mean by “double selectors” is that you wrote two separate rules for ONE selector. Say you have body at the top of your CSS, followed by a few declarations like background, color and font-family. That’s one rule for body. Then you have rules for article, aside, and some other selectors. And THEN you have body AGAIN. That is not a good idea.

Check your CSS carefully and organize it logically.

Soon you’ll see that we might create a rule for, say, the p element and later write another rule for p.special or aside p. That’s not the same as the bad double selector because p with a class, such as .special, and p as a descendant of aside are subsets — those selectors would affect some p elements but not all of them.

Review of Assignment 1

What did you learn?

  1. Basic structure tags and elements, their correct order and use: DOCTYPE, HTML, HEAD, BODY
  2. Required elements inside the HEAD, and the correct order for them: META charset and TITLE
  3. Correct use of these text elements: H1, H2, P, BR, IMG
  4. Correct use of two attributes required inside IMG: src and alt
  5. Ensuring that images you choose from Wikipedia can be used legally on your pages; getting the correct URL to prove it.

Please make notes on these and don’t forget how to use them! You’ll be using all of these every week.

In future assignments, errors in using any of these will cost you dearly.