S.K.Ahsan

WEB Development &

Designing

S.K.Ahsan1

S.K.Ahsan

What is a world wide web(www)?

The Web, is a system of interlinked hypertext documents contained on the Internet. With a web browser, one can view web pages that may contain

text, images, videos, and other multimedia and navigate between them

using hyperlinks.

2

S.K.Ahsan

Content Management System(CMS)

Medium Web Application

HTML(Hyper Text Mark Up Language)

History

Introduction

Development Tools

Web Design

Search Engines

Conclusion

Contents

3

S.K.Ahsan

What is a world wide web(www)?

The Web, is a system of interlinked hypertext documents contained on the Internet.

With a web browser, one can view web pages that may contain text, images, videos, and other multimedia and navigate between them using hyperlinks.

4

S.K.Ahsan

Introduction

5

S.K.Ahsan

Web 5.0Web3.0

Web2.0

Web 1.0

Web4.0

6

S.K.Ahsan

Web 2.0

Web 3.0

Web 1.0

Static pages instead of dynamic user-generated content.

Online guestbook’s.

HTML forms sent via email.

GIF buttons, typically 88x31 pixels

Dynamic user-generated content pages.

Multimedia of all types can be presented over the inter net

Cross platform issues are reduced

Introduction to E-Business.

The web 3.0 will be known as Semantic

It will be fully implemented in 2015.

Massively online gaming and fully functional virtual world

7

S.K.Ahsan

What is web application?

A web application is an application that is accessed via a web browser over a network such as the Internet or an intranet.

Why we need web application?

We need web application to create communication between users and organizations to share resources via internet.

8

S.K.Ahsan

HISTORY of WEB

9

S.K.Ahsan

Inventor of world wide web(www)

Tim Berners-Lee On 25 December 1990 with the help of Robert Cailliauand a young student at CERN, he implemented the first successful communication between an HTTPclient and server via the Internet.

10

S.K.Ahsan

Standard Generalized Markup Language(SGML)

1

The Standard Generalized Markup Language (ISO 8879:1986 SGML) is an ISO-standard technology for defining generalized markup languages for documents.

2

SGML descended from IBM's Generalized Markup Language (GML) that Charles Goldfarb, Edward Mosher, and Raymond Lorie developed in the 1960s.

3

• The SGML Declaration

• The instance itself, containing the top-most element and its contents.

• The Prolog, containing a DOCTYPE declaration which is known as Document Type Definition (DTD).

11

S.K.Ahsan

The network describes the various connectivity elements utilized to deliver the Web sites to the user.

Web Server includes hardware and software as well as programming elements and built in technologies.

Client is concerned with the web browser and its supported technologies, such as HTML, CSS and Java Script.

The Medium of the Web

ClientServer Network

12

S.K.Ahsan

Technical definition:

A webpage is a single HTML document.A website is a collection of related web

pages. Designing a good website requires more

than just putting together a few pages

13

S.K.Ahsan

HTML(Hyper Text MarkUp Language)

14

S.K.Ahsan

HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML is not a programming language, it is

a markup language A markup language is a set of markup tags HTML uses markup tags to describe web pages

HTML

15

HTML

SGML

DTD&DOM

TYPES

HTML(Hyper Text Mark Up Language)

16

S.K.Ahsan

Document Type Definition (DTD)&Document Object Model(DOM)

Document Object Model(DOM) The DOM is a W3C

specification that gives a common way for programs to access a document as a set of objects.

HTML

Document Type Definition (DTD) The set of markup

declarations that define a document type for SGML-family markup languages (SGML,

XML, HTML)

17

S.K.Ahsan

XML is a markup language much like HTML

XML was designed to carry data, not to display data

XML tags are not predefined. You must define your own tags

XML is designed to be self-descriptive XML is a W3C Recommendation.

XML

18

S.K.Ahsan

HTML5• Major

revision• Rich Internet

application

XHTML• XML Family• Well

Formed

DHTML• Client End

Scripting Languages

• Dynamic Web Pages

TYPES OF HTML

19

S.K.Ahsan

Introduction

About WEB DESIGNING

20

S.K.Ahsan

WEB DESIGN is the process of planning and creating a website.

Text, images, digital media and interactive elements are used by web designers to produce the page seen on the web browser.

Web designers utilize markup language, most notably HTML for structure and CSS for presentation as well as JavaScript to add interactivity to develop pages that can be read by web browsers.

21

S.K.Ahsan

History of Web Designing

22

S.K.Ahsan

The History of Web Designing has evolved over a matter of one and a half decades as of now.

After the initial hype over the website media and a confused phase of both developers and clients, web communication today has evolved as one of the most diversified and successful medium of advertisement and knowledge outsourcing.

However, the history of web designing germinated from CERN, a renowned physics institute, where Tim Berners Lee was working. The credit of development of the WWW goes to this man.

23

S.K.Ahsan

It was because of the need to circulate Lee's research papers among the concerned people that he decided to work on HTML and browser software.

That was the year 1993 when Mosaic web browser had become the platform for sharing information among the scientists of CERN.

Web page development as we know it today was still unknown and graphical image representation did not happen.

24

S.K.Ahsan

In 1994 the W3C decides upon the rules and standards of web development language of HTML. Thus HTML 2, 3, and 4 was developed.

As a whole, the process of web design can include conceptualization, planning, producing, post-production, research, advertising.

The site itself can be divided up into pages. The site is navigated by using hyperlinks, which are commonly blue and underlined but can be made to look like anything the designer wishes.

25

S.K.Ahsan

Process of developing. Need of web designing?

Web Designing

26

S.K.Ahsan

HTML CSS Java script Jquerry Ajax Asp

Php Mysql Java Xml

Tools for Web designing

27

S.K.Ahsan

Style Sheets Languages

28

S.K.Ahsan

CSS stands for Cascading Style Sheets Styles define how to display HTML

elements Styles were added to HTML 4.0 to solve a

problem External Style Sheets can save a lot of

work External Style Sheets are stored in CSS files

CSS(Cascading Style Sheet)

29

S.K.Ahsan

XSL(Extensible Style Sheet Language) XML Applied on

Unique Tags Advance data

storing

Style Sheets

CSS(Cascading Style Sheets) HTML Describe the Style

Rules of web pages Simple Syntax Reusability Advance design

30

S.K.Ahsan

Cascading Style Sheets

CSS 2

CSS 3

CSS 1

December 1996 Font properties Color of text and

backgrounds Text attributes Alignment of text,

images through Tables

May 1998 Superset of

CSS1 Flexible Layouts

and it used Layer designing (DIV based).

Introduction to Selectors and

classes.

Currently under development

Rounded Corner Text Shadow Border Image Using Any

Custom Font Multiple

Backgrounds

31

S.K.Ahsan

Client-Side Scripting Language

32

S.K.Ahsan

JavaScript was designed to add interactivity to HTML pages

JavaScript is a scripting language A scripting language is a lightweight programming

language JavaScript is usually embedded directly into HTML

pages JavaScript is an interpreted language (means that

scripts execute without preliminary compilation) Everyone can use JavaScript without purchasing a

license

Java Script

33

S.K.Ahsan

Client-Side Scripting Language

VBScriptJava script

JavaScript was created by Netscape in 1995.

Simple multimedia effects like image rollovers or add relatively sophisticated tools.

Java Script can be written directly in

HTML.

VBScript was introduced in 1996 by Microsoft.

Expert behavior in forums development for websites.

Cross web browser issues. Not preferred byWeb developers.

34

S.K.Ahsan

jQuery is a library of JavaScript Functions. jQuery is a lightweight "write less, do more" JavaScript library. The jQuery library contains the following features: HTML element selections HTML element manipulation CSS manipulation HTML event functions JavaScript Effects and animations HTML DOM traversal and modification AJAX Utilities

JQuery

35

S.K.Ahsan

AJAX = Asynchronous JavaScript and XML. AJAX is a technique for creating fast and dynamic web

pages. AJAX allows web pages to be updated asynchronously

by exchanging small amounts of data with the server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page.

Classic web pages, (which do not use AJAX) must reload the entire page if the content should change.

Examples of applications using AJAX: Google Maps, Gmail, Youtube, and Facebook tabs

AJAX

36

S.K.Ahsan

Server-Side Scripting Language

37

S.K.Ahsan

ASP is a powerful tool for making dynamic and interactive Web pages.

ASP stands for Active Server Pages ASP is a Microsoft Technology ASP is a program that runs inside IIS IIS stands for Internet Information Services IIS comes as a free component with Windows 2000 IIS is also a part of the Windows NT 4.0 Option Pack The Option Pack can be downloaded from Microsoft PWS is a smaller - but fully functional - version of IIS PWS can be found on your Windows 95/98 CD

ASP(Active Server Page)

38

S.K.Ahsan

PHP stands for PHP: Hypertext Preprocessor PHP is a server-side scripting language, like

ASP PHP scripts are executed on the server PHP supports many databases (MySQL,

Informix, Oracle, Sybase, Solid, PostgreSQL, Generic ODBC, etc.)

PHP is an open source software PHP is free to download and use

PHP(Hyper Text Preprocessor)

39

S.K.Ahsan

Server-Side Scripting Language

ASP.NETPHP

Hypertext Preprocessor Developed by Rasmus Lerdorf.

This was written in C language influenced by PERL 1994.

Open Source Language. It is a CGI(Common Gateway

Interface ) scripting Language.

The initial prototype was called "XSP“ but it became afterwards Active Server Pages (ASP) technology.

It is built on the Common Language Runtime (CLR).

Abnormal Behavior with HTML+CSS.

40

S.K.Ahsan

Web Browser

41

S.K.Ahsan

What is web browser?

A Web browser is a software application for retrieving, presenting, and traversing information resources on the World Wide Web.

What is URL?

An information resource is identified by a Uniform Resource Identifier (URI) and may be a web page, image, video, or other piece of content. a Uniform Resource Locator (URL) is a subset of

the Uniform Resource Identifier (URI).

42

S.K.Ahsan

Web BrowserFirst Browser

First Browser was Mosaic by NCSA(National Center for Supercomputing Applications).oReleased on 22 April

1993.oUnix 2.6 , Windows 3.0

Mac OS.oCross-platformoWritten in C

43

S.K.Ahsan

Web Browser

Mr.Khan 44

S.K.Ahsan

What is a CMS?

A Content Management System (CMS) is a collection of procedures used to manage work flow in a collaborative environment. These procedures can be manual or computer-based.

Featureslarge number of

people to contribute to and share stored data

Improve communication

Aid in easy storage and retrieval of data

Reduce repetitive duplicate input

Improve the ease of report writing

Content Management System

45

S.K.Ahsan

CMS

ECMS WCMS DMS MCMS

EnterpriseCMS

Web CMS

Document Management

System MobileCMS

Types of CMS

46

S.K.Ahsan

Try it out:Optimize it for your audience

Test it in-house.

Test it on a sample audience.

47

S.K.Ahsan

Webpage layout:

Layout of web pages is very important Poor layout makes for -

Difficult navigationHard to locate information on pageVisually unappealing

48

S.K.Ahsan

Table format:

Use tables to lay out your pages! Make the table borders invisible A 2x2 table works well

Mr.Khan 49

S.K.Ahsan

Areas Of WebPages:

Content

Headerlogo

Menu

50

Graphics attract more user.

51

S.K.Ahsan

Maintain it

Dates need to be correct Services need to be up-to-date Hours must be correct People’s names, email addresses &

phone numbers need to be correct Prices need to be correct Explore new technologies & encourage

innovation

52

S.K.Ahsan

Characteristics of a good web site

Well-organized Easy to navigate Attractive Useful Up-to-date

53

This document is “living” …in the past.

54

An example of a very unattractive site (best viewed online).

55

Avoid backgrounds that wash out your text.

56

S.K.Ahsan

Make your site useful

If you are unique, you’re already useful! If you are not unique, how do you differ

from similar Web sites?Is your content unique?Is your approach unique?Is your audience unique?Are you more up to date?Are you better organized?Are you more comprehensive?

57

S.K.Ahsan

Ways to present information

Hierarchical organization Image maps Tables Frames

58

S.K.Ahsan

Hierarchical organization

Menus in progressive order of most general to more specific

Prosalways gives impression of organization

ConsNot really necessary unless you have a

collection of somethingMakes user travel through a number of

levels to get to their information

59

Imagemaps can provide easy means of navigation.

60

S.K.Ahsan

Tables

Standard text, images or links are arranged in tabular format with or without borders

ProsAllows creator to place items on a pageLooks neat

ConsCan be tricky, but tables are amazingly

useful to the designer.

61

S.K.Ahsan

Tips for frames

Use in a site that rarely, if ever, goes out to other links on the World Wide Web.

Use a frame to hold a static banner at the top or bottom.

Use a frame to hold a navigation bar at the top, side or bottom of your Web site.

62

Test text colors against background colors.

63

S.K.Ahsan

General Things to Remember & Consider

Avoid having more than one spinning, whirling, clicking, moving icon or graphic on a page.

Make hyperlinks intuitive so as to avoid the click here text..

64

S.K.Ahsan

Remember Your Hard-Copy Publishing Rules For example…

Provide white space for easy readabilityLimit font usage and typeface usageLimit text column widthBalance graphics and text on a pageUse complimentary colors with contrastStandardize on a heading font and text fontBalance the page layout with top/bottom and

right/left margins

65

S.K.Ahsan

Clearly and Consistently Identify your site

Banner graphics Signature icons Links to local home pages

66

S.K.Ahsan

Search Engine

67

S.K.Ahsan

Search EngineSearch Engine

A web search engine is a tool designed to search for information on the World Wide Web. The search results are usually presented in a list of results and are commonly called hits.

How a Search Engine work ?

Web search engines work by storing information about many web pages, which they retrieve from the html itself.. The contents of each page are then analyzed to

determine how it should be indexed.

68

S.K.Ahsan

Search Engine

W3C

atalogF

irst Engine

Google

Most F

avorite

Yahoo!Search

Moderate Y

ebolB

eta Lunch

1993 1998 2003 2009

69

Web Design Cycle

Database Mangemen

t

Markup languages Style sheet

languages

Client-side scripting

Server-side scripting

Web Design Cycle

70

S.K.Ahsan

Web Developer’s Trend

71

S.K.Ahsan

Web Development Tools

Adobe Dreamweaver  CS6

Visual Studio 2008/2010

Joomla

72

Sunawar Khan Ahsan

73

S.K.Ahsan

Any Questions?

74