Question block 2

Question 1

Name three advantages of the Software as a Service model as presented in the lecture. (3 points)

Answer 1

•  Zero installation overhead, the latest version is always accessible
•  Backup is done in a centralized way
•  Collaborative work is possible

Question 2

Name three challenges of the Software as a Service model as presented in the lecture. (3 points)

Answer 2

•  Who do I trust?
•  How to change the service provider?
•  What if there is no internet connection?

Question 3

Name two implications of Software as a Service for the service providers as presented in the lecture. (2 points)

Answer 3

• Operations must become a core competency
  
  • Expertise in daily operations is as important as expertise in product development.
• Users must be treated as co-developers
  • The open source dictum, “release early and release often” has morphed into an even more radical position, “the perpetual beta”.

Question 4

Name the five key issues of customer-centered web design as presented in the lecture. (5 points)

Answer 4

• Ease of use
• Performance
• Brand value
• Satisfaction
• Content

Question 5

Briefly describe the disciplines information architecture, navigation design, and graphic design. (3 points)

Answer 5

Information architecture:

• means identifying, structuring, and presenting groups of related content in a logical and coherent manner.

Navigation design:

• means designing methods so that customers can find their way around the information structure.

Graphic design:

• means developing the visual communication of information, using elements such as color, images, typography, and layout.

Question 6

Briefly describe user-centered design. What is the difference to customer-centered design? (2 points)

Answer 6

User-Centered Design

• An effort pioneered in the 1980s for engineering useful and usable computer systems.
• Customer-centered design builds on user-centered design, addressing concerns that go beyond ease of use and satisfaction: fusion of business and marketing issues with usability issues.
• On the Web it is easy to get an audience, but much trickier to convert site visitors to customers and keep them coming back.

Question 7

Briefly describe company-centered design. What is a common problem in this design approach? (2 points)

Answer 7

Company-Centered Design

• The needs and interests of the company dominate the structure and content
• of the Web site.
• Web sites organized by internal corporate structure, with sparse information about the products and services they provide.

Question 8

What is a principle in the context of the design process? (1 point)

Answer 8

• Are high-level concepts that guide the entire design process and help you stay focused
• Can be applied to any design problem and are the foundation for the patterns presented

Question 9

Name the two principles which are at the heart of customer- centered design. Briefly describe how you have applied one of those principles in the design process of your own web application. (3 points)

Answer 9

• At the heart of customer-centered design are two principles:
  
  • Know your customer
  • Keep your customer involved throughout the design and implementation process

Question 10

Briefly describe the term Design Pattern in general. What does a Web design pattern as presented in the lecture reflect from a customer’s point of view? (2 points)

Answer 10

• Patterns communicate insights into design problems, capturing the essence of the problems and their solutions in a compact form.
• They describe the problem in depth, the rationale for the solution, how to apply the solution, and some of the trade-offs in applying the solution.
• Web design patterns make up a language that can be used to communicate designs.
• The presented Web design patterns reflect how customers understand and interact with Web sites.

Question 11

Name four of the six parts of a pattern as presented in the lecture. (2 points)

Answer 11

• Each pattern has six parts: name, background, problem, forces, solution, and other patterns to consider.

Question 12

Briefly explain how you applied one of the web design patterns in your own web application. (2 points)

Answer 12

• Creating a Powerful Homepage:
  
  • Focus on customer group
  • Modern and clean design

Question 13

How much do patterns change over time in your opinion? Justify your answer by one concrete example. (2 points)

Answer 13

• The following two comparisons of screen shots from 2006, 2012, and 2015 demonstrate:
• Although the visual design of the pages has been polished, the underlying principles, structure, and design remain essentially the same.
• Example E-Bay of amazon

Question 14

Name the four competing elements of every Web design. (2 points)

Answer 14

There are competing elements of every design:

• Customers as people,
• Their tasks,
• The technology available, and
• Their social context

Question 15

Briefly describe the meaning of the Web design principle “Understand your customer’s tasks”, and give one example. (2 points).

Answer 15

Means explicitly cataloging and scripting what people currently do and what they want to do when using the Web site.

• Examples:
• “I want to send my grandmother an online birthday card”

Question 16

In the context of task training, briefly describe the two principles “ease of learning” and “ease of use”. (2 points)

Answer 16

It is a myth, that everything needs to be intuitive on first use. There is a difference between ease of learning and ease of use.

“If ease of use was the only valid criterion, people would stick to tricycles and never try bicycles.” [Douglas Engelbart, inventor of the computer mouse]

Question 17

Which elements should be the driving factor in a Web site’s design, and which one should not? (2 points)

Answer 17

• Technological constraints should never be the driving factor in a Web site’s design, but still be considered as part of it: people and tasks first, technology second.

Question 18

Briefly describe the goal of the task analysis as presented in the lecture. What is a typical question you would ask about the people using the website? (2 points)

Answer 18

Identify the target customer population, find people representative of that population and the find out what they do.

Use your intuition and experience to answer questions that characterize your target audience.

Example questions:

People: What are their interests? What are their ages? What level of education do they have? …

Question 19

Write a scenario for your own web application capturing the most important aspects which are typically told by scenarios. (6 points)

Answer 19

Victoria is a bright young college student looking for a gift for her younger sister, who is turning 16 in two weeks. Like most college students, Victoria is on a tight budget, but she wants to get something memorable and useful for her sister on this important birthday for a young girl. She‘s heard some of her friends talk about ebirthdayz.com, so she decides to check it out. On the ebirthdayz.com homepage, she sees that the Web site has a gift recommendation feature. Victoria finds the recommendations screen and views gifts based on her sister‘s age and general interests, as well as he own limited finances. The site shows some suggestions, and Victoria chooses a popular favorite and buys it, including gift wrapping. Total time spent: 20 minutes

Question 20

Briefly describe ethnographic research. What are strength of “ethnographically inspired” field studies? (2 point)

Answer 20

Ethnographic approaches can be used for observation

• Ethnographers study people in their normal environments you can watch

what people actually do, as opposed to what they say they do.

• An informal and “ethnographically inspired” field study can be fast and still yield valuable information.

Question 21

Is the ethnographic research suitable for your web

application’s business idea? If yes, give an example. If no,

briefly describe why not. (3 points)

Answer 21

Example: if you’re building a banking site, your ethnographic research might include visiting a bank for a day and studying all the different types of transactions that customers perform

Question 22

What is the purpose of affinity diagrams? Briefly describe two ways of structuring information in affinity diagrams. (3 points)

Answer 22

• An affinity diagram organizes all the individual points and concepts on a wall- sized, hierarchical diagram
  
  • Group related concepts together, and draw lines between related concepts in different groups.
  • Use different colors to denote groups and even groups of groups, creating a hierarchy.
• Affinity diagrams can become the basis for your initial information architecture.

Question 23

Name and briefly describe the three steps of an iterative design process as presented in the lecture. (6 points)

Answer 23

1. Design
   
   1. Teams consider business goals and customer needs, setting measurable goals and developing design concepts.
2. Prototype
   
   1. Teams develop artifacts as basic as scenarios and storyboards, and as complex as running Web sites, that illustrate how the site will accomplish the goals outlined in step 1
3. Evaluate

Teams assess the prototypes developed in step 2 to see if they meet the desired goals.

Question 24

Briefly describe two reasons for using an iterative design process as presented in the lecture. (2 points)

Answer 24

• Helps find problems while they’re still inexpensive and easy to fix.
• Ensures that the site you’re building will have the features that your customers need.
• Ensures that you’re building those features in a way that your customers can use.

Question 25

Give four examples of measurable design goals. (2 points)

Answer 25

Examples: * Faster task completion * Greater ease of learning * Commission of fewer errors * Abandonment of fewer shopping carts * Increased visitor-to-customer conversion rate * Increased customer repeat visits

Question 26

Briefly describe rapid prototyping. What is the benefit of rapid prototyping? (2 points)

Answer 26

* Is a key principle of iterative design. * Means creating rough-and-ready mock-ups that provide useful feedback.  Can help reduce risk, lead to smaller and less complex systems. * Nails down what customers really need. Typically, early in the design and prototyping phases three kinds of design artifacts are developed: site maps, storyboards, and schematics.

Question 27

Name the seven phases of the process for developing customer-centered sites in the right order. (4 points)

Answer 27

1. Discovery 2. Exploration 3. Refinement 4. Production 5. Implementation 6. Launch 7. Maintenance

Question 28

What means “stateless” in the context of REST? (1 point)

Answer 28

* Communication must be stateless in nature: each request from client to server must contain all of the information necessary to understand the request.

Question 29

Briefly describe the benefits of a stateless client-server architecture regarding visibility, reliability, and scalability as presented in the lecture. (3 points)

Answer 29

* Visibility is improved because a monitoring system does not have to look beyond a single request datum in order to determine the full nature of the request. * Reliability is improved because it eases the task of recovering from partial failures. * Scalability is improved because not having to store state between requests allows the server component to quickly free resources, and further simplifies implementation because the server doesn’t have to manage resource usage across requests.

Question 30

Briefly describe a disadvantage of stateless client-server architectures as presented in the lecture. (1 point)

Answer 30

Disadvantage: it may decrease network performance by increasing the repetitive data sent in a series of requests, since that data cannot be left on the server in a shared context.

Question 31

Briefly describe two benefits and one disadvantage of caching in the context of REST. (3 points)

Answer 31

* Require that the data within a response to a request be implicitly or explicitly labeled as cacheable or non-cacheable. * Improves efficiency, scalability, and user-perceived performance by reducing the average latency of a series of interactions. * Trade-off : a cache can decrease reliability if stale data within the cache differs significantly from the data that would have been obtained had the request been sent directly to the server.

Question 32

Name and briefly describe the main problem domains as defined by the REST triangle. (3 points)

Answer 32

The main problem domains identified in REST are the nouns, the verbs, and the content-type spaces. The things that exist, the things you can do to them, and the information you can transfer as part of any particular operation

Question 33

When requesting www.wikipedia.org via your web browser, which are the values of the three parts of the REST triangle? (1 point)

Answer 33

Nouns

Question 34

Briefly describe the REST methods GET, PUT, POST, and DELETE. (4 points)

Answer 34

* GET is the HTTP equivalent of COPY * Transfers a representation from resource to client. * PUT is the HTTP equivalent of PASTE OVER * Transfers state from a client to a resource. * GET and PUT are fine for transferring state of existing resources. * POST is the PASTE AFTER verb * Don't overwrite what you currently have: Add to it * Create a resource. * Add to a resource. * DELETE is the HTTP equivalent of CUT * Requests the resource state being destroyed.

Question 35

Name and briefly describe the three layers of web documents as presented in the lecture. (3 points)

Answer 35

Content Layer * Is always present * Is specified using HTML Presentation Layer * Defines how the content will appear to a human being who accesses the document in one way or another (via a web browser, on a printer, ...) * Is realized using CSS Behavior Layer * Involves real-time user interaction with the document * Is realized using JavaScript

Question 36

Name two benefits of separating the three layers of web documents as presented in the lecture. (2 points)

Answer 36

Keeping these three layers separately * enables separation of concerns and labor, and * increases the maintainability and understandability.

Question 37

What is the main goal of HTML5? Furthermore, name four new features of HTML5 compared to its previous version. (3 points)

Answer 37

* HTML (HyperText Markup Language) is designed to specify the logical organization of a document, with important hypertext extensions. * One important goal of HTML5 is to allow for the development of rich internet applications (RIA) without having to rely on proprietary technologies like Adobe Flash or Microsoft Silverlight. * New semantic elements are added, e.g.,

(for navigation) or

mark certain parts of a web site and can be interpreted by search engines. They define no special behavior.

* Multimedia contents can be presented by using tags like * A canvas element for 2D-drawings is introduced. * New form controls for dates, times, email, search inputs and URLs.

Question 38

Briefly describe CSS. What is the main reason for avoiding CSS inline styles? (2 points)

Answer 38

CSS is a style sheet language used to describe the presentation (colors, fonts, layout) of a document written in a markup language. Avoid CSS inline styles * Separation of content from presentation * Clear mental model

Question 39

How are CSS declarations, declaration blocks, properties, selectors, style sheets, rules, and values related to each other? (3 points)

Answer 39

A style sheet consists of rules. * Each rule consists of one or more selectors and a declaration block. * A declaration-block consists of a list of semicolon-separated declarations in curly braces. * Each declaration itself consists of a property, a colon, a value, then a semicolon Selectors are one of the most important aspects of CSS as they are used to "select“ elements on an HTML page so that they can be styled. * Type Selectors match type in html * Class selectors match class in html * ID selector match id in html *

Question 40

Consider the following HTML heading element: SEBA Master Give an example for a type selector, a class selector, and an ID selector by defining a CSS rule coloring this heading’s text blue by using each of these selector kinds. (3 points)

Answer 40

#h2id { color: blue;} .h2class { color: blue;} h2 { color: blue;}

Question 41

Briefly describe the Document Object Model (DOM) as presented in the lecture. (1 point)

Answer 41

* The Document Object Model is the way JavaScript sees its containing HTML page and browser state. * The DOM is an object-oriented representation of an HTML or XML document. * The structure of an HTML and XML document is hierarchical  the DOM structure is a tree.

Question 42

Briefly describe two reasons why you shouldn’t use the DOM API directly. What should be done instead? (2 points)

Answer 42

Using the DOM API directly is cumbersome and error prone (see also “An Inconvenient API: The Theory of the DOM“) * Different browsers provide different DOM APIs * The methods provided by the DOM API for navigating and manipulating the DOM are not very comfortable

Question 43

Give a JavaScript code snippet to open a browser alert displaying the text “SEBA Master” on clicking an element with id “hello” by using jQuery (you can omit the surrounding ready function). (3 points)

Answer 43

jQuery(document).ready(function () { jQuery("#hello").click(function () { alert("Hello world!"); }); });

Question 44

What does the application of the Twitter Bootstrap class col- md-6 to a div-element imply? (2 points)

Answer 44

applies half of the display screen (width 50%) on the media query of desktop screens with 992px width.

Question 45

Briefly describe how AngularJS implements the model-view- controller (MVC) pattern. (3 points)

Answer 45

In AngularJS, the MVC pattern is implemented as follows: * The view in AngularJS is the DOM * HTML-based view templates define a blueprint of the view * The model in AngularJS is stored in simple JavaScript object properties * The controllers in AngularJS are JavaScript functions * AngularJS controllers implement the application’s logic, e.g., requesting data through a web service

Question 46

According to the lecture: What are the two benefits of the MVC pattern in AngularJS? (2 points)

Answer 46

Benefits of the MVC pattern in AngularJS * + Establishes a mental model of where to define the data model, logic, and UI ofyour application. * Makes it easier to read and understand an application, in particular for other developers * + Easier to extend, maintain and test an application

Question 47

Consider the following AngularJS scope object: { “exercises” : [ { “nr” : 1, “title” : “Business model” }, { “nr” : 2, “title” : “Mock-ups” }, { “nr” : 3, “title” : “Prototype” }, { “nr” : 4, “title” : “Final presentation” } ], “exerciseOrder” : “nr” } Give the definition of an AngularJS template for a HTML list showing the titles of all exercises ordered by the given exerciseOrder (Hint: Use the ngRepeat directive). (3 points)

Answer 47

* {{exercises.nr}}: {{exercises.title}}

Question 48

Briefly describe one-way and two-way data binding in AngularJS, and explain the difference between them as presented in the lecture. (2 points)

Answer 48

One-Way Data Binding: * Template and model components are compiled to a static view * Changes to the view do not affect the model Two-Way Data Binding: * AngularJS generates a live view of the model based on the template * Changes to the view also affect the underlying model * Enables Model View ViewModel (MVVM) design pattern

Question 49

Name and briefly describe two kinds of components which can be organized within AngularJS modules. (4 points)

Answer 49

AngularJS supports different kinds of components which can be organized within modules, e.g.: * Directives are markers on a DOM element (e.g., attribute). The AngularJS compiler transforms the DOM element and attaches specific behavior * Services are used to organize and share code across the whole application, e.g., in multiple controllers (e.g., the default AngularJS service $http)

Question 50

Name two advantages and two disadvantages of AngularJS as presented in the lecture. (2 points)

Answer 50

Advantages of AngularJS + Cooperation with Google Chrome developers + Tool support for the development + Data is bound to an underlying model Disadvantages of AngularJS * Strong focus on CRUD operations and IO driven apps. Not suited for applications with complex behavior (e.g., complex DOM manipulations, canvas, WebGL etc.) * Search engine optimization (SEO) is difficult due to dynamic content loading