1

Fundamentals of Web designing

Ministry of Higher EducationBamyan University

Computer Science Department

Presented by : Mustafa Kamel MohammadiEmail : bamian.cs@gmail.com

Applications and web application definition

2

Agenda of course Fundamentals of web designing

Some Theories Web application introduction Web engineering approaches

How web works? Web application structure

HTML Web design

CSS ( Cascading Style Sheet)

3

learning objective In this chapter you will learn

Application Types of application Web application Web application categories Web development Web engineering

4

Course needs• Software

• Sublime text editor (coding)• Wamp server (web server)• Google chrome or Mozilla firefox (run the code)• Edraw Max ( design wireframes and blueprints)

5

Project topics• Culture• Family• Government• Education• Communication• Medical• Agriculture• Law• Science• Art• Economy• Engineering

6

What is Application?• Application is a term for a set of instructions, which makes a computer to

perform a task.• The set of instructions are commonly known as a program. • Many programs are not applications ,A program with a user-interface is an

application.

7

Application system• A group of related applications programs designed to perform a specific function• An application system normally consists of a user interface and a database.• Application System is designed and implemented with Different size and

architecture.• Application System normally consist of:

• Related configuration files to run the program• A system documentation, describing the systems structure• A end user documentation, describing the handling of the system

8

Application definition from different views• Web Engineer view:• Related configuration files to run the program• Suitable documentation• End-user view:• The program that is useful for him /her and perform specific task for them.

9

Types of Application• There are many different types of Application Software but according to usage

scope we divide them in the following categories:• Desktop Application• Web Application• Mobile applications

10

Desktop applications• Software development began with Desktop Applications• A desktop application means any software that can be installed on a single

computer (laptop or a desktop) and used to perform specific tasks.• Different types of desktop applications:

• Applications for communication: Microsoft Outlook• Applications for data analysis and diagrams: Microsoft Excel and Visio• Applications for presentations and Graphics: Microsoft PowerPoint, Adobe Photoshop• Etc.

11

Mobile applications• A mobile application, most commonly referred to as an app, is a type of

application software designed to run on a mobile device, such as a smartphone or tablet computer.

• Mobile applications frequently serve to provide users with similar services to those accessed on PCs

12

Web application• However, with the advent of internet and online commerce, Web Application

development gained importance.• A Web application is a system that utilizes W3C standards & technologies to

deliver Web-specific resources to clients through a browser.• A web application is any application that uses a web browser as a client.• An online shopping website can be considered as a web application

14

Web application types• Web applications can be categorized in many ways there is no unique or widely

accepted way.• Below different categories of Web applications depending on their development

history and their degree of complexity• Document Centered (Informational ,Download)• Interactive• Transactional• Work flow Based• Collaborative work environments• Semantic Web

15

Document Centered (Informational ,Download):• Informational : read-only content is provided with simple navigation and links• Customizable : the user customizes content to specific needs• Example: Static homepage, company web site

16

Interactive• Content of a website is dynamically generated as response to a user request• Examples: dynamic HTML pages (Registration forms, Search engine)

17

Transactional• Complex interactions• Use transaction management in database systems• Examples: Online shopping, online banking, reservation systems

18

Work flow based• Support business processes (workflows) within respective business organization. • Electronic version of structured flow of activities.• Examples: E-Government, patient workflows in health care systems

19

Collaborative work environments• A collaborative working environment (CWE) supports people, such as e-

professionals, in their individual and cooperative work.• Support cooperation in case of unstructured flow of activities and high degree of

communication.• Examples: email, video conferencing, blogging, wiki

20

Semantic Web• Information available on the web (adequate for human understanding)• Knowledge management(derivation of new knowledge , re-use of knowledge).• Examples: Google, Wikipedia

21

History of Web development• Web Application development has a very short history, compared to the

development of software.• But within a period of few years, a large number of Web systems and

applications have been developed and put into widespread use.• The World Wide Web (Web) has become the dominant platform for ubiquitously

accessible information and applications of any kind.

22

What is a good web application?• Good Web Application Development are not just about nice look and feel• It is also about quality attributes such as

• Usability• Accessibility• Maintainability• Compatibility• Security • Reliability • Efficiency• Reusability

23

Why web engineering?• To successfully build large-scale, complex Web-based systems , Web developers

need to adopt a disciplined development process and a sound methodology , use better development tools, and follow a set of good guidelines.

• Engineering approaches are needed to meet these .• Engineering is widely taken as a disciplined application of scientific knowledge

for the solution of practical problems.• Web engineering was introduced as solution

24

What is web engineering?• Web Engineering uses:

• Scientific• Engineering• Management Principles

• to successfully• cost-effective Develop• Deploy• Maintain

• High-quality Web systems and applications • The outcome of the Web Engineering process are Web applications that provide

Web pages that can be displayed in a Web browser.• Web engineering is a specialization in software engineering

25

Keep in mind• Web Engineering is not about HTML and JavaScript

• Like Software Engineering is not about C or Java!

• It aims at systematic development of Web applications according to a specific methodology

• Standards are important in Web like in all the other Engineering fields

26

Stakeholders in web engineering projects• Many people are involved in a Web engineering project and expect to benefit

from its success.• we classify these stakeholders into four major categories:

1. Users2. Customers3. Web developers4. Development Managers

• All four roles can be fulfilled by the same person

27

User• Those who use the Web Application• Their goals include doing interesting work and solving their problem.• Quality indicators:

• SW does, what I expect• Fast• Easy to use• Easy to learn• No errors• Good manual

28

Customers• Customers Also known as clients• People who make the decisions about ordering and paying for the Web

Application .• They may or may not be users, the users may work for them• Their goals are to increase profit or simply to run their business more effectively• Quality indictors:

• SW has to be as cheap as possible• Memory usage is low• Runs fast• Tasks are done correct• Flexible• Costs of maintaining are very low

29

Developers• Development of a Web application requires a team of people with diverse skills

and backgrounds.• Those who develop and maintain the Web Application are called Web engineers• Within the development team there are often specialized roles including:

• Requirement specialist• Programmers• Graphic designers• Database specialist• Data communication and networking experts• Configuration management specialist

• Quality indicator:• Easy to design• Reuse its parts

30

Development Managers• People who runs the organization that is developing the Web Applications• They often have and educational background in business administration• Their goal is to please the customers or sell the most Web Application while

spending the least money• They must have knowledge about how to manage software project• Web developers must keep their managers informed of any problems• Goals to be achieved:

• Sells more• Pleased Customers• Costing less to develop and maintain

31

Web Engineering Projects• Web Engineering work is normally organized into projects• We can divide software projects into three major categories:1. Those that involve modifying an existing systems2. Those that involve starting to develop a system from scratch3. Those that involve building most of a new system from existing components

32

Evolutionary Projects• Most software projects are of the first type-Modifying an existing system.• The term maintenance is used to describe this process• Evolutionary or maintenance projects can be of several different types:• 1. Corrective projects: fixing defects• 2. Adaptive projects: changing the system in response to changes in the

environment in which the software runs• For example change system to work with new version of Operating system or Database

• 3. Enhancement projects: adding new features for users• 4. Re-engineering or perfective projects: changing the system internally so it is

more maintainable

33

Green field projects• Projects to develop an entirely new software system from scratch• Developers often enjoy green field projects ,because they have a wider freedom

to be creative about the design• It has a lot of work to built a complex system from scratch

34

Projects built from existing components• These projects can be considered neither evolutionary nor new development• This type of project start with framework or components already developed• A framework is a software system especially designed to be reused in different

projects• A framework is a software system that is missing some important details.• E.g. Specific rules of this organization.• Benefit from reusing reliable software.

35

Web development process• Before you Start - Remember!• Attempting to build a website without a plan is like trying to construct a house

without an architectural blueprint

36

Web development process• There are numerous steps in the web site design and development process.• From gathering initial information, to the creation of your web site, and finally to

maintenance to keep your web site up to date and current.• The exact process will vary slightly from designer to designer, but the basics are

generally the same.1. Information Gathering2. Planning3. Design4. Development5. Testing and Delivery6. Maintenance

37

Phase One: Information Gathering & Analyze• The first step and the most important one, in designing a successful web site is to

gather information and analyze them.• Conduct a Client Survey Interview:

• It involves Good understanding of company that what business goals and dreams are ,what are their target audience, and how the web can be utilized to help achieve those goals.

• Write the Project Brief/Creative Brief:• Based on the information gathered in the client survey, write the project brief

• Write the Project Technical Specifications:• to clearly establish requirements like screen resolution, browser compatibility ,download

time, web standards and Platforms

• Develop the Project Plan/Timeline:• Establish the timeline for deliverables and tasks for each Phase of the project. Assign due

dates and resources.

38

Cont.• Works to be done in information gathering phase:

• Interviews with the clients• Mails and supporting docs by the client• Discussions Notes• Online chat• Recorded telephone conversations

• Output of all these works are:• Work plan• Cost involved• Hardware-software requirements• Supporting documents• The approval

39

Phase Two: Planning• Using the information gathered from Phase one, it is time to put together a plan

for your web site.• This is the point where a site Structure is developed and The deliverables from

this Phase are:1. Content Outline2. Site Diagram3. Page Description Diagrams

• These three deliverables are dependent on each other and need to be completed sequentially.

40

Cont.• Content Outline:

• Working closely with your clients, create a categories list of all existing content with final feedback.

41

Cont.• Site Diagram:

• Take your final content outline and create a sitemap or site diagram.• It is A visual representation of your content outline and site structure.• You can use Visio, Edraw Max to create your site diagram• When you use a site map during the development of a Web site even a Web site that

includes only a few pages you can identify• Pages that you need to build• How pages relate to each other• Navigation elements that you need

42

Cont.• Page Description Diagrams:

• Many Information Architects are now recommending the use of Page Description Diagrams (PDD)as a step before wireframes

• 1. What content belongs on this page?• 2. What is the priority of each chunk of content?

43