page 1 unit 1 basics of web design. page 2 topics website web application web design web development...

Unit 1

Basics Of Web Design

Topics

• Website

• Web Application

• Web Design

• Web Development

• W3C

• Phases of Web Project

Web siteWeb site

• Website is a collection of related web pages containing images, videos or other digital assets.

• A website is hosted on at least one web server, accessible via a network such as the Internet or a private local area network through an Internet address known as a Uniform Resource Locator.

• Website can be also referred to as Front Office or Showroom software because visitors come in to browse and sometimes make a purchase .

• Organized by function, a website may be– a personal website – a commercial website – a government website – a educational website– a nonprofit organization website

Types of website

• There are 2 types of websites:-1. Static website2. Dynamic WebsiteStatic Website:-

A static website is one that is executed by the browser (i.e. Firefox, Internet Explorer, Safari, Opera, etc.) that resides at the user computer.

It is primarily coded in Hypertext Markup Language (HTML). This type of website usually displays the same information to all

visitors. cannot be used any databases A static website will generally provide consistent, standard

information for an extended period of time. Website owner may make updates periodically, it is a manual

process to edit the text, photos and other content and may require basic website design skills and software.

Dynamic website:-• A dynamic website is one that changes or customizes itself frequently and

automatically, based on certain criteria. • A dynamic website can operate more effectively, be built more efficiently

and is easier to maintain, update and expand. • It is executed by the server (Web Server), and the then later on page is

sent to the browser.• Dynamic websites can have two types of dynamic activity:

– Dynamic Code :- » The code is constructed dynamically using active programming language instead

of plain, static HTML. » A dynamic web page is generated on the fly by piecing together certain blocks of

code, procedures or routines.

– Dynamic Content :- » In this dynamic content are displayed with the plain view.» Variable content is displayed dynamically based on certain criteria, usually by

retrieving content stored in a database.

Types of website

Web Application

• A web application or RICH INTERNET APPLICATION is an application that is accessed over a network such as the Internet or an intranet.

• A web application is a functional piece of software, driven by dynamic, interactive content

• A Web application is presented as either a web site or as part of a web site,

• but not all web sites are web applications.• A computer software application that is hosted in a browser-

controlled environment or coded in a browser-supported language and reliant on a common web browser to render the application executable.

• A web application is a web site that DOES something other than display content to the masses. It’s intended for user interactions and transactions, performing actual business functions, and not simply displaying information to a user.

Web Application

• The web application can be also referred as the Back Office software because it is there to provide support services for the front office, such as processing customer orders and maintaining, issuing and replenishing inventory.

• Your bank, assuming it offers online banking, has a web application component on its site. If you can think of a site where you create an account, log in, and conduct some actual business, it’s probably a web application

• Ebay is a web application. So are Paypal, Twitter, Facebook, Gmail.

• The front office is open to anyone, but access of the back office is restricted to authorized personnel only.

• Front office software is web only, the back office software can be either desktop or web, or a mixture of the two.

Comparison between Website and Web Application

Website Web Application

Websites primary role is to inform Webapps primary role is to do something

A website is more static and informative in nature

a web application is a functional piece of software, driven by dynamic, interactive content

When I think of a website, I think of ncsu.edu

When I think of a web application, I think of gmail.

All users may have access to all pages in the web site, meaning that there may be no need for any sort of access control.

The application may cover several aspects of an organization's business, such as sales, purchasing, inventory and shipping, in which case users will usually be restricted to their own particular area. This will require some sort of access control system, such as a Role Based Access Control (RBAC) system.



Execution speed may need to be tuned so that the site can handle a high number of

visitors/users.

As the number of users is limited to those who are authorized then execution speed should not be an issue. In this case the speed, and therefore cost, of application development is more important. In other words the focus should be on developer cycles, not CPU cycles.

http://skillcrush.com/2013/03/28/websites-vs-web-applications/

http://ncsuwebdev.ning.com/forum/topics/what-is-the-difference-between



Can never be implemented as a desktop

application. May have exactly the same functionality as a desktop application. It may in fact be a desktop application with a web interface.

May be updatable by a single person with

everyone else having read-only access. Any authorized user may submit updates, subject to his/her authorization level, and these updates would immediately be available to all other users.

Can be accessed by anybody. Can be accessed by authorized users only.

May have parts of the system which can only be accessed after passing through a

login screen.

No part of the system can be accessed

without passing through a login screen.

Web Design

• Web design is used as a general term to describe any of the various tasks involved in creating a web page. It refers to jobs focused on building the front-end of a web page.

• The web consists of many pages, presenting information using different technologies and linked together with hyperlinks.

Web Design

• For designing a good website you should keep in mind the following factors:- • Borders and rules• Texture• Colors,etc.

• There are two basic aspects to any web page found on the Internet1. a presentation that the user interacts with2. back-end that includes information.

Principles of good web designing 1. Keep your audience in mind.2. Purpose for the site 3. Location of the site 4. Types of content 5. Information provided on the "home" page 6. Content 7. Level of Web technology to best suit the purpose8. Style to best suit the purpose 9. Page design - consistency, clarity, user friendliness10. Resolution: 11. Background & Text Color12. Avoid use of frames.13. Ease of navigation

Web Development

• Web development is a broad term for the work involved in developing a web site for the Internet (World Wide Web) or an intranet (a private network).

• This can include web design, web content development, client-side/server-side scripting, web server and network security configuration, and e-commerce development.

Web Development

• Web development usually refers to the main non-design aspects of building web sites: writing markup and coding.

• Web Development can be split into many areas and a typical and basic web development hierarchy might consist of:

1. Client Side Coding

2. Server Side Coding

3. Client + Server Side Coding

4. Database Technology.

Typical and Basic Web Development Areas

• Client Side Coding:- • Ajax, JavaScript, Microsoft SilverLight, Flex,HTML 5, CSS 3.

• Server Side Coding:- • Java EE,PHP, Python, Ruby, ASP,IBM WebSphere.

• Client + Server Side Coding :- • Google Web Toolkit.

• Database Technology :- • DB2, MS SQL Server, Postgre SQL, SQLite, Sybase.

Web Design Web Development

Web design is the customer-facing part of the website.

Web development is the back-end of the website, the programming and interactions on the pages.

A web designer is concerned with how a site looks and how the customers interact with it.

A web developer focuses on how a site works and how the customers get things done on it.

Good web designers know how to put together the principles of design to create a site that looks great.

Good web developers know how to program CGI and scripts like PHP.

They also understand about usability and how to create a site that customers want to navigate around in because it’s so easy to do.

They understand about how web forms work and can keep a site running effectively.

W3C

• W3C Stands for the World Wide Web Consortium • W3C was created in October 1994 • W3C was created by Tim Berners-Lee (Inventor of the

Web) • W3C is organized as a Member Organization • W3C is working to Standardize the Web • W3C creates and maintains WWW Standards • W3C Standards are called W3C Recommendations • W3C is hosted by three universities:

• Massachusetts Institute of Technology (MIT) in the U.S.

• The French National Research Institute in Europe • Keio University in Japan

W3C

• Following are the Members of W3C : IBM

MICROSOFT

APPLE

ADOBE

SUN MICROSYSTEM

• W3C validates following types of files:-• HTML files• CSS files• XHTML files• XML files• WML files

The general order in which most Web site projects evolve:

Planning Phase: • Define the goals and purpose of the site, • Determine what content should go on the site, • Diagnose dynamic site requirements and etc.• figure out ways to attract visitors to the site.

Contract Phase: Draft and submit a proposal to the client for the project that outlines the scope of the work .

Design Phase: Characterize a target audience , make decisions about layout, color, organization, and content; and finally mock up a design and present it to the client for approval.

Phases of Web ProjectPhases of Web Project

Phases of Web ProjectPhases of Web Project

Building phase: Convert a mock-up into HTML, CSS, and JavaScript in a Web editor such as Adobe

Dreamweaver.• Organize content in visually pleasing ways• Create and optimize Web graphics• Add dynamic capabilities to the pages with JavaScript and other programming languages

Testing phase: Test the design on a testing server in the most popular browsers and browser versions on PC

and Linux platforms in the most popular operating systems (Windows XP, Vista and so on) at a variety of monitor resolutions

.

Site launch:

Secure a domain and hosting plan, upload the site’s files to a host server, retest the site, and be ready to maintain the site to launch.

Determining Site’s ContentDetermining Site’s Content

• Home Page Information :

This page should include the company name and/or logo, navigation to the rest of the site, and text describing the site’s products or services.

• Contact Information :

Visitors will want to know how to get in touch with the owners of the Web site.

• Site Map:

Web page that contains a list of organized text links to all the pages on the Web site. if your site has a lot of pages with multiple categories, consider adding key site map information to the footer area of every page.

• Footer:

You should include the company name, copyright information and footer links.

• Privacy policy:

Privacy policy explains to visitors why their data is being taken and what the site will or will not do with that private data.

page 1 unit 1 basics of web design. page 2 topics website web application web design web development...

Documents