A Note on Proper Googling

You will have notice that whenever you search for a web-related term like 'css font-family' your first results are always at w3chools.com. Now, I have nothing against that website but they are kinda sucky.

What I do is prepend every search with 'mdn', as in 'mdn css font-family'. That way I end up at the much nicer Mozilla Developer Network.

Static CSS Files in the App Engine

If you link to a CSS with, say href="/css/style.css" then the browser is going to do a GET /css/style.css. But, since you are running the app engine this means that, by default, this will go to your Python file where it will look to see if there is a handler defined for /css/style.css.

Since our CSS files are static we don't want the python code to be called to fetch them. We just want the webapp2 to serve these as old-fashioned static files. To do this you need to edit your app.yaml and tell it which files or directories you want to be static. Read the docs on Static File and Directory handlers for the details. Basically, you add something like:

- url: /css
  static_dir: css

to your app.yaml file.

My Solutions

I have pushed my solutions to HW2 to the pinboard github repo so you can take a look at how I did it. I added a link to this repo on the menu at the right. I will be pushing all future solutions to that repo.

CSS Examples

At first, it is hard to imagine that significant visual effects can be achieved by using the CSS properties. But, that is only due to lack of imagination. The sites below showcase the power of CSS. Browse them for ideas, and CSS code.

• CSS Zen Garden is the original CSS showcase site. Every time you click on a design on the right you will see a different design. But, note that all designs use the same HTML. The only thing that changes is the CSS file.
• CSS Deck is a new site for showing off cool CSS tricks. Like, how to build a macbook pro entirely out of CSS.
• The Shapes of CSS blog post shows how to generate geometric shapes with CSS.
  
• Colour Lovers is just colors, but they have some pretty colors.
• CSS3 generator will generate the CSS for shaded, rounded boxes.

CSS Boxes

In the following video I explain a bit more about CSS margin, border, and padding.

Cascading Style Sheets

Below I give a quick introduction to CSS. You should read over the MDN CSS documentation to learn CSS.

HW3: CSS, users

For this homework you will add a CSS file to your webapp to make it look pretty, and you will use the app engine users library to provide login and logout capabilities.

That CSS Look

Your website should look like the screenshots you see here. Namely, it must have:

1. A header which shows either the login button, or the email of the currently logged-in user and the logout button. Both of these must be right-justified.
2. A title, as shown, more or less.
3. A box that is centered on the page and shows either the login message or asks for input (same as the previous homework). The background of the box must be a different color from the rest of the page.
4. The footer, with your name centered on it.

You can use the same colors I used, which are USC's colors, or choose your own color template. Note, if you don't know much about visual design (as I don't), the best thing to do is to use someone else's color scheme and try to pick one with fewer than six colors. The fewer colors you use the more professional it will look.

Login

The login and logout button should work, as expected: login and logout the user. When the user is logged in you should display his email address in the header. You will do this using the app engine's users library, which means that people will be logging in with their gmail/google credentials. Notice that with this method you do not need to store anything. Google takes care of the authentication process.

Required Reading

To do this homework you will to have read:

1. Using the users service: getting started guide. More details in the users service API.
2. MDN CSS Tutorial

You are free to google (or bing, or whatever you're into) for this and all homeworks as much as you want. However, be warned, you must understand what every line code in your program does! This is good to do not just for this class but for your whole career. If you cut-n-paste some piece of code from the interwebs into your program and you don't know exactly what it does you are asking for big-time trouble later on. When your app crashes the next day, is it because of the code you pasted? You have no idea! Blind pasting is the equivalent of agreeing to take in an international flight a suitcase that some stranger just gave you.

As always, push your code to your github repo by Monday, Sept. 17 @9am.

Jinja2 Templates

Below is a short intro to the Jinja2 templates as used in the app engine. You will need to consult the Jinja2 documentation to use them.

HTML Forms

Below I cover the basics of HTML forms.

HW1 Graded

I have graded HW1 and emailed you your grades. I am using your @email.sc.edu address. If you want me to email it somewhere just let me know.

I don't have a solution for this HW since it was mostly about making you have everything installed and know your way around chrome tools.

Python

Below is a short introduction to the main features of Python.



Another fun way to learn python is by doing the codeacadempy Python track.

Publish your App. Use Only one Eclipse Project

After you finish HW1, and you made sure that it runs locally (http://localhost:8080), you can then publish it for the whole world to see!

Just go to https://appengine.google.com/ and click on "create application". Find an "application identifier" (app id) for your app (I suggest the same project name as your github repo, to keep things simple) that isn't taken, use all the other default values and create it. Then just copy the app id into your app.yaml under 'application: your-app-id' then click 'deploy' on your google app engine launcher. It will copy all your files to the google app engine and deploy. You can look at the log file to track its progress.

Your app will then appear at http://your-app-id.appspot.com

Note that if you later on decide to buy your own domain name, say myawesomeproject.com, it is just a matter of filling out a form to get the app to appear under your domain name.

You will have Only One Eclipse Project

I have noticed that some of you made an eclipse project called HW1. That's a bad name. You will only have one eclipse project for the whole semester. Each week you will be adding more features to this project. A good eclipse project name is the name of the github repo I gave you, or something similar.