Introduction to Web Designing

Introduction to Web Designing

- Guest Lecture by Kailaash Balachandran

2

Chapters

● Introduction● Domains and Hosting● The Working● Programming Languages ● Tools● Running Example

3

Interesting Facts about WWW

§ There’s an estimated 937 million websites on the WWW. § 1 in every 9 people on Earth is on Facebook (2012).§ There are approximately 4,200 new domain names registered every hour.

§ 17 Million users use Google every hour.§ Web design industry is the 2nd fastest growing area in software sector.

§ At any given second, 5 new websites are being developed and published.

4

Sample Web Page (1)

5

Domains and Hosting (1)

Domains § They are used to locate a website. § Example: google.com, yahoo.com, facebook.com§ Domain name and extensions are provided by ICANN.

Internet Corporation for Assigned Names and Numbers§ Extensions includes .org , .net , .gov , .mil , .in , .us

.

6

Sample Web Page (2)

7

Domains and Hosting (1)

Hosting Server§ Where the website content is stored. § Compare this to hard disk in a computer. § Storage space and bandwidth matters. § We require FTP host name, username and password to transfer our files to the server.

§ Use FTP Client to transfer.

8

The Working (1)

HTTP : Hyper Text Transfer Protocol

● Client is the browser.● Hosting Server

URL can be written ashttp://onlinemacha.com (or)http://www.onlinemacha.com (or)onlinemacha.com

9

Languages

Basic web programming languages

§ HTML – Hyper Text Markup Language● CSS – Cascading Style Sheets § Java Script

§ PHP – Hypertext PreProcessor

Client Side

Server Side

10

Tools

Design Tools

§ Photoshop , Illustrator , Corel Draw.§ Dreamweaver

FTP Client Tool§ Filezilla

11

Design Process

1. Know the requirements of the website.

2. Design the entire website on Photoshop.

3. Once the design is finalized, reconstruct the design on HTML / CSS.

4. Photoshop to Code. Test run on your computer.

5. Upload the files to the hosting server using any FTP Client tool.

12

Running Example

Now, let's design a simple web page from scratch and make it work....

13

Designer's Kit

§ HTML5, CSS3§ JavaScript§ PHP5§ SEO – Search Engine Optimization§ Responsive Design

14

Future for Web ?

§ Semantic Web§ Peer to Peer (P2P)

15

Thank You, Questions ?