You Can Code

This entry is part 1 of 5 in the series Web Coding For People Who Are Tired of Being Called Dummies (click to view in order)

Code is scary. Here is some intimidating code from the Perl Programming Language:

use push_pull;
$data_bytes = pack "C10", 0, 1, 2, 3, 4, 5, 6, 7, 8, 9;
$data = new push_pull::CkByteData();
$data->append($data_bytes,10);
$blockSize = 16;
$paddingScheme = 0;
$data->pad($blockSize,$paddingScheme);
print $data->getEncoded("hex") . "\r\n";

Yikes.

I have no idea what this does, but just looking makes me want to join the Amish. It looks like some foreign language, and nothing could be more daunting than looking at newspaper in another language. Who has time to learn another language? No one. Ever.

Good news! This is English! It’s just a set of instructions for the machine to follow. Simple ones. Learn the instructions, learn the language, triumphant victory.

The first language you want to learn is HTML. HyperText Markup Language. This language is structural. It structures your data into a webpage. You “markup” your content with tags.

A tag looks like this:

<strong>

A slash is used to end a tag. Like so:

</strong>

Here is how you use one:

Something is <strong>wrong</strong> with grandma.

The strong tag causes things to become bold. The code above will produce this:

Something is wrong with grandma.

Easy, no? That’s HTML. There is nothing more to it. There are quite a few tags to learn, but they all obey the same rules. There are tags to place an image, tags to turn text into links, every piece of a webpage is defined by a tag. Even the webpage itself. (It’s the <html> tag).

So, what exactly is a website, anyway?

Posted in CodeComments (0)

What is a Website?

This entry is part 2 of 5 in the series Web Coding For People Who Are Tired of Being Called Dummies (click to view in order)

You know what a website is, but you’re not sure what a website is.

The best way to think about a website is simply as a group of files. Files just like the ones on your hard drive, organized into folders. Except instead of files that end in .doc and .mp3, these files end in things like .html and .jpg. Website files are kept on a server and delivered to your browser when you ask for them by visiting a particular URL. Your browser analyses them and renders them to the screen.

So next up we are going to make a very small website which will live on your hard drive. People won’t be able to access this website while it is on your hard drive, but it will allow you to build it. When it is ready you can put it on a server on the Internet and then bang. Live website.

Posted in CodeComments (0)

A Very Small Webpage

This entry is part 3 of 5 in the series Web Coding For People Who Are Tired of Being Called Dummies (click to view in order)

Here is a very small webpage. Almost as small as you can get, and still call it a webpage.

<html>
<head>
<title>A Webpage!</title>
</head>
<body>
I like fishsticks!
</body>
</html>

That’s not so bad, right? Code is like a crocodile, it’s not so scary when it’s small. So you just need to break it down into smaller and smaller chunks until you get it. Let’s take a look at each piece of our webpage. The <html> tag says “start the webpage”. The </html> tag at the end says “end the webpage”. (Remember, a tag with a “/” at the beginning means to end the tag.)

So look inside the <html> tag and the </html> tags in the code above. You’ll see two major chunks: The head, and the body. The head contains information about the webpage like the title (which you can see up in the title bar of the window), style information, and external resources to name a few. The body contains what we see on the page.

Since the <title> tags belongs inside the head tags, they’re said to be nested.

<head>
<title>A Webpage!</title>
</head>

Our <body> tags don’t contain much. Just one sentence reflecting my fondness for fish in stick form. Then the body ends. Then webpage ends. So now you know what tags are, you know what they do, and how they function. Do you feel like you just found out magic trick works? Turns out it wasn’t so amazing after all.

This is coding. All the rules are insanely simple, it’s just how we put them together that makes them interesting. Next, we’ll talk tags.

Posted in CodeComments (0)

Anatomy of A Tag

This entry is part 4 of 5 in the series Web Coding For People Who Are Tired of Being Called Dummies (click to view in order)

Let’s breakdown the tag. Tags all start with a base (like strong) but tags can also have attributes. Attributes are like settings for a tag. Here is a snippet containing a link:

Here's a link to <a href="http://www.google.com">Google</a>, friend.

The code above produces:

Here's a link to Google, friend.

The base tag here is called an anchor tag, or just <a> (notice the </a> to end the link). However, an <a> tag isn’t very useful until you give it an attribute, telling it where the link goes. In this case, the attribute is called href. Attributes are set by inserting them into the a tag directly.

<a href="http://www.google.com">

Tags can have lots of attributes, but most of them aren’t required. (Here is a big list of tags.) A few more of interest:

<br />

This is a break tag. It is analogous to hitting return on your keyboard. After you do it, you move to the next line. Here are two breaks in a row:

Not much to see, right? Just like hitting return. Wait a second, you might be thinking. Why is there a slash after the br? Here’s why: Each tag that is opened must be closed. If you start something in italics with the <em> tag (it’s short for emphasis), then you must close it with with a corresponding </em> tag. However some tags are self-closing, thus the slash at the end. Breaks are like this, as are images.

<img src="images/logo.jpg" />

The <img> tag allows you to put images into your page. The src attribute tells you the address where the browser can find the image. This tag says load the image logo.jpg from the folder images. This address brings up the issue of relative vs. absolute addressing. Onward, dear reader.

Posted in CodeComments (0)

Relative vs. Absolute Addresses

This entry is part 5 of 5 in the series Web Coding For People Who Are Tired of Being Called Dummies (click to view in order)

The difference between relative and absolute addresses can be explained using actual addresses. Consider the following addressing methods:

Absolute Address: 221B Baker St. London, England
Relative Address: 4 Blocks North, 3 Blocks East, Last House on the Right

As you can see, the relative address is relative to where you are. If you move, the directions become incorrect. Whereas the absolute address is always correct. Ok, but how does this apply to websites?

Websites, like your files at home, are organized into folders. When you access a url like this:

http://www.google.com/intl/en/about.html

You are accessing the file about.html in the folder en which is in the folder intl which is in the so-called root of the webserver. The url above is an absolute url. It is the full address of the file. If you look at the code for this page, (we’ll talk about how to do that later) you will see links like this:

<a href="contact/index.html">Contact Us</a>

So if about.html contains this relative link, then the link is pointing at the file index.html in the folder contact which is in the same folder as about.html. If we were to convert this link into an absolute address it would look like this:

<a href="http://www.google.com/intl/en/contact/index.html">Contact Us</a>

They both resolve to the same place, except one uses a full address, and one uses directions on how to get there.

One more thing before we wrap up addressing. When you point a browser at a folder instead of a file, you will be given the default file for that folder. Generally, that file is index.html. So using the link above as an example, if you access this url:

http://www.google.com/intl/en/contact/

The server will give you the index.html inside it be default. Next up, we will make a real live website.

Posted in CodeComments (0)


PHVsPjxsaT48c3Ryb25nPndvb18xY29sX2hlaWdodDwvc3Ryb25nPiAtIDIwMDwvbGk+PGxpPjxzdHJvbmc+d29vXzJjb2xfaGVpZ2h0PC9zdHJvbmc+IC0gMjAwPC9saT48bGk+PHN0cm9uZz53b29fM2NvbF9oZWlnaHQ8L3N0cm9uZz4gLSAxNTA8L2xpPjxsaT48c3Ryb25nPndvb180Y29sX2hlaWdodDwvc3Ryb25nPiAtIDEwMDwvbGk+PGxpPjxzdHJvbmc+d29vX2Fib3V0X2J1dHRvbjwvc3Ryb25nPiAtIDwvbGk+PGxpPjxzdHJvbmc+d29vX2Fib3V0X2VuYWJsZTwvc3Ryb25nPiAtIGZhbHNlPC9saT48bGk+PHN0cm9uZz53b29fYWJvdXRfaGVhZGVyPC9zdHJvbmc+IC0gPC9saT48bGk+PHN0cm9uZz53b29fYWJvdXRfcGhvdG88L3N0cm9uZz4gLSA8L2xpPjxsaT48c3Ryb25nPndvb19hYm91dF90ZXh0PC9zdHJvbmc+IC0gPC9saT48bGk+PHN0cm9uZz53b29fYWRzX3JvdGF0ZTwvc3Ryb25nPiAtIGZhbHNlPC9saT48bGk+PHN0cm9uZz53b29fYWRfY29udGVudF9hZHNlbnNlPC9zdHJvbmc+IC0gPC9saT48bGk+PHN0cm9uZz53b29fYWRfY29udGVudF9kaXNhYmxlPC9zdHJvbmc+IC0gZmFsc2U8L2xpPjxsaT48c3Ryb25nPndvb19hZF9jb250ZW50X2ltYWdlPC9zdHJvbmc+IC0gaHR0cDovL3d3dy53b290aGVtZXMuY29tL2Fkcy93b290aGVtZXMtNDY4eDYwLTIuZ2lmPC9saT48bGk+PHN0cm9uZz53b29fYWRfY29udGVudF91cmw8L3N0cm9uZz4gLSBodHRwOi8vd3d3Lndvb3RoZW1lcy5jb208L2xpPjxsaT48c3Ryb25nPndvb19hZF9pbWFnZV8xPC9zdHJvbmc+IC0gaHR0cDovL3d3dy53b290aGVtZXMuY29tL2Fkcy8xMjV4MTI1YS5qcGc8L2xpPjxsaT48c3Ryb25nPndvb19hZF9pbWFnZV8yPC9zdHJvbmc+IC0gaHR0cDovL3d3dy53b290aGVtZXMuY29tL2Fkcy8xMjV4MTI1Yi5qcGc8L2xpPjxsaT48c3Ryb25nPndvb19hZF9pbWFnZV8zPC9zdHJvbmc+IC0gaHR0cDovL3d3dy53b290aGVtZXMuY29tL2Fkcy8xMjV4MTI1Yy5qcGc8L2xpPjxsaT48c3Ryb25nPndvb19hZF9pbWFnZV80PC9zdHJvbmc+IC0gaHR0cDovL3d3dy53b290aGVtZXMuY29tL2Fkcy8xMjV4MTI1ZC5qcGc8L2xpPjxsaT48c3Ryb25nPndvb19hZF9tcHVfYWRzZW5zZTwvc3Ryb25nPiAtIDwvbGk+PGxpPjxzdHJvbmc+d29vX2FkX21wdV9kaXNhYmxlPC9zdHJvbmc+IC0gdHJ1ZTwvbGk+PGxpPjxzdHJvbmc+d29vX2FkX21wdV9pbWFnZTwvc3Ryb25nPiAtIDwvbGk+PGxpPjxzdHJvbmc+d29vX2FkX21wdV91cmw8L3N0cm9uZz4gLSA8L2xpPjxsaT48c3Ryb25nPndvb19hZF90b3A8L3N0cm9uZz4gLSBmYWxzZTwvbGk+PGxpPjxzdHJvbmc+d29vX2FkX3RvcF9hZHNlbnNlPC9zdHJvbmc+IC0gPHNjcmlwdCB0eXBlPVwidGV4dC9qYXZhc2NyaXB0XCI+PCEtLQ0KZ29vZ2xlX2FkX2NsaWVudCA9IFwicHViLTcxMDQyODQwNTMwMzMzMTBcIjsNCi8qIHdoaXQuaW5mbyA0Njh4NjAsIGNyZWF0ZWQgMy8xNi8xMCAqLw0KZ29vZ2xlX2FkX3Nsb3QgPSBcIjE1MDc1NDQ2NzdcIjsNCmdvb2dsZV9hZF93aWR0aCA9IDQ2ODsNCmdvb2dsZV9hZF9oZWlnaHQgPSA2MDsNCi8vLS0+DQo8L3NjcmlwdD4NCjxzY3JpcHQgdHlwZT1cInRleHQvamF2YXNjcmlwdFwiDQpzcmM9XCJodHRwOi8vcGFnZWFkMi5nb29nbGVzeW5kaWNhdGlvbi5jb20vcGFnZWFkL3Nob3dfYWRzLmpzXCI+DQo8L3NjcmlwdD48L2xpPjxsaT48c3Ryb25nPndvb19hZF90b3BfZGlzYWJsZTwvc3Ryb25nPiAtIHRydWU8L2xpPjxsaT48c3Ryb25nPndvb19hZF90b3BfaW1hZ2U8L3N0cm9uZz4gLSBodHRwOi8vd3d3Lndvb3RoZW1lcy5jb20vYWRzLzQ2OHg2MGEuanBnPC9saT48bGk+PHN0cm9uZz53b29fYWRfdG9wX3VybDwvc3Ryb25nPiAtIGh0dHA6Ly93d3cud29vdGhlbWVzLmNvbTwvbGk+PGxpPjxzdHJvbmc+d29vX2FkX3VybF8xPC9zdHJvbmc+IC0gaHR0cDovL3d3dy53b290aGVtZXMuY29tPC9saT48bGk+PHN0cm9uZz53b29fYWRfdXJsXzI8L3N0cm9uZz4gLSBodHRwOi8vd3d3Lndvb3RoZW1lcy5jb208L2xpPjxsaT48c3Ryb25nPndvb19hZF91cmxfMzwvc3Ryb25nPiAtIGh0dHA6Ly93d3cud29vdGhlbWVzLmNvbTwvbGk+PGxpPjxzdHJvbmc+d29vX2FkX3VybF80PC9zdHJvbmc+IC0gaHR0cDovL3d3dy53b290aGVtZXMuY29tPC9saT48bGk+PHN0cm9uZz53b29fYWxsX2NhdGVnb3J5X3RpdGxlPC9zdHJvbmc+IC0gQ2F0ZWdvcmllczwvbGk+PGxpPjxzdHJvbmc+d29vX2FsdF9zdHlsZXNoZWV0PC9zdHJvbmc+IC0gZGFya2JsdWUuY3NzPC9saT48bGk+PHN0cm9uZz53b29fYXJjaGl2ZXM8L3N0cm9uZz4gLSBTZWxlY3QgYSBwYWdlOjwvbGk+PGxpPjxzdHJvbmc+d29vX2FyY2hpdmVfbGF5b3V0PC9zdHJvbmc+IC0gM19jb2x1bW5zLnBocDwvbGk+PGxpPjxzdHJvbmc+d29vX2F1dGhvcjwvc3Ryb25nPiAtIGZhbHNlPC9saT48bGk+PHN0cm9uZz53b29fYXV0b19pbWc8L3N0cm9uZz4gLSBmYWxzZTwvbGk+PGxpPjxzdHJvbmc+d29vX2Jsb2NrX2ltYWdlPC9zdHJvbmc+IC0gaHR0cDovL3doaXQuaW5mby9ibG9nL3dwLWNvbnRlbnQvdGhlbWVzL2xpdmV3aXJlL2ltYWdlcy8zMDB4MjUwLmdpZjwvbGk+PGxpPjxzdHJvbmc+d29vX2Jsb2NrX3VybDwvc3Ryb25nPiAtIGh0dHA6Ly93d3cud29vdGhlbWVzLmNvbTwvbGk+PGxpPjxzdHJvbmc+d29vX2Jsb2dfY2F0ZWdvcnk8L3N0cm9uZz4gLSBTZWxlY3QgYSBjYXRlZ29yeTo8L2xpPjxsaT48c3Ryb25nPndvb19ibG9nX2NhdF9pZDwvc3Ryb25nPiAtIDwvbGk+PGxpPjxzdHJvbmc+d29vX2Jsb2dfbmF2aWdhdGlvbjwvc3Ryb25nPiAtIGZhbHNlPC9saT48bGk+PHN0cm9uZz53b29fYmxvZ19uYXZpZ2F0aW9uX2Zvb3Rlcjwvc3Ryb25nPiAtIGZhbHNlPC9saT48bGk+PHN0cm9uZz53b29fYmxvZ19wZXJtYWxpbms8L3N0cm9uZz4gLSA8L2xpPjxsaT48c3Ryb25nPndvb19ibG9nX3NpZGViYXI8L3N0cm9uZz4gLSBTZWxlY3QgYSBzaWRlYmFyOjwvbGk+PGxpPjxzdHJvbmc+d29vX2Jsb2dfc3VibmF2aWdhdGlvbjwvc3Ryb25nPiAtIGZhbHNlPC9saT48bGk+PHN0cm9uZz53b29fYnJlYWRjcnVtYnM8L3N0cm9uZz4gLSBmYWxzZTwvbGk+PGxpPjxzdHJvbmc+d29vX2J1dHRvbl9saW5rPC9zdHJvbmc+IC0gPC9saT48bGk+PHN0cm9uZz53b29fY2F0X21lbnU8L3N0cm9uZz4gLSBmYWxzZTwvbGk+PGxpPjxzdHJvbmc+d29vX2N1c3RvbV9jc3M8L3N0cm9uZz4gLSA8L2xpPjxsaT48c3Ryb25nPndvb19jdXN0b21fZmF2aWNvbjwvc3Ryb25nPiAtIDwvbGk+PGxpPjxzdHJvbmc+d29vX2Rpc2NsYWltZXI8L3N0cm9uZz4gLSA8L2xpPjxsaT48c3Ryb25nPndvb19lbmFibGVfYWxsX2NhdGVnb3J5PC9zdHJvbmc+IC0gZmFsc2U8L2xpPjxsaT48c3Ryb25nPndvb19lbmFibGVfYmxvZ19jYXRlZ29yeTwvc3Ryb25nPiAtIGZhbHNlPC9saT48bGk+PHN0cm9uZz53b29fZXhjbHVkZV9wYWdlc19mb290ZXI8L3N0cm9uZz4gLSA8L2xpPjxsaT48c3Ryb25nPndvb19leGNsdWRlX3BhZ2VzX21haW48L3N0cm9uZz4gLSA8L2xpPjxsaT48c3Ryb25nPndvb19leGNsdWRlX3BhZ2VzX3N1Ym5hdjwvc3Ryb25nPiAtIDwvbGk+PGxpPjxzdHJvbmc+d29vX2ZlYXR1cmVkX2NhdGVnb3J5PC9zdHJvbmc+IC0gRmVhdHVyZWQ8L2xpPjxsaT48c3Ryb25nPndvb19mZWF0X2VudHJpZXM8L3N0cm9uZz4gLSAxPC9saT48bGk+PHN0cm9uZz53b29fZmVhdF9oZWlnaHQ8L3N0cm9uZz4gLSAyMTA8L2xpPjxsaT48c3Ryb25nPndvb19mZWF0X3dpZHRoPC9zdHJvbmc+IC0gMjgwPC9saT48bGk+PHN0cm9uZz53b29fZmVlZGJ1cm5lcl9pZDwvc3Ryb25nPiAtIEZlZWRidXJuZXIgSUQ8L2xpPjxsaT48c3Ryb25nPndvb19mZWVkYnVybmVyX3VybDwvc3Ryb25nPiAtIDwvbGk+PGxpPjxzdHJvbmc+d29vX2ZsaWNrcl9lbnRyaWVzPC9zdHJvbmc+IC0gU2VsZWN0IGEgTnVtYmVyOjwvbGk+PGxpPjxzdHJvbmc+d29vX2ZsaWNrcl9pZDwvc3Ryb25nPiAtIDwvbGk+PGxpPjxzdHJvbmc+d29vX2ZsaWNrcl91cmw8L3N0cm9uZz4gLSBGbGlja3IgVVJMPC9saT48bGk+PHN0cm9uZz53b29fZ29vZ2xlX2FuYWx5dGljczwvc3Ryb25nPiAtIDwvbGk+PGxpPjxzdHJvbmc+d29vX2hvbWU8L3N0cm9uZz4gLSBmYWxzZTwvbGk+PGxpPjxzdHJvbmc+d29vX2hvbWVwYWdlPC9zdHJvbmc+IC0gbGF5b3V0LWRlZmF1bHQucGhwPC9saT48bGk+PHN0cm9uZz53b29faG9tZV9sYXlvdXQ8L3N0cm9uZz4gLSAzX2NvbHVtbnMucGhwPC9saT48bGk+PHN0cm9uZz53b29faG9tZV9zaWRlYmFyPC9zdHJvbmc+IC0gU2VsZWN0IGEgc2lkZWJhcjo8L2xpPjxsaT48c3Ryb25nPndvb19ob21lX3RodW1iX2hlaWdodDwvc3Ryb25nPiAtIDU3PC9saT48bGk+PHN0cm9uZz53b29faG9tZV90aHVtYl93aWR0aDwvc3Ryb25nPiAtIDEwMDwvbGk+PGxpPjxzdHJvbmc+d29vX2ltYWdlX3NpbmdsZTwvc3Ryb25nPiAtIGZhbHNlPC9saT48bGk+PHN0cm9uZz53b29faW5jX2ludHJvX3BhZ2U8L3N0cm9uZz4gLSBmYWxzZTwvbGk+PGxpPjxzdHJvbmc+d29vX2luY19pbnRyb19wYWdlX2xlZnQ8L3N0cm9uZz4gLSBmYWxzZTwvbGk+PGxpPjxzdHJvbmc+d29vX2luY19pbnRyb19wYWdlX3JpZ2h0PC9zdHJvbmc+IC0gZmFsc2U8L2xpPjxsaT48c3Ryb25nPndvb19pbmNfdGFiYmVyX3BhZ2VzPC9zdHJvbmc+IC0gZmFsc2U8L2xpPjxsaT48c3Ryb25nPndvb19pbnRyb19wYWdlPC9zdHJvbmc+IC0gPC9saT48bGk+PHN0cm9uZz53b29faW50cm9fcGFnZV9sZWZ0PC9zdHJvbmc+IC0gPC9saT48bGk+PHN0cm9uZz53b29faW50cm9fcGFnZV9yaWdodDwvc3Ryb25nPiAtIDwvbGk+PGxpPjxzdHJvbmc+d29vX2xheW91dDwvc3Ryb25nPiAtIGJsb2cucGhwPC9saT48bGk+PHN0cm9uZz53b29fbG9nbzwvc3Ryb25nPiAtIDwvbGk+PGxpPjxzdHJvbmc+d29vX21hZ19mZWF0dXJlZDwvc3Ryb25nPiAtIFNlbGVjdCBhIG51bWJlcjo8L2xpPjxsaT48c3Ryb25nPndvb19tYWdfc2Vjb25kYXJ5PC9zdHJvbmc+IC0gU2VsZWN0IGEgbnVtYmVyOjwvbGk+PGxpPjxzdHJvbmc+d29vX21hbnVhbDwvc3Ryb25nPiAtIGh0dHA6Ly93d3cud29vdGhlbWVzLmNvbS9zdXBwb3J0L3RoZW1lLWRvY3VtZW50YXRpb24vZ2F6ZXR0ZS1lZGl0aW9uLzwvbGk+PGxpPjxzdHJvbmc+d29vX21pZF9leGNsdWRlPC9zdHJvbmc+IC0gPC9saT48bGk+PHN0cm9uZz53b29fbmF2X2V4Y2x1ZGU8L3N0cm9uZz4gLSA8L2xpPjxsaT48c3Ryb25nPndvb19vdGhlcl9lbnRyaWVzPC9zdHJvbmc+IC0gU2VsZWN0IGEgTnVtYmVyOjwvbGk+PGxpPjxzdHJvbmc+d29vX3BhZ2Vfc2lkZWJhcjwvc3Ryb25nPiAtIFNlbGVjdCBhIHNpZGViYXI6PC9saT48bGk+PHN0cm9uZz53b29fcG9ydF9pbWFnZXM8L3N0cm9uZz4gLSBmYWxzZTwvbGk+PGxpPjxzdHJvbmc+d29vX3Jlc2l6ZTwvc3Ryb25nPiAtIHRydWU8L2xpPjxsaT48c3Ryb25nPndvb19zaG9ydG5hbWU8L3N0cm9uZz4gLSB3b288L2xpPjxsaT48c3Ryb25nPndvb19zaG93X2Nhcm91c2VsPC9zdHJvbmc+IC0gZmFsc2U8L2xpPjxsaT48c3Ryb25nPndvb19zaG93X3ZpZGVvPC9zdHJvbmc+IC0gZmFsc2U8L2xpPjxsaT48c3Ryb25nPndvb19zaW5nbGVfaGVpZ2h0PC9zdHJvbmc+IC0gMTgwPC9saT48bGk+PHN0cm9uZz53b29fc2luZ2xlX3dpZHRoPC9zdHJvbmc+IC0gMjUwPC9saT48bGk+PHN0cm9uZz53b29fc2xpZGVyPC9zdHJvbmc+IC0gZmFsc2U8L2xpPjxsaT48c3Ryb25nPndvb19zbWFsbHRodW1iX2hlaWdodDwvc3Ryb25nPiAtIDQyPC9saT48bGk+PHN0cm9uZz53b29fc21hbGx0aHVtYl93aWR0aDwvc3Ryb25nPiAtIDU2PC9saT48bGk+PHN0cm9uZz53b29fc3VibmF2PC9zdHJvbmc+IC0gZmFsc2U8L2xpPjxsaT48c3Ryb25nPndvb190YWJiZXJfcGFnZXM8L3N0cm9uZz4gLSA8L2xpPjxsaT48c3Ryb25nPndvb190YWJzPC9zdHJvbmc+IC0gZmFsc2U8L2xpPjxsaT48c3Ryb25nPndvb190aGVtZW5hbWU8L3N0cm9uZz4gLSBHYXpldHRlPC9saT48bGk+PHN0cm9uZz53b29fdGhlX2NvbnRlbnQ8L3N0cm9uZz4gLSB0cnVlPC9saT48bGk+PHN0cm9uZz53b29fdGh1bWJfaGVpZ2h0PC9zdHJvbmc+IC0gNzY8L2xpPjxsaT48c3Ryb25nPndvb190aHVtYl93aWR0aDwvc3Ryb25nPiAtIDEwMDwvbGk+PGxpPjxzdHJvbmc+d29vX3R3aXR0ZXI8L3N0cm9uZz4gLSA8L2xpPjxsaT48c3Ryb25nPndvb190d2l0dGVyX2VuYWJsZTwvc3Ryb25nPiAtIHRydWU8L2xpPjxsaT48c3Ryb25nPndvb190d2l0dGVyX3VzZXJuYW1lPC9zdHJvbmc+IC0gd29vdGhlbWVzPC9saT48bGk+PHN0cm9uZz53b29fdmlkZW9fY2F0ZWdvcnk8L3N0cm9uZz4gLSBTZWxlY3QgYSBjYXRlZ29yeTo8L2xpPjwvdWw+