Upload
sunawar-khan-ahsan
View
402
Download
3
Tags:
Embed Size (px)
DESCRIPTION
Web Programming & Designing
Citation preview
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
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