Watkins Web 3: Blog

Show and Tell



Best Education Sites

I really like this site because it used a ton of eye-catching info-graphics. I thought it was also interesting because it was about college websites and our pretty much stinks. It was nice how the other html pages didn’t cover the entire home html page.




Icon Dock

This was a site that is powered by wordpress. It thought we might be able to use some inspiration. I thought this one was really nice how it used all application icons and evolved a ton of icons to look like a app icon. The nice thing was that you could use these icons for your own use, or you can buy them.




Typographica

This is another site powered by wordpress. It is a type heavy site that showcased them as images. I thought the grid work on the blog page. It featured the type as thought it was an image. Then you click on the image of text which takes you to the permalink page. I thought this website was great!


Cheat Sheet: Wordpress URLs

In non-CMS-powered websites, it’s common to create a bunch of HTML or PHP files that link to each other. To keep things organized, we usually name our files descriptively and bundle them into folders (aka directories). Once we upload them to our web server, they then become available at addresses that reflect these file and folder names.

So depending on the complexity of our site, we might end up with URLs that look like these:

http://example.com/about.html
http://example.com/tutorials/making-a-web-page/
http://example.com/crazy-stuff/interactive-projects/project4/step2.php

The only tricky rule here is that when a URL ends in a slash (like the second example above), most web servers will load index.php or index.html if either exists.

It’s important to recognize that these human-readable (or “clean”) URLs carry important information:

  1. Clean URLs can tell the user the name of the page they are on (e.g. about.html). If a user bookmarks the URL, emails it to a friend, or saves it in a text file for later, they will still have a good idea of what the page contains without having to click on it.
  2. Clean URLs help the user understand the structure of the site: in the second and third examples of the site, the user might even try the shortcut of deleting part of the URL and hitting return, in order to view pages at http://example.com/tutorials/ or http://example.com/crazy-stuff/interactive-projects/.
  3. Clean URLs give search engines like Google a better chance of understanding what content is located at each URL, and probably raising those pages’s rankings for given set of search keywords.

Ugly URLs

On big, database-driven sites, it’s common to see URLs that use unusual characters, coded language, and long strings of characters and numbers:

http://example.com/kb/index.php?cat=8&id=41
http://example.com/?articleID=45434341

Here are some pretty bad real-world examples (my personal favorite is the LinkedIn one, which is what you get when you click on Joe Smith’s name after doing a search).

http://www.amazon.com/Making-Mirrors/dp/B006ZDU7QI/ref=sr_1_1?ie=UTF8&qid=1329151184&sr=8-1 
http://search.yahoo.com/search;_ylt=A0oG7klsOzlPFWYApwBXNyoA;_ylc=X1MDMjc2NjY3OQRfcgMyBGFvAzAEZnIDeWZwLXQtNzAxBGhvc3RwdmlkA3Z3N3ZZa29HN3Y3dlVxbmNUczc3T3dBRFl5MHl2azg1TzJ3QUN4RXUEbl9ncHMDMTAEbl92cHMDMARvcmlnaW4Dc3JwBHF1ZXJ5A2pvZSBzbWl0aARzYW8DMQR2dGVzdGlkA0g0NjU-?p=joe+smith&fr2=sb-top&fr=yfp-t-701
http://www.linkedin.com/profile/view?id=34735695&authType=NAME_SEARCH&authToken=9hD5&locale=en_US&srchid=7a0a9838-fb41-4cf8-9a67-1d74433f4c37-0&srchindex=2&srchtotal=10883&goback=%2Efps_PBCK_joe+smith_*1_*1_*1_*1_*1_*1_*2_*1_Y_*1_*1_*1_false_1_R_*1_*51_*1_*51_true_*2_*2_*2_*2_*2_*2_*2_*2_*2_*2_*2_*2_*2_*2_*2_*2_*2_*2_*2_*2_*2&pvs=ps&trk=pp_profile_name_link

URLs like these are optimized for the databases that control the websites, not for the actual people who need to use those sites. They suffer from poorer Google rankings and aggravate users who have to work with them through common tasks like reading, storing, collecting, bookmarking, copying/pasting, etc.

There’s a reason for the ugliness

Wordpress uses a MYSQL database for storage and displays database content through PHP templates. This means that every time a post or page is displayed, Wordpress is assembling the HTML “on the fly.” There is no collection of static HTML files whose filenames would appear in the URLs — instead, page contents are retrieved through the same GET requests that we used when developing forms last semester.

The URL for a GET request begins with the address of a normal PHP file and is followed by a question mark, a variable name, the equals sign, and the variable contents. For example, a weather page might show different data for different zip codes, and the corresponding URLs might look like this:

http://example.com/showweather.php?location=37204
http://example.com/showweather.php?location=37206

As we saw with PHP forms, this is the way that a single PHP file (showweather.php) can display different outputs. It receives the location variable as part of the URL, uses it in some what to retrieve weather data, and then outputs HTML that is appropriate for that URL.

Wordpress Defaults

The default (and “true” in some sense) URL of a typical Wordpress post looks like one of these:

http://mysite.com/index.php?p=27
http://mysite.com/?p=27

This is in fact very similar to the weather example above: index.php is the PHP file that can access a database and is set up to display different content depending on the variable it receives, while p (which stands for Post) is the variable that will contain the ID number for each post. Because index.php is always the default file shown in a directory, Wordpress usually drops it and just uses the http://mysite.com/?p=27 format.

Clean URLs with Dynamic URL Rewriting

Whenever possible, we want to get rid of the ugly and noninformative default URLs and use “clean” URLs that look more like the simple, old-school, directory-path-leading-to-a-filename format.

Even though we won’t actually be creating directories and files, the web server software Apache has a module called mod_rewrite. The mod_rewrite module is installed on most (but not all) web servers, and it enables the server to generate and recognize human-readable URLS and map them to the correct posts in the Wordpress database.

Wordpress gives us a number of clean URL structures out of the box. Choose Settings > Permalinks and you’ll see them:

Permalink Settings

All except the first count as “clean”. On watkinswebdev.com, which is hosted by Dreamhost, security settings require that once we’ve chosen our structure, we need to edit or create our .htaccess file in the root folder of our Wordpress installation. We’ll go over this in class, but note that if you ever change your Permalink Settings, you’ll need to update the .htaccess file with the new code as well.

The Custom Structure option enables you might to choose your own format. One that I have used often is /%category%/%postname%/. This would result in permalink URLs that looked something like this:

http://watwkinswebdev.com/jschmoe/blog/features/how-i-came-to-love-garamond

If you want to explore other possibilities, take a look at the Wordpress Codex’s page Using Permalinks for the rundown on all the possible variables.

Cheat Sheet: Wordpress Core Functions

Wordpress provides a host of PHP functions that output information store in your database. Here are some of the most common functions and some examples. Much of the information is taken from the Wordpress Codex’s article Stepping Into Template Tags, which you should take a look at.

Functions that Can Go Anywhere

Some of Wordpress’s functions can be used anywhere on the page: in the header or footer, inside a Wordpress loop or outside of it. The function bloginfo() is probably the most common:

bloginfo()

This is a function that takes a keyword as an argument and outputs info about your site, most of which are controlled by the settings under Settings > General. This is best shown through examples:

<?php 
	bloginfo('name'); 					// echoes "James's Blog"
	bloginfo('description');			// echoes "A Website about Design"
	bloginfo('url'); 					// echoes "http://watkinswebdev.com/jmuspratt/demo/"
	bloginfo('template_directory'); 	// echoes "http://watkinswebdev.com/jmuspratt/demo/wp-content/themes/starterkit/"
?>

It’s important to note that in the last two examples, the function outputs a raw URL. If you want to link to the page at that URL, it’s up to you to wrap that URL in a link tag and open and close PHP correctly. So if we want to construct a link that goes to the home page, think about it as three logical steps, working backwards from the output you want to create with PHP:

  1. If you were manually writing a link to the home page, it would look like <a href="http://watkinswebdev.com/jmuspratt/demo/">Visit the home page.</a>
  2. Since bloginfo('url'); only outputs the URL of the blog, you’re going to have to turn PHP on and off inside the quotation marks of the href attribute. In other words, you’ll do something like this: <a href="PHP_GOES_HERE">Visit the home page.</a>
  3. Since you’re starting in HTML, you’ll need to open PHP, output the URL, and then close PHP inside the quotation marks. So the final code should look like this:
<a href="<?php bloginfo('url'); ?>">Visit the home page.</a>

For the complete list of options, visit Wordpress Codex: bloginfo().

Inside the Loop

bloginfo() works outside the loop because its information is consistent no matter what post or page the user is viewing. Since the functions that output the contents of a post obviously do differ from post to post, they must be used inside the Loop. In Starter Kit, you can open single.php and the file snippet-post.php for a good example of what follows below.

the_title()

To echo the title of each post, use the_title(). Note that Wordpress provides a few optional parameters illustrated by the examples below. The first two parameters represent opening and closing HTML tags that Wordpress can add to the title, while the third is a boolean value called “display” which controls whether to echo or return the title. If you override the default TRUE value by specifying FALSE, you can use the function to store the returned value instead of echoing it.

<?php 
	the_title(); 				// echoes "My Blog Post"
	the_title('<h3>', '</h3>'); // echoes "<h3>My Blog Post</h3>"
	the_title('', '', FALSE);	// doesn't echo anything, but RETURNS "My Blog Post"
?>

See also: Wordpress Codex: the_title().

the_permalink()

The permalink is the unique URL given to every post so that it can be bookmarked, emailed, and linked to even if that post falls off the home page’s display of recent posts. Note that the particular style/formatting of the permalink can be globally altered under Settings > Permalinks.

<?php 
	the_permalink(); 	// echoes "http://example.com/news/my-post"
?>

Like bloginfo(), the_permalink() outputs a URL, not a complete hyperlink. It’s therefore common to combine it with the_title() so that you get a meaningful link text linked to each URL:

<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>

which would output:

<a href="http://example.com/news/my-blog-post">My Blog Post</a>

See also: Wordpress Codex: the_permalink().

the_content()

The main editing window in a Wordpress post editing screen isn’t labeled, but it is referred to as the “content” field throughout Wordpress. Remember that Wordpress automatically wraps paragraphs in <p> tags, inserts <br /> tags for soft returns, and may add classes to images that appears in the content field.

<?php 
	the_content(); 			// echoes "<p>Today I had a chicken sandwich.</p>"
?>

If you’re interested in automatically splitting your posts into shorter and longer versions, read up on the “Read More” option in the codex: Wordpress Codex: the_content().

the_date() and the_time()

These two functions are a lot like the native PHP date() and time() functions, but they refer to the date/time that each post was published. You have extensive control over the syntax and formatting by using different letters for the function parameters.

<?php 
	the_date('Y-m-d', '<h2>', '</h2>');		// echoes "<h2>2011-10-12</h2>"
	the_date('F j, Y');						// echoes "October 12, 2011"
	the_date('F j, Y', '<h2>', '</h2>');	// echoes "<h2>October 12, 2011</h2>"
	the_date('F j, Y', '<h2>', '</h2>', FALSE);	// returns "<h2>October 12, 2011</h2>"
	the_time('d/m/Y \a\t g:i A');			// echoes "10/12/2011 at 10:43 AM"
?>

Note: In Starter Kit, I used the_time() instead of the_date() to output the date of each post. The reason: the_date() is designed to be used in long lists of posts (as on an archive page) where multiple posts might have the same date. The default behavior in this situation is to output the date just once for each group of posts that share that date (this way, dates can be used more logically as headings). This can be useful for that particular kind of archive page, but if you really want to output the date for each and every post, you’re forced to use the_time(), which doesn’t have that bug/feature.

See also: Wordpress Codex: the_date(), Wordpress Codex: the_time() and Wordpress Code: Formatting Date and Time.

Bringing It All Together

If you look at the snippet-post.php file, you’ll see something similar to the code below (which is simplified a bit). It illustrates how these core functions can be used inside HTML to output (with PHP) and structure (with HTML tags) a blog post.

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
			<h3><?php the_time('F j, Y');?></h3>
			<h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
			<?php the_content(); ?>
		<?php endwhile; ?>
		<?php endif; ?>

For each post, then, this will output something like this:

<h3>October 12, 2011</h3>
<h1><a href="http://example.com/news/my-blog-post">My Blog Post</a></h1>
<p>Today I had a chicken sandwich.</p>

Great resource for developers that want their designs to work

CanIUse.com

Cheat Sheet: PHP Functions

Functions are a very powerful tool in PHP that help you follow the “DRY” rule of programming: Don’t Repeat Yourself. Functions essentially let you use and construct self-contained actions that can be executed multiple times throughout your page or your website. Think of a function as a little factory: you give some input, and the function “returns” some output to you. As long as you know what the function does, you don’t need to worry about its particular internal mechanics — and you won’t see the process — each time you run it.

Here are three things to remember about functions:

  1. Functions can output information into your document (if they use an echo or print statement), but more often they just return information. “Returning” the info allows it to be stored in a variable of your choosing, but it does NOT echo it. It’s mainly an issue of control: when a function returns a value, you can store itin a variable and manipulate it further before you decide to echo it.
  2. Some functions require one or more inputs (aka “parameters” or “arguments”) to work, and behave differently depending on what you input. Other functions don’t need any input. Still others make the input optional and use a default value if you don’t specify one.
  3. Some functions are native to the PHP processor, but you can also define your own. To do so, use the word function, your function name (with parentheses), and then curly braces specifying what should happen with whatever inputs are provided. See “Defining your Own Functions” below for an example.

Running Functions

PHP functions can be recognized by the syntax function_name() or function_name ("some input"); the parentheses are the place we insert our parameters, if any. The date() function, built-into PHP, uses the server clock to look up the current date and return whatever it is to the PHP process. date() accepts a letter of the alphabet so that you can choose what part of the current date — and in what format — you want the function to return a value. (It’s hard to remember which letter input retreives which output — most people just look up the answer on this PHP.net reference page).

A small number of functions can be run without storing their returned output. The classic example is echo, which takes as its input whatever string you want to appear in the web page:

<?php
	$my_message = "Hello World"
	echo ($my_message); // outputs "Hello World" on the web page.
?>

Another example is date_default_timezone_set, which takes a location string as its argument and alters the time zone setting for subsequent PHP code:

bc(brush: php). date_default_timezone_set(‘America/Chicago’); // doesn’t echo anything, but any date or time function run after this will be according Central Time
?>

But more common are functions designed to have their returned values stored in variables that we create:

<?php
	$this_month_ = date('F'); // stores something like "February" in $this_month
	$this_year = date('Y'); // stores something like "2012" in $this_year 
?>

Some functions take multiple variables as their arguments. In these cases, you need to be sure to input them in the correct order. Let’s use the substr function (“sub-string”), which needs to know both what the string is and how much of it you want in order to return a sub-string. When you look up the instructions, you’ll see you can specify (1) the string, (2) the position of the first character you want, and (3) how many characters to include from that point.

<?php
	$string = "apples";
	$segment1 = substr($string, 1, 3);  // returns and stores "ppl"
	$segment2 = substr($string, 0, 5);  // returns and stores "apple"
?>

Defining Your Own Functions

Functions are possibly easier to understand when you define your own, rather than using one of PHP built-in functions. Here are some things to keep in mind:

  1. You only need to define your function once, and it doesn’t matter where in your web page you do so: code written before or after the function definition can “call” that function and it will work. The function does need to be defined on the same page on which it is called, but you can use a PHP include: you will often see an something like include ('site-functions.php') at the top or bottom of a page, and the site-functions.php file will be used to store every function that the site might need.
  2. Functions that take parameters/arguments need to be written like math formulas, where those parameters are variables: in other words, you need to abstract as much of the logic so that the function can be given different values and always return a different result that is correct for those inputs. See the example below:
<?php
	// define the average_these_numbers function, which requires two arguments
	function average_these_numbers($number1, $number2) {
		$sum = $number1 + $number2;
		$average = $sum/2;
		return $average;
	}
?>

The code above creates and defines how the function will work (note the reserved word function at the beginning), so it only needs to be done once. Once defined, that function can be run repeatedly on different number pairs:

<?php
	$avg = average_these_numbers(4, 8);  // returns and stores 6
	$avg = average_these_numbers(10, 20); // returns and stores 15
	$first_number = 4;
	$second_number = 16;
	$avg = average_these_numbers($first_number, $second_number); // returns and stores 10
?>

Note that in the last example, the inputs were first stored in scalar variables and then passed as inputs to the function. And notice that we did not have to use $number1 and $number2 as our variable names. Yes, we happened to use $number1 and $number2 within the function definition, but once defined, we can run the function by passing any two values to it, and the function will always treat the first input as $number1 and the second input as $number2. The fact that we passed in our parameters using $first_number and second_number when running the function is no problem.

Hopefully this makes some intuitive sense — it has to do with the “scope” of the variables we are using at each stage. You can read more about variable scope on the PHP.net site.