The course is full?

There are two sections of Intro to Web Apps for fall 2018. Each is restricted to 20 students.

Students are likely to drop right up until the Drop/Add deadline on Tuesday, Aug. 28, at 11:59 p.m.

If you want to add this course, you need to watch it in ONE.UF. This is the only way to get a seat if one opens up. Only you can enroll yourself if a seat becomes available! There is no waiting list.

Only undergrad students majoring in JOU, ADV, PUR or TEL may enroll in this course.

A word of advice: It is likely that some students will drop after the first lecture on Tuesday, Aug. 28.

It would be really good if you come to the lecture that day to hear the instructions for the first week. That way if you do get in, you won’t be behind all the other students.

The lab on Aug. 22 will not meet.

Advertisements

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.

Plain talk about file names

There are a lot of conventions in web design and development, meaning “the typical ways things are done.” When you don’t follow the conventions, sometimes it would make a hiring person scratch her head and wonder why you don’t do things in the typical way.

The way we name files and folders in websites and apps follows some conventions. Some of these make a huge difference, and some are just for convenience.

  1. The primary HTML file on a site, or in a subject folder, is named index.html. This is more than just a convention — the browser will open that file automatically if it is left off the end of the URL. Examples:
    https://weimergeeks.com/ (index.html at top level of site opens)
    https://weimergeeks.com/examples/ (index.html in the /examples/ folder opens)
  2. The primary CSS file for a site or a project usually has a name that indicates its status as the main CSS for the site. Thus many web developers would name it main.css, or possibly styles.css. Some people like to name it default.css or site.css. When you have different projects, you will likely name the style files to match the project name. Look in the /css/ folder here to see examples.
  3. Note that a JavaScript library — such as Highcharts — often includes its own CSS file. Typically, that file is named after the library — highcharts.css, for example. Thus you should NOT name your personal CSS file the same name as a library you are using. It might create problems, later if not immediately.
  4. Your folder names in a web project should clearly indicate the contents of the folder. All images are typically inside a folder named /images/. The CSS files are often inside a folder named /css/. but (alternatively) may be inside a folder named /styles/. The JavaScript files are often inside a folder named /js/. but (alternatively) may be inside a folder named /scripts/.

As you continue learning and exploring other people’s projects, you will probably see folders named assets, modules, components, model, view — these will contain components that make the site or app work, rather than pure HTML files.

Remember:

  • Filenames and folder names NEVER have spaces in them.
  • They contain no punctuation other than possibly an underscore or a hyphen.
  • Do not use uppercase letters in filenames or folder names.
  • All files have a file extension — .html, .css, .jpg, .png, etc.
  • The only dot in a filename is the one at the start of the file extension.

Follow the conventions, and your work will be easier!

If you want to ADD this course

A lot of students who wanted to take this course could not get in. It filled up in the beginning of April. There should be only 20 seats, but we raised the cap to 25 seats.

Since April 5, four students dropped, and four others were able to add. The course is still filled.

Students may drop this course until 11:59 p.m. on Friday, Aug. 25. If you want to join the course, you need to add it yourself, so just keep watching the UF registration system until Drop/Add ends.

IMPORTANT: If you hope to add the course, you MUST come to the first class meeting. I will be explaining a number of things about how to succeed in this course and what you will need. Also, all of you must read the official syllabus PDF file, which you can find here.

The first class meeting begins at 10:40 a.m. on Tuesday, Aug. 22, in Weimer 3032. 

NOTE that this class is offered ONLY in the fall semester. It will be offered again in fall 2018. Only students enrolled in Journalism, Advertising, Public Relations or Telecom may take this course.

Followup on Assignment 3

Here is a list of points to consider:

Observations from Assignment 3

Keep in mind that the header, footer, article, section, aside, and figure elements are always OPTIONAL. You do not need to use these. Use them if they make sense in your document structure.

Figure vs. img alone: Many people use the img element with just a p for the caption and attribution — without using figure and figcaption at all. Note that you may use figcaption ONLY inside a figure element. No figure? No figcaption! Using figure is OPTIONAL.

Box-sizing and the box model

This is an up-to-date article (brief) about the box-sizing property. It’s on a very good website for CSS tips and tricks. You might find some other good ideas there.

I showed this CSS in class:

p { 
	-webkit-box-sizing: border-box; 
	   -moz-box-sizing: border-box; 
	        box-sizing: border-box;
	width: 500px;
	padding: 20px 10px;
}

/* an alternative, if you don't need to worry about old browsers */ 

p { 
	box-sizing: border-box;
	width: 500px;
	padding: 20px 10px;
}

Robbins (p. 309) explains the box-sizing property.

Validators

You should use this CSS validator to check your CSS files.

You should continue using this HTML5 validator to check your HTML files.

Tips after Assignment 2 (HTML)

Some observations and advice from me to you:

Spelling errors are not okay: I saw a lot of common words spelled incorrectly, like recipe (recipie) and original (orginal). You’re going to be doing work in this course that you might show to someone in a job interview. You must not have typos in your text.

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. See example below the photo.

falafel

Falafel are small fritters made of ground chickpeas. They are popular throughout the Middle East and Egypt. Photo by Leon S.K. (Flickr) [CC BY-SA 2.0], via Wikimedia Commons.

In the caption above, I said something interesting about the dish, and then I added the required attribution. Think about what looks professional, and then do that on your own pages.

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. All punctuation marks are forbidden in filenames except the underscore, the hyphen, and one (ONE!) period preceding the file extension.

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.

Typing an attribute correctly: The ALT attribute, HREF attribute, and SRC attribute all have the same format. First the attribute name. Then, an equals sign. Finally, a pair of quotes. Inside the quotes is the value of the attribute.

screen-shot-2016-09-11-at-6-07-03-pm

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.

screen-shot-2016-09-11-at-5-55-27-pm

“All basic structure tags and elements are present and correct.” From now on, if you have any errors in these tags, or if any are missing, your points for the assignment will be 4 or fewer.

New classroom; half-price book sale

Our new classroom is Weimer 3032. This is on the third floor alongside the atrium, in the corner farthest from the elevator. We will meet there starting Tuesday, Aug. 30.

It is possible that some days we will need to meet in the original room instead. I will give you advance notice of those days.

An ebook version of our textbook went on sale today at half price, which is $20.99. Go to this page before Sept. 14, and use discount code B2S6. Other O’Reilly books are on sale too (ebooks only). These are the best books for learning programming and technology, so browse around.

See you in class!