I’m not as wowed by the Twenty Eleven theme. I like the idea of a new theme a year but I’ll wait til Twenty Twelve, thank you very much.

I’ve been fairly successful at doing this with WordPress 2.x. The new version seems to be a somewhat different story. My typical method of duplication is to:

1. Copy the site folder from on location to another
2. Copy the MySQL database with the following changes:
   1. Change references from www to my local MAMP server (www.wellys.com to wellys.com:8888)
   2. Change file location references as well (/Home/Username to /Users/Shared)
   3. Change the wp-config file for the proper local information

Not this time with 3.0:

1. The Header didn’t change to my custom header
2. The menus didn’t change to my custom menus

So far (cross fingers) those two items seem to be the only issues. Mmmm. I hate it when this happens.

UPDATE:

1. The image for my header was in my media uploads folder but it wasn’t available to use for the twentyten theme (the twentyten theme only pulls images from your system and not from the media library). So I had to delete the image from my media library then reload it in the theme loader… sigh.
2. The menus were setup but not enabled. I simply had to choose the menu in the theme menu settings then save menus and I was up to speed. That was nice.

UPDATE (again):

1. In the past, I typically just reloaded the MySQL tables to ensure the two blogs were identical, this isn’t as easy. Instead, I have the same two issues happening again AND I’m starting to get pingbacks from my own site. This is getting to be a nasty mess.

UPDATE (June 5, 2011)

I attempted this again and it really is pretty easy. The specific directions are:

1. Export the online wellysblog db into a SQL file.
2. Use Textmate to replace all” www.domain.com” to “domain.com:8888″ and  ”/home/username/” to “/Users/Shared/” [I use my Shared directory on my Mac for my local websites. Your location may vary.]
3. To reset the header image, go to Appearance – Header – Upload Image and use the Choose File area to reselect the desired header image then click Upload. [The db has the right link but it doesn't load, I do this to ensure it loads my image.]
4. To reset the menus, make sure the Theme Locations Primary Navigation is set properly. Appearance – Menus – Theme Locations – Primary Navigation should be set to Categories. [Mine is Categories, set it to what you use.]
5. Test!

As for the pingbacks, that is a necessary evil, I’ll deal with later.

Hype is a OS X application that makes it easy to create dynamic websites using HTML5 or more accurately, HTML5, Javascript and CSS3. Hype works. It is also version 1.0 so it is basic but it works, doesn’t crash and holds great promise.

I’ve been attempting to change my WELLINGTON ROAD Pictures site from a database-driven, somewhat static site to a bit more dynamic, HTML5-based site for sometime. See here, here, here, here and here. Sigh, note the last time I attempted to make changes was almost 9 months ago.

I read about Hype, paid my $29.99 and dove in. The first thing I did was try to create an identical version of my current site. Yeah, that was easy but it was also clear that my database approach to my current layout was far superior. With my current layout, when I create a new film, I upload a poster jpeg, my film and add another line to the database. No coding required. Also somewhat boring from a design perspective.

With Hype, I needed to duplicate a new scene (think web page) for each film. And I would have to embed the Notes and Time text on each page. The management overhead is considerably more using the Hype approach. The extra steps make sense for I am duplicating a static site with a content creator for dynamic sites.

What would be required if I went to a more dynamic design? My mental image of a dynamic WRP site would be to use a film metaphor. I wanted to represent each film by a frame in a film strip. I would have a limited number of films showing and the user would move the film forward or backward to see additional films. Click on a frame would show the film using HTML5 video playback with its most important attribute, play full-screen.

So I started anew with Hype. Using a film strip image, I created 4 scenes, each with a filmstrip of four films and I added very simple text buttons to indicate forward, backward and home. It was quite simple to add transitions to make the filmstrip look like it was going from left to right and right to left for forward and backward, respectively. The crossfade transition also looked nice for showing the film. Hype did advise me that the transitions were only available in Webkit browsers (Safari, Chrome) as Opera and Firefox had yet to implement them. Hype also advised me that only Safari and IE would show the H.264 forms of my films and I would have to use WebM or Theora encoding to have them play in Opera, Firefox or Chrome. [Ed. note: The 1990's are calling and they want their browser incompatibilities back.] It worked and it took about 2 hours worth of work. Not bad!

My review of Hype:

Ease of Use: Excellent! I did read over the manual quite quickly to gain an overview of how Hype worked. I also watched the first tutorial. So maybe 10 minutes of preparation. I quickly created a basic website than went to creating a dynamic website in 30 minutes. The design guides work well and the inspector mode continues to be an excellent method of managing metadata. With my site design, I had a significant amount of duplication of scenes. Copying elements from one scene across to the other scenes worked well and accelerated my development. Speed of  development and ease of use is where Hype shines.

Power: How much can one do with Hype? Quite a bit and not enough. I am an intermediate when it comes to web design, a neophyte in HTML5 and a non-starter in Javascript. So having the ability to quickly mockup a dynamic site with user actions moving from scene to scene was quite liberating. Hype  can and will be a good replacement for Flash beginners. Instead of learning Flash and creating proprietary websites that break the internet, one can create HTML5/Javascript/CSS3 sites that break the internet. Yes, this is the problem with Hype.

Hype creates a single webpage that then using dynamic properties to display new content. It works pretty well but it does break the concept of using a specific address for specific content. I thought that my previous design had this fatal flaw as well but one can right click on any movie to obtain the link to showing the specific film. What is also nice is that the specific page does show the film using the HTML5 Video tag, which means it will allow playback in fullscreen. Hype can not provide this level of specificity. Its as bad as Flash. Bummer. While this is a show-stopper for my site, I’ll continue to comment on Hype.

An issue I had with Hype was global changes. I didn’t see a method of making a global change to all selected scenes. I wasn’t able to select more than one scene then applying a change to all. There is a complete lack of contextual changes. Quite often, I would right click to see if there was something I could do to an element. Nope. No response.

Website: Not so much. Due to Hype’s use of creating one “page” which changes dynamically, ALL content resides in Hype’s folder. For my site, this created a 675MB upload and a duplication of all of my movie and image content. What I could have done was hand edited the Javascript file and changed all of the references to those inside the folder to the pre-existing content on my site. This isn’t a deal-killer. I think a simple property that allows one to enter the address of the content would make this problem go away fast. Version 1.1 perhaps?

Summary: I like Hype. It is easy to use, provides extremely fast prototyping and can be quite powerful using web standards. [Ed. note: I'm not even going to check if it provides validates. I mean technology that is standardized for the web as compared to Flash which is proprietary.] It does break the web so I’m not going to use it for WELLINGTON ROAD Pictures but I will use it to test out concepts. I think it would be fantastic for a class in learning about dynamic websites. I look forward to version 3.

Step 4

One update and one non-update:

Update; looks like H.264 is getting to be the standard for video.  Based on the MPEG LA announcement, H.264 will be forever free if the video being served is free. Due to this announcement, I’m going to focus on serving H.264 only and forget about…

The non-update: Jillion is running out of August. Its August 28th and no sign of their sublime video code. When it shows up, I’ll take a look until then I’m off to do my own thing.

Update: I went ahead and implemented Shadowbox again. I like the way it works, I don’t like that it doesn’t use the new HTML video selector. The new one in Safari has a much nicer controller and the ability to go full size. Jilion, Ferris Jilion?

The site looks very similar to the original site. I made some changes such as the WELLINGTON ROAD Pictures graphic, font colors and spacing. What was interesting was I have yet to use an ID or Class. Everything works semantically, when I need to reference an element, I use the a descendent selector i.e. “nav li” as compared to a “div class=nav and li class=navli”. It is a much simpler way to develop CSS.

Step 3

Update: Just realized that the “wrapper” for the site, which was a <div> then became an id for <body>, isn’t needed. I can use <body> as my wrapper, which means there aren’t any id’s or class’ in the file at all. Not sure if this is right or wrong or works, just is.

So how did my next iteration work? Not bad, as you can see in Step 2b, the site is starting to resemble my current site. I have a poster image that links to a video when clicked. The time is in the right place and I need to update notes.

Note on notes: It is properly formatted as an “aside” and I’d like to make the site more friendly by using JS to display the notes on the page as compared to going to another page.

Step 2b

As I remake the site, I need to determine if Jilion is something I should consider. They claim to make a great cross-browser, HTML5 compliant, video player. Mmmmm. (and based on comments by one of my favorites; John Gruber/Daring Fireball, it is the “bee’s knees” (my words, not his).

My next step is to explore video playback within one of the articles. I’ll start with Safari using only the video tag then explore other fallback alternatives for other browsers. I believe this will require multiple sub-steps hence Step 2a, 2b, 2c and so on.

Step 2a – clearly not an option, the video takes up 2 columns and 2 rows immediately, probably will need to use JS to create a similar effect to the shadowbox I use today

From the graphic, you can see its a very simple layout; navigation, header,  rows of three articles and a footer. Each article has a title(h1), a comment(p) and notes(aside).

I’m going to start off from scratch, building the file first using HTML5 then adding CSS3 to create an identical gray box site. This allows me to create the site without the complexity of the exact content.

Each version will continue to exist and I will add versioning as I go.

Step 1

I’ve two books on HTML5; HTML5 for Web Designers/Jeremy Keith and HTML5/Bruce Lawson and Remy Sharp. Both are excellent for providing an understanding of the why along with the how.

I look forward to similar texts on CSS3.

OK! Let’s get this party started!

Far easier said then done.

I started with MAMP. I wanted to have a complete server environment that is well supported by the community and was easy to maintain. I felt that MAMP met these goals better than going with the native OS X web environment. Apple hasn’t been the best at offering the latest stable release of Apache, MySQL (in fact, not supported at all) and PHP. MAMP offered all three plus PHPMyAdmin (handy at times) and a smattering of additional goodness.

Using Sequel Pro (a fantastic, freeware MySQL GUI), I was able to create the databases required for my films and WordPress.  [A quick plug for Sequel Pro, they took the very nice code from CocoaMySQL and created a phenomenal tool. Well worth free, I gave them $50 for my copy, please donate if you can.]

Changing the link references from my hosted version to a MAMP version wasn’t hard. Unfortunately, I wasn’t thinking clearly. Having a blank PHP page tends to do that… All the errors were mine. (Remember to put a closing slash on a directory link and MAMP references require a port number.)

The hard part was duplicating WordPress. I finally kludged it by creating a fresh install of WP on MAMP then hand editing the WP database links to match my MAMP configuration.  It’s working now but I’m worried about my first upgrade. I also had to go through my site and switch all references to a .com site to the localhost (MAMP) site.

But at an absurdly high level to create a local WP site from a working hosted site:

1. Install MAMP
2. Fresh install WP onto MAMP site
3. Copy the wp-content folder from the hosted site to the MAMP site
4. Export the hosted WP MySQL database and import it into the MAMP MySQL database
5. Hand edit the links in the “-options” table to match those required for the MAMP site (remember to edit the uploads option as well)
6. Test. I turned off my wireless so I knew I was only local.

As soon as I finish this post, I’ll need to figure out how I’m going to duplicate this entry locally. I have two options, one, I could copy the text from my post page into the post page on the local site or two, export the hosted MySQL db and import it in to my local site. The latter would require me to hand edit the options page again. (or I could try keeping it the same). Mmmmmm.

UPDATE: Using two tabs on my browser, it took 30 seconds to duplicate the entry. Copy/Paste, Copy/Paste, click, click, click. That wasn’t so bad!

UPDATE July 8th, 2010: As I migrated to WordPress 3.0 locally (went from 2.84 to 3.0), I needed to reacquaint myself with using WordPress locally. Here are the directions in greater detail in updating WordPress locally (this is a personalization of the detailed upgrade installation on the WordPress Codex):

1. Backup MySQL database using Sequel Pro; File – Export – MySQL Dump (select all tables and make sure Drop Table, Create Table and Add Table Content are all selected. Use this backup to create backup MySQL database for the backup old installation, I called it oldBackup. Use the Database Administration part of Sequel Pro to create a new database then Import the dump.
2. Duplicate the oldblog directory using Finder – Duplicate then rename i.e; “oldblog28”
3. Verify new site works by doing the following:
   • Export only the wrp_options table using Sequel Pro
   • Using Textmate, change all references of the blog directory to the new name i.e; oldblog to oldblog28 and (if necessary) make sure all www references are changed to local i.e; wellys.com:8888 to wellys.com:8888 (this is for MAMP running WordPress locally)
   • In the oldblog28 wp-config file, change the name of the database to oldBackup
   • Load the new site into Safari and confirm links are pointing to the new directory, browse the site a bit to ensure it is a fully working backup.
4. Back to the site being updated, deactivate ALL plugins.
5. Download and extract the new WordPress package.
6. On the old site, save the following:
   • wp-config.php
   • wp-content folder but delete wp-content/cache and wp-content/plugins/widgets
   • wp-images (not found in oldblog)
7. Open two windows in Finder and delete all files but the above 6 a-c. Move the new WordPress files over to the old directory. Using this method, you can methodically ensure you are updating/replacing all of the files. I had a little bit of work in the wp-content folder, making sure I didn’t delete any changes I had made to my blog.
8. Log back into the blog and it should upgrade the database and site automatically. If unclear, go to: oldblog/wp-admin/upgrade.php
9. Update .htaccess file if necessary (not necessary as of July 8, 2010)
10. Install updated Plugins and Themes.
11. Reactivate Plugins
12. Add security key definitions to the wp-config.php file
13. Review what has changed in WordPress.

NOTE: Based on information from http://www.chrisabernethy.com/why-wordpress-asks-connection-info/, I changed the ownership of the oldblog to _www using: sudo chown -R _www oldblog