Intro: What is DIV? And what is SPAN?

Quoted from W3C website:

If I may, w3school.com pages here about DIV and here about SPAN summarize these two HTML tags nicely:

• The <DIV> tag defines a division or a section in an HTML document. [It] is often used to group block-elements to format them with styles.
• The <SPAN> tag is used to group inline-elements in a document. [It] provides no visual change by itself.

So both DIV and SPAN are used for grouping. And if you want to know when to use what, check the sample below.

				<p>The following sentence is wrapped in a DIV: <div>Well, <i><b>hello</b> there.</i></div> The previous sentence is wrapped in a DIV.</p>
				<hr />
				<p>The following sentence is wrapped in a SPAN: <span>Well, <i><b>hello</b> there.</i></span> The previous sentence is wrapped in a SPAN.</p>
			

I hope it’s clear to you: DIV will produce a block element (ie. it will be ‘separated’ from the previous and next elements), whereas SPAN will produce an inline element (ie. it will flow together with the previous and next elements). Also note that both tags don’t alter anything inside them, and they don’t make themselves different style-wise—except the line breaks, of course.

So far so good? GOOD! Let’s begin our journey deeper then, shall we

If you haven’t notice, your pictures in Facebook are organized in a grid structure. To be exact: they will be in a four-column grid. And just like the screenshot below (or the real thing here), you can see that it’s very easy to take advantage of this layout. The key is to know how to count. In pixels, that is!

Counting pixels

If you’re the curious type, I’ll show you how I count the pixels. If you’re the what-the-heck-just-give-me-the-money-honey type, then you can skip to the next section. Seriously, I won’t get mad—go ahead!

Alright, let’s get back to business.

My tool of trade in working with websites is Firebug, a must-have Firefox add-on for web developers. With Firebug, I can easily see the size (width and height) of Facebook’s picture thumbnails. Simply right click on it, click ‘Inspect Element’, mouseover on the picture link, and voila! It’s 161px wide and 120px high, as clear as crystal. (NOTE: as of this writing, since Facebook puts the thumbnails as background image, then the size follows the container, ie. the I tag, which is set to 161px by 120px).

Now how about the gap between the thumbs? You can go with the Firebug route (that’s what I did), or you can use any screen ruler (my fave is the free dRuler here). Of course the screen ruler is easier, and you’ll clearly see that the horizontal gap is 20px, and the vertical gap is 18px.

So, if we have 4 columns (of 161px-wide thumbs) with 3 horizontal gaps (of 20px wide), then the maximum picture we can have is just a simple algebra: 4 * 161 + 3 * 20 = 704px. And since we can have as many rows as we want, the maximum height is—well, unlimited! (NOTE: again, as of this writing, looks like Facebook doesn’t limit the number of rows displayed in your picture album. Please correct me if I’m wrong :D).

With all these facts in our hand, we’re all set to create our own Facebook Grid Picture masterpiece!

From pic to gridpic

Let’s recap:

• Thumb size is 161px wide by 120px high.
• Gap between thumbs is 20px horizontally and 18px vertically.
• The maximum picture width we can slice and dice is (better be) 704px.

From here on, you can use any picture editing of your choice. Photoshop is very good, and even Microsoft Paint will could hopefully get the job done (by dragging you to the brink of your mental exhaustion along the way). Speaking of my fave tools, my choice for pic editing is Paint.NET. It’s no Photoshop of course, but it’s as powerful, yet free! And trust me: it’s no Microsoft Paint, in a big time good sense!

With these tools, you simply select a 161px by 120px area → crop/save it away somewhere save → move the selection 20px to the right or 18px down → and repeat. If you’re not that perfectionist, it’s OK to miss a pixel or two… nobody will notice, honest

It’s still too tedious of a job, you say? Don’t worry: behindthecodes.com to the rescue!

behindthecode.com’s fbgridpic tool

With a great pleasure, allow me to direct you to the tool I’ve built for this very purpose. No fancy flashy features here… pardon me for that. With this tool, all you need to do is simply submitting your pic, and the tool will output the grid thumb pics. You just need to save those pics to be uploaded later to your Facebook album. Simple, eh?

The way it works is just the same as doing it manually. With the help of PHP’s GD (image processing) functions, below is the code snippet:

// load pic
$pic = imagecreatefromjpeg($tmp_name);  // NOTE: $tmp_name stores the picture file name
$picwidth = imagesx($pic);
$picheight = imagesy($pic);

// calc grid/size
$colcount = ceil(($picwidth + GAPWIDTH) / (SLICEWIDTH + GAPWIDTH));
$rowcount = ceil(($picheight + GAPHEIGHT) / (SLICEHEIGHT + GAPHEIGHT));

// create grid pics
$gridpic = imagecreatetruecolor(SLICEWIDTH, SLICEHEIGHT);
$white = imagecolorallocate($gridpic, 255, 255, 255);
for ($row = 0, $y = 0; $y < $picheight; $row++, $y += SLICEHEIGHT + GAPHEIGHT) {
	for ($col = 0, $x = 0; $x < $picwidth; $col++, $x += SLICEWIDTH + GAPWIDTH) {
		imagefilledrectangle($gridpic, 0, 0, SLICEWIDTH, SLICEHEIGHT, $white);
		$w = $picwidth - $x;
		$h = $picheight - $y;
		imagecopy($gridpic, $pic, 0, 0, $x, $y,
							$w > SLICEWIDTH ? SLICEWIDTH : $w,
							$h > SLICEHEIGHT ? SLICEHEIGHT : $h);
		$gridname = "tmp/" . $basename . "_" . ($row + 1) . "_" . ($col + 1) . ".jpg";
		imagejpeg($gridpic, $gridname);
		echo '<img src="' . $gridname . '" />';
	}
	echo "<br />";
}

// done
imagedestroy($pic);
imagedestroy($gridpic);

Using a ‘thumb picture placeholder’ $gridpic, this code will copy areas of the input JPG picture based on the measurements we’ve made before. And in order to handle right and bottom edges properly, it will fill $gridpic with white color before copying, essentially to erase the previously copied picture area. Finally, for every area copy, the code will save it to a temporary folder, and display it on screen in an IMG tag. Nothing complicated, right?

Give me your inputs

I know this tool is just for fun. But hey, if you have any suggestion for enhancements, or if you find any bugs, let me know, will ya! TIA

How so? Quoted from their website:

……say what???

Allow me to break it down so it’s easier for you to understand.

jQuery is a JavaScript library, which is fast and concise

I hope you know what is a library (and while we’re at it, I also hope you know what is Javascript). A lot of programmers have their own collections of codes that they can reuse on all their projects. If you’re a web programmer, then most likely you have (if not, you should have) some kind of Javascript library as well. The codes in this library–functions, classes, etc–might come from lots of different sources, and might provide lots of different Javascript-related functionalities. Over the time, some things get added, while some other things become obsolete. Some areas got improved, while perhaps some others got broken in the process. And at the end, you might end up with lots of unused, not-so-useful, outdated, and buggy glob of messy codes in your beloved library.

Now there… pardon me of being prejudicely hyperbolic, but this is the tendency of having a one-person team of developing a library, applicable only to that one-person developer. But what if there are several dozens of developers? And they all share the same passion and goal? And all of them are experts (at least in their specific fields, in the big Javascript world)? Well, they will surely produce a very good code library, won’t they? At least the library will be well maintained and contantly being enhanced, of course!

And what if this library is used by lots of projects? And its user/programmer community are actively giving feedbacks to the library developers? And the developers are actually listening–where bugs are squashed, speedups are introduced, and feature requests are implemented? Certainly all these condition will lead to an uberlibrary, don’t you agree?

And jQuery is just like that: A Javascript library that is powerful enough to empower some of the biggest websites (Google, anybody?). Its operations are fast, and its features are concisely to-the-point on… continue to the next point, please.

Simplifies HTML document traversing, even handling, animating, and Ajax interactions

These four areas are the foundation of jQuery. You want a UI (User Interface) library? Sorry, it’s not in jQuery core–but you can use jQuery UI library instead. You want picture slideshows? Again sorry, it’s not in jQuery core–but you can use other libraries (or jQuery plugins) to achieve that.

Stopping here, some might have the impression that jQuery sucks, because it doesn’t provide all that we need. But actually that’s the point! jQuery is very powerful because it does not provide all that you need. Philosophically, who is “we”? You might need a library to do fancy client-side graph library, but do “we”?

So per their concensus, they (jQuery team) chose to focus on these four aspecs–concise! And by focusing on these only, they can make their codes run blazingly fast! See the point now?

…all these are for rapid web development

Given an HTML element, and considering that element might contain subelement(s), how do you get only the textual data of that element? Easy peasy… use innerText of course. WRONG! In case you don’t know, innerText only works on IE!!!.

That’s one example of how cross-browser incompatibility destroy our coding happiness, and sometimes take our sense of pride and accomplishment with it. We need to spend more time researching how this works on other browsers, as well as more time implementing the solution that will work on all browsers we support. Well sure some of you might know how to do innerText on FF and Chrome, but wouldn’t it be nice if all browsers work the same way?

jQuery to the rescue! To get the text, just use text property. That’s it, and it will run on all IE, FF, Chrome, etc. Don’t believe me? Try this code (or run it here):

<html>
<head>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
	<script type="text/javascript">
		window.onload = function() {
			document.getElementById("dst_no_jquery").innerText = document.getElementById("source").innerText;
		}
		$(document).ready(function() {
			$("#dst_with_jquery").text($("#source").text());
		});
	</script>
</head>
<body>
	<div id="source">This is <b>the <i>content</i></b> of a div.</div>
	<p>The content of the div above will be copied down here...
		<div>...without using jquery: <u id="dst_no_jquery">???</u></div>
		<div>...using jquery: <u id="dst_with_jquery">???</u></div>
	</p>
</body>
</html>

Not only that this code rules on all browsers, notice that it is also shorter to write, which leads to–you’ve guessed it right–rapid development! Ta daaaa!

There are other reasons why jQuery leads to faster development, for example:

• ability to chain operations, which leads to a leaner code,
• availability of numerous plugins you can use that suits your need,
• ease of DOM manipulation (including element selection and traversing them) makes the development more intuitive,
• straightforward event handling and trigger,
• simpler implementaton of animation and/or effects,
• and so on.

For all these things, you can check jQuery site’s tutorials (you can find other tutorials too on Google). I will list out my use cases on where jQuery helps my development, but meanwhile, you can go ahead and familiarize yourself with the power of jQuery!

Why not the other Javascript libraries/frameworks?

When I started using jQuery, what I needed was something easy to use, fast to learn, and–of course–fast. Based on my research, I set my eyes to four candidates: MooTools, Dojo, Prototype, and jQuery. Below were my findings:

• I used slickspeed to test the candidates’ speed, and found that Prototype is the slowest; I crossed that out.
• Also from slickspeed, I noticed that in some test cases Dojo produced errors/exceptions. Not wanting any side effects affecting my developments, I decided to rule it out as well.
• MooTools were slightly slower than jQuery, so I decided to learn both. However, in my subjective opinion, I felt jQuery was easier to learn, thus I was able to deploy my sites quicker.
• WINNER: jQuery

I understand that some of you might disagree, and I believe my conclusion here doesn’t really provide a thorough, scientific, and object evaluations. But I suggest you to try it, and I’m sure you’ll like it!

Questions? Problems? Leave a comment and I’ll try my best to help.

PHP on IIS on Windows 7

First things first: We know that it’s easy to serve webpages on Windows 7 using the help of the IIS (Internet Information Services). You can serve static HTML files (as well as other files like JPG/GIF/PNG, CSS, JS, XML, etc.), and you can also serve dynamic files, ie. scripts—or programs—that run on the IIS/server side. And being Microsoft’s technologies, IIS has a built-in support for ASP and ASPX files, which are usually written in VBScript and a .NET scripting languages respectively. You just need to remember to install them when you’re installing your IIS, which is as simple as checking their checkboxes. In short: IIS as the web server and ASP/ASPX as the scripting language just works out of the box. They are a match made in heaven Microsoft’s labs.

Now PHP is a different story. To start with: PHP is not one of Microsoft’s technologies. PHP is generally/friendly/widely supported by open source communities, including Linux and Unix communities. But for Windows users, we usually need to install the PHP installer from the EXE package, edit some configuration files and environment variables, do some other manual tweaks and settings, pray that our operating system don’t get messed up along the way, and cross our fingers while testing if the installation is completed successfully. Some unfortunately users might take hours or even days just to redo this installation repeatedly until it works. Anyhow, you can Google on how to do this, and while you’re browsing you might encounter some horror stories on it.

Hold on. Please don’t get it wrong. Microsoft has embraced PHP and aiming to make it easy to install PHP on IIS. They have tools (Web Platform Installer) to make it easier to install PHP. They even provides a step-by-step walkthrough on the installation process. Sure you can follow this—which BTW you still need to do quite a bit of manual tinkering—but in my opinion: why not going down on an easier path?

Enter XAMPP

XAMPP (it’s Windows-based flavor here) is an all-in-one one-package-containing-all solution to serve your PHP counterpart. It’s running on Apache web server, and provides support for PHP and Perl scripting languages. It also throws in MySQL as a database system for your web apps, Mercury Mail to send emails, and FileZilla FTP server to upload (and download) your web files.

And how much easier is it to install this baby? Much—M U C H—easier than installing IIS + PHP + MySQL + the other components one by one, of course. Picture this: single-package installation containing all those componenent, and a click-and-go installer that does all the extracting and copying and setting up. Compared with IIS: oh well, you get the idea I hope :D.

Without further ado, allow me to demonstrate.

XAMPP installation

I fired up my browser and typed the address:

http://www.apachefriends.org/en/xampp-windows.html

Scrolling down to the Download section, I downloaded the installer (EXE) which at this current writing was at version 1.7.3 (2009/12/23). The basic package installer was only 51MB, which took me about 4 minutes with my T1 speed, and run it right afterwards.

The first step was to specify the destination folder. I kept the default folder C:\, because it will create a folder named xampp inside it.

I hit the ‘Install’ button and watched the installer worked its magic as I sit back and relax.

Toward the end, it asked several questions in a Command Prompt window, which I happily follow through.

On the last step (which is kind of a ‘menu’), I chose 1 to start the XAMPP Control Panel. FYI you can actually x it out (exit) and launch the Control Panel via your Windows’ Start Menu.

Anyway, on the Control Panel, I just hit the Start button on Apache module to start the web server. While I was there, I also started the MySQL service. After it started, I tested it out by going to this address on my browser:

http://localhost

The XAMPP splash page! That says I’m all set!

So let’s recap: the installation is just a matter of running the installer → hit Install → five Enters → 1 to start the Control Panel → and finally Start the Apache (as well as the related services you need, eg. MySQL). And the best part is that you don’t need to remember these: Just follow the directions and you’ll be all set! Now beat that with IIS!

Ummm.. I thought we’re talking about PHP?

Yes, don’t worry I don’t forget about it. We’re getting there. As a matter of fact, with Apache web server alive and kicking, we’re there already.

I’m sure you understand that the idea of a web server is just ‘serving’ web pages. For XAMPP, these web pages are served from xampp\htdocs folder in your installation folder—in my case, it’s in C:\xampp\htdocs. You just need to upload your PHP files there (or perhaps into a new subfolder in there).

For example, I put a helloworld.php in there:

<?php 
echo "Hello World";
?>

… tested it:

http://www.apachefriends.org/en/xampp-windows.html

… and well, hello there!

So in conclusion: PHP works, just like that! And if you want to play more, your localhost—the XAMPP you just installed—has some demo programs (including one Perl program) you can try and study on.

XAMPP and portability

Before we proceed, let me clarify one thing: the idea of making XAMPP portable is more about carrying your ‘websites’ with you, rather than about making it install-once-run-anywhere. Yes, you can install XAMPP on your USB drive (thus making it portable), but what good is it without the website(s)? And if you have the website, isn’t it virtually accessible anywhere already (considering the address resolution and firewall/access rights are in place), thus making it ‘ever present’ with you? In other words, you’ll want to have a portable XAMPP only if:

• You’re building your website and your development can take place anywhere.
• You want an easy way to showcase your website, eg. to your client, investors, teammates, etc.
• You prefer having your data together with your website/web app.
• You can’t rely on the internet connectivity (or the government, while we’re at it :P).

So anyway, back to our walkthrough, making XAMPP portable is just a three-step work:

Step one: copy the XAMPP folder. Before you copy, you might need to stop the services first, because they might ‘lock’ the files, thus making the copy fails. On my installation, the entire XAMPP folder was about 250MB-something, so copying the it was fast and fit in my USB pen drive. After that, just transport it to your ‘target’—for me, it was plugging the USB drive into another PC. I didn’t bother to copy it into the target PC, since I want XAMPP to run off the USB drive directly.

The second step is to relocate the XAMPP directory. This can be achieved by running the setup batch file, ie. setup_xampp.bat. The prompts are as easily understandable as the installation. And since I’m using a USB drive, as you can see from the screenshot, I need to tell the setup to make a portable XAMPP without drive letters.

Lastly, run the control panel (via the setup’s text menu, or run xampp-control.exe to start Apache and MySQL/other services. After they’re running, test it (you’ll still use localhost) and off you go!

Afterwords

Now please pay attention here: XAMPP—and IIS on Windows 7—are meant for personal/development use only! Even though you can, but you won’t want to use it for any live/production-level websites. Don’t host your eCommerce sites with it! Don’t use them for your blog sites! Don’t even try! To make this point, allow me to cite this paragraph from their website:

There! It’s up to you now to heed my words or not—but as for me, I will never use XAMPP for my clients’ live websites :D.

Questions? Problems? Leave a comment and I’ll try my best to help.

“Ohai! All ready for your gaming expo?” I asked her casually.

“Yep, pretty much. We’re also set for a survey-slash-raffle program, where our booth visitors can fill in their contact info and play a jackpot-machine minigame to get into the instant raffle.”

“That sounds gr—” I tried to reply, but she kept on going.

“It’s a flash webpage, and we’re using Microsoft Access as the database storage. So we’ll run everything off the browser on our two laptops. They both are running on Windows 7.”

Suddenly I had a funny feeling down my brain. “Sooo… you want me to copy the program files to our website?” I asked, trying to guess where this talk led to. “No problemo!”

“Actually, THAT’S the problem…” she told me, sighing. “We won’t have any internet access in the expo. And we’re leaving by 3…”

Aha! So my feeling was right. Being a helpful coworker, I gave her a promise worthy of the next Presidential candidate: “Give me your laptops, and in 30 minutes I’ll make it work locally.”

And there she went, dashing to her office and back, presenting me with 2 high-end laptops and a big wide smile on her face.

So how did I tackle this? With the help of Microsoft’s IIS, it’s super easy! Follow these steps, and you can do it too!

Introduction to IIS

Before I go on with the steps, allow me to briefly explain about IIS (Microsoft’s Internet Information Services). To cut it short: IIS is Microsoft’s web server (and a web server is a collection of services to let you serve your websites). In Windows 7, IIS is offered as a ‘Personal Web Server’ component, available on all Windows 7 editions except Home Basic and Starter. For more information on IIS, please visit The Official Microsoft IIS Site or this Wikipedia article.

Now, off we go!

First, check the OS

I knew it’s Windows 7 (she told me, remember?), but I needed to make sure the edition. If it’s Home Basic or Starter (which I doubted, considering they’re high-end laptops), then I had to think of Plan B. Anyway, Win+Pause/Break I went (FYI in case you don’t know, that’s the shortcut key to bring up the System info, a.k.a. System Properties), and—yeah!—they were Home Premiums.

Yay! Knowing I can stick to my plan, I proceeded to the next step…

Installing IIS

IIS is not installed by default, so I had to go to the the Control Panel → Programs → Turn Windows features on or off (under Programs and Features section), and checked the Internet Information Services checkbox.

While there, I made sure I had the ASP component checked as well, because that game program were written in ASP. If your web files are all .HTM/HTML (including JS, CSS, XML, PNG, JPG, GIF, and all the other ‘static’ files), then you don’t need to enable this.

An OK later, it started the installation, and finished everything in several seconds. Or was it?

Testing the installation

There’s only one way to be sure: I fired up the browser (I used the stock Internet Explorer 8) and typed the local address:

http://localhost/

(localhost is an alias for your own computer, which translates to 127.0.0.1)

Taa daa! I could see the IIS welcome page!

From the IIS Manager (Sites → Default Web Site → Basic settings) I grabbed the website location, which was in:

C:\inetpub\wwwroot\

(in other words, http://localhost/ translates to C:\inetpub\wwwroot\)

Then I simply proceeded to copy the game program files into a subfolder called TigerGame(20100731), so the URL for this game’s root will be:

http://localhost/TigerGame(20100731)/

That’s all, folks! Except that it won’t work on the database part. Oh well

MDB access additional setup #1: Enabling 32-bit application mode

In case you didn’t notice, the laptops’ operating systems were 64-bit, which is great. However, there’s currently no way to make the ASP program work with Microsoft Access’ MDB file. Perhaps ODBC/OLEDB 64-bit drivers are missing, but this was not a good time to do research and experimentation. (Also I read somewhere looong time ago that the 64-bit drivers were either buggy, beta version, or simply just don’t work).

So in order to make it work, the easiest and proven solution was to ‘downgrade’ IIS application pool to 32-bit mode: Application Pools → DefaultAppPool → Advanced settings → set Enable 32-bit Applications to True.

(note that the application pool used by the website was DefaultAppPool, where you can get from the website setting dialog window).

And now it worked! But—ohnoes!—it wouldn’t save anything to the database. Solution: check the permission!!!

MDB access additional setup #2: Make the MDB writable

Permission is given to a user (or a group) and assigned to a resource (e.g. a file). So for this case, I need to give the ‘anonymous user’ account a write permission to the database file.

So first thing first: I need to check what’s the ‘anonymous user’ account: Default Web site → Authentication → Anonymous Authentication → Edit.

There I could see the account was named ‘IUSR’. Then I proceeded to give this user a write permission to the database file, which I found to be named db_store.mdb: Right click on the file → Properties → Security → Add → typed ‘IUSR’ and OK-ed it → and set the permission as below:

That’s it! After OK-ing the dialog boxes, I tested the back-end interface of the game (where I could directly try updating the database), and… SUCCESS!!!

TL;DR

In this post, I demonstrated that your Windows 7 can easily be ‘turned’ into a web server (albeit perhaps better be for personal/development purposes only). The process was relatively easy and straighforward. And if you want to try, I’m sure you can accomplish this in less than 30 minutes! Awesome, huh?

Questions? Problems? Leave a comment and I’ll try my best to help.