Introducing PHP AutoRun and a CSS Tutorial
I’m making two announcements for the price of one today: One is the completion of my PHP AutoRun System; The second is my first use of the AutoRun system in the making of this “How to Make a CSS Web Site” tutorial. The idea for this goes back at least six months. It took me a while to make it happen because it’s, well, pretty involved, and I’m a busy guy. Finally, though, I have completed this project. I’ll explain here what these two things are all about and maybe get some [hopefully positive] comments and feedback.
PHP AutoRun Presentation and Tutorial System
You’ve seen those tutorials where you go from page-to-page, right? They use JavaScript and all the content is on one page. They’re pretty slick I think. Well, my hope was to make one that used PHP (PHP Hypertext Preprocessor) instead of JavaScript, and to make it even more accessible and nice looking in situations where JavaScript wasn’t supported. I did it! The content isn’t on one page in this case, but it is unlimited, accessible to the best of my knowledge, and easy to use. I know setting it up is a two minute task — I did package it for distribution, but my plan is to actually sell it. I can’t give everything away.
When you visit the site you have two options: Use the AutoRun feature where you enter a page duration in seconds and go through the pages automatically. The other option is to go through the pages manually. It’s the user’s choice; the user is in control. I also designed it to be an intelligent system so it knows where the user is at, and what the user is doing, and provides the proper feedback to the user. It uses cookies. It does have a little bit of JavaScript on the system-embedded Help page to offer users more flexibility in getting back to their last position. I could have done this with PHP, too, but I didn’t. Maybe next version. [Update]
To be truthful, I’m absolutely overjoyed as I think I really pulled it off nicely. I tell you what, though, it wasn’t easy. It was a ton of work just making the system.
My “How to Build a CSS Web Site” Tutorial
The second part, actually using it to make a CSS (Cascading Style Sheet) tutorial, was a big task on its own. I learned the best way to do this is to start with the finished page then work backwards. It was a pain in the butt to be honest, but hopefully the effort put forth was worth it.
This is a twenty page tutorial, not including the Introduction and Summary. It starts the tutorial with a plain, unstyled content-first web page. Step-by-step the user is taken through the process of styling and positioning the page’s elements to make a decent, hack-free, single style sheet web page or template (fixed width, 760 pixels). I think it’s pretty solid. I haven’t tested it on any Mac browsers, but I suspect it’ll be just fine. It’s simple and straightforward so there shouldn’t be any issues. It looks good in Opera, Firefox, and Internet Explorer 6 and 7 using Windows. I didn’t do a screen reader or text browser test, but I don’t think I have to because I was careful to make sure it was accessible and I hopefully already know what the outcome of such testing would be.
If I did a good job maybe it’ll prove to be a good example of how to make a CSS web site and possibly helpful to newer developers just getting into the whole CSS design thing and/or web accessibility.
Here are the links again.
Please tell me what you think. Is it good stuff? 
Elliott Cross responds:
Posted: March 2nd, 2007 at 2:41 pm →
Very nice!
Bravo! I like the simplicity of the CSS tutorial, as it encompasses alot of basic items that pages and sites should have, as well as how to correctly get them functioning.
Good job and thanks for all the hard work!
Cole responds:
Posted: March 2nd, 2007 at 5:14 pm →
Hey Mike
Nice idea - one suggestion might be a drop down list so that people can jump to particular pages from anywhere in the presentation
Cole
Marco responds:
Posted: March 2nd, 2007 at 5:29 pm →
Hey Mike.
Wow! You must have put a great deal of work into this. Very good! I really dig the CSS tutorial!
The AutoRun tool is something different. I haven’t seen anything like this before. Do you think it will be a lot of work to get it completely JavaScript-less? It’s very cool
Mike Cherim responds:
Posted: March 2nd, 2007 at 6:07 pm →
@Elliott: Thanks
@Cole: That’s a good a really idea, even if I just offered it automatically on the Intro and Summary pages it’d be a worthy feature. I did consider it but didn’t follow through with it but I suspect I will be the next build or version. Thanks.
@Marco: I could quite easily. The only JavaScript is used for the back button on the Help page, but as you can see by the link text, the system knows where you came from (using PHP for that), so the scripting is actually already in place. In fact, in hindsight, I don’t know why the heck I just didn’t do that in the first place and remove the JavaScript altogether.
This is now on my list as well.
My punch list, thus far, has three items on it:
Thanks for the feedback guys.
Mike Jolley responds:
Posted: March 2nd, 2007 at 7:20 pm →
Hey Mike, Nice to see you got it finished, well done its great!
Jermayn Parker responds:
Posted: March 5th, 2007 at 9:27 pm →
I have just sent the CSS tutorial to my brother who has just started Tafe and is currently getting taught table styled websites and I am just about to have a look at your php autorun….
Mike Cherim responds:
Posted: March 7th, 2007 at 4:51 pm →
Well, I just did one update on my list. I did two things actually, but only one was on my list. I did away with the
history.go(-1)JavaScript so this application uses no JavaScript whatsoever. It wasn’t needed so I did away with it without affecting functionality. Now that same functionality is available to those who don’t support that language.The second thing I did was offer a “Jump to Content” link. Hopefully it’s cool. It’s just a down-arrow,
↓(↓), with a title attribute.Mike Cherim responds:
Posted: March 11th, 2007 at 8:13 pm →
Update: Well, I did another update. In addition to the complete removal of all JavaScript, I added a dynamic menu of all the pages. This part was hard since the files don’t have zero before the number on pages 1 through 9, the sorting of the array was a challenge. I figured it out, though. I also moved the data line to the top of the page to place it in a better position for certain users. I changed the error line be in the same location. I made a few other changes, all minor stuff. I didn’t change the configuration — didn’t add to it, nor did I remove anything. I did add a file to the motor to handle the navigation. I’m pretty happy with the changes. What do you guys think?
Nuther Update: I modified the styling a bit
David Paul Robinson responds:
Posted: March 29th, 2007 at 12:26 am →
This is great! Thanks so much for putting this together.
Best PHP Books responds:
Posted: November 22nd, 2007 at 9:23 pm →
hey thanks for this tutorial. this was really informative. its gonna save a lot time.
Best of the Beast in 2007 - Beast-Blog.com responds:
Posted: December 23rd, 2007 at 12:19 am →
[…] March: Introducing PHP AutoRun and a CSS Tutorial […]
css tutorial responds:
Posted: June 21st, 2009 at 9:47 pm →
Why is it always a better choice to use external stylesheet file rather than inline styling? Does it matter for saving loading time?
Mike Cherim responds:
Posted: June 23rd, 2009 at 8:22 am →
I agree, an external CSS is better. Easier to edit and make changes if for nothing else. I do use some inline styles in scripts, but I try to make sure it’s valid anyway
Putra Eka responds:
Posted: February 2nd, 2010 at 11:08 am →
It help me so much, thanks for sharing the tutorial