Downloaded 90 times
Uploaded byMustafa Kamel Mohammadi
Web design - Applications and web application definition
The document is a comprehensive guide on the fundamentals of web designing, covering definitions of applications, types of applications (desktop, mobile, web), and the web development process. It outlines key learning objectives, project topics, and the roles of various stakeholders in web engineering projects. Additionally, it emphasizes the need for a structured development methodology and provides an overview of the steps involved in website design and development.
More Related Content
Similar to Web design - Applications and web application definition
Web design - Applications and web application definition
- 1. Fundamentals of Webdesigning 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 Inthis 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 • Agroup 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 fromdifferent 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 • Softwaredevelopment 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 • Amobile 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 ofa 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 • Informationavailable on the web (adequate for human understanding) • Knowledge management(derivation of new knowledge , re-use of knowledge). • Examples: Google, Wikipedia 20
- 21. History of Webdevelopment • 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 agood 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 webengineering? • 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 webengineering 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 whouse 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 Alsoknown 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 ofa 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 • Peoplewho 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 • Mostsoftware 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 fromexisting 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: InformationGathering & 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 tobe 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 DescriptionDiagrams: • 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.