Learning Materials for Information Technology Professionals (EUCIP-Mat)
User Interface and Web Design 1. Number of study hours: 30 2. Short description of the course Module expands upon WWW and Internet history, principles and construction of webpage functioning, basics of the communication (including the interaction between human and computer), creation standards of good web pages, structure and basic elements of web pages. 3. Target groups Module target groups are first of all vocational education students, who specialize on information technology, but it is also an interest of those who simply wish to pass the respective qualifying examination. 4. Prerequisites Passing through the module does not presuppose from student any former knowledge from the field of information technology. 5. Aim of the course - learning outcomes Student who has passed through the module knows: - possibilities offered by hypermedia and web; - basics of the human/computer interaction; - requirements and standards that specify respective processes. Student also knows the principles of designing simple web pages including respective requirements, methods and tools. 6. Content of the leaning materials (incl. animations, video, audio …if necessary)
B.4 User Interface and Web Design B.4.1 Web and Hypermedia: Possibilities and Limitations B.4.1.1 Discuss the history behind the world-wide-web Internet services Service Protocol Explanation telnet, ssh telnet, ssh Remote access ftp ftp File transmittal e-mail POP3, SMTP, IMAP4 E-mail Usenet nntp News www http „WorldWideWeb “ Remote access Service enables to work on aloof computer and use all of its resources, including periphery devices. Work is organized by the software, which imitates terminal of aloof computer. Protocol called telnet (in case of which the data is decrypted) or ssh (in case of which the data is encrypted) is used for working. File transmission Service is meant for data transmission from one computer to the other and for accessing data archives. Files can be transmitted in two regimes: binary (bit by bit, no matter of the content) or text regime (symbol by symbol with automatic re-encoding). Protocol ftp is used for data transmittal. E-mail Service is meant for exchanging massages. This service enables to send also files and organize mail transmission. Protocols POP3 and IMAP4 are used for message transmittal. Message board (News) Service gives the possibility to exchange messages in between the newsgroup. Protocol nntp is used for sending messages to all group members. WWW World Wide Web is a unified environment, which consists of hypertext documents related in between with the references and which enables to move from one document to the other. „World Wide Web“ assures also access to the other internet services, such as e-mail and file transmission. Main protocol of the mentioned service is http. History of WWW
„If car industry would have developed as fast as microprocessors since 1971, then the cars of nowadays would have driven with the speed of 480 thousand km/h and used 1 l of fuel for driving 335 thousand km” This is how the development of two different industries was figuratively compared by the specialists of worlds’ leading company Intel. It can be also added, that the price of mentioned car would be 75 cents! 1959 - Corporation RAND – principles of communication packages In 1960-s, after the Caribbean crises, the company called RAND Corporation (at that time one of the most important science centers in USA) propounded for creating decentralized computer network, which would cover the whole country. Project included connecting the computers of military-, science- and educational institutions to the network, which would retain functioning in case of nuclear attack. Main idea was to scatter controlling and managing in order to avoid full-scale collapse in case of collapse of some network segment. Network was supposed to consist of single segments and not be centrally controllable. Each message was supposed to be written off into packages and be sent via different offshoots. Message was supposed to be put together in system of a receiver. First version was released in 1964 thanks to Paul Barani efforts.
1969 – Financing of ARPANET project An experiment of scattered network conception was started by RAND Corporation, Massachusetts Technology Institution and University of California in Los-Angeles in the end of 1960-s. In 1968, division of APRA (Advanced Research Projects Agency, agency working with projects of perspective researches) in Pentagon started to finance mentioned project. In autumn 1969, a “child” – APRANET network – was born, which consisted of four nodes. First tests of APRANET were very successful. Workers of science institutions, who were chosen to be part of test conduction, got the possibility to start exchanging data and using remote access to computers. The number of APRANET nodes grew up to 15 till 1971. In 1972, the number of nodes was 37, and in 1973, first nodes from abroad were connected to network.
1974 – Creation of TCP-protocols First version of TCP –protocols was documented in the end of 1974. TCP was divided into two levels in 1978 - TCP and IP. APRANET was used only by the scientists for coordinating their researches at first, but quite soon the network turned into ultrafast chain, which was also used for exchanging personal messages, gossips and simply stories. Scattered structure of APRANET, which was significantly different from other existing corporate networks, enabled to connect practically any arbitrary computers. Internet growth in 1980-s APRANET got well-known name Internet in 1983. Although APRANET ended its existence in 1991, the name Internet stayed, because by then the network already started to interconnect with international networks. 1980-s is characterized by the tempestuous development of network. The schema of connecting computers with scattered network started to spread through the world and many international organizers wanted to interconnect with the network of USA.
In the end of 1980-s, five centers of super computers was created with the financial help of NSF (National Science Foundation, foundation of national science researches). The network of those centers was named as the “Internet Backbone of USA”. Why only five? Because those centers were too expensive even for wealthy USA. Therefore the efficiency of computers in centers was meant for corporate usage – all science institutions of USA got access to the computers. Wide modernization of network took place in 1988. Process stayed invisible for the users – internet did not loose its operating efficiency. Network developed constantly, it develops also nowadays. New users were brought along constantly by any of the activities of internet community back then. This in turn brought along the development of Internet, but also problems related to internet distribution and security and need for solutions. Number of computers connected to internet was 10000 in 1987 and 100000 in 1989. Creation of ”World Wide Web” In 1990, first WWW-server browser prototype was created by Tim Berners-Li from the European Organization for Nuclear Research (CERN). But “World Wide Web” did not function as active system until 1992. In 1990, the first browser on NeXT platform (APPLE) was created. Creator of APPLE was Tim Berners-Li, father of World Wide Web. First presentations took place in CERN in 1991. Name of the browser was simply WorldWideWeb. Browser was encoded to C-language later and thereafter named as libwww.
Year 1992 is knows by the fact that the number of computers connected to internet exceeded one million in 1992. But creation of WWW (World Wide Web, “worldwide network”) is considered as most important development phase (even most critical development phase from the standpoint of network existence as some think). System is based on term of hypertext – multiple single texts, which refer in between. Protocol HTTP was created for text operations. Markup language HTML was used for creating texts. SGML language (Standard Generalized Markup Language) was as an example of HTML, which was evolved by Ted Nelson in 1965. Browser CELLO IBM was created for PC by Thomas R. Bruce in 1992.
1993 – creation of browser Mosaic Browser Mosaic was evolved by Marc Andreessen and Eric Bina in National Center for Supercomputing Applications (NCSA). NCSA Mosaic beta-version with index 0.10 was released on March 14th, 1993. This version functioned only in X Window systems of Unix-like computers. Final version of NCSA Mosaic X Window version 1.0 was released one month later, on April 23rd, 1993. First functional Mosaic version was released in September 1993 – this version is the prototype of modern internet browsers.
For October 1993, ca two hundred WWW-servers were in use. Mosaic was the version where we could see the occurrence of familiar things as audio and video, bookmarkers and list of web pages visited recently. In addition to that, Mosaic became the first browser that worked on multiple platforms: some months after the release of first Unix-version, Macintosh was released and thereafter also the version for Windows.
NCSA Mosaic is starting point for almost all the browsers.
In 1994, first version of Mozilla browser was released by Netscape, which was created by Marc Andreessen who had left NCSA. This version is also known as Netscape Navigator 1.0. NCSA Mosaic is also bases for Internet Explorer, which is the mostly used web browser nowadays. Information about the fact, that Internet Explorer is created based on Mosaic code, is displayed in programs’ information window until nowadays.
The only exception (excl Lynx-type of browsers) is Opera. More precisely, this browser is of the same age as Netscape and it was created by the workers of telecommunication enterprise Telenor in 1994. The ones who created Opera started their own business in 1996 and started with mass-distribution. First commercial version of Opera was number 2.11. 1994. Netscape Company called Netscape was created in spring 1994 by Jim Clark (creator of Silicon Graphics) and Marc Andreessen (on of the authors of Mosaic browser). Let us remind: this browser was created in NCSA, the University of Illinois, and the bases of Netscape Navigator, which was very popular some time ago, was the technology of Mosaic. First version of Netscape Navigator was released on October 13th, 1994. “Home users” could download the browser free of charge. Enterprises were able to buy a license for 99 USA dollars. Authors brought up support of jpg format, possibility to download multiple web pages at the same time and compatibility with Microsoft Windows, Apple Macintosh and X Window System platforms as advantages of their package. 1994. W3C In 1994 the W3C (World Wide Web Consortium) was created. Organization coordinates the implementation of the standards related to Internet in order to assure faster and more effective development of Internet. 1996. Creation of Internet Explorer Browser In February 1996 Bill Gates informed: “HTML has changed into our data type”. This was said in order to declare a war against new competitor, which was Netscape. Interesting is the fact, that only couple of years later the experts of Microsoft recommended to governing board to turn serious attention to Internet, but those recommendations were not taken seriously. Now it was important to make up the time that was lost. Mistakes were made also by competitors. James Clark did not comprehend to buy out exclusive rights of Mosaic browser and Microsoft got the inception texts through Spyglass. As a result of this, the renewed Netscape Navigator 3.0 and Internet Explorer 3.0, which were released in summer, used the same essence, whereby the whole support of competitors’ markups was realized in it. As from this moment the popularity started to incline towards Internet Explorer. In addition to the above mentioned, the decision was made by Microsoft to distribute Internet Explorer free of charge and thereafter the market share of Netscape Navigator started to fall rapidly. Following years passed through with even more rapid developments of Internet and WWW. It is very hard to get realistic statistics about the computers connected to network, because those numbers change constantly. Realistic estimation is 6,5 millions in June 1995.
Read more: http://archive.ncsa.uiuc.edu/SDG/Software/Mosaic/NCSAMosaicHome.html B.4.1.2 Define hypertext and hypermedia, explain their importance in webpage design
Hypertext is the text, which includes references to the other documents. Number of references is not limited. Definition of hypertext is tightly related with WWW, but it is not only used in web. Classical example could be encyclopedia, where the references are used within the same text: one article has references to the other articles. The structure of hypertext is not linear. A book could be drawn as a comparison. The structure of a book is linear, because we move from one page to the next. Each page can have multiple references in web, which can refer to the documents not related in between and which can be located in different servers and different continents (you have probably noticed, that moving along the references takes you to the sites, which are not related to the ones, that you were to couple of minutes ago, either by the topic or content). Web pages form a tree shaped structure within one site, where the main leaf is on the top level, and which can be used for moving to any of the sections and subsections.
Hyperlink (reference) usually differs from the rest of the text, it is underlined and with different color as a rule. If you place the cursor on the reference, then it will change the shape. Mouse click results in opening the referable document either in same or new window. Hyperlinks enable to make references both to web pages or different files (graphical, audio, video). For example, if hyperlink refers to the video clip, then you can watch it right away (if the system has appropriate program for it).
First browser was able to show only texts, all the references were textual by then. Mosaic browser came with the possibility of placing also graphics to the web pages, and therefore navigation turned into easy process. Thereafter, a smooth development started and different possibilities, such as video, audio and graphical elements, accrued to hypertext. Hypertext turned into hypermedia.
Web pages, that include only text, can be called as hyper textual. Web pages, that include also components of multimedia, are called hypermedia. In case of such terminology, most of web pages belong to hypermedia. There are very few hyper textual web pages. It is important to remember, that more graphics on the web page takes more time for downloading it and there is a possibility that visitor leaves before the end of downloading.
Test yourself: Which are the file types that can be referred to by hypertext (hypermedia) reference? Reference can guide you to each graphical of audio-video file. There is a possibility to see or hear those files in case of appropriate tools.
B.4.1.3 Browse through hypertext and hypermedia There are three types of navigations: 1 Moving on site with the help of references; 2 Use of search format; 3 Access to the content via portal;
All three types must not necessarily be represented on each site. First type is mostly used, but it is not always the best. For example, if site is used for representing products of the enterprise, then moving through the references is effective only in case of short list of products. Therewith, the site has to be very well structured, each group of products must have separate partition and user must understand where from to look for a product. If large amount of different products is represented on site, then using the first navigation method is not effective. User must have the possibility to search the product by entering the keyword, whereby the products are also grouped by keywords and descriptions in addition to grouping by categories in order to make searches easier. Such sites are created by using databases. If site enables to use different services (for example e-shop, which enables to buy things as well as get recommendations for product usage and also read additional descriptions), then it is reasonable to create a portal, which is divided into separate zones. Such portal enables to access needed partition. Types of references Moving within the site pages and sections is organized with text – or graphical references.
Text references + Preferences; 1 easily revisable (in case of both, text references and adding a new reference); 2 compatible with all browsers; 3 great speed of downloading. - Shortcomings: 1 not possible to use different fonts and effects.
Graphical references + Preferences; 4 visual; 5 nifty (references draw the attention). - Shortcomings: 2 if downloading of graphics is prohibited and one who created the site has not used the attribute called “alt”, then user does not see either the button nor the reference; 3 complicated to revise (the whole button has to be changed in order to change text reference. In order to add the button, it has to be created with editor at first. Adding the button could be compounded, if adding of one new element was not foreseen in creation of the site); 4 great number of graphical elements slows down the process of web page downloading. B.4.1.4 Explain the common components used in web pages (such as: top bar, side bar, site map, contact, search feature, help, last updated…) Navigation system (sites’ menu) can be located on the left (most common), right or top edge of web page. If menu is located on the left or right and web page has a lot of information, then the references can be doubled on the bottom edge. Then the user would not have to roll up the page in case of changing the partition. If buttons are used as references, then it is recommended to double them with texts on the top or bottom of the edge, because user might have switched off graphical regime. Menu has to be located on the same place on all the pages and queue of references must also stay the same. Then it is easier for the user to navigate on the site. Clauses that are related with the concurrent page shall not be cut out of menu (at the same time it does not have to be a reference and it definitely has to differ from the other clauses in menu).
References in menu must be easy to understand. They must show which partition they refer and which information is available in there. B.4.1.5 Describe the use and value of internal and external web-sites in a company
Web server can be located in internet or in local network. If web server is located in local network, then it is possible to organize private network (intranet), whose structure is similar to internet. Some of the site can then be made public (internet) and some for private use only (intranet). In such case the users of intranet are the workers of the enterprise. Public part of the site (internet) is meant for clients in such case.
Intranet should consist of information needed for working, but information must not be visible to the clients and competitors. For example, intranet can consist of legal acts, directives and documents that regulate working processes and such documents should be accessible for all the workers. External and internal part should be handled as two different information environments, each of which is oriented on certain users. Each environment assures solving of different tasks and has different technical limitations. Therefore the approach of engineering those environments must be different. Design of intranet user interface must be different from the design of public site. Users have to see where they are situated presently. At the same time the style of two different interfaces must be similar. Style has to derive from general design of the enterprise.
During the implementation of intranet it is important to consider that hardware and software is balanced inside the enterprise (same version of the browser is in use – same platform and operation system, same fonts) at the same time, when other internet users might use very different computers, operation systems and browsers. In addition, enterprises renew their software constantly. Meanwhile, the other internet users might use older browsers, which might cause incorrect reflection of web page. In other words, intranet is the internal network of enterprise, which is found on the same basics as used by WWW. Extranet is used for ensuring access to internal information from the outside of intranet and use internet services through intranet. Extranet is the part of intranet as well as connecting link between intranet and internet. Both networks, intranet and extranet, are created for securing confidential information. Following tools are used in order to achieve the goal: - screens and proxy servers between networks; - user authentication; - data ciphering. Intranet is similar to internet by its characteristics. Only difference is security requirements. Therefore it is important that intranet had the same styling as public web page. B.4.1.6 Discuss the importance of analyzing and revealing the needs within the target group
It is the best practice to analyze the type of site visitors after the design of web page is practically finished. In order to be sure about the purpose of site creation (for example, product presentation, online- shopping or simply advertising), it is important that the designer works with customer and takes into consideration all the wishes that customer might have. Designer must create the styling that is oriented to certain group of site visitors. After finishing the first test version of site, designer must cooperate with the certain group of site visitors, who make markups during the use of system and detect any of the weak spots in system and user interface. Relying on the results of test, designer continues the implementation of the site by correcting the faults that were found.
Unfortunately, analyzing the site by the designer and group of users might not always mean that site conforms to all of the user interface requirements and is comfortable for the users. Site might still have shortcomings, which were not considered or which were ignored.
Site design does not only consist of its format, it also consists of its using comforts. Site has to be externally attractive, comfortably navigational and informative. User will not stay long on site, if needed information is absent and will hardly visit it again. It is important to remember, whom the site is meant, while creating the site. For example, site, which represents pop music, has different goals than site, which represents technological products to the respective specialists. Specialist has no interest in possibility to download 15 seconds of pop music. Most important rule in site creation is the fact, that site has to be understandable for the visitor. Visitor must not leave the site due to the reason, that it was impossible to understand site structure and find needed information.
Attributes of user friendly interface are: 1 user does not have to wait long for downloading the pages of site; 2 site usage is easy; 3 orienting on site is easy, needed information is easy to find; 4 site considers the needs of visitor. B.4.2 Human / Computer Interaction: Guidelines and Standards B.4.2.1.Define basic concepts of communication theory (such as: sender, messages, receiver…) Information transmittal Design of user interface is related with the terms as „communication” and „information transmittal“. Main goal is to enable users’ cooperation between the computer and other users.
Communication process is similar to mail service: 1 sender has to send message to the receiver; 2 message is transmitted to the receiver in understandable context; 3 receiver is capable to read the message (decipher); 4 message is transmitted via “proxy“ i.e. server, which fulfills the role of postman; Information can be transmitted differently: 1 as text; 2 as audio and image.
Communication is considered as successful if information was transmitted from sender to receiver, receiver understood what was sent and deciphered it correctly. This argument applies in case of technology (f.e. radio show) and psychology (communication between people).
It is important to be convinced, that receiver has sufficient technical tools for reading your message. For example, it is important to be convinced that receiver has needed device for listening audio transmitted via e-mail. Otherwise it is not possible to consider communication as successful, because receiver did not receive needed information. Shannon-Weavers’ model
Term “communication” implies that information is transmitted in format, which is understandable for both sender and receiver. This all is described by the communication theory. Describable objects in this theory are message, sender and receiver. In 1949, Shannon and Weaver threw out mathematical model, which described linear message transmittal and basic objects of communication. Model consists of five sequential elements: source of information, transmitter, communication channel, receiver and destination. This is linear model.
Transmittable information is called message. Message moves through transmitter from the source of information to the communication channel and there from to the receiver.
Shannon also defined the terms of noise (which was thereafter bound with terms of entropy and negentropy) and redundancy. . Entropy (noise) is related with external factors in communication theory, which deform message, break its integrity and contingency of receiving message by the receiver. Each entropy channel is characterized with its speed limits of information transmittal (Shannon’s cutoff value). Transmittal speed, which is greater than cutoff value, causes mistakes. At the same time it is possible for the speed to approach cutoff value from down to however close and with adequate encoding it is possible to achieve very low probability of mistakes even in channel with arbitrary abundance of noise.
Negentropy (negative entropy) is related to cases, where incomplete or deformed message is received by the receiver thanks to receivers’ capability to encode the message despite of deformed or missing information.
Redundancy, i.e. replay of message element, the purpose of which is to forestall communication failures and, which is an entropy adversary tool, is usually demonstrated by the illustrations of human languages. It is presumed that level of redundancy is ca half of the information in all the languages. If you delete half words from text or radio show, then it is still possible to understand it. One example could also be a telegram, where half of the words are missing, but the content of text is still understandable.
Naturally, there is a limit in abundance of noise, exceeding of this limit causes sudden fade of understandable part of text. Especially complicated is to understand deformed message, if unknown code is in use. Test redundancy on yourself – one of the main attributes of human language – try to read message, where rain has washed off a part of it. Useful to know: http://en.wikipedia.org/wiki/Claude_Elwood_Shannon B.4.2.2 Understand how communication applies to human beings, and recognize effective ways to communicate information Model of Osgood-Schramm
Cyclic model of Osgood-Shramm relinquishes completely from defining communication as one-way linear process. Main peculiarity of it is the representation of mass communication as cyclic process. Second attribute of this model is paying attention to the behavior of communication parties. Parties are the sender and the receiver, whose main task is to encode, decode and interpret information.
The review of communication definitions composed by W. Shramm showed, that set of information marks are expected to exist in each of them. Set of marks can include facts and things, but also emotions and delitescent values. Area, where the experiences of the sender and receiver are similar and understanding of used marks is the same, must exist for perceiving message adequately. Sender and receiver own the “fond of usable values” and “alliances between the ambits”; area of successful communication is situated on the intersection part of “ambits”. Success of communication depends also on expectancies of participants towards each other. It is wrong to consider communication process as linear process with start and end according to theory of Shramm, because actually it is endless. Criticism of model is enabled due to the fact that it comes across as communication parties are “equal”. The process is often unbalanced, especially in case of mass-communication. Sender and receiver are not very equal parties here and model, which shows them as links of the same chain, does not reflect their role in communication process adequately. Information transmittal in internet Information transmittal There are two main terms that are used in internet: address and protocol. Each computer that is connected to internet has a unique address. Unique address is given to the computer even in case of temporary connection. All the computers connected to internet have different addresses during different moments – postal address defines the unique location of a human as well as internet address defines the location of computer in internet. What is a protocol? Cooperation or communication rules are called protocol in general. For example, diplomatic protocol defines how to behave in case of hosting visitors or conducting the reception. Network protocol defines the rules of behavior for computers connected to internet. Standard protocols make different computers to “speak the same language”. This is how the possibility is given to different computers, which function with different operation systems, to connect to internet. Protocol is a standard, which defines the form and transmittal type of message, message interpreting procedures and cooperation rules for different network hardware. It is practically not possible to describe all the cooperation rules in one protocol. Therefore, the bases of all the protocols are construed as multileveled. For example, protocol of lower level describes the transmittal of small amounts of information from one computer to the other, because it is easier to follow the transmittal of smaller information units. If part of information was deformed during transmittal due to the alarms, then protocol only demands to repeat the transmittal of the part that was deformed. Protocol of next level describes how to divide large data arrays info pieces and how to gather them together afterwards. Therewith the small parts are transmitted with the help of lower level protocol. Protocol of next higher level describes the transmittal of file. Protocols of lower level are used also here. For realizing the protocol of new higher level in internet, there is no need to know the peculiarities of network operation. There is only a need to have the knowledge of using lower level protocols. There is a possibility to meet analogies of multileveled protocols also in every day life. For example, you can transmit the text of document during the voice call. You have no need to have knowledge about the operation basics of telephone network. You know that you have to dial the number and wait until the other human pick up phone. Fax can be used for transmitting the shape of document. You place the document to the fax machine, dial the number and transmit the document. You do not have to think about the fact, how the document is being transmitted through telephone line. You simply use the protocol of higher level: “place the document to fax machine, dial the number and press “Start” button”. You used at least two protocols during described case: operation protocol of telephone network and protocol of transmitting faxes.
Internet has also protocols of different levels, which operate together. There are two main protocols that are used on lower level: IP - Internet Protocol and TCP - Transmission Control Protocol. Due to the fact that those two protocols are very closely related, they are put together and named as TCP/IP protocol, which is the basic protocol of internet. All the other protocols are construed based on TCP/IP protocol.
TCP-protocol TCP divides information into pieces and numbers them, which is important for being able to put them correctly back together after transmittal. Different pieces of wooden houses are also numbered in case of moving a house to the other location. Following, all the pieces are transmitted to receiver with the help of IP protocol. Then the TCP-protocol controls if all of the pieces have arrived. Reason for that is that all the pieces might come through different channels and they might arrive in some other order. After all of the pieces have received, TCP places them in correct order and gathers into one integral whole. IP-protocol Choice of channels that are used for transmitting information has no influence on TCP-protocol. This is the task of IP protocol. IP adds additional information to each set of received information. Additional information includes the information of sender and receiver. Operation is similar to the work in post-office while sending packages. Package is placed in envelope and information of sender and receiver is placed on the envelope. Now it is the role of IP protocol to assure that all the packages are transmitted to the receiver (as in case of ordinary mail). Channels and arrival time of different packages might be different. Internet is often visualized as divergent cloud. You do not know the channels that are used for transmitting information, but correctly formed IP packages arrive correctly.
4.2.3. Describe guidelines for developing user-friendly web-sites (such as: readability, prioritized content, easily scanned, easily navigable, consistently navigable, where am I…) Usability
Principles of usability: the more something needs or might need temporary spendings, the smaller is the chance that someone starts using it. Steve Krug
Site design does not only consist of its format, it also consists of its using comfort. Site has to be externally attractive, comfortably navigational and informative. User will not stay long on site, if needed information is absent and will hardly visit it again. It is important to remember, whom the site is meant, while creating the site. For example, site, which represents pop music, has different goals than site, which represents technological products to the respective specialists. Specialist has no interest in possibility to download 15 seconds of pop music. Most important rule in site creation is the fact, that site has to be understandable for the visitor. Visitor must not leave the site due to the reason, that it was impossible to understand site structure and find needed information.
Attributes of user friendly interface are: 1. user does not have to wait long for downloading the pages of site; 2. site usage is easy 3. orienting on site is easy, needed information is easy to find; 4. site considers the needs of visitor.
Best practice is to create the design that is user friendly and ensures comfortable access to data. All this expresses in simple and understandable navigation system together with well completed quality content of site. Unfortunately designers do not always consider the needs of visitor and sacrify the comfort to graphical format. But non of the formats are able to keep the visitor on site, if navigation is not thought through and it is not possible to find needed information. For example, if payment system in e-shop is too complicated, disordered or slow, then visitor might prefer to order the products from some other shop. More worse is the fact, if visitor can not change his selection, because such possibility is absent.
Main facts that need to be considered in case of creating the site: Clarity: If visitor does not understand how to use the site, then the fact that information is not absent will not keep him on site, because he does not know how to find it. Unified style: All the pages must be formulated using the same style and all the pages must be unified with the same idea. The idea is in consistency of design elements and page origination to certain site. Consistency expresses in unified color gamma (colors belonging to a company are used on company’s web page, for example http://www.hanza.net), location of navigation elements and order of succession (navigation panel is always on the left margin of site and the order of succession of references is always the same).. Intuitivity: Navigation and placing of site elements must be intuitively understandable. Understandable images (such as an envelope of arrow) can be used for marking some of the elements (such as reference to e-mail address, moving to the next or previous page). Moving on site: Visitor must always know the partition where he is located and how to get back to the main page. Number of mouse clicks must not exceed three in case of finding arbitrary information. This means that the structure must not be too complicated. Useful to know: Usability methods for exploring website: http://usability.ru/Articles/um.htm Elemental basics of usability: http://www.webmascon.com/topics/testing/14a.asp 4.2.4 Discuss general quality criteria for web text (such as: write for various browsers, validate HTML, condense text content, spell-check, small byte size graphics…) Speed of page downloading Using comfort of site depends not only on color gamma, structure and navigation, but also of internet connection type. Many are using fast DSL- connection, but there is enough of those, who use telephone lines – in better case ISDN, in worse case modem with speed of 53Kbps. it is important to consider the amount of graphics and effects in case of creating the site, because visitor will not wait until this all is downloaded. It turned out as a result of different researches, that visitor agrees to wait for the page to download until 10 seconds. If visitor does not get the information that was asked for, then he simply leaves. Site downloading can be slowed down by “hard” graphics, but also sheets that are placed inside each other, because the sheet will not appear on display before the whole content is downloaded. Therefore, elements must be placed using CSS, not sheets, while creating the site. Compatibility with different platforms and browsers Another problem consists in the fact, that users use different browsers and operation systems. Many internet sites are optimized into certain platform of browser. This is not the best solution, because there is a risk of loosing many visitors that are using different browsers. Web page must be tested with different browsers and platforms during implementation of it, because the same browser might show the page differently on different platforms (for example Internet Explorer that operates in Windows differs remarkably from MacOS X version). This helps to avoid problems with page displaying. There should not on no condition be any sign of web page, which says that it is configured to work on some certain browser and that exactly this browser needs to be used for opening the page. User has to decide his own, which browser is more comfortable to use. No-one should force a user to use a program, which he does not like. Often, when page is displayed incorrectly, user simply leaves and never comes back. Solution of the problem could be the use of CSS for forming and placing elements, because then the pages are displayed correctly most of times (there might also be problems with Internet Explorer, for which the code needs to be optimized a little).
Peculiarities of displaying and adoption All possible problems that might be faced by the visitor, need to be considered in case of designing the webpage. Such problems include for example displaying graphics, information recognization, moving through the references.
Graphical information is not always available for the visitor (graphical output might be turned off, visitor sees badly and uses text browser). Therefore, all the images must have additional text (attribute alt of tag img). Then the visitors will know which image is on page. If navigation system includes menu, which consists of graphical buttons, then it would be good to make alternative text menu (existence of such menu is welcome also on page of reference chart). It is also important to consider the size of font. It is better to define the size using comparative units, so that user could change the font if needed. B.4.3 Graphic Design B.4.3.1 Use basic graphic principles for normal written text (such as: font size, percentage white space…) Text formatting Text of the message is the most important in case of information transmittal. Therefore, special importance is given to text layout and readability. Text readability depends on multiple factors, such as: 1 font type, 2 font size, 3 emphasincy. Font It is important to know that there are two types of fonts: proportional font sizes and fixed font sizes. All characters have equal spaces in case of fonts with fixed size, irrespective of its actual width. Characters I and M use the same size of space. Such fonts are used on typing machines. Proportional font considers the size of character. Character I uses ca three times less space than M in case of proportional font. Most of texts, also preset text, are written with proportional font. Text, which is written in proportional font, is usually better to read, but not always. For example, e-mails are often written with fonts with fixed size. This habit is since the time, when text terminals were able to show only marks with certain width.
Types of fonts Serif Fonts of this type have serifs in ends. Short horizontal dashes connect visual letters, which make it easier to read. Such fonts are easier to read on paper and therefore those fonts are more often used in publications. Representatives of this type are for example Times New Roman and Garamond. Sans Serif Fonts of this type do not use serifs. Texts are easier to read on screen or other electronic data-carriers with smaller resolution. Therefore those fonts are more often used on web pages and in presentations. Arial, Tahoma, Verdana and Helvectica belong to this type of fonts.
Script Fonts of this type imitate handwriting. Those fonts are often used for punctuating the informality of the document: invitations, greetings, commercials. Using those types is not recommended to use very often.
Emphasincy There are different formatting tricks, which are used in order to emphasize some part of text. Typical way of emphasizing is to make the text bold or use italic text. Infrequently we can also see the use of underlined text or text with capital letters. Font size Font size is measured in dots. One dot is equal to 1/72 inches. It is important to remember, that font size plays a great role. For example, if text needs to be published, then the optimal size is 10 to 12 dots. The size of font should not be less than 18 dots (size between 18 to 72 dots) in case of presentation text. Text formatting in web If you format the text of web page, then it is important for you to consider the problems that might come up during the web page with browser. Font size might change in case of different monitors and same fonts might have different visage. It is important to consider the possibility that this font, which is used on web page, is not installed to visitors’ computer. In such case visitor sees the text with default font. Therefore it is recommended to use standard fonts, which are installed to all the computers by default, for formatting main text. Text can be transformed into graphical image in case of formatting headings, buttons and single elements. Then the use of arbitrary font is allowed.
Reading the text on screen is more difficult than reading it on paper. Therefore it is important to use different text structuring methods: empty room, large font, large line spacing. Recommendations for formatting web page text: 1 it is recommended to leave 40-60% of page empty; 2 information should be structured with headings and subheadings, which differ from each other and also from the rest of the text; 3 texts with different importance can be emphasized with different tools (size, color); 4 in order to ensure better readability it is recommended to leave one empty row in between two paragraphs.
Homework: Is it ok to use non-standard fonts on web page? If not, then why? If yes, then how?
If font, which is used for formatting the web page, is not installed to visitors’ computer, then the text is displayed with standard font. In case non-standard fonts are used for formatting the web page, then it is important to be sure, that those fonts do exist in users’ computers. The other solution is to use graphical images instead of text. B.4.3.2 Understand the effects of drawings, pictures, colours and animation, and apply basic principles of graphic design (such as: balance, harmony, contrast, variety…) Color
Perceiving graphical image depends greatly on its color. Color makes the image expressive, passes on humor, sharpens cognition and gives special meaning to form. Color environment influences human constantly: voice, emotions and humor – they all have color characteristics („canty voice” „daydream”, „ desperate straits“). An important attribute of color is to bring forth emotions in receiver. Emotional effect can be related to cultural origin. For example, white color symbolizes pureness in western countries and it is very often used in weddings. Same color symbolizes sorrow and lack of color in eastern countries and is used in funerals. Some typical reactions on colors are excitement (red color), silence, peace (blue and light blue color), hope (green).
Color attributes Color has three attributes: hue, brightness and saturation. Hue Hue is the attribute, which enables to differentiate colors as red, yellow, green, blue or some other color in between. Diversity of hue depends fore mostly on light-wave length, which hits the eye. Hue can be visualized as circle, which turns from red to green, then blue and then back to red. Brightness Brightness involves lightness or darkness of hue. This is defined with mirroring from physical soil, where the light falls. The greater is the lightness, the lighter is the color. Saturation ie. chromaticity Saturation is the color intensity. This is measured as the difference of color comparing to gray of the same brightness. The lower is the saturation, the grayer is the color. If saturation is equal to zero then color transforms to gray. Chromatic and non chromatic colors
Non chromatic colors are white, black and gray, which is the color in between white and black. Those colors have no he and saturation. Chromatic colors are all the colors that are different from white, black and gray. In other words all the colors which we call colored. Useful to know (links in Russian language) What is a color? http://support.epson.ru/products/manuals/100045/COL_G/0501_1.htm#What%20is%20color http://www.artlebedev.ru/kovodstvo/40/ Color spectrum http://support.epson.ru/products/manuals/100045/COL_G/0501_2.htm#The%20color%20spectrum
Psychological test (Test of Lüscher)
Color perception Color depends on physical phenomenon as well as psychological patterns of color perception. Colors placed side by side have influence each other. Our color perception depends on which colors environ concrete color.
Examples of color mutuality
White square on black background seems bigger than black square on white background. Gray color on blue background gives orange shade, gray color on orange background gives blue shade. Darker orange on gray background seems brighter that same color on lighter orange background. Orange color on red background seems more yellow, same color on yellow background seems more red. William von Besoldt, a well-known fabric designer of 19th century, discovered that composition can be altered beyond recognition even if you change only one color.
Said rule is valid mainly for dominant colors of the composition. Test was made where for example bright yellow background color was replaced with black and all the other colors stayed the same. As a result of this, some shades, forms and patterns came forth and started to dominate, and the others on the contrary were upstaged.
”Besoldt effect” can be more clearly demonstrated on following images. Images differentiate from each other only by the colors of stripes: one has blue stripe, the other has yellow. Image cognition changes cardinally.
RGB model It is a remarkable fact on technical level, that all the colors (at least those, which can be separated by human eyes) can be achieved by mixing three main colors. Those three colors are from the point of view of the - artist: magenda-red, cyan-blue and yellow-ocra. - physicist: red, green and blue, which also known as main colors of spectrum.
Representing colors on digital devices (TV, computer, video) as RGB model, is based on tree main colors of spectrum (R=red, G=green, B=blue), where white color is evolved by compounding the colors. Therefore those colors are also called as additive main colors. Useful to know Additive colors http://support.epson.ru/products/manuals/100045/COL_G/0501_4.htm#The%20three%20primary%20colors%20of%20additive%20mixing RGB color model http://support.epson.ru/products/manuals/100045/COL_G/0503_5.htm#RGB%20color%20model
CMYK model Each graphical editor is capable to evolve arbitrary visible color of color spectrum, by changing the intensity of red, green or blue color. RGB-model is used for displaying a color mainly on screen. There is a different model, which is used for typing. This model is called CMYK (C=Cyan, M=Magenta, Y=Yellow, K=black) and it is based on separating the colors. This model is subtractive. Useful to know Subtractive colors http://support.epson.ru/products/manuals/100045/COL_G/0501_5.htm#The%20three%20primary%20colors%20of%20subtractive%20mixing CMYK color model http://support.epson.ru/products/manuals/100045/COL_G/0503_6.htm#CMYK%20color%20model Color usage in web All the colors on web page are defined by RGB model, because this model is used for displaying colors on screen. Values can be defined by hexadecimal or decimal numbers, but also by name. Example In order to get white color, you have to make sure that values of all the main colors are maximal. Let us define those values in hexadecimal format:
- FFFFFF – red – FF, green – FF, blue – FF (mark # shows that it is the hexadecimal number)
Now let us define red color in same format:
- FF0000 – red – FF, green – 00, blue – 00.
Color can be defined also by decimal number. Then it looks as follows: rgb (255,255,255) – white rgb (0,255,0) – green or simply by name (English name of course) red green blue yellow
Useful to know Web graphics http://www.webimg.ru/content/?pid=4 Graphics
Graphical image of data was realized for the first time in the middle of fifties of last century on large computers, which were used in science and military researches. Graphical data displaying has become the inseparable part of computer system since then, especially in case of private computers. Computer graphics can be divided by different principles. There are three types of graphics, which are described by the way the image is transformed. Those graphics are: raster- vector and fractal graphics. 3D graphic is considered as separate graphic, which explores the methods of displaying dimensional images. There are two types of graphics, which are separated based on the use of color. Those are black-white graphic and colored graphic.
Deriving from the fiend of human activities, there are three types of graphics: engineer, science and web graphics. Raster graphics
Elementary unit in raster graphics is pixel (dot). Bitmaps remind of a squared page, where each of the squares is covered with some certain color and which all together form a bitmap. Main attributes of raster graphics is resolution and depth of the color. Color depth Depth of color is the number of bits, which is meant for encoding the given color. Number of different colors, which can be used in one pixel, is defined by the length of code. This is how the depth of color shows us the number of colors, which can be used for image coloring. For example, if the depth of the color is 24 bits, then the image can consist of 16,8 million different hues (224 ≈ 16,8 mln). It is clear, that the more colors are in use for displaying the image, the more precise is the information per each pixel color. Resolution Resolution is the number of dots per length unit. Density of dots is the factor, which defines the quality of image. Inch is the unit, which is mostly used as the unit of length. Sometimes they also use millimeters. Image resolution is measured with unit – dpi (dots per inch). The greater is the resolution, the more quality has the image, but greater resolution takes more capacity. This should be considered while creating and revising images. If image is meant for displaying on screen, then the resolution can be smaller comparing to image, which is meant for printing (72 dpi or 92 dpi is sufficient resolution for displaying image on screen; resolution should be 150 dpi to 300 dpi in case of printing; and even higher in case of printing-machine)
+advantages of raster graphic: • displaying great number of colors; • transmittal of color transformations and shades; • transmittal of great amount of small details.. -shortcomings of raster graphics: • quality reduces in case of minimizing images, because small details disappear.; • quality reduces in case of enlarging images, cause dot (raster) enlarges; • the greater is the resolution and depth of color, the grater is the file. Raster graphic programs Programs of raster graphics are meant for revising present images (photos; scanned images), as well as for creating new images. Some examples: Adobe PhotoShop, Corel PhotoPaint, Ulead PhotoImpact GIMP.
Elementary unit of vector graphics is a line (straight or curve). Images are construed from lines and all of the parameters are defined by numbers and formulas in reference to coordinate system (line length, angle in reference to center lines; coordinates of the midpoint of the circle, its radius; formula for describing a curve). All the values are recalculated in case of enlarging or minimizing the image. This assures that the quality is not changing. + advantages of vector graphics: • it is possible to transform, enlarge or minimize the image, by preserving the quality; • smaller file, because only parameters are saved (not the whole image), which enable to recover the image. -shortcomings of vector graphics: 1. it’s impossible to create images with many details, such as photos. Vector graphic programs Vector graphic programs are meant for creating images. Examples are: Corel Draw, Macromedia FreeHand, Adobe Illustrator, Xara Xtreme. Graphic formats GIF (CompuServe Graphics Interchange Format) GIF is the format, which is implemented by the company called CompuServe. GIF is the format used for transmitting raster graphics in internet. GIF format does not depend on hardware. It uses LZW-packing, which enables to pack files with great single-colored spaces (logos, headlines, schemas). GIF-format enables to interlace images, which enables to restore the whole image, only with smaller resolution. This option is used widely in internet. First you see an inelaborate image. As soon as new data arrives, the quality of image improves. GIF may declare one or more colors as transparent. Those images are not visible with browser or any other programs. Transparency is assured with additional Alfa-channel, which is stored together with the file. GIF-file may include multiple raster images, which are loaded one by one with the frequency defined in file. Such file is called a GIF animation. Main limit of GIF is the fact. That image can be stored only in regime of 256 colors. PNG (Portable Network Graphics) PNG is a recently implemented format, which has to replace GIF. It uses packing without losses. Depth of color can be arbitrary till 48 bits. Interlacing is used not only for the rows, but also for columns. It supports the transparency with arbitrary transformation. Information is stored from gamma correction in case of PNG-format. Gamma is a number, which characterizes the dependency of CRT screen luminosity on voltage of electrodes. This number enables to correct brightness of image during displaying. This feature is needed for ensuring that images made on certain type of computer seem similar also on screens of other type of computers. This feature is helpful for applying the main idea of WWW, which is the mirroring of information without being dependent on hardware. PNG files can be created by most of the graphic programs. JPEG (Joint Photographic Experts Group) JPEG is actually not the format. It is the algorithm of packing, which is not based on finding similar elements like RLE and LZW. It is based on difference of pixels. JPEG seeks for arbitrary color changes square of 9x9 pixels. JPEG stores the speed of changing from pixel to pixel instead of actual values. All the information, which is irrelevant from the point of view of the algorithm, is left aside by replacing some of the actual values with average values. The greater is the density of packing, the more information is left aside and the lower is the quality. Usage of JPEG enables to receive the file, which is 10-500 times smaller that GMP file! Format does not depend on hardware, because PC and Macintosh support it completely. Best result is received if JPEG is used for packing photos, because photos have more color-transformations. Problems might arise in case of logos and schemas due to single-colored spaces. Images with greater resolution (200-300 and more dpi) are packed better than images with smaller resolution (72-150). Transformations are softer in case of files with greater resolution, because there are more squares of 9x9 pixels. It is important to remember, that only the final version of work should be saved in case of JPEG format, because each storing causes loss of data. TIFF (Tagged Image File Format) TIFF is one of the most used formats, which does not depend on hardware and this is also one of the most secure formats, because practically all of the programs related with graphics support this format on PC and Macintosh computers. TIFF is the best choice to use for importing raster graphics to vector graphic and layout programs. TIFF enables to store all of the color models: black-white, RGB, CMYK and also additional colors of Pantone. TIFF enables to store vectors of Photoshop, Alfa-channels in case of creating vizards in video clops of Adobe Premiere and many more information. There are two types of TIFF-formats: for PC and Macintosh. Reason is the fact, that Intel and Motorola processors are using different type of number presentation. Both formats are readable for graphic programs as a rule. Greatest problem is the LZW-packing, which is sometimes used by TIFF. There is a row of programs (for example: QuarkXPress 3.x and Adobe Streamline), which can not read such files. In addition to that, printing of those files might take more time.
B.4.4 Web Design Requirements and Methods B.4.4.1 Analyze the needs of the target group for which a web page is meant It is the best practice to analyze the type of site visitors after the design of web page is practically finished. In order to be sure about the purpose of site creation (for example, product presentation, online- shopping or simply advertising), it is important that the designer works with customer and takes into consideration all the wishes that customer might have. Designer must create the styling that is oriented to certain group of site visitors. After finishing the first test version of site, designer must cooperate with the certain group of site visitors, who make markups during the use of system and detect any of the weak spots in system and user interface. Relying on the results of test, designer continues the implementation of the site by correcting the faults that were found.
Unfortunately, analyzing the site by the designer and group of users might not always mean that site conforms to all of the user interface requirements and is comfortable for the users. Site might still have shortcomings, which were not considered or which were ignored.
B.4.4.2 Explain the risks of having too many messages on one page If you start choosing the appropriate structure, it is important to remember that one page should not have too large amount of information, because the capability to get the information is different in case you see the text on paper or on screen. Great amount of information is harder to remember from the screen. Therefore it is recommended to divide information into smaller partitions and emphasize most important paragraphs. For example, it there is a huge amount of products on site, then it is reasonable to compose a catalogue. If visitor moves around in catalogue, he gets the access to the certain product, which also has the description. Same page should also have the references to all the other site partitions. B.4.4.3 Explain the problems around a poor mix of colors Wrongly chosen color gamma Colors, which are used on web page, have great importance. It is important to consider, that colors are also capable to transmit information and good choice of colors can enhance the site remarkably and make it much more attractive for the visitor. Wrongly used colors make it worse to accept the site (for example, use of white text on yellow background makes it harder to read the text). Use of colors, which do not fit together, can either attract the attention of visitors with its unusualness or make the site inapplicable. It is also important to consider, that some persons (also internet users) do not differ colors. Ca 8% of men and 1% of women are colorblind. They usually can not make difference between red and green color, but it also happens that they do not make difference between yellow and blue. Some people see everything only in black and white. Therefore it is useful to prefer contrast colors. B.4.4.4 Explain the need for easy navigation on the site Uncomfortable and unintelligible navigation As said before, it is important to consider the needs of potential visitors while designing the site and also see the problems, which might come up while using the site. In order to simplify the engineering and using of the site, it is necessary to compose a chart. Chart is used for creating clear logical structure and simple and easy navigation. It is the best practice to test the site before and then start using it.
It is necessary to remember while choosing the suitable structure, that one page shall not include too large amount of information, because the capability to get the information is different in case you see the text on paper or on screen. Great amount of information is harder to remember from the screen. Therefore it is recommended to divide information into smaller partitions and emphasize most important paragraphs. For example, it there is a huge amount of products on site, then it is reasonable to compose a catalogue. If visitor moves around in catalogue, he gets the access to the certain product, which also has the description. Same page should also have the references to all the other site partitions.
B.4.4.5 Describe the tools for development of a web-site Web page editors
There are different tools, which can be used for creating web page starting from simple and ending with very complicated ones. Choice of tools depends on the purpose of site creation and also whom the site is created for (company sites are created by professionals with the help of most expensive programs; practitioners create the site with more simple tools). Simple programs are for example: Notepad; MS FrontPage and DreamWeaver belong to the group of more complicated ones. Simple and cheap tools are not always easy to use. In order to create the web page with Notepad, it is necessary to have good knowledge about HTML-language, which is not obligatory if you create the web page with FrontPage, where the need to know HTML- language depends on the set of configured tools. Programs, which are used for creating websites, are divided into two categories: visual and non visual. Visual editors Visual editors are also called as WYSIWYG-editors ("What You See Is What You Get"). Fastest and easiest way to create the site is to use visual programs, which enable to operate with webpage in design window. User revises and formats the text, adds images and tables as in text editor (for example Word) and program puts together the HTML code itself. Web page is displayed in the window of the program that creates it exactly the same as if displayed by browser. Most common visual programs are DreamWeaver, MS FrontPage and Netscape. + advantages: 1. easy to use, 2. no need to know HTML. - shortcomings: 1 code is not optimized, which causes the increase in file capacity; 2 it is hard to revise the code of the page; 3 document mirroring in different browsers can be different. Non visual programs HTML was previously meant for encoding by hand and is obeys badly to automatizing. Therefore there are no visual editors, which could ensure the complete use of HTML and generate completely correct code. Therefore it is necessary to correct each page by hand. Non visual editors enable to create optimal code, where it is possible to avoid redundant constructions and which are easier to correct afterwards. There are the following functions in order to simplify the operation: fast tag insertion, marking of keywords with different colors and control of references. Non visual editors are usually called as HTML editors.
Editors of this type are for example: AceHTML, 1st Page, HotDog, Arachnophilia. + advantages: 1 optimal code; 2 all the possibilities to mark hypertext are in use; 3 use of syntax color, control of code correctness and references; 4 many editors are available - shortcomings: 1 you have to know the rules of HTML.
Web page editors Visual editors http://www.adobe.com/products/dreamweaver/ http://www.microsoft.com/rus/office/FrontPage/Default.mspx Non visual editors http://software.visicommedia.com/en/ http://www.evrsoft.com/ B.4.4.6 Describe the use and purpose of structure diagrams for web-site design Site chart If the structure schema of site is implemented, then it can be used as chart by adding references to single elements and by creating direct access to different partitions of the site. If the site structure is created, then you can add the storyboard to it, which shows the form and content as a schema. Storyboard is very important in case of sites, where many animations are used. It is necessary to cooperate tightly with the artist in order to prepare the serial of images, which illustrates the site while moving on it from the main page till all of the partitions. All sites do not include animations. Then it is necessary to work together with the designer or artist in order to make a drawing or draft of a site, which shows the idea and final result.
Useful to know http://sitemaker.ru/design/usability/easynavigation/ http://www.artlebedev.ru/kovodstvo/83/ http://www.artlebedev.ru/kovodstvo/43/ http://www.artlebedev.ru/kovodstvo/75/ B.4.4.7 Describe the major methods for navigation
Navigation system (sites’ menu) can be located on the left (most common), right or top edge of web page. If menu is located on the left or right and web page has a lot of information, then the references can be doubled on the bottom edge. Then the user would not have to roll up the page in case of changing the partition. If buttons are used as references, then it is recommended to double them with texts on the top or bottom of the edge, because user might have switched off graphical regime. Menu has to be located on the same place on all the pages and queue of references must also stay the same. Then it is easier for the user to navigate on the site. Clauses that are related with the concurrent page shall not be cut out of menu (at the same time it does not have to be a reference and it definitely has to differ from the other clauses in menu).
References in menu must be easy to understand. They must show, which partition they refer and which information is available in there.
B.4.4.8 Describe project approaches to web design and some common techniques (such as: story boards, rough drafts…)
As said before, it is important to consider the needs of potential visitors while designing the site and also see the problems, which might come up while using the site. In order to simplify the engineering and using of the site, it is necessary to compose a chart. Chart is used for creating clear logical structure and simple and easy navigation. It is the best practice to test the site before and then start using it.
4.5 Designing Web Pages
4.5.1 Distinguish between HTML, XML, scripting languages and other objects used in web pages
Hypertext markup language
HTML (HyperText Markup Language) is used for creating web pages. HTML is used for creating logical structure of the document and then the appearance of each element is defined (it is recommended to use CSS for formatting elements, not HTML).
HTML is not programming language!
Web page file includes ASCII text and owns name extension .htm or .html.
Marking the text in file is done with tags. Tags are placed in between triangular brackets.
Types of tags:
• single tags <tag />, for example
; • coupled tags <tag></tag>, for example text in between is semibold. Tag may have attributes. Attributes define the influence of tag.
Attribute is always placed to front-tag, because browser reads information from left to right and from up to down. Use of attributes is obligatory in case of some tags. For example, obligatory attribute of <img /> tag, which is used for adding images, is src. Value of this attribute is the name of the file together with its itinerary: <img src=“ file name of image and itinerary “ />. Tags can be written with capital letters <TAG> as well as with lowercase letters <tag>. There is no difference for the browser. Browser sees no difference also in changes of rows. In behalf of readability it is recommended to use either only capital letters or lowercase letters and start new element from new row and add comments. Spaces: • space is obligatory in between the tag name and attribute; • space shall not be in between the attribute name and value; • Multiple spaces in HTML-document are the same as one; special symbols needs to be used in order to place multiple sequential spaces. HTML-document structure Each web page is in between the following tags <html></html>. Document consists of two parts: • head • body or frameset Header Header is placed in between the following coupled tags: <head></head>. This is where the supportive information of the document is placed. This information is not displayed. Different tags can be used for defining page encoding (<meta name="Content-Type" content="text/html; charset=windows-1251">) or keywords, which are used by the search systems for indexing the page (<meta name=”keywords” content=”keywords”>). Here you can also place the descriptions of CSS styles (<style>descriptions of styles</style>) or scripts (<script>description of scripts </script>). Body Partition is placed between the following tags: <body></body>. All the displayed information (text, references, images, sheets, forms etc) are located in body.
<html><head> <title> Hallo </title> </head> <body>
<script> document.writeln("Hallo, everybody"); </script>
XML (Extensible Markup Language) , XHTML XML is the application of SGML and W3C is the recommended general-purpose markup language. Purpose of it is to divide structured information between different information systems, foremost in internet (intranet) and web-based applications. XML is the expandable language, which means that there is a possibility to define its elements as from creating the task.
XHTML (Extensible HyperText Markup Language) is the language used for creating web pages. XHTML is the application of XML. In other words, XHTML is the HTML language, which is realized in XML. Differently from HTML, it is possible to use XML tools in case of correctly formed XHTML document.
In some cases it is allowed to divide browser window into parts (frames), where each part includes separate document. In such cases there is no body in document, which divides the window into frames. Document creation begins with defining the structure and then continues with text formatting. 4.5.2 Use basic HTML commands and interpret layout commands (such as: hard format, soft format, special characters, dividers, alignment, headers, image-tags, backgrounds, colors, links, lists, tables, forms, frames…)
HeadlineDocument can include headlines of maximum six levels (tags
). Highest level headline is placed in between tags
and is displayed with the largest font. Lower level headline is placed in between the tags
and is displayed with the smallest font. Attribute align enables to align headlines to the left, right or center.
Paragraphtags are used for creating paragraphs. Each paragraph is separated from the last one by an empty row. Paragraph can be aligned to the left, right, center or parallel. Following should be remembered for formatting paragraphs:
• symbol used for changing the row (click on Enter key) has no importance in its code. If there is a need to change a row, then the following tag should be used:
; • all symbols can not be displayed correctly. This is related to different encoding systems (for example, a special symbol needs to be used for displaying ä); • displaying the text demands for considering about the empty space, where the text is placed (for example, browser will continue with text from the next row, if it does not fit to the browser window).
tag, if you want to create lines between the parts of the text. Different attribute may also be used for changing line thickness and width, color and alignment.
List There are multiple type of lists:• with asterisks (not ordered) – tags
You can start formatting text after you have created the structure of document. It is recommended to organize all of the text formatting with the help of styles (CSS). HTML enables also to design text, but there are fewer possibilities in HTML. HTML uses two types of formatting: physical (appearance of formatted text is precisely defined) and logical (text, which has to differentiate from the rest of the text, is defined by tags; displaying of text depends on browser options).
Tags of physical formatting:
(fixed width script)
Tags of logic formatting:
(usually displayed with italic script)
(usually displayed with semibold script)
(emphasizing citations, italic script)
(page refreshing results in displaying new text as underlined)
Special symbols and comments:
HTML code Symbol
stiff space, which is always displayed.
It is recommended to add comments in order to simplify readability and revising of code. Also, if you have done any changes, then it is recommended not to delete the old version right away. Leave this as comment, and then you can always come back to the old version. Image enclosing Web pages are ordinary text files, which can not be used for integrating other objects. In order to add an image, you have to show the file name and location in reference. Then browser displays the image inside the web page. Tag <img /> is used for referring to image. This tag is always used with attribute. Following attribute is used for file name and location src (<img src=”file.gif”>). Image can me aligned in two ways: similarly to the part of the text inside the paragraph by showing its vertical alignment towards the row, or as the separate row, showing horizontal alignment. Attribute align is used. Alignment inside the row is possible with the top margin (top), bottom margin (bottom) or middle margin (middle). If you align the image as separate paragraph, then the values of attribute are left (left margin) or right (right margin). Image can not be censored. Hyperlinks (references) „World Wide Web“ would be impossible without references. Hyperlinks are located on web pages and they connect different pages and sites in between. Whereas the sites can be located in servers, which are located hundreds of thousands of kilometers away from each other. Tag <a></a> is used for creating link. Obligatory attribute for the tag reference is the attribute, which shows the name and location of file (<a href=”location”>). Same attribute is obligatory in case of image tag. There are three types of references: • external – they refer to external resources, which do not belong to present site (<a href=”http://www.eucip.com”>); • internal – references within the site (<a href=”folder/file.html”>); • references within one page – enable to move from one part of the document to the other without leaving the page; reference is shown <a href=#punkt>, where punkt is the spot that is marked on web page, which is marked as follows:: <a name=punkt>. Both text and image can be used for displaying hypertext. Foe example reference <a href="pealeht.htm"><img src="logo.jpg" /></a> displays the image from file logo.jpg. Clicking on file takes you to file mainpage.htm. Formats Formats are used for creating interactive user interface. Processing of data that is inserted into formats is executed with the help of scripts or special applications, which are usually located in servers. Inserted data can be sent with e-mail, for example to the author. Format is created with the help of tags <form></form>. One page can include multiple formats. In order to be able to process data, you should show the attribute action with the value, which application should be started and attribute method with the value, which method should be used for processing data. Attribute method can have the value of GET or POST. Method POST is used for sending the data with e-mail. Spelling of the whole tag could be as follows for example: <form method=post action=”mailto:firstname.lastname@example.org”>. Following tags are used for creating the control elements: <input />, <textarea></textarea>, <select> </select>. Tag <input /> Tag <input /> is used for creating control elements for formats. Attribute type is used for defining their type. Values of attribute “type” Text fields • text – textbox; • hidden -hidden text; • password – field for password (inserted data is shown with “*”). Selections • checkbox – check box; • radio – radio button. Buttons • submit – insertion confirmation; • reset – quit and empty the fields; • file – display the window of file selection; • image – graphical button; • button – simple button. Tag <textarea></textarea> Tag enables you to create text area for inserting the text, consisting of multiple rows. If the whole text does not fit into the window, then the roll-bar is created. For example: <textarea name="textarea" cols="25" rows="4"></textarea> Tag <select></select> This tag is used for creating control element of menu type. Each menu element is created with tag <option></option>. Menu enables to choose one or may values. Type of menu is defined by attribute size. If its value is 1, then pop-up menu is displayed. If attribute value is greater than 1, but lesser than the amount of elements, then rollbar is created. For example: <select name="list" size=3> <option value="element 1" selected=selected> row 1</option> <option value=" element 2"> row 2</option> <option value=" element 3"> row 3</option> </select> Frames Browser window can be divided into multiple parts (frames), where you can download your HTML-document. Frames are mostly used for ensuring the visibility of navigation bar (one frame is used for menu; the other is used for content information). Frames also increase the speed of downloading, because you only download part of site and not the whole site. Frames have also some important shortcomings: it is harder to control framed structure, because framed sites disobey to indexing of searching engines worse and screen space is often used uneconomically.
Dividing window into frames is done with the help of control document, which creates the structure with frames and loads other documents to respective frames. Web page creation involves the same amount of documents that are planned to load to the frames and in addition to those one more control document, which is used for describing the whole structure. Following tags are used for creating the structure of frames: <frameset></frameset> and <frame></frame>. Tag <body></body> must not be in main document. Tag called <frameset></frameset> describes the complex of frames and the amount of its rows and columns (number of horizontal and vertical frames). Rows and columns are created with attributes rows and cols. Those attributes are used for defining the height or width of each frame, not the number.
For example tag <frameset cols=”25%,*,200”> divides window into three vertical frames, where the width of first frame is 25% of the whole width of window, width of third frame is 200 pixels and second frame gets the rest of space.
Tag <frame></frame> includes the address of the document, which is loaded into given frame. For example: <frameset cols=”25%,*,200”> >
<fram e src=”left.html”> <frame src=”middle.html”> <frame src=”right.html”>
4.5.3 Explain the concept of “style sheets” and their use in design If logical structure of the document is created with tags (paragraphs, headings, sheets, lists etc), then all the forming needs to be executed on style sheets (Cascading Style Sheets). Style sheets have much more options for designing the document comparing to HTML. Style sheets enable: • define the size of images and text; • define the font and color of references and text; • define the alignment of element on page; • create edgings and indentations; • define background colors and background images for different elements; • create lists with graphical markers; • frame different elements; • etc. Use of CSS tools makes forming of different elements more flexible. Styles can be used for parts of document as well as for the whole document and for the entire site. In addition to that, CSS enables to create pages, which have the same view no matter which browser is used for displaying it. Description of styles can be placed in document or separate files. There are three style describing methods, which define the area of using the style. 1. Description of style is inside the tag: <tag style="attribute:value;"> (style is used by element , which is defined by tag); 2. Description of styles is in the header of the document between the following tags: <style></style> (style is used in entire document); 3. Description of style is in separate file (style can be used by each document, which refers to the respective file). 5. Links to additional materials: books, journals, web, etc … 6. Different tests for self-assessment (multiple choice, etc ...)
Questions Question 1 Which font is better to use for displaying text on the screen of computer?
Question 2 Name the main categories of fonts and describe their differences.
Question 3 Which are the factors that influence text readability?
Question 4 What is the difference between the fonts with fixed size and proportional size?
Question 5 Which are the chromatic colors and which are not?
Question 6 Name the main attributes of colors.
Question 7 Human brain perceives colors as compositions of three main colors. Name those colors.
Question 8 RGB model is used for printing. a) Correct b) False
Question 9 RGB color model is called additive. a) Correct b) False
Question 10 Case study Describe the principles of RGB model.
Question 11 Case study Describe main shortcomings of RGB model.
Question 12 Define the value of gray color using hexadecimal format.
What is the depth of color?
Question 14 How many colors with depth of 8 bits are in image?
Question 15 Which units are used for measuring resolution?
Question 16 Which should be the resolution used for placing image on the web page, 96 or 300 dpi?
Question 17 Name the main shortcoming of bitmap.
Question 18 Name the elementary unit of vector graphics.
Question 19 Name the main advantages of vector graphics.
Question 20 Name the differences of visual and non visual editors.
Question 21 Which is the format that has to be used for saving a photo?
Question 22 Which is the format that reduces the quality of image while saving it?
Question 23 Which are the formats that support transparency?
Question 24 When is communication successful?
Question 25 What is a message?
Question 26 What is the cause of noise (entropy)?
Question 27 What is the important content of Osgood-Schramm model?
Question 28 Which are the factors that influence data transmittal between sender and receiver?
Question 29 What is the reason for composing the site diagram (chart) before creating the site?
Question 30 Name all the navigation methods that you know.
Question 31 Name the shortcomings of graphical references.
Question 32 In order to keep visitor on site it is important to place a lot of graphics on the site. a) Yes b) No
Question 33 Site can consist of arbitrary number of pages. a) Yes b) No
Question 34 Name the differences between intranet and extranet.
Question 35 Which are the file types that can be referred to by hypertext (hypermedia) reference?
Question 36 Which are the partitions that might be included in HTML-document? a) Head b) Table c) Sheet
Question 37 How is it possible to show page encoding? a) meta name=”keywords” content=”Russian” b) meta http-equiv content=”Russian” c) meta http-equiv content=”text/html; charset=1251”
Question 38 Tags must always be written with block letters. a) Correct b) False
Question 39 All the displayed information must be in partition <body>. a) Correct b) False
is for creating horizontal lines, tag
Answer 41 a) false b) correct c) false
Answer 42 a) false b) false c) correct d) false
Answer 43 a) false b) false c) correct d) false
Answer 44 a) false, tag <img> does not own its own attribute, which could be used for centering the text on the page b) correct
Answer 45 a) false b) false c) correct d) false
Answer 46 a) correct b) false