WebTeam

Smashing Magazine has some good links. Such as this.

Good sampling of options.

WPTouch: plugin that swaps in custom css for small screen devices.

Theme Switch and Preview: plugin that allows users to swap themes in and out.

Where is your WordPress?

Before you start: using any browser except Safari, go to wordpress.org and download the zip file of the current version of WordPress. Remember where you dump it, but there’s no need to unzip it.

Then, here we go. Thirteen steps to build your infrastructure.

1

In your 000webhost control panel, scroll down to Software/Services and run MySQL.

2

In the next window, name your database and user name. Same is fine for both. Add a password. REMEMBER IT. Click Create database.

3

You’ll get a result. It’ll show your password in plain text, so beware of lurkers behind you.

4

Go back to your control panel, scroll down to Files and run File Manager, which is a web-based ftp tool.

5

You’ll land in the root directory of your server. Double-click on public_html to get into the web folder. (Click graphic below to enlarge if you need to see this.)

6

Click the upload button. On the right side of the screen you’ll see the following upload block. Click Choose File and browse your hard drive for the zipped wordpress file you downloaded at the beginning.

7

After you’ve chosen the file, the window should look like this sample (sample is for a file named wordpress-3.3.1.zip):

8

On the left hand of the screen is a big green checkmark, which means “do it.”

Click it and the file manager will upload the zipped file to the public_html directory and unzip it. It may take a while.

9

When it’s done, an inset window will open up showing you the results of the upload and the upzip.

10

You’re done with the ftp part of the install. Now go back to your control panel and click on your website name, upper right hand side, labeled Domain. It should look like this:

11

Click on the wordpress directory. WordPress will go into a mild panic and point out that you have not got a config file.

Click Create a Configuration File.

12

WordPress now wants to know what database it’s supposed to use, who owns it, what the password is, and what the host name is. You find that data by opening a new window, going back to your control, clicking on MySQL and looking at the bottom of that window for the information:

Put the information in, using copy-and-paste so you don’t screw it up. Leave the Table Prefix as it is:

13

Click Submit and pray.

Step 1: Get a site. Name it something not-silly.

Step 2: Learn how to use it: have at least 4 pages and 6 posts, 5 categories, with images you have made, YouTubes you have found, links to things you like. Try several themes. Resize graphics. Have captions. Make custom header graphics. Mess with plugins. Password-protect a page.

Step 3: There is no Step 3, except that, as always, post only school-appropriate material. As well, no full names, addresses, phone numbers, etc.

DO THIS AT HOME. If you do it at school, 000webhost will block the next person who tries because they will see it as spamming their system.

Go to 000webhost.com and get an account for a free subdomain. Name it something you’d be comfortable showing to a client.

Describe and evaluate your work and learning this quarter in a Google Docs form.

(Don’t fill it in, though, till we’re done with presentations.)

Google:

Facebook:

Apple:

Best tutorial I’ve seen is at webdesignandsuch.com

There’s an error in line 22 of the second sample. It says

.demo:hover, a.demo:active {

but it should say

a.demo:hover, a.demo:active {

Your jobs?

1. Use the WebDesignandSuch tutorial and the css-sample webteampost  to convert your one of your javascript mouseovers to two css rollovers, one using two images and one using a sprite.
2. Get the tutorial sample sprite running on a page in your Photoshop display site.
3. Create a new sprite-based rollover system for your last page in Photoshop display site. It must use self-created images that are different dimensions than any of the samples.

(There are lots of css-sprite tutorials on line, including lots focussed just on navbars built in Photoshop. Like this one. Or this one, which includes downloadable files if you want to just swap things out.)