Category Archives: webdev

Temporarily use a blog page as your front page

I wanted to temporarily redirect people who browse to www.keynote.org to the page www.keynote.org/donate.  Since this is a WordPress site, I should have been able to easily do this by logging into the dashboard and going to Settings – Reading and changing the static front page to the Donate page.  For some reason, the Donate page wasn’t rendering properly, even though the page looked fine when it wasn’t set as the front page.

Rather than take the time to figure out what is going on in the WordPress processing, I added the following line to the .htaccess file after “RewriteBase /”:

RewriteRule ^$ http://www.keynote.org/donate [L]

This matches any browser requests that don’t have anything after the hostname and redirects them to /donate. It seems to be working well so far.

Communicate your message through a custom 404 error page

Mars Hill 404

I love the idea of using a custom  error page to communicate the gospel — I wish I were that creative!  Above is the 404 page that you used to get from Mars Hill Church.

Think about ways that you can use your 404 page to educate, encourage, or entertain.  Hopefully your site is organized well enough that people won’t see the page often, but they will eventually — it might as well be a positive experience!

Depending on how you’re hosting your web site, there are different ways to customize your error pages.  If you’re using WordPress, your theme might have a custom 404 page template as described here.  If you’ve coded your site manually, your web host might have a control panel to edit error pages, or you can point to custom error pages via your .htaccess file.  The web host 1and1 shows how to use the .htaccess file here.

 

1and1 upload_max_filesize problem

This is one of those frustrating stories for a tech, where you bang your head against a problem for a few hours, finally fix it, then try to break it again to document it and it doesn’t behave the way you expect.  But it’s still working, so maybe it will still help someone else…

I was trying to upload a 4 MB photo to my WordPress 3.4.2 site hosted at 1&1, and the uploader told me that it was too big — that the maximum upload file size was set to 2 MB in php.ini.  It doesn’t appear that 1&1 gives me access to the main php.ini, so I tried to add one to the root folder and/or the wp-admin folder of my WordPress installation.  Neither seemed to work, but I eventually figured out that I needed the file in the wp-admin folder and I needed to log out and back into the WordPress dashboard.  Here’s the simple php.ini that I added to the wp-admin folder:

upload_max_filesize = 10M
post_max_size = 10M

What was extra frustrating was what happened when I removed the php.ini to document this: instead of going back to 2 MB, the maximum upload size went to 8 MB.  That’s bigger than I needed, and if it had started that way I wouldn’t have had to go through all of this.  I can’t explain it!

Creating an on demand version of your Wowza recording for iOS and browser viewing

After recording a live stream with Wowza, it was not as simple as I thought to make the recording available for on demand viewing in a way that works for browsers and iOS devices.  I moved the recording to my S3 bucket and was trying to make it available via CloudFront.

After much trial and error, the solution had two parts:

1. Convert the file from flv to mp4.  I used AVS Video Editor with custom file settings to get an H.264 file with “mp4 iso v.2”

2. Serve up the file with a jwplayer playlist that contains two sources: an rtmp source from a CloudFront streaming distribution for browsers, and an http source from a CloudFront download distribution for iOS devices.  Here is some example code:

<div id='player_9465'></div>
<script type='text/javascript'>
  jwplayer('player_9465').setup({
	playlist: [{
	        image: "images/screenshot.jpg",
	        sources: [{ 
	            file: "rtmp://s1234567890123.cloudfront.net/cfx/st/filename.mp4"
	        },{
	            file: "http://d1234567890123.cloudfront.net/filename.mp4"
	        }]
	    }],				    
	width: "480",
    height: "360"
  });
</script>

Error hosting facebook app on 1and1

facebook error

I was creating a facebook app and trying to host the canvas URL on my 1and1 hosting account.  Even though I could browse directly to the index.html and it would render fine, I would get an error when trying to browse to it via apps.facebook.com.

“Method Not Allowed.  The requested method POST is not allowed for the URL …”

Although I have not encountered this problem on other web hosts, it appears that 1and1’s web server is set up a little differently.  When you browse to the canvas page via apps.facebook.com, facebook sends some POST variables to your site.  1and1 doesn’t allow an html file to render when POST variables are sent.

A simple workaround is to rename your index.html to index.php. That makes 1and1 think that the POST variables are expected.

DotNetNuke Active Directory Login Error

DotNetNukeThanks to some people on the DNN Forums, I discovered that the Windows login error “Login Failed. Please remember that passwords are case sensitive” can also mean “you typed your Windows password correctly, but it’s shorter than the DNN default minimum password length of 7”.

The situation was confusing, because some people could log in with their Windows credentials, but others couldn’t.

Either ask your user to change their password to something at least 7 characters long (which is obviously the right way to go), or change the default minimum password length in web.config.  The parameter there is “minRequiredPasswordLength”.

Customizing the DotNetNuke login page

I’ve been wanting to change some things about how our DotNetNuke Intranet site’s login page works, so here’s my record of what I did.  I’m mainly writing this so that I’ll be able to reproduce it when I need to.

The default login page is shown at left.  I don’t like how the buttons are stacked, I’d like to add some hints for users about how to use the Windows Login, and I’d ideally like people to be able to hit <enter> when they’re using Windows Login.  I doubt I’ll figure that last one out before publishing this post.  Right now, you can hit <enter> when using the Standard login, but hitting <enter> with Windows Login causes a “Login failed” message.  I’m guessing that the <enter> is triggering a hidden Standard login button instead of the visible Windows login button.

Step 1: Create a new login page so that other content can be added more easily

Following the tips at dnngallery.net, I created a new page, added the Account Login module, and changed the Site Settings so that this page is the Login Page for the site.

Step 2: Reformat the login module

Since we’re allowing Standard and Windows logins, we need to edit two different Login.ascx files: one in DesktopModules\AuthenticationServices\DNN, and one in AuthenticationServices\ActiveDirectory.  I changed the table width to 240, aligned the Windows login parts to the left to match the Standard login, and added helptext = “” to the labels to get rid of the little help icons (I found that tip here).

I also wanted it to be more obvious when someone clicked on Windows Login, so I edited AuthenticationServices\ActiveDirectory\App_LocalResources\Login.ascx.resx to change the label on the User Name box to “Keynote User Name” and the label on the button to “Windows Login”.

Step 3: Add other content to the page

I added a text/html module to the page with some login tips.

Here’s the final result:

JW Player, Amazon Cloudfront, and playlists

[update: JW Player has some nice instructions on how to use the player with CloudFront.  But it doesn’t clarify the interaction with playlists…]

I have some flv videos that I need to make available to our staff, and I don’t want to put them on a public site like YouTube.  I’m new at hosting streaming videos, and didn’t realize that people won’t be able to skip around in the video unless the server supports RTMP streaming or you figure out “PHP fake streaming”.

Then I found that Amazon CloudFront supports RTMP.  It’s pretty easy to set it up, until I started working with playlists.  I wanted people to be able to choose between four different videos in a single player.  It took quite a bit of experimentation to get the configuration parameters correct.  Here are the steps:

  1. Sign up for Amazon Simple Storage Service (S3), create a “bucket”, and upload your flv videos.  Set the permissions on the files to allow everyone to open/download.  I also created a folder called “videos” to keep things organized.  Let’s assume that we have “video1.flv” and “video2.flv” in the folder “videos”.  These files can be accessed with links like
    http://s3.amazonaws.com/bucketname/videos/video1.flv
  2. Get the JW Player and upload the files to your S3 bucket.  I put them in a folder called “player”.
  3. Sign up for Amazon Cloudfront from the AWS console and create a Distribution, Delivery Method = Streaming, that points to your S3 bucket.  Your distribution will have a domain name like s1234567890123.cloudfront.net.
  4. At this point you can test everything by using the JW Player Setup Wizard.  Change height and width in “Embed parameters” to match your video.  Change file in “File properties” to “videos/video1.flv”.  Change streamer in “External Communication” to “rtmp://s1234567890123.cloudfront.net/cfx/st” (note the added “cfx/st”.  Now you should be able to click the Update/Preview link and try out your settings.  The code can be copied into an html file (like “cloudtest.html”), the html uploaded into the player folder, and then you can browse to
    http://s3.amazonaws.com/bucketname/player/cloudtest.html

    for the next test.

The next step is to build a playlist file that will let people choose from several videos.  The JW Player documentation here shows that you can choose from several XML feed formats.  I threw a dart at the wall and chose ATOM.  The only information that I wanted to include was the video title and the URL to the flv file.  The trick is figuring out what pieces of the RTMP path, file path, and file name go in what places.

Here’s what worked for me.  The folder and file name go into the playlist file, along with the “provider” type of rtmp:

The Amazon CloudFront RTMP path goes into the player configuration in your html file:

Note some other aspects of the html:  the height needs to be increased to make room for the playlist.  Also, the full path to the playlist needs to be specified.

Hopefully this will help you work through the process faster than I did!

Build an iPhone App with PhoneGap

Here’s a great video from Jonathan Stark, showing how you can turn a web app into a native iPhone app with the free tool PhoneGap. When combined with jQTouch, the jQuery plugin for mobile web development, you have a complete system for building native apps for various mobile platforms, all from html, css, and javascript.

PhoneGap supports iPhone, Android, Blackberry, Symbian, and Palm!

Cloud Computing Free?

The May issue of Communications of the ACM contained a very interesting article called “Why Cloud Computing Will Never Be Free”.  It sometimes reads like an ad for the service that the author’s company offers, but it’s still an in-depth presentation of why the cloud computing price war has resulted in services that cut corners.  Buyers beware!