In this chapter you will learn Application Types of application Web application Web application categories Web development Web engineering

1. Fundamentals of Web designing
Ministry of Higher Education
Bamyan University
Computer Science Department
1
Presented by : Mustafa Kamel Mohammadi
Email : 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)
2

3. learning objective
 In this chapter you will learn
 Application
 Types of application
 Web application
 Web application categories
 Web development
 Web engineering
3

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)
4

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

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.
6

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
7

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.
8

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
9

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.
10

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
11

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
12

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
14

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
15

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

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

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
18

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
19

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
20

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.
21

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
22

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
23

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
24

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
25

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. Users
2. Customers
3. Web developers
4. Development Managers
• All four roles can be fulfilled by the same person
26

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
27

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
28

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
29

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
30

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 systems
2. Those that involve starting to develop a system from scratch
3. Those that involve building most of a new system from existing components
31

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
32

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
33

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.
34

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
35

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 Gathering
2. Planning
3. Design
4. Development
5. Testing and Delivery
6. Maintenance
36

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.
37

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
38

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 Outline
2. Site Diagram
3. Page Description Diagrams
• These three deliverables are dependent on each other and need to be
completed sequentially.
39

40. Cont.
• Content Outline:
• Working closely with your clients, create a categories list of all existing content with final
feedback.
40

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
41

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?
42

43. 43