Understanding what is web development and web design

From Joomla! Documentation
(Difference between revisions)
Jump to: navigation, search
(→‎Website)
(→‎Web development)
 
(7 intermediate revisions by one user not shown)
Line 1: Line 1:
−
First of all we got to define several terms to clarify what are we going to talk about
+
{{RightTOC}}
  
−
== webpage ==
+
== Introduction ==
−
Quoting from wikipedia [[wikipedia:Web page]]:
+
−
<blockquote>
+
−
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.
+
−
</blockquote>
+
−
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:
+
This document is for the clarification of some common misconceptions about web development and web design. An important number of people tent to thing think that the expression webmaster, web designer, web developer means the same, this could bring problems and confusion in the future, the functions and responsibilities of a web developer and a web designer need to be well defined to be able complete cycles in the creation of web project without problems and delays.
  
−
<pre>
+
== Web design ==
−
file: page.html
+
−
+----------------------+
+
−
|  header html code    |
+
−
|  menu html code      |
+
−
|  content html code  |
+
−
|  footer html code    |
+
−
+----------------------+
+
−
</pre>
+
  
−
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]]
+
Web design is the job of the web designer, this person is in charge to interview the client, find out what it wants, how it wants it, how it should looks like and how it should behave, then the web designer proceed  make visual representations of the site, that helps the client to visualize it future website, just like architects make scale models of houses to give to the clients a visual experience of the product under development.  
  
−
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.
+
The next phase if to iterate several times (about 2 or 3 times) until the notes, and sketches of the web designer matches the requirements of the client. This part is crucial because most clients don't know exactly what they want and/or don't know how to explain it. A communication error in this part could cause huge delays in the project and even the total failure of the project. Every requirement with it detailed specifications should be registered and reported to the client for a final review and approval before start any project designing or development activity. this activities could easily take 1 or 2 weeks in medium to large size web project.
  
−
This is one of the possible structures for a webpage based on PHP
+
Web designer don't have to deal with programming matters they could know something or nothing about it, but they should know what tools are available and what job they do, but not how they do the job or how to configure them. The language of a web designer is more human and friendly to almost any clients, the more a web designer knows about programming and technical language the more difficult tend to be the communications between the client and the web designer.
  
−
<pre>
+
The job of web designers is actually underrated and some novice web developers tend to think that this job is easy and makes the web designer an optional asset, the job of web designer is not as easy as it sounds, a simple thing like make sure the client understand what is it paying for is actually not easy at all.
  
−
file: header.php
+
== Web development ==
−
+--------------------------+
+
−
|  header html+php code    |
+
−
+--------------------------+
+
  
−
file: menu.php
+
Web development is the job of the web developer also know as webmaster, this person is in charge of the construction and resolution of the designer requests, the web designer will provide to the web developer all the registered notes about specifications and requirements, also it will provide visual representations of the website pages in picture files or vectorized illustrations.
−
+--------------------------+
+
−
|  menu html+php code      |
+
−
+--------------------------+
+
  
−
file: content.php
+
Some web developers ask for vectorized illustrations because they can fetch any image and logo included in the vectorized illustration and render those object with the resolution and specification the developer need, other developers ask for pictures files such as PNG about the final design of the each page and all the used resources such as picture, logos, etc in a separated folder. As a recommendation any web developer should ask to the designer both the illustration and rendered pictures specifically in PNG format to avoid any confusion about color, dimensions, etc.
−
+-----------------------------------------------------+
+
−
|  content html+php code (fetch data from database)  |
+
−
+-----------------------------------------------------+
+
  
−
file: footer.php
+
For example, if a web designer makes an illustration in X program version 1.0 but the web developer got the version 2.0 of such program and opens the file illustration, this could looks very very different in the screen of the web developer, things like color tones and gradients could looks totally different, also JPG files degrades the color of images depending on the compression level of the JPG files, this files should NOT be used to pick colors, because those color are degraded to different values, in the other hand PNG files are lose-less compressed pictures witch are 2 times bigger in file size than JPG files but preserve the correct colors and shapes, those are some of the problems that any web projects should try to avoid.
−
+--------------------------+
+
−
|  footer html+php code    |
+
−
+--------------------------+
+
  
−
file: page.php
+
Next thing the web developer have to do is to solve all the web designer requests, the web developer should be always up to date in what are the new techniques, what are the new tools, what are the technologies, what job they do, how do they do the job, how to configure them and how they interact with other tools to avoid any problem, as you can see web developer's job is not easy at all.
−
+--------------------------+
+
−
|  include "header.php"    |
+
−
|  include "menu.php"      |
+
−
|  include "conten.php"    |
+
−
|  include "footer.php"    |
+
−
+--------------------------+
+
−
</pre>
+
  
−
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:
+
The web developer have to define several technical specifications that are transparent (they don't care or they don't note the difference) for the web designer and client most of the times, for example, web server OS, web server applications, web server security, CMS to implement, extensions to implement, extensions that need to be developed because they don't exist, configurations, and a lot more. Is not a mystery that web developers have to learn lots of different programming languages in order to be able to correctly develop a web project, some of those languages are HTML, CSS, JavaScript, PHP, SQL, XML, JSON, AJAX, LESS, and others. Also a web developer should learn how to use several frameworks that are needed to be able to achieve scalable web projects among this frameworks we got Content creation kits (CCK), template frameworks, CSS frameworks, java script frameworks such as Mootools and Jquery.
  
−
<pre>
+
When the template of the website is finished and some example content is in place, the web project should be hosted in a development server which is under control of the web develoepr and web designer, this initial version of the web project should be accessible thought Internet so the client and web designer can access and review it anytime, after several (normally 2 or 3) iterations of reviews, bug fixes and changes the web project should be ready to go live.
−
file: landing.php
+
−
+--------------------------+
+
−
|  include "header.php"    |
+
−
|  include "menu.php"      |
+
−
|  some text and images    |
+
−
|  include "footer.php"    |
+
−
+--------------------------+
+
−
</pre>
+
  
−
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.
+
== Conclusions ==
  
−
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.
+
This document demonstrates how different and important is the job of the web developer and the web designer, each position plays a fundamental role in any web project and is a fatal mistake underestimate any of them.  
  
−
== Website ==
+
Finally is very important to understand that the biggest challenge of any project is to avoid communication problems, try always to take notes and review them with the clients and coworkers, makes sure that what you see at your screen others sees the same on their screens.
−
Quote from Wikipedia [[wikipedia:Website]]
+
  
−
<blockquote>
+
[[Category:Tutorials]]  
−
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.
+
[[Category:Development]]
−
</blockquote>
+
−
 
+
−
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.
+
−
 
+
−
<pre>
+
−
 
+
−
[ 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
+
−
 
+
−
</pre>
+

Latest revision as of 02:07, 22 October 2012

Contents

[edit] Introduction

This document is for the clarification of some common misconceptions about web development and web design. An important number of people tent to thing think that the expression webmaster, web designer, web developer means the same, this could bring problems and confusion in the future, the functions and responsibilities of a web developer and a web designer need to be well defined to be able complete cycles in the creation of web project without problems and delays.

[edit] Web design

Web design is the job of the web designer, this person is in charge to interview the client, find out what it wants, how it wants it, how it should looks like and how it should behave, then the web designer proceed make visual representations of the site, that helps the client to visualize it future website, just like architects make scale models of houses to give to the clients a visual experience of the product under development.

The next phase if to iterate several times (about 2 or 3 times) until the notes, and sketches of the web designer matches the requirements of the client. This part is crucial because most clients don't know exactly what they want and/or don't know how to explain it. A communication error in this part could cause huge delays in the project and even the total failure of the project. Every requirement with it detailed specifications should be registered and reported to the client for a final review and approval before start any project designing or development activity. this activities could easily take 1 or 2 weeks in medium to large size web project.

Web designer don't have to deal with programming matters they could know something or nothing about it, but they should know what tools are available and what job they do, but not how they do the job or how to configure them. The language of a web designer is more human and friendly to almost any clients, the more a web designer knows about programming and technical language the more difficult tend to be the communications between the client and the web designer.

The job of web designers is actually underrated and some novice web developers tend to think that this job is easy and makes the web designer an optional asset, the job of web designer is not as easy as it sounds, a simple thing like make sure the client understand what is it paying for is actually not easy at all.

[edit] Web development

Web development is the job of the web developer also know as webmaster, this person is in charge of the construction and resolution of the designer requests, the web designer will provide to the web developer all the registered notes about specifications and requirements, also it will provide visual representations of the website pages in picture files or vectorized illustrations.

Some web developers ask for vectorized illustrations because they can fetch any image and logo included in the vectorized illustration and render those object with the resolution and specification the developer need, other developers ask for pictures files such as PNG about the final design of the each page and all the used resources such as picture, logos, etc in a separated folder. As a recommendation any web developer should ask to the designer both the illustration and rendered pictures specifically in PNG format to avoid any confusion about color, dimensions, etc.

For example, if a web designer makes an illustration in X program version 1.0 but the web developer got the version 2.0 of such program and opens the file illustration, this could looks very very different in the screen of the web developer, things like color tones and gradients could looks totally different, also JPG files degrades the color of images depending on the compression level of the JPG files, this files should NOT be used to pick colors, because those color are degraded to different values, in the other hand PNG files are lose-less compressed pictures witch are 2 times bigger in file size than JPG files but preserve the correct colors and shapes, those are some of the problems that any web projects should try to avoid.

Next thing the web developer have to do is to solve all the web designer requests, the web developer should be always up to date in what are the new techniques, what are the new tools, what are the technologies, what job they do, how do they do the job, how to configure them and how they interact with other tools to avoid any problem, as you can see web developer's job is not easy at all.

The web developer have to define several technical specifications that are transparent (they don't care or they don't note the difference) for the web designer and client most of the times, for example, web server OS, web server applications, web server security, CMS to implement, extensions to implement, extensions that need to be developed because they don't exist, configurations, and a lot more. Is not a mystery that web developers have to learn lots of different programming languages in order to be able to correctly develop a web project, some of those languages are HTML, CSS, JavaScript, PHP, SQL, XML, JSON, AJAX, LESS, and others. Also a web developer should learn how to use several frameworks that are needed to be able to achieve scalable web projects among this frameworks we got Content creation kits (CCK), template frameworks, CSS frameworks, java script frameworks such as Mootools and Jquery.

When the template of the website is finished and some example content is in place, the web project should be hosted in a development server which is under control of the web develoepr and web designer, this initial version of the web project should be accessible thought Internet so the client and web designer can access and review it anytime, after several (normally 2 or 3) iterations of reviews, bug fixes and changes the web project should be ready to go live.

[edit] Conclusions

This document demonstrates how different and important is the job of the web developer and the web designer, each position plays a fundamental role in any web project and is a fatal mistake underestimate any of them.

Finally is very important to understand that the biggest challenge of any project is to avoid communication problems, try always to take notes and review them with the clients and coworkers, makes sure that what you see at your screen others sees the same on their screens.

Retrieved from "http://docs.joomla.org/index.php?title=Understanding_what_is_web_development_and_web_design&oldid=76852"
Personal tools
Namespaces

Variants
Actions
Navigation
Joomla! Sites
Toolbox