| With the pace of change on the Web, it can be hard | | | | scares people, but all it really means is that computer |
| to remember that very few people actually keep up | | | | XYZ is sitting around listening to its wire for anyone |
| with the flood of new technologies, frameworks, and | | | | to say "Hey, I need the stuff for |
| acronyms. Unless you are designing for web-related | | | | arborwebsolutions.com," and once it hears that, it will |
| companies, it's very likely that your clients will have | | | | throw that stuff over the wire. This is what people |
| no idea what "building a web site" actually entails, or | | | | mean when they say you need to buy "Web |
| what happens after you're done designing. In this | | | | hosting" - you need to pay a company to run a |
| article, I hope to give you a very high-level overview | | | | computer with server software listening for your |
| of the Web that you can point a client to, so that | | | | domain name, and handing out those files when |
| they can understand what goes into a web site | | | | someone asks for them. You could run your own |
| besides Photoshop or Flash. | | | | server right in your living room - plenty of geeks do - |
| Let's start with a bit of history. Before any of this | | | | but that's generally more responsibility than most |
| Web malarkey came about, you had computer | | | | people want to take on. Your monthly hosting charge |
| networks. That is to say, people connected individual | | | | also means that whoever owns the computer is |
| mainframes (because personal computers didn't exist | | | | going to fix things when they break, and generally |
| yet) with cables so they could talk to each other. | | | | keep an eye on things for you. If they're a hosting |
| PC's came along, and offices started connecting a | | | | company worth the money you pay them, at least. |
| building's PCs together so they could talk. Then | | | | (Side note: "Servers" aren't just for Web sites. There |
| something really revolutionary happened: people | | | | are email servers that sit around listening for people |
| connected one office network with another. Lo and | | | | to say "Hey! Get this letter to Jane Doe!". There are |
| behold, the basis of the Internet as we know it was | | | | file servers, usually in offices, that sit around waiting |
| born. | | | | for someone to say "I need that presentation file |
| At its heart, the Internet is a network of networks. | | | | from last week." Server programs are everywhere, |
| In most cases, that smaller network is the 1-4 | | | | and every time you have a computer interaction with |
| computers you have in your household, which | | | | another computer, you're probably talking to a |
| connect to the larger "Internet" network through | | | | server.) |
| your router or cable modem or what have you. | | | | Back to the technology. While CSS was taking shape, |
| There is no "center" of the Internet, no overarching | | | | the Web also saw the rise of CGI, or "Common |
| computer directing everything; it's just millions of small | | | | Gateway Interface," abilities. (Note that this is not |
| networks like the one in your house or office | | | | the same CGI as in movie special effects; that's |
| connecting with one another. There are systems set | | | | "Computer Generated Imagery." There are only so |
| up to make it so that if your computer says | | | | many combinations of three letters out there.) CGI |
| "Connect me with computer XYZ," it can find a way | | | | allowed a programmer to write a program that sat |
| to make that connection, but those systems (think | | | | on a Web server and did things more complicated |
| TCP/IP, routing, etc.) are too complicated to talk | | | | than just handing someone an HTML file or a CSS |
| about here. | | | | sheet. With CGI, you could fill out a "form" - those |
| So the Internet existed, but the Web as we know it | | | | collections of text boxes that let you do things like |
| did not. The Internet in those days was good for | | | | buy a book on Amazon or log in to Facebook - and |
| only a few things: email, bulletin boards, and Usenet, | | | | do something with that information on the server - |
| among others. Then along came Tim Berners-Lee | | | | like telling Joe in inventory to charge your card and |
| with his description of a new acronym: HTML. | | | | mail you a book, or taking you to your home page |
| HyperText Markup Language allowed the first web | | | | on Facebook. CGI isn't a "language" in itself, it's just a |
| designers (geeky scientists) to create the first web | | | | system, and there are dozens of programming |
| pages. Think of HTML like formatting in Microsoft | | | | languages that can talk CGI. |
| Word; the words you write are all there, but Word / | | | | Hand-in-hand with CGI is the use of databases. |
| HTML let you give them some extra meaning. HTML | | | | Databases let a server hold on to the information |
| allowed page creators to define their text as | | | | you put in those forms, and CGI can either store |
| paragraphs, bulleted lists, numbered lists, tables of | | | | information into the database or get it back out as |
| data, and more. Most importantly, HTML allowed | | | | needed. So when you make an account at Amazon, |
| page creators to link one page to another - the | | | | they're holding all of your account info in a database. |
| "HyperText" part of the name - so that related | | | | When you log in, Amazon remembers all sorts of |
| documents could be found quickly and easily. | | | | information about you by pulling it out of the |
| As I mentioned before, the first users of HTML were | | | | database again. Databases let you do more than just |
| geeky scientists. HTML let them format their | | | | accounts, though. If you've ever used blogging |
| research papers, and link their papers to the papers | | | | software like Wordpress, Blogger, Joomla!, or any of |
| they cited. That was about it; plain HTML doesn't | | | | the dozens of other blog types out there (that |
| have any real ability to "style" a page outside of | | | | includes Facebook status updates or Twitter |
| identifying what's a paragraph and what is something | | | | tweets), you've used a database to store your |
| more specialized. So the Web was a sea of text, | | | | articles. All a blog is doing is storing your articles in the |
| without even a single image in sight. | | | | database, and then pulling out the most recent ones |
| A few years later, competing ideas about how to | | | | whenever someone comes to your website. |
| give pages some style were merged into a single | | | | So you've heard of fancy new tools like PHP, or |
| system, CSS. "Cascading Style Sheets" let page | | | | Ruby on Rails, or Django? They're basically just |
| creators make their pages prettier by defining how | | | | variations on the CGI / database idea. Sure, they're a |
| the "elements" of HTML (lists, paragraphs, etc.) | | | | lot more complicated than that, but it gives you an |
| should be displayed. The page creator could now say | | | | idea of what your designer / developer is babbling |
| that all text in paragraphs should be red, that lists | | | | about. |
| should be bulleted with little squares instead of circles, | | | | Yep, more or less that's all there is to the Web. I've |
| and to say how tall or wide a certain piece of | | | | left out a metric ton of stuff, but I can always come |
| content should be on the screen. Browser makers | | | | back to that later. So, when you hire a designer to |
| had added this functionality into their programs (like | | | | make a site from scratch, here's what they're |
| Netscape Navigator or Internet Explorer) for a while | | | | basically doing: |
| by this point, but CSS did something radical: it | | | | |
| separated the content to be displayed from the rules | | | | 1. Find an appropriate domain name and buy it (a |
| about how to display it. Using CSS, a designer could | | | | challenge in its own right), and point it to the hosting |
| write two style sheets that made very different | | | | server; |
| looks out of a single HTML page, without making any | | | | 2. Take all of your content (you did give them your |
| changes to the HTML. | | | | content, right?) and mark it up in HTML; |
| And yet, despite the promise of CSS, it started out | | | | 3. Write CSS stylesheets that turn that content into |
| poorly implemented in many browsers, so that what | | | | a nice-looking website; |
| looked fine in, say, Internet Explorer 3 was | | | | 4. Figure out any CGI / database things that need to |
| completely broken in Netscape Navigator 4. So, | | | | be done, and set them up (usually called "back-end" |
| instead of CSS, many designers (since it was now | | | | work). |
| actually possible to "design" a page!) opted to use | | | | "That's so simple!" some clients will say. "I could do |
| HTML's table ability to lay out all their content. The | | | | that myself!" It's true! You don't need a license to be |
| idea was to use a website like an Excel spreadsheet | | | | a web designer, and that's the way it was always |
| - make the columns and rows whatever width and | | | | intended. But when most people with this mindset |
| height you need, and then fill in each "cell" of the | | | | start trying to learn HTML and CSS, they end up |
| table with an image, or some text, until you get | | | | creating nightmarish pages that put MySpace to |
| what you want. This led to some nice-looking | | | | shame. Knowing the tools isn't enough - you also |
| designs, but completely and totally broke the original | | | | have to know how best to apply them. Owning a |
| ideas of HTML. In a table-based design, the HTML | | | | hammer isn't enough to make you a craftsman, and |
| doesn't have any meaning at all; everything is just a | | | | hitting a few nails with it once or twice doesn't make |
| table cell. If the designer you are talking with keeps | | | | you a master carpenter. |
| telling you that "table-based design" is a bad thing, | | | | One final note about Adobe Dreamweaver. |
| that's why. Using HTML together with CSS makes a | | | | Dreamweaver is just a program that helps people |
| site that loads faster and that actually has some | | | | write HTML and CSS. That's it - the Web does not |
| meaning to machines (like Google!), instead of a giant | | | | require Dreamweaver to operate; you can make an |
| spreadsheet. After all, would you ever try to make | | | | entire website in Notepad if you want, as long as you |
| artwork or write an article in Excel? | | | | save the HTML file as ".html" and the CSS file as |
| So, we've got networks, HTML pages, and CSS | | | | ".css". Dreamweaver does make things a bit easier by |
| stylesheets. How do they all fit together? | | | | letting you "preview" your site as you code and type |
| If someone wants a site, they first buy a domain | | | | things wherever you want in that preview, but |
| name. Buying a domain name gives you the right to | | | | remember the foundations of HTML and CSS - text |
| assign the name to a particular computer anywhere | | | | content on one side, presentation on the other. |
| in the world, of your own choosing. A system called | | | | Dreamweaver has a hard time doing that; the sites it |
| DNS ("Domain Name System") informs all of the | | | | creates using those "visual tools" end up like the |
| world's connected networks of where you pointed | | | | spreadsheets I mentioned earlier. Any good designer |
| that name, so that when someone's computer says | | | | should be able to make a beautiful site without ever |
| "Anyone know how to get to ", DNS can say "Sure, | | | | touching Dreamweaver or its ilk. That's why the |
| it's at computer XYZ over there." | | | | design industry generally views Dreamweaver as a |
| Computer XYZ, meanwhile, is running a program | | | | crutch for people who don't yet know what they're |
| called a Web server. "Server" is a fancy name that | | | | doing. |