Category Archives: Web Design

  • 0

What I need to study to learn Web Programming?

To learn web programming and to build a fully working website and be able to manage it there are vast of skills that you need to have starting from server setup until coding the website and fixing problems when it comes up. This articles is not a programming tutorial but rather gives you a fast overview on the skills that you need to know and explanation on each skill to help you start.

Networking Background

First thing that you need to have is to get an idea about the overall image of a website. How it is available to all world? How it process a browser request? How it is displayed at web browser? How the dynamic contents are made? And so on.

TCP/IP package
TCP/IP package is the backbone of the internet. Internet it self is a huge group of computer machines connected together with routers. Both machines and routers support TCP/IP package and use it to communicate seamlessly. TCP/IP is a group of protocols that starts from physical signals exchanged between adjacent machines to high level layers protocol like HTTP which server HTML pages and FTP which server files.

IP Structure
IP is the abbreviation of Internet Protocol and it is a unique identifier that identify each machine connected and publicly accessible through internet. IP currently has two commonly used versions. First is IPv4 which consist from four segments divided by dot in between. Each segment is 8 bits in size or has range from 0 until 256 decimal. So the range of IPs starts from 0.0.0.0 until 255.255.255.255 giving a range of roughly 4 billions unique IPs.
Other popular version is IPv6 which is 128 bits and written in 8 segments divided by colon and each segment is 16 bits written in hexadecimal. i.e. FE80:0000:0000:0000:0202:B3FF:FE1E:8329

HTTP Protocol
HTTP protocol is the most top layer of TCP/IP protocol stack. It works on top of TCP layer which provides a connection oriented reliable bits streams. HTTP provide to the application using it a request/response scheme for transferring HTML pages and posting form requests. For more detail visit HTTP Protocol Article

Web Server
A web server is a service that runs on a machine connected to internet that processes requests via HTTP, the basic network protocol used to distribute information on the World Wide Web. Apache is the most famous web server on Linux environment while IIS (Internet Information Service) is the most famous web server on Windows environment. Other alternatives are nginx which runs on Linux and Apache Tomcat which supports JSP (Java Server Pages).

FTP Protocol
FTP is another application layer protocol similar to HTTP. The main difference is that FTP is tightly related to basic file operations. For example there is instruction to create directory, change directory, list files, upload file, download file and so on. For more info read the FTP protocol Article

Domains Structure And DNS
Domain names are a unique identifier to a website. It is considered the branding for this website. Each domain is composed from a domain extension and domain identifier i.e. example.com. Some domains has country extension as well i.e. example.us, example.co.uk. A domain itself is not a reachable address it is just a unique identifier, so to know the location of the machine to connect to an IP is required. IP can accessed by routers which support Internet Protocol. To lookup IP using domain name a registry and authoritative DNS server is required. A registry is virtually a huge list of domains and its authoritative DNS servers (In real it is not one list but hierarchical lists to achieve speed and optimized lookup). The browser connect to this registry first to get authoritative DNS servers. It then connect to the authoritative DNS to get a more local authoritative DNS until it gets the corresponding IP information for this domain.
There are several kinds of DNS information. For example A entry is for serving domain to IP lookup. MX record is for defining authoritative mail exchange server. NS for defining the authoritative DNS servers. And so on…
DNS servers work on top of TCP protocol.

SMTP Protocol
SMTP is the abbreviation for Server Mail Transfer Protocol. It is the protocol designed and optimized for mail exchange. Alike HTTP and FTP it is an application layer protocol with a set of commands to exchange e-mail message. The most popular open source SMTP servers are EXIM and Postfix they can be installed and run on Linux environment.

POP3
POP3 is the abbreviation of Post Office Protocol. It is the application layer protocol responsible for accessing mail box and downloading or deleting emails. On the contrary SMTP protocol is for e-mail sending or receiving. So SMTP and POP3 work together to have a complete email exchange/management function.

Socket Programming
A socket is an endpoint of a two-way communication link between two programs running on the network. Socket is bound to a port number so that the TCP layer can identify the application that data is destined.
Socket programming is a part of programming that take care of building a software that work on application layer. Mainly there are two types of connection to use TCP and UDP. TCP is the abbreviation of Transfer Control Protocol and it provided reliable connection oriented bits stream transfer. While UDP is the abbreviation of User Datagram Protocol, it providers a connectionless best effort bits stream connection. While TCP is best suited for files transfers, UDP is better used for video and audio streaming. Check Socket Programming tutorial in C

Graphic Design

While graphic design itself is not part of the web programming article but having a short background on what goes on there should be useful. Before the start of web design step, there is graphic design step. Mainly it is done using a graphic design software PhotoShop is ideal for this task. Then the design of full pages is built using layers on PhotoShop and saved as PSD file. Mostly you will not need to design your self but rather the task will be handled to a designer and all you need to know is that PSD file that you will get is composed from layers and is or can be sliced to create HTML out of it. However if you are into graphic design you can check this tutorial Photoshop Tutorials

Web Design

Web design is the process of converting a graphic design into a view-able HTML page. There are tools to do this like in PhotoShop there is slicing tool which is used to divide a single big page image into many slices of images.
slicing

HTML And HTML5
HTML is the abbreviation of Hyper Text Markup Language. It is static language used for formatting text. Formatting here is not the design itself but it is a way to tell what the type of the contents. For example a button would be created using HTML. But button color width font and so on should be left to CSS to style it.
For more information about HTML visit What is HTML? Article. Check HTML5 Tutorial to learn how to write HTML(5).

CSS3
CSS3 is the current version of CSS. It is the abbreviation of Cascading Style Sheets. It is considered the complementing part of HTML because it gives color, alignment, font, font size, spacing to the content marked up by HTML. For more information about CSS visit What is CSS? Article

Responsive Design
Responsive design is a new trend in design achieved by latest CSS3 supporting @media element which allows to restrict design to a certain device. A device can be PC, Tablet or Smart Phone. Using this conditioning element allowed serving different shape for each device using the exact same contents. From here the word responsive in responsive design came, it means a design that adapt to the device width, height and orientation to display in best fit for the device.

13_responsive_design_tutorials_css3_orientation_media_queries

Server Side Web Programming

Server side programming means writing code that runs on server side and its output is then sent to the browser to display it. A visitor can not and should be able to view or access the source code but rather access its output. There are several languages to write server side code.

PHP
PHP is almost the most widely used server side programming language. Because it is easy to learn, fast and open source. On the contrary to Java, it can be function oriented or object oriented. For more information about PHP visit What is PHP? Article. To learn to program in PHP visit PHP Tutorial

ASP.NET
ASP is the abbreviation is Active Server Pages. ASP it self is not programming language but rather a technology to run code written by a language supported by Microsoft .NET framework and send the output through HTTP protocol. The languages supported by ASP.NET are C# .NET or Visual Basic .NET . The server required to support ASP.NET is IIS (Internet Information Server) available in windows server package. Because it is part of Microsoft, the technology it self is not open source and considered having a property license.

JSP
JSP is the abbreviation of Java Server Pages. It is simply Java compiled pages (byte code) that run on server side and output it sent to the browser. There are several servers to run JSP available for example Apache Tomcat made by apache. Glassfish is another option.

Python
Python is a widely used general purpose language however it can be served from web server as a server side language. Its design philosophy emphasizes code readability, and its syntax allows programmers to write code in fewer lines of code than would be possible in languages such as C++ or Java. The language provides constructs intended to enable clear programs on both a small and large scale.

Node.JS
Node.js is an open source, cross platform runtime environment for developing server-side web applications. Node.js applications are written in JavaScript and can be run within the Node.js runtime on OS X, Windows, Linux or FreeBSD. Its work is hosted and supported by the Node.js Foundation.

Template Engines
Template engines are tools to separate program logic and presentation into two independent parts. This makes the development of both logic and presentation easier, improves flexibility and eases modification and maintenance. The idea of templates engines came from the need to separate the design (the output of the server side language) from the program logic written by server side language. It is considered an early attempt to have a clear and separated code before the introduction of MVC.

MVC and Frameworks
Using template engines achieved the separation of programming logic from presentation (design) however there was another need to separate programming login from data abstraction because there are many different ways to store data. i.e files, memory or DBMS. moreover there are many DBMS available for example MySQL, Microsoft SQL, Oracle, Postgre SQL, MongoDB (No SQL) and so on. So to cover this need a MVC pattern design was invented. MVC is the abbreviation of Model View Controller. A Model is the data abstraction layer, Controller is the program logic and View is the presentation. To use MVC a server side programming language alone was insufficient so frameworks have been made. A Framework is a collection of libraries and tools which ease the RAD (Rapid Application Development) and provide base line for building MVC based applications.

CMS
CMS is the abbreviation of content management system. It is a computer software that allows publishing, editing and modifying content, deleting as well as maintenance from a web interface. It is another way for non programmer to be able to do programming tasks. Examples of the popular available CMS are Drupal and Joomla. WordPress is another example but mainly suited for blogging.

Database Understanding and SQL skills

A database is a collection of data that is organized so that it can easily be accessed, managed, updated and deleted. It comes as a solution for problems arose when data was being stored into files. There were trouble searching data in a speedy manner, and were trouble to remove the gaps arise after deleting data and so on. All those requirements and solutions to the trouble arose are collected together into a single system. This system is called Database Management System or DBMS for short.

Database Design
Real world database are not that simple, it is called relational database and easily can have tens or hundreds of tables that are related or linked together. So a robust database design is required to ensure there is no or least data redundancy, and ensure data integrity and security. Common database design diagram is called ER diagram (Entity Relationship)
entity-relationship-diagram

Check this tutorial to learn ER Diagram basics
SQL
To access, manage update and delete data from a database, a language has been developed this language is called SQL (Structured Query Language). For more information about SQL visit What is SQL? Article. Check SQL Tutorial to learn how to write SQL queries.

MySQL
MySQL is one of the popular DBMS available. It is mostly used with PHP in a LAMP environment (Linux Apache MySQL PHP). For more information about MySQL visit What is MySQL? Article

ORM
ORM is the abbreviation of Object Relational Mapping. In computer science it is a programming technique for converting data between incompatible type systems in object-oriented programming languages. This creates, in effect, a “virtual object database” that can be used from within the programming language. In many frameworks, ORM is builtin to provide support for virtual object database that as a result, one could migrate database over different DBMS without need to modify his code.

Client Side Web Programming

Last skill required to learn web programming is client side scripting. It means writing code that runs by the browser before or during rendering of the HTML page. The code mostly used to help in rendering the HTML page and/or load some other elements from web server using AJAX technology.

DOM
DOM is the abbreviation of the Document Object Model. It is a cross platform and language independent convention for representing and interacting with objects in HTML, XHTML, and XML documents. The nodes of every document are organized in a tree structure, called the DOM tree.

Javascript And jQuery
Javascript is nowadays not only the most common but the soley available and widely supported programming language. It is supported by all popular browsers like Google chrome, Firefox, IE, Opera and Safari. Javascript is object oriented language. For more information about JavaScript visit What is JavaScript? Article. Visit JavaScript Tutorial to learn JavaScript.
jQuery is a library built on JavaScript to help manipulate DOM (Document Object Model) in an easy way. check jQuery Tutorial to learn it in more detail.

AJAX Understanding
Ajax is a client-side script that communicates to and from a server/database without the need for a post back or a complete page refresh. The best definition I’ve read for Ajax is “the method of exchanging data with a server, and updating parts of a web page – without reloading the entire page.” Check AJAX Tutorial to learn how to write code that use AJAX

Bootstrap
Twitter Bootstrap is the most popular HTML, CSS and JavaScript framework for developing responsive, mobile-first web sites. Check Bootstrap tutorial to learn how to use it

Congratulation on finishing the basic steps of learning web programming, check the advanced topics for learning web programming