Post by Milkrunner on Jan 28, 2009 21:53:36 GMT 1
Hey, so I was starting my research into RSS feeds and I realized that most of what I talk about (with Scriv and otherwise) is blather to most of you, but it's really not that hard to understand. I wanted to just write a couple things down that I might add to later just to make everything Scriv/Deadaim and I talk about more obvious.
HTML
HTML is a fairly limited language for web development on its own (which is true for most web languages). It's a browser-side language, which means that the client's browser is what interprets everything that is "said" in the code. The HTML part of a website is mostly going to be actual content (this text would exist inside of a <p> statement, images and video are also embedded via HTML) some interactions between the client and server (links and forms--what I'm typing in right now is a big form), and some layout and font aspects are HTML related (sectioning the website into DIVISIONs-- <div> --is an HTML characteristic. The bbcode
The thing about HTML is that it's a hassle to code with alone--divs take up huge amounts of space in the code, and even if the same div is re-used many times, its characteristics need to be re-defined each time. Before divs were common practice, designers used immensely complicated tables to get things looking the way they wanted. The complications in design led to:
CSS
CSS (stands for Cascading Style Sheets) is the easiest way to make something pretty. It can be used to assign specific attributes to a group of that not-so-fancy HTML content. For example, if I wanted to make all <p> (Paragraph) elements bright red, I could do this:
At that point, I could call
PHP
PHP is a server-side language, which means that only the server "hears what it says." So if I typed
This code would result in the same thing: Hello World! output against a blank, white background. The benefits of PHP are manifold, though I'll just touch on 3 things: Being the Workhorse, Being Secret, and Being Clean Code.
PHP is the Workhorse in the triforce of HTML, CSS and PHP. While CSS is the princess who makes things look pretty and HTML is the guy that shows you what you want to see, PHP does everything else. An HTML form submits a user's name and password to the server, a PHP script picks it up, gathers information from a hidden, server-side password file, interacts with a database, decrypts the password in the database, compares it against the user-submitted password, and then tells the HTML script to authorize the user. The CSS may be responsible for the font, and the HTML for outputting "Welcome, Admin!" but it's the PHP that did the work there--and indeed it does the work to keep the user "logged in," as it were, as well.
An ambiguous aspect of PHP is that it is "secret." The user never gets to see what goes on in the PHP script. What happens is, every file that ends with .php is "translated" by the web server before it is given to the client, who--even if he or she downloads the file individually from the website--will only see what is output to the HTML by the PHP, not the PHP itself. For example, if the client tries to download my decryption script, they would likely see nothing at all, or perhaps just the result of a the PHP script if it didn't meet any fatal errors (in this case it might just be "incorrect username or password" because that's what's supposed to happen if the form passes incorrect data). For this reason, it's handy for Database manipulation, and also to hide aspects of proprietary source code (though, to be fair, most of whatever you'd want to do for a gaming website has been done millions of times over. The only reason I want to write my own code for most of it is so I can get the experience.) The BAD side of this secrecy is that it makes PHP not inter-operable with JavaScript and any kind of client-side dealio. I don't have any examples coming quickly to mind.
The last thing is cleanliness of code. Here's an example of a website structure that I designed, starting with the files and their placements. Everything beyond \www is publicly available.
\htaccess\WEBSPACE\password.txt
\htaccess\WEBSPACE\www\index.php
\htaccess\WEBSPACE\www\header.php
\htaccess\WEBSPACE\www\footer.php
\htaccess\WEBSPACE\www\content.php
\htaccess\WEBSPACE\www\stls.css
\htaccess\WEBSPACE\www\membersonly.php
\htaccess\WEBSPACE\www\somethingelse.php
That's a lot of files, but here's the magic: Imagine a website with a top menu bar, a navigation menu on the left, the BODY in the middle, and a final bar on the bottom. All of the characteristics of these and the characteristics of the content are defined in stls.css, which is shared amongst all pages. The structure of everything beyond what's in the BODY is in separate files (header.php + footer.php). The structure within the BODY of the page is defined in index.php, membersonly.php, and somethingelse.php (or whatever actual, different pages you want to add). The text/images to be output are all in content.php. That way, if you want to change the structure you go to the .php file of the page's name. If you want to change or add actual text, images, or functionality, you do it in content.php. And if you ever need to change the structure outside of the body, you do it in header.php, footer.php, and stls.css, and the changes take effect in ALL pages.
For example, since my header and footer have been created already and all I need to do is add content, here is the skeleton of one page:
Inside of each div, I call a function (such as para1() ) which exists in content.php (included by default in my header). This function contains the information I actually want to output:
All of this is done in HTML and uses the CSS which I've defined already. The only thing you'll note that's weird about this method is "everyone\'s", as I've "escaped" the ' character with \, because it would otherwise mess with my code. With this system, everything is neat and tidy, and there's never any accidental difference in other pages--though if you really need it you can accomplish that as well, it just takes more effort
AJAX
AJAX is basically a JavaScript tool that can also interact with the web server. If you remember what I said about JavaScript early on (that it's client-side) you'll understand that this means its both client and server-side, in essence. The downside is that it (uses--this is misleading, AJAX actually IS JavaScript, to an extent) JavaScript, which can be disabled by the user, but the plus side is that it can update just one section of a webpage without reloading the whole thing. To imagine what this can accomplish, it can be used for feats as small as making a count-down clock that doesn't require updating the whole webpage every second, to creating Google Maps, which allows you a HUGE amount of interactivity without horribly straining the web server, and keeping clients waiting.
HTML
<html>
<head><title>=SWF= Spartan War Fighters</title></head>
<body>
Hello World!
</body>
</html>HTML is a fairly limited language for web development on its own (which is true for most web languages). It's a browser-side language, which means that the client's browser is what interprets everything that is "said" in the code. The HTML part of a website is mostly going to be actual content (this text would exist inside of a <p> statement, images and video are also embedded via HTML) some interactions between the client and server (links and forms--what I'm typing in right now is a big form), and some layout and font aspects are HTML related (sectioning the website into DIVISIONs-- <div> --is an HTML characteristic. The bbcode
[b][/b] tags exist in HTML as well, as <b></b>).The thing about HTML is that it's a hassle to code with alone--divs take up huge amounts of space in the code, and even if the same div is re-used many times, its characteristics need to be re-defined each time. Before divs were common practice, designers used immensely complicated tables to get things looking the way they wanted. The complications in design led to:
CSS
CSS (stands for Cascading Style Sheets) is the easiest way to make something pretty. It can be used to assign specific attributes to a group of that not-so-fancy HTML content. For example, if I wanted to make all <p> (Paragraph) elements bright red, I could do this:
.p { color: rgb(255,0,0);} .. Alternately, if I just wanted to be able to define any menu elements as the same color, I could define something like this: p.menu
{
margin:5px;
font-size:16px;
color:rgb(250,210,40);
}At that point, I could call
<p class="menu">Menu item here</p> and it would meet all of those characteristics. Not only that, but if I use p.menu for all of my menu colours, for every page on my website, I don't have to change every single one of those colours when I decide that I actually want a purple menu--all I do is change the one definition. CSS is also a great way to define all of your DIVs (because, again, you don't want to have to redefine every division of your web page. Imagine if you needed your left menu bar to be 10 pixels wider to incorporate some new menu item--without CSS you would go to each individual page of your site and change the width of that menu, but in CSS you just do it once). Now, for functionality, CSS can't help you, and HTML is lacking, so we turn toPHP
PHP is a server-side language, which means that only the server "hears what it says." So if I typed
<?php monkey! ?> the server would just be confused, and the user would see nothing on their screen--not even in the "source code" as revealed by the browser. PHP does have some commands that are able to output text, taking the same example from the HTML topic:<html>
<head><title>=SWF= Spartan War Fighters</title></head>
<body>
<?php
echo 'Hello World!';
?>
</body>
</html>This code would result in the same thing: Hello World! output against a blank, white background. The benefits of PHP are manifold, though I'll just touch on 3 things: Being the Workhorse, Being Secret, and Being Clean Code.
PHP is the Workhorse in the triforce of HTML, CSS and PHP. While CSS is the princess who makes things look pretty and HTML is the guy that shows you what you want to see, PHP does everything else. An HTML form submits a user's name and password to the server, a PHP script picks it up, gathers information from a hidden, server-side password file, interacts with a database, decrypts the password in the database, compares it against the user-submitted password, and then tells the HTML script to authorize the user. The CSS may be responsible for the font, and the HTML for outputting "Welcome, Admin!" but it's the PHP that did the work there--and indeed it does the work to keep the user "logged in," as it were, as well.
An ambiguous aspect of PHP is that it is "secret." The user never gets to see what goes on in the PHP script. What happens is, every file that ends with .php is "translated" by the web server before it is given to the client, who--even if he or she downloads the file individually from the website--will only see what is output to the HTML by the PHP, not the PHP itself. For example, if the client tries to download my decryption script, they would likely see nothing at all, or perhaps just the result of a the PHP script if it didn't meet any fatal errors (in this case it might just be "incorrect username or password" because that's what's supposed to happen if the form passes incorrect data). For this reason, it's handy for Database manipulation, and also to hide aspects of proprietary source code (though, to be fair, most of whatever you'd want to do for a gaming website has been done millions of times over. The only reason I want to write my own code for most of it is so I can get the experience.) The BAD side of this secrecy is that it makes PHP not inter-operable with JavaScript and any kind of client-side dealio. I don't have any examples coming quickly to mind.
The last thing is cleanliness of code. Here's an example of a website structure that I designed, starting with the files and their placements. Everything beyond \www is publicly available.
\htaccess\WEBSPACE\password.txt
\htaccess\WEBSPACE\www\index.php
\htaccess\WEBSPACE\www\header.php
\htaccess\WEBSPACE\www\footer.php
\htaccess\WEBSPACE\www\content.php
\htaccess\WEBSPACE\www\stls.css
\htaccess\WEBSPACE\www\membersonly.php
\htaccess\WEBSPACE\www\somethingelse.php
That's a lot of files, but here's the magic: Imagine a website with a top menu bar, a navigation menu on the left, the BODY in the middle, and a final bar on the bottom. All of the characteristics of these and the characteristics of the content are defined in stls.css, which is shared amongst all pages. The structure of everything beyond what's in the BODY is in separate files (header.php + footer.php). The structure within the BODY of the page is defined in index.php, membersonly.php, and somethingelse.php (or whatever actual, different pages you want to add). The text/images to be output are all in content.php. That way, if you want to change the structure you go to the .php file of the page's name. If you want to change or add actual text, images, or functionality, you do it in content.php. And if you ever need to change the structure outside of the body, you do it in header.php, footer.php, and stls.css, and the changes take effect in ALL pages.
For example, since my header and footer have been created already and all I need to do is add content, here is the skeleton of one page:
<?php
$page = array(); //create an array for page variables, such as the title.
$page['title']="Spartan War Fighters"; //define the title of the webpage. This is carried on to header.php which sets the html attribute of <title> to whatever is stored in $page['title']. This lets me use different titles for different pages within the web.
include('header.php');
?>
<div class="body"> //Body content goes within this
<div class="body_title"><?php body_title('Home'); ?></div>
<div class="body_fj"><?php body_fj(); ?></div>
<div class="body_content"><?php para1(); ?></div>
<div class="body_content"><?php para2(); ?></div>
</div>
<?php
include("footer.php");
?>
Inside of each div, I call a function (such as para1() ) which exists in content.php (included by default in my header). This function contains the information I actually want to output:
function para1()
{
echo '
<br /><br /><br />
<h2 class="content">Welcome to the Spartan War Fighters Website!</h2>
<br />
<p class="content main">This clan believes in teamwork and having fun. We are
dedicated to Battlefield 2 (BF2) and would like to encourage others interested
in miltary gaming to join us in an event and eventually our clan. We place
value in leadership, individual skill, and communication. Take your time, look
around, and get to know the members of the =SWF= Clan. We are a cohesive team
with strong camaraderie. We foster enjoyable, lasting relationships that
enhance everyone\'s on-line gaming experience. Begin your in-processing now,
invest your gaming time with us, and reap the benefits.</p>';
}
All of this is done in HTML and uses the CSS which I've defined already. The only thing you'll note that's weird about this method is "everyone\'s", as I've "escaped" the ' character with \, because it would otherwise mess with my code. With this system, everything is neat and tidy, and there's never any accidental difference in other pages--though if you really need it you can accomplish that as well, it just takes more effort
AJAX
AJAX is basically a JavaScript tool that can also interact with the web server. If you remember what I said about JavaScript early on (that it's client-side) you'll understand that this means its both client and server-side, in essence. The downside is that it (uses--this is misleading, AJAX actually IS JavaScript, to an extent) JavaScript, which can be disabled by the user, but the plus side is that it can update just one section of a webpage without reloading the whole thing. To imagine what this can accomplish, it can be used for feats as small as making a count-down clock that doesn't require updating the whole webpage every second, to creating Google Maps, which allows you a HUGE amount of interactivity without horribly straining the web server, and keeping clients waiting.
Every website uses html to some degree, but they rely on other things like JavaScript + the other stuff above (as well as a ton of other languages like Ruby on Rails or PERL or other languages that mostly accomplish what I+others do with PHP). If you have any knowledge of HTML, it is actually still useful. As a very basic example, use your browser to "View Source" and you'll see that almost every website starts with <html> (some sites will start with something like this:
