Scribd
Upload
83 views

Modern Application Development

This document summarizes lectures on the MVC framework and views. It introduces MVC, using a student gradebook as an example. It describes different types of views and outputs. It discusses user interface design goals and processes, usability heuristics, and tools for wireframes, HTML generation, and templates. The document also covers accessibility standards and principles to make content perceivable, operable, understandable and robust for people with disabilities.

Uploaded by

Drishya Shrivastava
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
83 views

Modern Application Development

This document summarizes lectures on the MVC framework and views. It introduces MVC, using a student gradebook as an example. It describes different types of views and outputs. It discusses user interface design goals and processes, usability heuristics, and tools for wireframes, HTML generation, and templates. The document also covers accessibility standards and principles to make content perceivable, operable, understandable and robust for people with disabilities.

Uploaded by

Drishya Shrivastava
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

MAD – 1

WEEK 3
LEC 1: Overview of MVC
● MVC paradigm
○ Model: Store emails on server, inbox, ready to manipulate
○ View: Display list of emails; Reading individual emails; Composing
emails
○ Controller: Sort emails; delete; archive
○ Origins: Smalltalk-80
○ Separation of responsibilities - Abstraction
○ Roots in Object-Oriented GUI development
○ Design Patterns:
■ Common software patterns
■ Model: Application object
■ View: Screen representation
■ Controller: How user interface reacts to user input
● Running Example:
○ Student Gradebook
■ Input data: for Model
● Student list
● Course list
● Student-Course marks
■ Output: for Views
● marks for individual student
● summary for course
● histograms
■ Modifications: for Controllers
● Add new students
● Add new courses
● Modify marks in course

LEC 2: Views
● User Interface
○ Screen
○ Audio
○ Vibration (haptic)
○ Motor (door open/close)
● User Interaction
○ Keyboard/Mouse
○ Touchscreen
○ Spoken Voice
○ Custom buttons
● User Interaction
○ Determined by hardware constraints
○ Different target devices possible
○ User-Agent information useful to identify context
○ May not be under designer control
● Types of views:
○ Fully Static (eg: Google’s homepage)
○ Partly dynamic (eg: Wikipedia homepage)
○ Mostly dynamic (eg: Amazon’s homepage)
○ Fully dynamic pages aren’t possible
● Output
○ HTML - most commonly used - direct rendering
○ Dynamic images
○ JSON/XML - machine readable
● View - any representation useful to another entity

LEC 3: User Interface Design


● Design for interaction with user
● Goals:
○ Simple - easy for user to understand and use
○ Efficient - user achieves goal with minimal effort
○ Aesthetics
○ Accessibility
● Systematic Process
○ Functionality requirements gathering - what is needed?
○ User and Task analysis - user preferences, task needs
○ Prototyping - wireframes, mockups
○ Testing - user acceptance, usability, accessibility

LEC 4: Usability Heuristics


● Guidelines / Heuristics
○ Jakob Nielsen’s heuristics for design
■ Not specific to web apps or even software UI design
■ Very useful and relevant
● General Principles
○ Consistency
○ Simple and minimal steps
○ Simple Language
○ Minimal and aesthetically pleasing
LEC 5: Tools (Pt. 1)
● Tools
○ Wireframes
○ HTML generation
○ Templates
● Wireframes
○ Visual guide to represent structure of webpage
○ Information design
○ Navigation design
○ User Interface design
○ Eg: LucidChart

LEC 6: Tools (Pt. 2)


● Programmatic HTML generation: PyHTML
○ Composable functions - each function generates a specific output
○ Example:
■ To generate a h1 heading: function should return

“<h1>text of heading</h1>”

def h1(s):
return "<h1>" + s + "</h1>"

h1(“Hello”) -> “<h1>Hello</h1>”

● PyHTML example
● More complex HTML

def f_table(ctx):
return (tr (
td(cell) for cell in row
) for row in ctx['table'])

● Templates
○ Standard template text
○ Placeholders / Variables
○ Basic (very limited) programmability
○ Examples:
■ Python inbuilt String Templates - good for simple tasks
■ Jinja2 - used by Flask
■ Genshi
■ Mako
■ … just pick one and go with it
○ Python String template Example
● Jinja
○ Ties in closely with Flask
○ Template functionality with detailed API
○ Can generate any output, not just HTML
○ Jinja Example
LEC 7: Accessibility
● Accessibility
○ Various forms of disability or impairment
■ Vision
■ Speech
■ Touch
■ Sensor-Motor
○ Can a page be accessed by people with impairments?
○ How can the accessibility of a page be improved?
○ W3.org - World Wide Web Consortium (W3C) - accessibility guidelines
● Standards
○ Interplay between many components of a page:
■ Web content: HTML, images, scripts
■ User-agents: desktop browser, mobile browser, speech-oriented
browser, assistive devices
■ Authoring tools: text editor, word processor, compiler
● Principle - Perceivable
○ Provide text alternatives for non-text content
○ Provide captions and other alternatives for multimedia
○ Create content that can be presented in different ways, including by
assistive technologies, without losing meaning
○ Make it easier for users to see and hear content
● Principle - Operable
○ Make all functionality available from a keyboard
○ Give users enough time to read and use content
○ Do not use content that causes seizures or physical reactions
○ Help users navigate and find content
○ Make it easier to use inputs other than keyboard
● Principle - Understandable
○ Make text readable and understandable
○ Make content appear and operate in predictable ways
○ Help users avoid and correct mistakes
● Principle - Robust
○ Maximize compatibility with current and future user tools
● Techniques
● Aesthetics
○ Visual appearance
○ VERY important
○ Simplicity preferred
○ Can vary with time

Summary:
● View - any output seen by human or machine
● User-interface and User-interaction guidelines
● Accessibility is a core concept
● Tools for automatic generation, consistent layout

You might also like