Introduction to Web Designing
-
Upload
kailaash-balachandran -
Category
Design
-
view
236 -
download
0
description
Transcript of Introduction to Web Designing
![Page 1: Introduction to Web Designing](https://reader033.fdocuments.in/reader033/viewer/2022052900/55621d13d8b42acb1e8b5737/html5/thumbnails/1.jpg)
Introduction to Web Designing
- Guest Lecture by Kailaash Balachandran
![Page 2: Introduction to Web Designing](https://reader033.fdocuments.in/reader033/viewer/2022052900/55621d13d8b42acb1e8b5737/html5/thumbnails/2.jpg)
2
Chapters
● Introduction● Domains and Hosting● The Working● Programming Languages ● Tools● Running Example
![Page 3: Introduction to Web Designing](https://reader033.fdocuments.in/reader033/viewer/2022052900/55621d13d8b42acb1e8b5737/html5/thumbnails/3.jpg)
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.
![Page 4: Introduction to Web Designing](https://reader033.fdocuments.in/reader033/viewer/2022052900/55621d13d8b42acb1e8b5737/html5/thumbnails/4.jpg)
4
Sample Web Page (1)
![Page 5: Introduction to Web Designing](https://reader033.fdocuments.in/reader033/viewer/2022052900/55621d13d8b42acb1e8b5737/html5/thumbnails/5.jpg)
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
.
![Page 6: Introduction to Web Designing](https://reader033.fdocuments.in/reader033/viewer/2022052900/55621d13d8b42acb1e8b5737/html5/thumbnails/6.jpg)
6
Sample Web Page (2)
![Page 7: Introduction to Web Designing](https://reader033.fdocuments.in/reader033/viewer/2022052900/55621d13d8b42acb1e8b5737/html5/thumbnails/7.jpg)
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.
![Page 8: Introduction to Web Designing](https://reader033.fdocuments.in/reader033/viewer/2022052900/55621d13d8b42acb1e8b5737/html5/thumbnails/8.jpg)
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
![Page 9: Introduction to Web Designing](https://reader033.fdocuments.in/reader033/viewer/2022052900/55621d13d8b42acb1e8b5737/html5/thumbnails/9.jpg)
9
Languages
Basic web programming languages
§ HTML – Hyper Text Markup Language● CSS – Cascading Style Sheets § Java Script
§ PHP – Hypertext PreProcessor
Client Side
Server Side
![Page 10: Introduction to Web Designing](https://reader033.fdocuments.in/reader033/viewer/2022052900/55621d13d8b42acb1e8b5737/html5/thumbnails/10.jpg)
10
Tools
Design Tools
§ Photoshop , Illustrator , Corel Draw.§ Dreamweaver
FTP Client Tool§ Filezilla
![Page 11: Introduction to Web Designing](https://reader033.fdocuments.in/reader033/viewer/2022052900/55621d13d8b42acb1e8b5737/html5/thumbnails/11.jpg)
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.
![Page 12: Introduction to Web Designing](https://reader033.fdocuments.in/reader033/viewer/2022052900/55621d13d8b42acb1e8b5737/html5/thumbnails/12.jpg)
12
Running Example
Now, let's design a simple web page from scratch and make it work....
![Page 13: Introduction to Web Designing](https://reader033.fdocuments.in/reader033/viewer/2022052900/55621d13d8b42acb1e8b5737/html5/thumbnails/13.jpg)
13
Designer's Kit
§ HTML5, CSS3§ JavaScript§ PHP5§ SEO – Search Engine Optimization§ Responsive Design
![Page 14: Introduction to Web Designing](https://reader033.fdocuments.in/reader033/viewer/2022052900/55621d13d8b42acb1e8b5737/html5/thumbnails/14.jpg)
14
Future for Web ?
§ Semantic Web§ Peer to Peer (P2P)
![Page 15: Introduction to Web Designing](https://reader033.fdocuments.in/reader033/viewer/2022052900/55621d13d8b42acb1e8b5737/html5/thumbnails/15.jpg)
15
Thank You, Questions ?