Advanced Web Apps – Spring 2018

If you are getting an A or a B in JOU 3363 Intro to Web Apps, you should consider taking JOU 4364 Advanced Web Apps. NOTE: The advanced course is offered ONLY in the spring semester. View the Course Schedule for Advanced Web Apps.

Screen shot from UF course schedule - JOU 4364

.

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.

Tips for Assignment 4 (CSS 2)

Be sure to also read this.

Common mistakes on Assignment 4:

  1. If you start Part 2 before Part 1 is perfect and finished, you are making extra work for yourself.
  2. You forgot to put box-sizing: border-box; into a CSS rule that includes margin and/or padding.
  3. You used a width in pixels where a width in percentage would work better.
  4. You did not clear your floats correctly.
  5. You added too many declarations in a rule for one element. Less works better. Try to use the minimum possible to achieve what you want.
  6. If your background color inside an element has “collapsed,” read the “TIPS” note under Part 2 (3.b) in the assignment.
  7. text-align: center; is ONLY for text. Never use it to center an image or any other element.
  8. You forgot that head, header, and h1 are all very different things in HTML.
  9. We will never, ever use any color words in CSS. We use only hex codes for all colors.
  10. We will never put CSS into the HTML file. CSS stays in its own file with the .css extension.

Updates inspired during class:

  • If you’re having trouble with the header color being too narrow (top to bottom), have you specified a background color for the header?
  • Floating left and right: Again, this concerns the header (and h1 and nav). Even though you’re working on Part 1, read the “TIPS” note under Part 2 (3.b) in the assignment.
  • Clearing floats: You do not need to add a class or an id to the HTML to clear floats. Just add the clear property into the rule for the appropriate selector in your CSS.
  • Trying to add some space below the white article box in Part 1? Using margin on the article element won’t work, because of margin collapse. Try adding padding-bottom to a different element.

Week 5: Sept. 18–22 (more CSS)

The videos this week will be very helpful for your homework — Assignment 4 — because I show you how to do all of the things that are required in the homework.

Margin, padding, and floats can become very difficult and very badly messed up if you apply them willy-nilly in your CSS. So take the time to watch me make HTML elements (such as div and article) behave exactly as I want them to, and you’ll be able to do the same.

Here’s the video list for this week.

Screen Shot 2017-09-17 at 2.22.58 PM

These CSS skills are covered in the Robbins book as well, but sometimes seeing the results in a video is better than just reading about the way the CSS properties work.

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.

 

Looking up tags, etc.

As I walked around the classroom last Tuesday, I saw a few students consulting the website named W3schools. I do NOT recommend that site. It is not the best one for accurate, up-to-date information about how to use HTML and CSS today.

In the sidebar of this course website, you’ll see a list of resources that I DO recommend. For looking up the right way to use HTML tags — and CSS selectors and properties — your first choice should also be MDN. You can get what you need in a Google search by adding mdn to your search terms. (I always search this way.) For example:

headings html mdn

If you find MDN not to your personal taste, my second recommendation is HTML Dog. It is reliable and accurate.

Note that W3schools is NOT associated with the official World Wide Web Consortium (W3C). Their name is misleading.

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.

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.