Fall 2018 updates

JOU 3363 Introduction to Web Apps for Communicators is a course specifically for students in the College of Journalism and Communications, in any of our four majors. No prior experience with any kind of coding is expected. We start from zero.

Some of the past students have said this was the hardest course they took at UF. That might be true, but how do you define “hard”? If you mean you will work for hours and hours each week and not always be satisfied with your results, then yes, it is hard. But if you mean the concepts are difficult to grasp, as in physics or economics — then, no, this course is NOT hard!

The concepts and rules of writing web languages — HTML, CSS and JavaScript (not Java; that’s different) — are pretty simple and straightforward. There are rules, and you can easily learn the rules. However, making everything fit together, look good and work well takes time. Code is learned by doing, by trial and error, by writing it and testing it and failing and then trying again.

It takes a lot of time and a lot of effort. It takes attention and dedication. It requires interest and a desire to learn. This is not a course where you sit back and watch and listen. You have to work at it every week.

Labs and lecture

The lecture combines two sections in one room for one period each week. We’ll go over the most-missed questions on the weekly quiz and get tips for doing the week’s assignment. It is not a traditional lecture covering the week’s material — that material is covered in online videos. It is assumed you will watch the videos for the week before the lecture class meeting, so that you can ask questions if needed.

The lab sections are limited to 20 students each. During the lab, you’ll work on the week’s assignment. Near the end of the semester, you’ll give a presentation in lab about your final project.

This course follows a flipped-classroom model, which is why the labs are reserved for working on your assignments — you will read assigned sections in the required textbook and watch video lectures about the material before starting the assignment. If you skip the reading or the videos, you are likely to find the assignment difficult, especially after the first few weeks of the semester.

Advertisements

Things to do before class, Aug. 29

No workshop hours this Friday, Aug. 25. But if you want to meet with me, just let me know. I can be available!

  1. Get the book and read all the things listed on the Course Schedule under the Week 2 heading.
  2. Videos: The titles of the videos correspond to the assigned reading. The videos are listed in order here: YouTube Playlist. Watch the videos before class — they are the lecture.
  3. Complete Quiz 1 before it expires (in Canvas) — Monday deadline!
  4. Download, install and run the text editor program Atom before you come to class. Here’s some help for getting started with Atom.
  5. Bring your laptop and power cord and headphones/earbuds to class on Tuesday. Be prepared to stay the entire three hours (unless you complete Assignment 1 in less time than that).

During class you will be doing Assignment 1. I don’t intend to lecture you. (The videos are the lectures in this course.) My role will be to answer your questions and help you if you get stuck.

Assignment 1 is available now in Canvas. You can certainly preview it before class, or even get started on it.

Chapters 1 and 2 in the assigned book are background and foundation material. People who work on digital stuff — apps, websites, games, etc. — know these fundamentals. I hope you will want to understand them.

Chapter 4 is your first introduction to HTML. NOTE: Skip pages 51 and 52. You are NOT using either one of those text editor programs!

The exercises in chapter 4 will be very helpful for you. Consider typing them out — not merely reading them. Learning what is in chapter 4 is essential to completing Assignment 1.

There’s a sidebar about XHTML on page 61. Ignore that. This is one of the few outdated things in this book — we don’t do XHTML at all nowadays. Now everything is HTML5.

Great advice about breakpoints

When you’re coding @media queries, you choose breakpoints. Many of you take the easy way out and write just one @media query. If you do that, and your max-width is small (600px), people with tablets and even small laptops might see a very bad-looking version of your page.

This article recommends using these numbers for @media queries: 600px, 900px, 1200px — “and 1800px if you plan on giving the giant-monitor people something special” (which you don’t have to do).

screen-shot-2016-11-22-at-9-15-54-am

I often code only one @media query (usually max-width: 800px) because I tend to be lazy, and I’m only making examples for you guys. But if I had a paying client, I would write two @media queries for any app — one for phones (max-width: 600px) and one for tablets (max-width: 900px). Lots of people do use tablets much of the time, so don’t forget about them.

I would also make sure my page layout does not get wider than 1200px (that way it doesn’t look stupid on a 27-inch iMac screen) — and I would do that with a container DIV, not a @media query.

Things to do before class, Aug. 30

No workshop hours this Friday, Aug. 26. But if you want to meet with me, just let me know. I can be available!

  1. Get the book and read all the things listed on the Course Schedule under the Week 2 heading.
  2. Videos: The titles of the videos correspond to the assigned reading. The videos are listed in order here: YouTube Playlist.
  3. Complete Quiz 1 before it expires (in Canvas) — Monday deadline!
  4. Download, install and run your text editor program before you come to class. Links to text editors are near the top of the Course Schedule page. (Atom is my favorite.)
  5. Bring your laptop and power cord and headphones/earbuds to class on Tuesday. Be prepared to stay the entire three hours (unless you complete Assignment 1 in less time than that).

During class you will be doing Assignment 1. I don’t intend to lecture you. (The videos are the lectures in this course.) My role will be to answer your questions and help you if you get stuck.

Assignment 1 is available now in Canvas. You can certainly preview it before class, or even get started on it.

Chapters 1 and 2 in the assigned book are background and foundation material. People who work on digital stuff — apps, websites, games, etc. — know these fundamentals. I hope you will want to understand them.

Chapter 4 is your first introduction to HTML. NOTE: Skip pages 51 and 52. You are NOT using either one of those text editor programs!

I think the exercises in chapter 4 will be very helpful for you. Consider typing them out — not merely reading them. Learning what is in chapter 4 is essential to completing Assignment 1.

There’s a sidebar about XHTML on page 61. Ignore that. This is one of the few outdated things in this book — we don’t do XHTML at all nowadays. Now everything is HTML5.

Tips after Assignment 2 (HTML)

How can you do better?

One great tip is to run your HTML through a validator. Robbins explains this on page 67 (chapter 4). The one I use is here — the HTML5 validator. Check the two options, select “Text Field,” delete the default in the field, and then paste in your entire HTML — from the DOCTYPE line at the top to the closing HTML tag at the bottom. Click Validate and see what happens.

Screen shot of HTML5 validator

Filenames and folder names: Professionals lowercase all filenames and folder names. Also, NO SPACES. Robbins says this explicitly on page 53. Your page will not validate if any image filenames have spaces in them, for example.

Making your content fit to be seen by others: A photo caption that says “Photo by Joe Blow” is okay (really that’s a photo credit). A photo caption that says “Original Photo Here” doesn’t look like something I would expect to see on a real website.

Choice of filenames: For any assignment, the main page in a folder can be index.html. For Assignment 2, recipe.html makes sense. Naming a file assignment2.html looks like homework. Think about your portfolio.

Text for the alt attribute value:Alternate text (also referred to as alt text) should serve as a substitute for the image content — serving the same purpose and presenting the same information” (Robbins, page 126). More here, from the W3C, keeper of all Web standards.

Editing a super-long URL: Any super-long URL is unwieldy, and also, it will often throw an error in the validator. I demonstrated how to fix this in the “Assignment 2 Part 2” walkthrough video, at 4:00 in the video. This editing is also recommended for links you click in social media, like this one:

http://www.nytimes.com/2015/09/13/arts/design/review-broad-museum-los-angeles.html?smid=tw-nytimes&smtyp=cur

See the question mark in the URL? That question mark and everything following it can be deleted:

http://www.nytimes.com/2015/09/13/arts/design/review-broad-museum-los-angeles.html

That is a cleaner, shorter and better URL to share and to use on your Web pages. But a word to the wise: ALWAYS click the link on your page to double-check that it goes where you intended it to go.

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.

Things to do before class, Sept. 1

UPDATE and ROOM CHANGE: Class will meet in Weimer 3032 (the large room at the end of the atrium wing, third floor) on Tuesday, Sept. 1. We will meet in this room every week — unless I tell you otherwise.

No workshop hours this Friday, Aug. 28. But if you want to meet with me, just let me know. I can be available!

  1. Get the book and read all the things listed on the Course Schedule under the Week 2 heading.
  2. Videos: The titles of the videos correspond to the assigned reading. The videos are listed in order here: YouTube Playlist.
  3. Complete Quiz 1 before it expires (in Canvas) — Monday!
  4. Install and run your text editor program before you come to class. Links to text editors are near the top of the Course Schedule page.
  5. Bring your laptop and power cord and headphones/earbuds to class on Tuesday. Be prepared to stay the entire three hours (unless you complete Assignment 1 in less time than that).

During class you will be doing Assignment 1. I don’t intend to lecture at all. My role will be to answer your questions and help you if you get stuck.

Assignment 1 is available now in Canvas. You can certainly preview it before class, or even get started on it.

Chapters 1 and 2 are background and foundation material. People who work on digital stuff — apps, websites, games, etc. — know these fundamentals. I hope you will want to understand them.

Chapter 4 is your first introduction to HTML. NOTE: Skip pages 51 and 52. You are NOT using either one of those text editor programs! I think the exercises will be very helpful for many of you, so consider typing them out — not merely reading them. Learning what is in chapter 4 is essential to Assignment 1.

There’s a sidebar about XHTML on page 61. Ignore that. This is one of the few outdated things in this book — we don’t do XHTML at all nowadays.

First class: Tuesday, August 25

I’m excited about this class! I hope you are too.

Make sure you arrive ON TIME for class on Tuesday. This is an important class meeting, and you should NOT miss it.

Bring your laptop.

You have an assignment due on Monday, August 31. You’ll want to hear more about that, I think.

I’ll also explain about the software you’ll need to download and install before the second class meeting.

Finding the classroom

Weimer 3219: We are on the third floor of Weimer Hall, but our room is NOT in the wing we call “the atrium.” It’s in the other wing, sometimes called “the Flanagan wing.”

To find the room, picture Weimer Hall as an L shape. The atrium is the bottom of the L, left to right. The Flanagan wing is the side of the L, top to bottom. The two wings meet at the bottom of the L. The top of the L is the part closest to the Florida Gym and Stadium Road. Our room, Weimer 3219, is in the top of the L.

Go to the third floor. Walk all the way to end of the third-floor hall in the Flanagan wing, past the Brechner Center for Freedom of Information — keep going! You’ll find it. If you came from the atrium, keep turning corners.

If you ask anyone for help, ask where the Brechner Center is. No one will know room 3219 by its number.

Weimer 3219