Understanding what is web development and web design

Revision as of 19:37, 21 October 2012

First of all we got to define several terms to clarify what are we going to talk about

webpage

Quoting from wikipedia wikipedia:Web page:

A webpage or webpage is a document or information resource that is suitable for the World Wide Web and can be accessed through a web browser and displayed on a monitor or mobile device.

Long time ago a webpage where represented by a single text file with the extension ".html" containing the html code to render the content of a single webpage. So back then when a developer wanted to modify certain page from a website it just got to locate the file and edit it to see the new changes. This was the old way to work with websites in the past, some of those websites contained hundred of pages, so at this point you can imagine how hard and time consuming was the job to update content and styles in large websites.

This is the typical structure of a webpage based on .html files:

file: page.html
+----------------------+
|  header html code    |
|  menu html code      |
|  content html code   |
|  footer html code    |
+----------------------+

For example let's say we have a websites with 20 webpages, each webpage have the same code header, menu, and footer, for a particular reason we got to update the header and menu code, all the developer got to do is to edit a file (any) and copy paste the changes to the other 19 files, now imagine if we got to do this with 200 pages, this is what some experts call non scalable systems, because they don't facilitate the growth of a project, instead they actually represent an obstacle. read more about wikipedia:Scalability

With the born of dynamic webpages powered by programming languages such as PHP, a new era for web developers arrived, now a webpage could be represented for one or more files PHP files that in conjunction generates the html code that the browser need to render a webpage, in other words, html files are optional and a webpage is not necessarily represented by a single file anymore.

This is one of the possible structures for a webpage based on PHP

file: header.php
+--------------------------+
|  header html+php code    |
+--------------------------+ 

file: menu.php
+--------------------------+
|  menu html+php code      |
+--------------------------+

file: content.php
+-----------------------------------------------------+
|  content html+php code (fetch data from database)   |
+-----------------------------------------------------+

file: footer.php
+--------------------------+
|  footer html+php code    |
+--------------------------+

file: page.php
+--------------------------+
|  include "header.php"    |
|  include "menu.php"      |
|  include "conten.php"    |
|  include "footer.php"    |
+--------------------------+

As you can see the page is divided in to sections each represented by a PHP file, when the server request the file called "page.php" it mix all the content of the other files and generates the final html output, this way when a developer got to do modifications in the header or menu of it site, it just got to edit the "header.php" and save changes because any other webpage is including that file with the new changes. For example we can make a landing page like this:

file: landing.php
+--------------------------+
|  include "header.php"    |
|  include "menu.php"      |
|  some text and images    |
|  include "footer.php"    |
+--------------------------+

The files "landing.php" and "page.php" includes the same file "header.php" to generates the header of the page, so any change on "header.php" will be instantly reflected on any other page that includes such file, no need to edit every single webpage of your website one by one anymore to have the same page header in all of them.

websites with thousands of pages, articles, pictures, videos and audio, can't simply relay in the old school webpages, they use instead complex systems called CMS's (Content management systems) such as Joomla, Wordpress, Drupal to manage all the information of the site, most of this data is not stored in files anymore, instead it is stored in databases an complex PHP programs fetch the data from the database, process this information and generates the resulting html code to send it to the browser to render the webpage. It may actually sounds complex but is actually an easy and clever way to manage the data of almost any imaginable modern website. Also CMS's adds more benefits for the developers and users of the websites because this systems adds layers of security, multilingual support, media files management, users management and more.

Website

Quote from Wikipedia wikipedia:Website

A website, also written as Web site,[1] web site, or simply site,[2] is a set of related web pages containing content such as text, images, video, audio, etc.

As said before old webpages where represented by files, then old web sites where groups of web pages linked by menus, as simple as it sounds. Modern website relays on CMS's which manages every page, content, and media files a a web site from the comfort of an administrative panel.

The following figure shows how a modern website replies a page request and send back the generated web page output to the user.

[ User ] --> person who want to see a page

   |
   v

[ PC ] --> device the the user uses to connect to Internet

   |
   v

[ Browser ] --> application that the user uses to visualize webpages 

   |
   v

[ Page request ] --> message that the web browsers sends to request information

   |
   v

[ Internet ] --> global communication network 

   |
   v

[ Web server ] --> is a dedicated computer used to host services

   |
   v

[ Web service ] --> is the application who listen and reply to web page requests

   |
   v

[ CMS ] --> is the web application that runs on the web service manages website data

   |
   v

[ Request processing ] --> the CMS determines what kind of information is being requested

   |
   v

[ Security check ] --> the CMS check for common attacks attempts and validates the user credential (login = password) if needed

   |
   v

[ Fetching data from database ] --> the CMS fetch all the information it need from the database

   |
   v

[ Generating page output (html code) ] --> the CMS mix up all the page sections (header, content, footer, etc) into a text stream

   |
   v

[ Page response ] --> the text stream is converted in to page response

   |
   v

[ Web service ] --> the web service takes the page response and issues the transmission of such information 

   |
   v

[ Web server ] --> the web server send the data through Internet

   |
   v

[ Internet ]

   |
   v

[ Browser ] --> the browser interprets the received response and renders the webpage 

   |
   v

[ PC ]

   |
   v

[ User ] --> the users visualize the webpage on the screen screen