Intro
I decided to take a step back and write an article on the basic understandings of the web. I don’t know what the heck they teach in school anymore when it comes to computer class, but I feel there are things everyone should know.
Like what is a file extension? How do computers work? What’s a browser? Why is MacOS better than Windows? And how does the internet work? (See what I did there 🙂 I snuck in my Apple agenda )
These are the things you should be learning. Not Microsoft Paint!
Anyway, I often have clients who want to understand what and how the web works, and to show them what to expect in the process. I often go over a lot of things, but I felt it would be best written out.
This will hopefully help people who are looking to have a website made. It is also helpful for anyone just starting with web, whether becoming a web developer or designer.
I’ll show you how it all works, teach you some definitions and catch you up to speed so you won’t be completely clueless allowing the people you hire to take you for a ride.
So whether you’re looking to join the industry, or just need a quick understanding, this hopefully will be a good intro.
The Basics of the Internet
The internet works by someone taking files and putting them in a special folder where they are then served up for the world to see. These files can be accessed in a few ways, but for our purposes here, we access them through a browser.
The browser takes in an address and finds the files and outputs the site you see.
You know what a browser is right? Chrome, Firefox, Safari? Good Lets move on.
Server | Cloud
Your site is in that special folder we mentioned. That folder is on… a computer. I know, sounds crazy right? People think a Server is some huge magical box at the center of some cosmic dangerous system.
Well, it’s not. It’s a computer that has been set up to serve files. They now have new names for it. You may be familiar with The Cloud?
The cloud is not some magical place where your files go. Your files are being stored on some hard drive somewhere… And so is a website.
You can run your own server (just ask Hillary…) on your computer and host your files on it which will be served up for the world to see. But this would involve a lot of setting up, maintenance, a static IP address and keeping your computer on forever. If you shut it off, your site would be down.
The computers that access the server are identified as client-side computers, as opposed to server-side. Your computer right now is known as the client-side as it accesses my site on the server.
Hosting Services
Because its hard enough to run a server, let alone make a website, most people use a hosting service which will host their files for them on the hosting providers computers, -or better term, their servers. These hosting providers have huge computer farms where they store your files and make sure your site is running all day!
Therefore, most people use a hosting provider and upload their site’s files to the hosting company and allow them to run the server and all its maintenance.
Some hosting providers are better than others. Some are painfully horrible, some are not. Your web developer should know which ones are good and necessary for the current project. Hosting Services are usually a monthly fee and can be anywhere from $5 to $100 a month.
Unless you know what you’re doing, and know how to set up a server, a database and some other functionalities, please don’t try to be a hero and buy your own hosting server. This will only cause your developer more headache as he tries to work with the hosting service you bought which may not be very good and he will need you to set things up, and chances are you won’t know how.
FTP
While we can view the site that we uploaded to the server in the browsers, how do we actually upload the files?
There are a few ways, but the most famous is using an FTP Client. FTP stands for File Transfer Protocol. A FTP Client is just a program that allows you to connect to the servers files and upload your own files. There are many programs out there that do this.
Below is an example of the ftp client I use, called Coda 2. I simply have my files on my computer on one side (left) and drag and drop to the other side (right), which is the remote, or servers side and my files get uploaded! Of course I have to make sure I upload in the right place. FTP also requires you to log into your remote server with a username and password, which you can get and set up on your hosting server.
You can click the image to see a bigger version.
IP adDress
Every website can be accessed by reaching the server computer where your site files are being held. That computer has an address. This is done by typing into the browser that computers address known as an IP address. Something like 123.456.789.10.
Most people cannot even remember phone numbers easily, so IP addresses might scare you. Thankfully we use domains which makes life easier.
Domain
A domain is a name that’s easily memorable and points to a site. Like saltnpixels.com is my domain and points to my hosting server where all my web stuff is. Google.com is another domain you probably use everyday.
You can buy a domain for a yearly fee of usually somewhere between $5 to $15 dollars. Sometimes a famous name will cost a lot more.
Domains are usually easy to maintain and all that’s needed is to point the domain to where the hosting service is. Sometimes a little more setup is needed. Although its much easier than setting up the hosting, there is still some setting up nonetheless; and if you know what you’re doing, you can buy a domain. Otherwise ask your web person to do it for you.
Cross Browser
The browser as mentioned before is what we use to access websites. Browsers have come a long way. They used to try to live by their own rules, and so each browser needed separate code for the site to work correctly in each browser. Thankfully that is mostly gone.
Quick History
Long ago the most famous browser was Netscape, soon replaced by Microsoft’s Internet Explorer, also known as IE. Almost everyone had a windows computer and it came with IE. Most people know that to access the internet you click that blue E. So this became very famous and IE was the most used browser for a while.
Later Firefox came on the scene and soon Apple’s Safari and Google’s Chrome. There is also Opera. At this point, most people know they can download other better browsers. Unfortunately, some people don’t, and they continue to use old and outdated browsers that came pre-installed on their devices, never thinking or knowing they should update or install better ones. Microsoft has recently gotten better with IE, but there are lots of issues with older versions.
Problems Between Browsers
This causes problems as newer browsers can handle newer technology. So, for a while, developers had to work double as hard, and make sure your site ran on the newest browsers, but also on some old ones. Especially some old IE versions which were horrible.
At this point, thankfully, most people are using newer browsers. The world is becoming more tech savvy and web developers won’t support old ones unless they need to or you specifically ask for it.
What is important, and what your developer should be doing, is to make sure your website looks decent in each current browser. Cross browser means making sure your site runs smoothly in each major browser. This doesn’t mean the site will always look exactly the same, but usually close enough.
Cross Devices
It’s also important to make sure the site looks good on mobile devices. Usually the site will make some changes in appearance for the mobile version, but not necessarily. It all depends on the sites functionalities and design.
Database
Most sites nowadays need a database or DB for short, which can be thought of as a big excel spreadsheet with a lot of information. Info is pulled from the database and shows up on the site. Sometimes information is also added, or pushed, to the database. The database can be set up on the server.
Dynamic vs. Static websites
Dynamic
You know how if you’re writing a document in Word and you decide you want the date to show up at the top along with your name, it will show up on every page after that? And if you changed the date on one page, it will change everywhere so you don’t have to go doing that? Imagine having to change the date or your name up top on every page… and you have 100 pages! Instead you just have to change it once and it changes everywhere else.
That’s sort of how dynamic works. Most sites especially ones that are changing daily (social sites, news sites, blog sites, classifieds sites) are called dynamic sites because they change. Every time you come back to the site, or even refresh it, the front page has a new article. This is because the page is fetching and pulling info from the DB.
There might be code on the page that says “Go get the latest 5 articles from the DB” or “go get the name of the site and show it here”. So if you create a new article or change the name of the site, your changes will reflect on every page.
Imagine having to change the name of the site on every page… or having to add new articles manually and putting the link to the article on every page it needs to be on. You may want that article to appear in your “latest posts” section in the sidebar, or you might want to add the article link in the menu up top. With a database you don’t need to go changing everything everywhere, on every page to reflect your updates.
Using a DB makes managing a site much easier and maintainable.
Static
Static is much simpler. Your site is made of a few files and nothing ever changes. Like those sites you see where the front page has not changed in three years…
If you suddenly decide you want to add a new page to a static site, it will require more code and more files to be added to your server and then if you wanted to change a link in the menu up top, there is a good chance you will have to make that change on every page, because the menu is hard-coded onto each page and is not dynamic or getting info from anywhere.
Hard coded means the code is fixed and the only way to change what is output is to go directly into the code and make changes. Possibly making changes multiple times in many different places.
It would be a great hassle without a database. Once you have a database in place, your site is much more powerful and can do a lot more. You can have forms where users input data and its saved to the database. You can write articles and it’s saved to the DB.
CMS
So, how do we add info to the Database?
Well, we can code it in, but that would be another hassle! And how would you add articles and maybe even manage your own site?
One answer is with a Content Management System, or CMS. It’s a system that connects with the database and our site and lets us add info in a very friendly way with a nice Graphical User Interface or GUI.
Most CMS’s have a back-end which only you and other admins can log in to and see. This is where you can make changes to the site (dynamic changes). Add articles, move a menu, delete a comment someone made… Your changes here are reflected on the front end of the site for all to see.
CMS’s are awesome and most sites use them. In fact, it is what I am using right now! I am literally typing this article into the back-end of my site and will hit publish when I’m ready! Once I do that the new article will become visible on the front end. You will then be able to visit the new article under saltnpixels.com/articles where all my articles are pulled from the DB and shown.
Some other CMS are Joomla, Drupal and, as I mentioned WordPress. I love WordPress and it’s what I use whenever I make websites. It’s very powerful and flexible and can scale.
CMS can also be customized a lot for your specific needs.
Other type of Sites
The internet is growing and there are other ways of making a site. Some sites claim you don’t need a developer and they have some sort of web building tools. While these might help a small site that doesn’t need much, most sites will benefit from a real, properly coded site.
You also want to think about the fact that these free building tools come with preset themes and can only do so much in terms of functionality. Those themes are also being used by thousands of people and it wont look as professional or unique on your site.
If your thinking big with your site and your dreams, just think of any big company you know. They aren’t using those silly free web building tools. Because those tools are limited, and cannot scale.
However if you just need a temporary site or its a tiny static site that wont require much, it might just be for you.
Web Design vs Web Development
The last thing I want to touch on is web design vs. web development.
By the end of this article you may realize a lot goes into making just one website.
Someone needs to maintain the server and set it up.
Someone needs to design the site and figure out how the site will function visually.
Someone needs to develop the site and make sure it runs smoothly on all devices and current browsers.
And depending on how often the site needs changes, someone may need to be adding articles and stuff, -a content manager.
Sometimes that someone can be one person who wears many hats. Other times it can be a few people. When getting a site made, it is important to know up front what is being done for you and what is not and what the person or company you are hiring is capable of doing.
All these things can be very different. Especially web design and development. People seem to think that someone who makes websites can automatically do both, and while it’s quite possible, that is not always true. Because coding and design actually use different sides of the brain.
Web Design involves using a program like Photoshop or Sketch and using your skills to create the look and feel of the website. What colors will be used? Where should this information go? Is the page too crowded? Do we really need a sidebar?
The Web Developer takes the design and begins to code it up and bring it to life. The buttons that were designed are now clickable. The fonts chosen are loaded. And the colors are coded into the site.
Because of these vast differences, some people only do one job. Some do both.
Try and do some homework and research before hiring someone. Look at sites they have made and you will see what to expect.
Conclusion
I think I have covered everything for an intro. In fact I may have gone a bit over the top, but hopefully this should give you an idea that there is a lot involved when making a site!