a small CSS Cheat Sheet
Here are some of the common css attributes that you would use for certain things when you are designing sites:
(Note: these all came from http://www.w3schools.com/cssref/default.asp )
| Visual | CSS Attribute | HTML Attribute |
|---|---|---|
| Bold Text | font-weight:bold | strong |
| Italic Text | font-style:italic | em |
| Text colors | color:#00ff00; OR color:rgb(0,0,255); OR color:red; | font color="red" or font color="#00ff00" |
| background colors | background-color:yellow OR background-color:#00ff00 OR background-color::rgb(0,0,255) | color="red" or color="#00ff00" |
| background images | body { background-image:url('paper.gif'); } |
body background="images/background.gif" bgproperties="fixed" |
| Layers | position:absolute; left:0px; top:0px; z-index:-1; with the next layer having the following: position:absolute; left:0px; top:0px; z-index:0; | n/a |
| Font Family | font-family:"Times New Roman",Georgia,Serif; | font face="arial" |
| Font Size | font-size:250% OR font-size:larger OR font-size:2em OR font-size:14px | font size="5" |
Note: For a great discussion of colors, please visit HTML Color Picker
Restoring from a MySQLdump file
Intro
No one can argue the value of a good backup. The saying in the IT field is, "You better have a good backup or you better have a good resume." Database systems are no different. MySQL has several ways to do this task. There was a previous blog post on this exact topic. For those needing a refresher, here it is below:
To back up all of your databases using mysqldump
1. Create a batch file and store it in c:\xampp\mysql\bin (or wherever your MySQL bin folder is located)
"mysqldump --user USERNAME--password=PASSWORD --all-databases > C:\mysql-backups\all-db-backups.sql"
(this path is wherever you want to store it- put this in your batch file without the quotes)
2. Schedule a task/cron job to run that batch file once a day (or however often you choose)
3. Schedule another batch file to copy all-db-backups.sql to another hard drive and back that file up
Caution
Now this is where most things fall apart. Most people either manually do backups, or perhaps automate them, with the occasional spot check to verify that they are still running. The difference between a good network administrator/database administrator and a great one is restores. (One could also argue that this is the difference between an employed and an unemployed one.) The issue though, is that the tool you used to back up your data is NOT the same tool you use to restore. It's a bit confusing. We used mysqldump to back up all of the databases, but you simply use mysql from the terminal window/command prompt window and point it to your backup file. See below for the step by step...
To Restore from a mysqldump of all databases
(using xampp mysql service to test...BTW, this would be a great way to verify your backups on a regularly scheduled basis)
1. Install MySQL (or use xampp) on the new server
2. Stop the MySQL service on the new server
3. Move all databases EXCEPT mysql in D:\xampp\mysql\data to OLD folder (mysql folder has the master info for the database server in it- it also contains the list of users)
4. Start the MySQL service (if you delete/move the mysql folder in the data folder, the service will NOT start)
5. Copy your all-db-backups.sql file from your backup server/folder/external drive to your new server
6. Get to a command prompt window/terminal window
7. Change directory to where the executable for mysql is
Ex: d:\xampp\mysql\bin
8. Run the following command in the terminal window/command prompt window (without the quotes)
"mysql --user USERNAME--password < d:\all-db-backups.sql"
(USERNAME is the root user on the new server - name of the .sql file is whatever you called it in the backup process - see above)
9. Enter the password for the user
10. Test your database restore using Toad or phpMyAdmin by running a "use DBNAME; select * from TABLENAME;" in a SQL query window
(you should see results)
Setting up a Multi-User Wordpress site
How to set up a multi-user, self hosted WordPress blog using WordPress 3.1.
1) Sign in as the administrator of the blog
2) Click on Users on the left hand side and click on Add New
(I know, really hard stuff right?)
3) Populate the fields
4) The Role section is the interesting one...
There are 5 different roles that you can assign to a User acct within WordPress: Admin, Editor, Author, Contributor, and Subscriber. For obvious reasons, you want to severely limit who has the Admin role. I would suggest, however, in larger organizations, to appoint at least one other person in an Admin role.
There are some differences between the other roles. Admin, Editor and Author can all Post directly to the blog, as well as Save Draft, while Contributor can only Save Draft and Submit for Review.
Admin, and Editor can edit other people's posts (side note: the Editor can also edit posts by an Admin, even though the Admin is a higher role), while the Author can only edit their own posts.
Here's another way to look at :
| Can Post | Can Submit | Can't Write | Can Edit | Create Pages | |
| Admin |
x
|
x
|
x
|
||
| Editor |
x
|
x (can edit Admin posts as well)
|
x
|
||
| Author |
x
|
x (their own posts)
|
|||
| Contributor |
x
|
||||
| Subscriber |
x
|
Pages, which are like a Post, but they stay in place. They are useful for static information, like an About Us page or an Hours or Services page on a normal website. Admins and Editors are able to create Pages.
The Subscriber role is for the paywall sections of your website, where you have to log in to access them. This part is a little bit trickier to pull off.
You would think that all of your authors would need to do is designate their posts as Visibility:Private Not True, Private is visible to other Admins or Editors. The world doesn't see it. Not exactly sure where this is useful, but ok. As I said, it's a bit trickier to do a paid section/members-only section.
Other misc info: You can change the Header and supply one of your own; however, the picture needs to be 940 x 198 pixels.
Future topics will be setting up a Members-Only section and backing up a bit and explaining how to set up your WordPress blog in the first place.
Does this help? Sound off in the comments...
Automating MySQL backups on Window Server
MySQL is a wonderful database and can be installed on Linux and Windows systems. However, like anything else in the IT world, it is important to back up your databases on a regular basis. Here's how I did it on my Windows system:
1) Create / Copy MySql_Backup.bat (store it in C:\xampp\mysql\bin\ or wherever your MySQL installation is)
2) Set up times in Scheduled Tasks (Control Panel > Scheduled Tasks [auto-backup task saved in C:\Windows\Tasks\auto-backups.job])
-Scheduled Task Job setup-
Run- C:\xampp\mysql\bin\MySql_Backup.bat
Startin -C:\xampp\mysql\bin\ (or wherever your bin folder is located)
Run As- SERVERNAME\Administrator
Scheduled to run every day at 4:04pm
-MySql_Backup.bat-
rem This runs every day at 4:04pm
mysqldump --user username--password=supersecretpassword--all-databases > C:\mysql-backups\all-db-backups.sql
This backs up to c:\mysql-backups on the same server that the MySQL database is on. The issue here is, when the hard drive crashes, your backups are also gone. We need to move them.
Next is to copy the backup file over to another location, preferably a server that is backed up on a regular basis. I created a folder on the U drive called WebDev-backups for this purpose.
3) Set up times in Scheduled Tasks (Control Panel > Scheduled Tasks [auto-backup task saved in C:\Windows\Tasks\auto-backups.job]) Replace with the copybackup.bat file. Set it to run after the MySQL_Backup.bat runs. My copybackup.bat scheduled task runs at 4:20pm, 16 minutes after the MySQL_Backup.bat runs.
-copybackup.bat-
rem this runs every day at 4:20pm
net use m: \\IP.Of.Server.here\u$\WebDev-backups /user:ADname\username supersecretpassword (the net use statement is all one line)
cd C:\mysql-backups
copy *.* m:
net use m: /delete
HowTo: Set up a website
Intro
This is the first in a series of HowTo articles and video podcasts. We'll start with the assumption that you know something about how to design a basic site. If not, don't despair; I can get you jump started on that as well.
The reason for this particular post is that, often, I find students who know how to design fantastic looking websites, but have no idea on how to make it live to the world. This is usually more common when they have an IT staff who sets up the web server for them and makes it practically idiot proof for them. While this is nice, it is good to know how to do this sort of thing yourself.
Domain Name
The first place to start is the domain name. There are quite a few places that you can register a domain name at. GoDaddy, which gets a bit of a bad rep, is the one that I use. If you can get past the used car salesman approach in their shopping cart, then you'll be fine. Their staff is very knowledgeable, and they are in the United States, so you can actually understand the tech support rep.
If you are starting up a side business, or perhaps your main business (given the state of the economy, this is becoming more and more of a reality), then you need to give careful consideration to your domain name as it relates to your business. If you are contemplating a business name, PLEASE look first to see if it's already taken. My kid wanted to start a new band called Robot Attack. The only issue? The name robotattack.com was already spoken for. I offered up therobotattack.com (which was available) and he went for it. Slight variation but it makes a big difference.
The next place to look for availability is on twitter and facebook, to see if those names are also taken. A Social Media presence is almost required anymore, so you might as well make sure that people can find you easily, before you go to the trouble of ordering stationary, signage and business licenses. (Of course, if you're not doing this for a business, it's not that critical. Still...good advice to take.)
One other thing to consider is to purchase the alternate spellings of your domain name. My creative website is at greymatterideas.com. The issue? You can spell grey two different ways, grEy and grAy. I own both spellings of the domain name, just in case I am giving out the domain name over the phone. The grAy version redirects to the grEy version, so I don't have to maintain two separate hosting accounts and two separate websites. One of my other domains is vagnini.net. If you go to vagnini.com, you will get the good Dr. Frederic J Vagnini. He made a mistake: he didn't buy the .net and .org versions of his chosen website name. That's how I wound up with it.
Hosting
Once you have the domain name purchased, the next task is to get hosting. Some registers, like GoDaddy, offer hosting. You may want to look at customer reviews of some of the hosting companies out there. Things to consider would be price (duh!), reliability, the control panel (ease of use vs. features offered), where the data center is, do they have redundant data centers, etc.
You may decide that you want to be able to look the people that are hosting your site square in the eye, meaning that you will be hosting it locally in your city. While I am an advocate of shopping locally, this is one of the priciest options and doesn't always guarantee that they back up your site. It may be a server sitting in a closet in the back. That said, there are advantages to hosting locally. You have an immediate pipeline to the people working on your server/site. They can/usually offer design or coding services as well. In addition, it is going to be easier to get a module or programming language added to your server vs. at the big boys.
If you go out of state instead, it is cheaper; however, the quality of support can go down. Ask other people where their sites are hosted. If you ask me, I'll tell you that Ive only ever had one problem with GoDaddy, with every other single experience being positive. The tech support people speak English (because they're in Arizona) and every single one of them have been competent. Not to mention, but they actually call you when they think they have a way to help you save money.
Where we go from here
Part two will cover actually getting your files onto your website host. This will let you, and others, see your website live on the Internet. Part three will entail getting and installing Wordpress and some other types of things that you can put on your site.
Image Rotation using PHP
PHP Image Rotation
This is a tutorial on a rotating image php script that occurs when the user refreshs the page. It can be found at http://www.alistapart.com/articles/randomizer/
Add a meta tag to auto refresh the page and you're in business! For an example of this in action, visit http://greymatterideas.com/photos.htm
PHP and MySQL tips
Remember that PHP code is interpreted before going to the browser.
Compare the two code sections:
Before the page renders
<html>
<head>
<title>PHP Test</title>
</head>
<body>
<p> This is regular HTML</p>
<?php echo '<p>This is HTML via <strong>PHP!!</strong></p>';
//this is a comment. It is NOT seen at all
?>
</body>
</html>
After the page renders
<html>
<head>
<title>PHP Test</title>
</head>
<body>
<p> This is regular HTML at wicketbang.com</p>
<p>This is HTML via <strong>PHP!!</strong> at wicketbang.com</p>
</body>
</html>
What this means is that you can run ANY server side code and it will be hidden from the user.
A good example of this is found at the password protect page sample.
Here is the code for it:
Before:
<html>
<head>
<title>PHP Password Protect Test</title>
</head>
<?php
// Define your username and password
$username = "someuser";
$password = "somepassword";
if ($_POST['txtUsername'] != $username || $_POST['txtPassword'] != $password) {
?>
<body>
<h1 align="center">Who are YOU?</font></h1>
<p>UN: someuser</p>
<p>PW: somepassword</p>
<CENTER>
<form name="form" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<p><font color="#FFFFFF"><label for="txtUsername">Username:</label>
<br /><input type="text" title="Enter your Username" name="txtUsername" /></p>
<p><font color="#FFFFFF"><label for="txtpassword">Password:</label>
<br /><input type="password" title="Enter your password" name="txtPassword" /></p>
<p><input type="submit" name="Submit" value="Login" /></p>
</form>
<?php
}
else {
?>
<div align="center">Almost <a href="secret.htm">there
</a> </font>
<?php
}
?>
</div>
</body>
</html>
and After:
<html>
<head>
<title>PHP Password Protect Test</title>
</head>
<body>
<h1 align="center">Who are YOU?</font></h1>
<p>UN: someuser</p>
<p>PW: somepassword</p>
<CENTER>
<form name="form" method="post" action="/test/password.php">
<p><font color="#FFFFFF"><label for="txtUsername">Username:</label>
<br /><input type="text" title="Enter your Username" name="txtUsername" /></p>
<p><font color="#FFFFFF"><label for="txtpassword">Password:</label>
<br /><input type="password" title="Enter your password" name="txtPassword" /></p>
<p><input type="submit" name="Submit" value="Login" /></p>
</form>
</div>
</body>
</html>
Notice that there is NOTHING in between the head and the body in the rendered page. This was where we stuck the actual code and the password. It has been bolded for you in the before section.
Creating a Podcast Manually
Doing a Podcast
What is a Podcast?
A Podcast is simply an audio or video file that allows the viewer of your site to subscribe to it, similar to subscribing to a Blog that you read or another website. BTW, to subscribe to this website, click here.
Part one:
Part one is the creation of the content, the mp3 file or video file itself. You can use Audacity (a free download) or any other audio editing software. If it's video, you will need more equipment and a nonlinear video editor, such as Adobe Premiere Pro or Final Cut Pro (only available for the Mac). This may be covered in greater detail in a future tutorial. Let's look at doing an audio podcast.
Equipment (other than the editor) will be a microphone, possibly a mixer, some royalty free music and your time, along with the topic of the show.
Part two:
The RSS feed.
The real magic of the subscription is the xml file. A typical RSS feed likes like this:
<?xml version="1.0" encoding="utf-8"?>
<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns="http://my.netscape.com/rdf/simple/0.9/">
<!--<rss version="2.0">-->
<channel>
<title>WicketBang.com--Website Maintenance, Tips and Tricks etc...</title>
<link>http://www.wicketbang.com/</link>
<description>RSS feeds</description>
</channel>
<!--Item 1-->
<item>
<title>Backup/Restore a MySQL DB</title>
<link>http://www.wicketbang.com/DBtips.htm#restoredb</link>
<description>Need to backup and restore a MySQL Database stored on GoDaddy's servers? Then follow the link to learn more...</description>
</item>
<!--Item 2-->
<item>
<title>PHP Image Rotation Script</title>
<link>http://www.wicketbang.com/phptips.htm#rotate</link>
<description> Here's a script and tutorial that will allow you to rotate which image gets displayed on the page without using Flash. This makes for an easier time of updating the images that will rotate. </description>
</item>
</rdf:RDF>
<!--</rss>-->
While this works fine for most blogs and websites, you need a bit more than this.
Enter RSS 2.0.
The xml file has a lot of the same content; however, it also includes and <enclosure> tag, which has the link for the mp3 file (your podcast) . In addition, you may need to consider iTunes specific tags as well. A large portion of podcast viewers are using iTunes. Here's a sample file below:
<?xml version="1.0" encoding="UTF-8"?>
<rss xmlns:itunes="http://www.itunes.com/dtds/podcast-1.0.dtd" version="2.0">
<channel>
<title>Open for Business</title>
<link>http://www.greymatterideas.com/podcasts/current.htm</link>
<language>en-us</language>
<copyright>℗ & © 2008 Greymaterideas &</copyright>
<itunes:subtitle>Open Source Software</itunes:subtitle>
<itunes:author>Brian K. Vagnini</itunes:author>
<itunes:summary>Discussion of Open Source Software and it's implications in business</itunes:summary>
<description>Discussion of Open Source Software and it's implications in business</description>
<itunes:owner>
<itunes:name>Brian K. Vagnini</itunes:name>
<itunes:email>brian@greymatterideas.com</itunes:email>
</itunes:owner>
<itunes:image href="http://www.greymatterideas.com/podcasts/images/open.jpg" />
<itunes:category text="Technology">
<itunes:category text="Open Source"/>
</itunes:category>
<itunes:category text="TV & Film"/>
<item>
<title>Open for Business-Episode-0001</title>
<itunes:author>Brian K. Vagnini</itunes:author>
<itunes:subtitle>Open for Business-Ep.0001</itunes:subtitle>
<itunes:summary>Placeholder with intro and a coming soon</itunes:summary>
<enclosure url="http://www.greymatterideas.com/podcasts/Open4business-ep0001.mp3" length="591830" type="audio/mpeg" />
<guid>http://www.greymatterideas.com/podcasts/Open4business-ep0001.mp3</guid>
<pubDate>Wed, 05 May 2008 14:36:00 GMT</pubDate>
<itunes:duration>0:36</itunes:duration>
<itunes:keywords>credits, music</itunes:keywords>
</item>
</channel>
</rss>
The length attribute is expressed in bytes, NOT kilobytes or megabytes. The easiest way to get this is to right click on the file and select Properties. Copy the filesize (591,830) and paste into the xml file, removing the comma.
Using the podcast
You can use a client, such as Juice, or you can use my.yahoo.com (if you have a Yahoo account) or Google Reader.
An example of the finished product can be found here at http://www.greymatterideas.com/podcasts/current.htm
Automation for a web gallery
Using Photoshop CS or CS2's Automation menu to do a web gallery
- Open Photoshop
- Go to File > Automate >Web Photo gallery
- Choose a style to your liking
- Choose the folder that the images are located in
- Choose the destination folder where the new copies of images and it's corresponding html files will be
- Post to your web server
- Tada!!