Codenotes for Web-Based Ui

Chapter 1: Introduction Orientation: The Purpose of this CodeNote A chasm exists between software developers and website designers. This is unfortunate, because the skill sets of these two groups overlap in many ways: designers may need to understand programming to add interactivity to their sites, and developers need to understand how browsers and HTML operate to leverage the Web in their applications. This CodeNote is intended to create a bridge between these two skill sets; specifically, it provides a common methodology of user interface (UI) design for creating effective websites (or web-based UIs for applications). Chapter 3 distills the many contemporary theories of web design into some rules of thumb that can be employed to create good-looking and highly functional web design. The remaining chapters give the reader (software developer or website designer) a working understanding of the primary web technologies and languages; they include tutorials on the languages and technologies required to add a dynamic dimension and interactivity to web pages. Web UI Design Theory While one may be familiar with the technologies and development languages of web design, to use them effectively one needs to understand the rules of design by which an effective and aesthetically pleasing web UI is put together. We say "rules of design" because, contrary to the beliefs of many developers, making a good UI is not a purely creative act. By virtue of understanding certain rules of color, layout, and font (outlined in Chapter 3), one can actually take a somewhat algorithmic approach to web design. The choice of colors is, for example, not just a matter of opinion: different colors at different saturations, graduations, and relationships to one another on the color wheel (see Chapter 3) create different feels. There are rules for what colors are complementary to one another and in what ratio they should be used together. Similarly, there are definitively good and bad placements for navigation and some absolute do's and don'ts in terms of how data, navigation, and images are laid out. After covering basic design theory, these CodeNotes will introduce the technologies of web development. The "Summary" and "Design Notes" sections of these chapters will relate the technologies being introduced to the UI chapter (Chapter 3); these will provide a UI context to which the technologies being introduced may be specifically applied. The Web UI Technologies While there may seem to be a myriad of technologies associated with client-side web UI, there are, in actuality, only a few we need to be concerned with. In this book we will explore DHTML/CSS, JavaScript, some advanced HTML (the reader is advised to have a basic understanding of HTML prior to reading this CodeNote), XML, and XSLT. Often these technologies work together, but it can be difficult to understand where one leaves off and another picks up, or where different technologies might be used to accomplish the same thing. To make matters more challenging, major browsers, while supporting the same technologies, may support them in slightly different ways with differing levels of compatibility. Even different versions of the same browser may render things differently. While additional effort is required to make certain that your UI functions similarly in Internet Explorer, Netscape, and other browsers (many differences will be addressed in the appendix to this book), it is not an insurmountable problem. Fortunately, at the time of this writing, the industry has largely converged on a few standard web-UI technologies that major web browsers implement. They are: -HTML. The HyperText Markup Language is the foundation technology of web UI. At its most basic level, HTML consists of an established (presently version 4.01, www.wBrill, Gregory is the author of 'Codenotes for Web-Based Ui', published 2002 under ISBN 9780812992168 and ISBN 0812992164.