CS 183 4/6/2010
Build a simple HTML page, topic of your choice Will use this as a basis and gradually and add more features as the class progresses Need to be done with your favorite text editor, no visual editor Should contain TITLE tag one H1, >= 2 H2 s >= 1link to a page you like some paragraphs of a text >= 1 images >= 1 unordered list Document Type declaration, should be HTML 4.01 strict No CSS, JS etc. yet Upload to your web space (e.g., UCSC) Due this Thursday 4/8 in class Deliverable: Send me an email with the URL Grading: Correctness of HTML Will check with W3 Validator
After idea has been thought out Create a visual model of various aspect, don t start coding yet! Steps: Requirement Gathering Diagramming Prototyping Database Design
Breaking down ideas into smaller chunks of functionality Ask lots of questions Brainstorm every idea, write it down Prioritize functionality Essential, most important (P1) Not critical, but important (P2) Nice to have (P3)
Requirements and Features High Priority (P1) Item 1 Item 2 Mid Priority Item 1 Item 2 Low Priority Item 1 Item 2
What is the structure? How do we visually represent that structure? What relationships exists among the web pages? How are those page relationships presented?
Big site map of application Show flow between pages Insights: Combining functionality into a page Breaking things up if needed
Prototyping creates a model of the intended web site (not an implementation) Use to evaluate design ideas, consider alternatives, before committing to implementation Getting it right the first time is a myth (Jared Spool)
Once implementation done, difficult to make changes Prototype is a technique not a specific tool No computers necessary
Evolutionary prototype, may constitute an implementation Developers may discard, start from scratch -> revolutionary or throwaway prototype Horizontal Little depth of functionality, but broad in terms of feature coverage Vertical Limited on features, but goes deep Global prototype -> breadth and depth Local prototype (scenario) -> very small part of site
Fewer time pressures on development team Higher user satisfaction and end acceptance Users are good in criticizing an existing system, but may not be as good as describing and anticipating future needs Cost effective Prototyping has the advantage of resolving usability problems before implementation begins
False expectations in management (high fidelity prototype) May not be practiced in some work settings
Why do it? Can demonstrate behavior and reveal problems in early stage Test design vs. testing design + implementation Easy to build No dependencies on programmers Fast changes possible Maximizes iterations Lack of polish does not affect user opinion However: User interaction on paper? Don t show well to management Do not simulate response times accurately
Software takes longer to build Changes take longer One bug can destroy a user test! Creates unrealistic expectation in management Users comment on font / color
Assemble a kit E.g., white heavy paper, index cards, scissors, Set a deadline and stick to it Construct the prototype!
Watch: http://www.youtube.com/watch? v=pqbuykuakfo http://www.youtube.com/watch? v=n1nvfdlu6yq&feature=related http://www.youtube.com/watch? v=p5eirsm8dca&feature=related
Use a text editor, write some HTML, maybe some PERL scripts (using CGI), publish to your web server done! CGI spawns new process for each request! Apache HTTP server supported modules (e.g., mod perl) Apache Tomcat -> Java In parallel many languages were developed for web application programming (e.g., ColdFusion, PHP, Active Server Pages) Libraries are provided to handle common tasks, (e.g., HTML forms) Full-stack frameworks appeared: JavaEE (servlets) WebObjects (Apple) Ruby on Rails (Rails, RoR,open source, Ruby programming language) Django (Python) OpenACS (open source)
Architectural pattern to separate data model with business rules from the user interface Used in many frameworks Push vs. Pull-based push data to the view based on actions (e.g., Ruby) Alternative is to start with view layer that pulls results from multiple controllers as needed (e.g., Struts2)
Trend: Many CMS expanded into higher layer web application frameworks Drupal, SilverStripe Use modules that provide function generally available in web application frameworks
Security (authentication, authorization, role based access control to pages) DB Access and Mapping Work with higher level concepts, unified access to DB, object-relationship mapping (ORM) URL mapping Based on pattern matching, or URL rewriting Generate friendly URLS, good for SEO /page.php?destination=hamburg -> /destination/hamburg Web template system Template allows to add variables from a programming language <b>region: </b><?php echo $region;?> Caching
Ajax Asynchronous JavaScript and XML Interactive web applications, make web pages feel more responsive, Web 2.0 Will cover Ajax and Ajax frameworks later Compilers support usage of Ajax from high level programming languages (e.g., Morfik, Google Web Toolkit) Automatic Configuration Generate DB schmea at runtime, persistance layer Define properties of model objects at runtie based on a DB schema Web Services
Java Spring Framework, Apache Struts, Tapestry, JBoss Seam, C# and VB.NET (ASP.NET) ColdFusion ColdBox, FW/1, Perl Catalyist, CGI::App, PHP CakePHP, CodeIgniter, Also CMS: Drupa, Joomla, Python CubicWeb, Django, Ruby