Web Development A VisualSpatial Approach Chapter 1 Process

Web Development A Visual-Spatial Approach Chapter 1 Process of Web Development

Learning Objectives l l l A basic overview of Web development Roles and skills involved in Web development Unique characteristics of Web sites The visual-spatial approach to Web development An overview of the Web development process Suggested methods of improving Web development skills Baehr Web Development: A Visual-Spatial Approach Copyright © 2007 by Pearson Education, Inc. All rights reserved.

Web Development l The development and increasing use of the World Wide Web for business, education, and entertainment has contributed to the evolution of Web development as an important discipline in online publishing and communication Baehr Web Development: A Visual-Spatial Approach Copyright © 2007 by Pearson Education, Inc. All rights reserved.

Web Development l Requires a wide range of skills, including: – – – – writing editing graphic design usability testing project management scripting programming computer software use Baehr Web Development: A Visual-Spatial Approach Copyright © 2007 by Pearson Education, Inc. All rights reserved.

Web Development l While a designer may not need to master every skill, – l Web development teams often include a wide range of roles, including: – – – – l there a wide variety of online resources, software tools, and specialists that can be of assistance to the designer. project manager programmer graphic artist writer/editor content provider usability tester server administrator Web development skills can be developed with formal training, self-study, and practice Baehr Web Development: A Visual-Spatial Approach Copyright © 2007 by Pearson Education, Inc. All rights reserved.

Team Roles Summary l l l l Project Manager Programmer Graphic Artist Writer/Editor Content Provider Usability Tester Server Administrator ITIS 2300 8/24/2003 7: 57 PM 6

Web Development Terms l Home page – l Hyperlink – l Chunks of textual and/or graphic content linked together by hyperlinks. Interface – l Clickable text or visuals that link two related elements, such as pages, content chunks, or headers. Hypertext – l The first page, or starting page, in a Web site. The whole screen or page a user sees, including the textual, graphic, and interactive content. Navigation tools – Any hyperlinks or buttons used to search, browse, and interact with the site, excluding browser controls. Baehr Web Development: A Visual-Spatial Approach Copyright © 2007 by Pearson Education, Inc. All rights reserved.

Web Development Terms l Node – l Site architecture – l A design approach that places users needs at the center of the design process. Visual-spatial thinking – l The overall site structure and arrangement of individual pages that comprise a whole site. User-centered design – l A single page that acts as a gateway and leads to related pages. A method in which users conceptualize the whole Web site, by focusing and discerning the function and meaning of visual and spatial objects and their unique characteristics. Web page – A single page of Web content from a Web site. Baehr Web Development: A Visual-Spatial Approach Copyright © 2007 by Pearson Education, Inc. All rights reserved.

Visual-Spatial Thinking l Web sites have unique characteristics that distinguish them from print-based documents – – interactivity use of visuals and media complex structures rapid evolution l Have unique visual and spatial characteristics l A visual-spatial approach is important to the Web development process because it considers the ways in which users perceive and conceptualize visual and spatial aspects of Web sites. Baehr Web Development: A Visual-Spatial Approach Copyright © 2007 by Pearson Education, Inc. All rights reserved.

Visual-Spatial Thinking l. Five principles of visual thinking that apply well to our understanding of Web sites are: –vision is selective –fixation solves a problem –discernment in depth –shapes are concepts –complete the incomplete Baehr Web Development: A Visual-Spatial Approach Copyright © 2007 by Pearson Education, Inc. All rights reserved. l Five concepts that incorporate this approach are: – – – visual focus problem solving contextual conceptual wholeness

Visual-Spatial Approach l Table 1 -2 – Page 8

Web Development Process The process of Web development is both a holistic and iterative one, which involves five major phases: Planning – Conceptual phase that involves identifying the subject, audience, purpose, context, scope, and functionality of the site. Content – Researching, writing, and adapting content for individual Web pages, including markup and scripting. Structure – Developing the overall site structure, arrangement of pages, and site navigation tools. Design – Designing the visual content, page layouts, and interface elements. Usability – Formal comprehensive testing of the site for usability and accessibility prior to publishing the site. Baehr Web Development: A Visual-Spatial Approach Copyright © 2007 by Pearson Education, Inc. All rights reserved.

Improving Web Development Skills l Courses Self Study Practice! l Study existing Web Sites l l – – What works for the site? What does not work?

Last page of the Internet l Last page of the internet: – http: //www. internetlastpage. com/

Summary ITIS 2300 8/24/2003 7: 57 PM 15

Assignment l See Assignments web page for details ITIS 2300 8/24/2003 7: 57 PM 16