LuxFX / They Think They’re Newsworthy

Ok, now for a technical post! I got a question a few days ago about how I do a few tricks in this MT blog, like thisSorry Trav, I wasn’t ignoring you! Sorry it took so long to post…..

If you’re interested, read on. Bust since most people will have a hard time staying awake/interested when reading this, I’ll keep it off the main page. But if you are interested in MT, CSS, or PHP, this might be a good read! (It’s not like I know if it is or not, it isn’t written yet!)

Travis posted a few questions a few days ago in a comment to an earlier post. I’ll start with answering the more general questions and will get more detailed from there:

1. Installing MT
Use Apache instead of IIS. It’s free, open source, has a ton of modules/extensions, is more secure, etc. etc. etc.

First off, I wouldn’t recommend using IIS unless you really really felt the need to run ASP. And you don’t, believe me. PHP is, in my opinion, superior in every way. It’s easy to learn, easy to use, and extremely powerful. I do have to use ASP every now and then, and it always ends up pissing me off because some things are just two or three times as complicated to do in ASP than in PHP — such as sending email. I don’t want to have to create an ADO object to send email! In PHP, there is simply a ‘mail()’ function. Easy!

Note: if you really, really want ASP you can get it with Apache anyway, through a Perl interpreter. I’ve never tried it, but it sounds like a good option if you really need it.

Second, you’ll have to have PHP anyway for MoveableType (as far as I know), and PHP integrates into Apache much better than IIS. In IIS, PHP is basically routed through the CGI extensions. In Apache, PHP plugs in directly as a module. There are many advantages, but bottom line is it’s much faster this way.

And finally, in Apache you can use things like .htaccess and ModWrite. But that’s another topic. I’ll save that for later, but look it up if you’re interested. In the meantime, trust me that you want these things. They are extremely cool, and as far as I know, unavailable in IIS.

2. Mail settings
Not exactly my range of expertise, but I would say check the php.ini file in your Windows or Windows/System32 directory (replace “Windows” for whatever directory your windows installation is in). Linux servers use an application called ’sendmail’ for email, and I can’t remember or not, but this might be included in your PHP or Apache installation on Windows. This is what the email setting in php.ini must point to. If your mail isn’t working, it might be that this is pointing to the wrong place, or you just don’t have the right component installed.

3. Making links
Links are formed with a basic HTML tag known as either the “A” tag or “Anchor” tag. It looks like this:

<A HREF=”http://www.luxfx.com”>They Think They’re Newsworthy</A>

With the ‘A’ tag, the enclosed text is the visible text of the link. In the above example, I use the name of my cartoon. The only parameter I’ve included above is the HREF parameter, which simply defines the destination of the link. This can be absolute, like “http://www.luxfx.com/journal/index.html”, or a relative location to the parent document. So if a document at http://www.luxfx.com/index.html was referring to the document at http://www.luxfx.com/journal/index.html, it could use the relative link “journal/index.html”.

Multiple parameters are seperated by spaces, and use this structure: parameter name, equals sign ‘=’, parameter value. The value doesn’t always have to be enclosed in quotation marks, but it’s a good idea. In XML, which is a closely related markup language that HTML is slowly moving towards, the quotations are required. So go ahead and use them, and get used to them.

I could write a book on HTML, as many have done before me, so I’ll stop here before I get out of hand.

4. Editing MT Templates
Is there a simple way to edit template and the styles.css file with a preview? I wish. But no. The best you can do is copy and paste the template from the edit box in the browser into a program that will at least format the code for you and allow you to use the tab key. These are known as programmers editors, and they’re basically just vamped up versions of Notepad. For some time now I’ve used one called EditPlus, but EditPad Pro is also very nice. You can also try more HTML-specific editors like 1st Page 2000, which is actually 100% free! (the others I mentioned are shareware and nag you for registration). There must be a million others that are also nice. Lately I’ve also been using Dreamweaver MX2004, which has turned into a very nice code editor, but it’s far from free.

But unfortunately, you can’t see any type of preview for the MT files. This is because the MT templates are designed to be parsed by the backend scripts before generating the blog pages. This means that it’s full of non-HTML code that only makes sense to the MT code. There’s really no other way of doing it. Any dynamically generated page will have the same issues, because the page is meant to be processed before being displayed. When you’re developing dynamic pages, it’s a good idea (if you’re anything other than a seasoned expert) to develop them first in plain, static HTML, and then break that apart into a dynamically generated page. But with third-party applications like MT, you’re stuck developing code the hard way, through trial and error. It’s no fun.

5. Popup text trick
Ah, now we’re getting into the good stuff. This trick uses a combination of Javascript, DOM, and CSS. Whew! Now Travis, you said you are edging your way in instead of going straight into hard coding? Too bad, in you go.

First off, definately check out W3 Schools, which is a great place to learn HTML, Javascript, DOM (Document Object Model), and CSS (Cascading Style Sheets). It gives you lots of information, and even the ability to play with some examples yourself.

Now, HTML you know about. Javascript is a scripting method used in HTML pages, and can be hooked onto HTML tags. For instance, you can trigger javascript from an Anchor tag, whenever the user moves the mouse over the tag, to change the status text as the bottom of the browser (which normally displays the destination of the link). DOM is a method of accessing the structure of the HTML page through the script. CSS is a very powerful and very cool way to define the way something looks. I can’t go into very much description for any of these here without writing chapters and chapters, so remember to check out W3 Schools….

CSS takes special advantage of two otherwise neglected HTML tags, DIV and SPAN. Without CSS, neither of these tags really did much. They didn’t make anything bold, italics, or underlined. They didn’t link to anything. They didn’t pull up images of Flash files or anything. They basically existed only to provide structure in the document. The DIV tag was the only one that did anything — it made sure that its contents were on their own line. Kind of like a paragraph tag, but instead of a douple space at the end, it is a single space like the line-break tag.

But because they didn’t do anything special, they were the perfect container for CSS styles. If you want to make the text inside a SPAN tag bold, you did it like this:

<SPAN STYLE=”font-weight: bold; “>bold text in here</SPAN>

It’s not as small as a simple bold tag (<B>bold text in here</B>), but it is in the end much more powerful. In CSS you can describe padding and margins around an object, borders, fonts, bold, italic, small-caps, positioning, visibility, and on and on and on. You can also redefine or refine existing HTML tags. Plus, you can pre-define groups of style settings into classes, which can be applied to any tag. So if you’re using a style that sets 30 different attributes multiple places on a page, you can instead define it at the top of the page as a class, and just say CLASS=myStyle in the tags it is used in. And what’s even better is that all of this can also be saved into external files. This means you can create one style sheet (a .css file), and import it into every one of your HTML files for a site. Then, when you need to change, say, the color of a link — all you have to do is update the one .css file, and all of the HTML files that uses that style will be updated. Incidently, the code used to create the above quote box looks like this:

<DIV CLASS=quotes><SPAN STYLE=”font-weight: bold; “>bold text in here</SPAN></DIV>

.quotes   {
		font-family: georgia, times new roman, serif;
		background-color: #152B33;
		color: #E1E4BD;
		font-weight: normal;
		border: ridge 2px #1C3038;
		margin: 16px 50px 16px 50px;
		padding: 10px;
	}

Now, by the time the users sees it, the popup looks like thisHere is the hidden text, made visible.. But the code behind it looks like this:

Now, by the time the users sees it, the popup
<SPAN CLASS=hiddenKey
     onmouseover=”Show(’msgPopup’)”
     onmouseout=”Hide(’msgPopup’)”>
looks like this</SPAN>
<SPAN CLASS=hiddenArea
     ID=msgPopup>
Here is the hidden text, made visible.</SPAN>.

The first SPAN tag, which uses the CSS style ‘hiddenKey’, describes the rollover text. I normally use an asterisk, but it can be anything. The second SPAN, which uses the CSS style ‘hiddenArea’ is the text that is hidden. It’s there all along, but is set to be invisible. Here is the CSS for these two styles:

.hiddenKey {
		color: #FF0;
	}

.hiddenArea {
		font-family: georgia, times new roman, serif;
		background-color: #152B33;
		color: #E1E4BD;
		font-weight: normal;
		border: ridge 2px #1C3038;
		margin: 16px 50px 16px 50px;
		padding: 10px;
		display: none;
	}

The trick to it all is that last line. “display: none; ” means that not only is the text invisible, but it doesn’t take up any space, either! You could just as easily define it with “visibility: hidden;” instead, which would render it invisible, but it would still take up space and there would be an awkward gap in the page. But now the question is, how do you make it visible?

Take another look at the first SPAN tag. There are two extra parameters: “onmouseover” and “onmouseout”, both of which call javascript functions. These parameters define what javascript to run whenever the users rolls over or rolls out of the tag with the mouse. onmouseover calls “Show(’msgPopup’)” and onmouseout calls “Hide(’msgPopup’)”. But what does this mean? Well first off these are custom functions, not functions built into javascript, so don’t get confused. You can also see that each function passes one parameter, ‘msgPopup’. What is ‘msgPopup’? It’s the ID of the second SPAN. Any tag can have an ID, it’s how a tag can be uniquely identified, and is especially handy with DOM.

Let’s take a look at the Show and Hide javascript functions. These functions are included in an external .js file, which is included in the basic MT “Main Index” template. It’s very simple:

function Show(itm)
{
	document.getElementById(itm).style.display = ‘block’;
}

function Hide(itm)
{
	document.getElementById(itm).style.display = ‘none’;
}

Remember how I said that the only thing either of them did was that DIV caused itself to appear on a new line? That’s because DIV has a default display setting of ‘block’. SPAN has a default display setting of ‘inline’. You can see this is regular HTML, too. A bold tag is inline, which means it can alter text without causing any line break, and only for the exact space taken up by its content. The P, or Paragraph tag, is different. It causes line breaks before and after itself, and will take up the entire horizontal space it has available. It is literally a block of space on the page, if you consider the page a traditional top-to-bottom document. If you want a great look at the difference between the two, check out these two quote boxes, the second one is set to a display of ‘inline.’

So, by setting the display to ‘block’, I’m doing two things. First, I’m making the area visible again. And second, I am putting it in its own block on the page.

This entry was posted on Tuesday, February 24th, 2004 at 12:26 am and is filed under Web Design. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.