3 Client-side Computing Lecture 3
This document was uploaded by user and they confirmed that they have the permission to share it. If you are author or own the copyright of this book, please report to us by using this DMCA report form. Report DMCA
Overview
Download & View 3 Client-side Computing Lecture 3 as PDF for free.
More details
- Words: 1,184
- Pages: 3
University of Guyana • Faculty of Natural Sciences • Department of Computer Science
CSI225 Internet Computing (lecture 3) Introduction to Client-Side Computing Overview Having learnt of the Internet and the way the Web works with regards to servers and clients, this lecture and those that follow will establish the computing model of the web with an emphasis on the client. Web Computing Computing resources (with regards to the Web) can be thought of as files (such as documents), software or even languages that, in some way, facilitate the functions and interactive nature of the Web. In the current model of the Web, computing resources can be classified as either server-side related or client-side related. While server-side computing is beyond the scope of this course, it may be briefly described as using computing resources or web technologies to facilitate the management and serving of dynamic content to clients. Such web technologies can be thought of as web servers, distributed databases, server-side scripting languages and related engines. Some examples of these technologies at work lie in the servicing of web browser requests, the processing of web forms, the persistence of all remote documents or files such as emails or even the simple search engine that takes in your keyword(s) and dynamically responds with results.
Page 1
E Marks 2/11/2007
University of Guyana • Faculty of Natural Sciences • Department of Computer Science
Client-Side Computing Whereas server-side computing is in operation “behind the scenes”, so to speak, client-side computing takes care of all things that the typical end-user can see, and usually interacts with. Therefore, similarly, client-side computing can be described as using computing resources or web technologies to facilitate the presentation and interactivity of web interfaces (which are delivered to web browsers by the server-side component of the web). Satisfying the description of a client-side web technology, we can think of a few common examples such as: 1. HTML – Hypertext Markup Language. Provides a means to describe the structure of information within a web document. 2. CSS – Cascading StyleSheet. A stylesheet language that is used to describe the presentation of a document written in a markup language. 3. JavaScript – Formerly ECMAScript and distantly related to Java (despite the name). A scripting language commonly used in web pages for dynamic clientside processing. 4. XHTML Extensible Hypertext Markup Language. A stricter version of HTML with logical processing capabilities. 5. The Web Browser
Page 2
E Marks 2/11/2007
University of Guyana • Faculty of Natural Sciences • Department of Computer Science
A few uncommon ones are: 1. Jscript – A Windows based scripting language that represents Microsoft’s Active Scripting implementation of ECMAScript. 2. VBScript – Visual Basic Scripting Edition. Another Microsoft Active Scripting language. 3. Java Applets Client-side, Java driven applications that run in the web browser. 4. Ajax (Asynchronous JavaScript and XML) A Hybrid of two technlologies, JavaScript and XML. Allows web interfaces to function more like application interfaces by allowing portions of content to be asynchronously requested from the web and displayed. Further categorizing the listed client-side web technologies, we find that a technology can either be related to a user-agent, such as the web browser, or a client-side web language that defines structure and/or logic for the user-agent to process and display. Within the scope of this course, we will take an in-depth look at HTML, CSS, JavaScript and XHTML in sequence. These technologies are used in designing and developing dynamic and highly interactive web interfaces. Additionally, while learning these languages to build web interfaces, you will also be enlightened about usability heuristics in web interface design (Jakob Nielson) to produce practical and usable web interfaces.
Page 3
E Marks 2/11/2007
University of Guyana • Faculty of Natural Sciences • Department of Computer Science
However, we first look at the language that is at the heart of hypertext web interfaces/documents – HTML. HTML – An Introduction The Hypertext Markup Language is the major markup language that is used in the development of web pages. HTML basically defines the structure of the content on a given web page by indicating how the various constituents of the content must be processed and presented. The language is written in the form of labels/entities denoted by the enclosing “<” and “>” symbols.Title of page This is my first homepage. This text is bold
HTML can also include embedded scripting language code which adds logical processing capability to the ordinary web page. Since the HTML language must be appropriately interpreted by all web browsers and all websites must use HTML to structure their text-based information, the HTML language is an established standard of the web. Particularly, the W3C (WorldWideWeb Consortium) published the HTML 4.01 recommendation in 1999 with amendments in 2001.
Page 4
E Marks 2/11/2007
University of Guyana • Faculty of Natural Sciences • Department of Computer Science
University of Guyana • Faculty of Natural Sciences • Department of Computer Science
HTML Markup •
Presentational markup describes the appearance of the text, regardless of its function. For example, boldface indicates that "boldface" should be rendered in bold text.
•
Hypertext markup links parts of the document to other documents. The anchor element hyperlink is used to create a hyperlink in the flow of text. However, usually a URL has to be supplied to the href attribute of the anchor element in order for it to function as intended, e.g. A Link will render “A Link” as a hyperlink.
A typical HTML document (in its source form) can be seen to have several types of entities that control the structure of the content. These entities are elements, attributes, data types and character references. Elements – Elements establish the basic structure for HTML markup. Elements have two basic properties: attributes and content. Each attribute and each element's content has certain restrictions that must be followed for an HTML document to be considered valid. An element usually has a start label (eg. ). The element's attributes are contained in the start label and content is located between the labels (eg. ). Some elements, such as
, will never have any content and do not need closing labels. Listed below are several types of markup elements used in HTML. •
Structural markup describes the purpose of text. For example,
Page 5
E Marks 2/11/2007
Attributes – Attributes are name-value pairs that describe some information about the element. They are defined within the start tag of an element as one or more whitespace-separated sequences of name=”value” pairs e.g <span id="anId" class="aClass" style="color:red;">HTML
Reference: "HTML." Wikipedia, The Free Encyclopedia. 9 Feb 2007, 15:30 UTC. Wikimedia Foundation, Inc. 12 Feb 2007.
Page 6
E Marks 2/11/2007
CSI225 Internet Computing (lecture 3) Introduction to Client-Side Computing Overview Having learnt of the Internet and the way the Web works with regards to servers and clients, this lecture and those that follow will establish the computing model of the web with an emphasis on the client. Web Computing Computing resources (with regards to the Web) can be thought of as files (such as documents), software or even languages that, in some way, facilitate the functions and interactive nature of the Web. In the current model of the Web, computing resources can be classified as either server-side related or client-side related. While server-side computing is beyond the scope of this course, it may be briefly described as using computing resources or web technologies to facilitate the management and serving of dynamic content to clients. Such web technologies can be thought of as web servers, distributed databases, server-side scripting languages and related engines. Some examples of these technologies at work lie in the servicing of web browser requests, the processing of web forms, the persistence of all remote documents or files such as emails or even the simple search engine that takes in your keyword(s) and dynamically responds with results.
Page 1
E Marks 2/11/2007
University of Guyana • Faculty of Natural Sciences • Department of Computer Science
Client-Side Computing Whereas server-side computing is in operation “behind the scenes”, so to speak, client-side computing takes care of all things that the typical end-user can see, and usually interacts with. Therefore, similarly, client-side computing can be described as using computing resources or web technologies to facilitate the presentation and interactivity of web interfaces (which are delivered to web browsers by the server-side component of the web). Satisfying the description of a client-side web technology, we can think of a few common examples such as: 1. HTML – Hypertext Markup Language. Provides a means to describe the structure of information within a web document. 2. CSS – Cascading StyleSheet. A stylesheet language that is used to describe the presentation of a document written in a markup language. 3. JavaScript – Formerly ECMAScript and distantly related to Java (despite the name). A scripting language commonly used in web pages for dynamic clientside processing. 4. XHTML Extensible Hypertext Markup Language. A stricter version of HTML with logical processing capabilities. 5. The Web Browser
Page 2
E Marks 2/11/2007
University of Guyana • Faculty of Natural Sciences • Department of Computer Science
A few uncommon ones are: 1. Jscript – A Windows based scripting language that represents Microsoft’s Active Scripting implementation of ECMAScript. 2. VBScript – Visual Basic Scripting Edition. Another Microsoft Active Scripting language. 3. Java Applets Client-side, Java driven applications that run in the web browser. 4. Ajax (Asynchronous JavaScript and XML) A Hybrid of two technlologies, JavaScript and XML. Allows web interfaces to function more like application interfaces by allowing portions of content to be asynchronously requested from the web and displayed. Further categorizing the listed client-side web technologies, we find that a technology can either be related to a user-agent, such as the web browser, or a client-side web language that defines structure and/or logic for the user-agent to process and display. Within the scope of this course, we will take an in-depth look at HTML, CSS, JavaScript and XHTML in sequence. These technologies are used in designing and developing dynamic and highly interactive web interfaces. Additionally, while learning these languages to build web interfaces, you will also be enlightened about usability heuristics in web interface design (Jakob Nielson) to produce practical and usable web interfaces.
Page 3
E Marks 2/11/2007
University of Guyana • Faculty of Natural Sciences • Department of Computer Science
However, we first look at the language that is at the heart of hypertext web interfaces/documents – HTML. HTML – An Introduction The Hypertext Markup Language is the major markup language that is used in the development of web pages. HTML basically defines the structure of the content on a given web page by indicating how the various constituents of the content must be processed and presented. The language is written in the form of labels/entities denoted by the enclosing “<” and “>” symbols.
HTML can also include embedded scripting language code which adds logical processing capability to the ordinary web page. Since the HTML language must be appropriately interpreted by all web browsers and all websites must use HTML to structure their text-based information, the HTML language is an established standard of the web. Particularly, the W3C (WorldWideWeb Consortium) published the HTML 4.01 recommendation in 1999 with amendments in 2001.
Page 4
E Marks 2/11/2007
University of Guyana • Faculty of Natural Sciences • Department of Computer Science
University of Guyana • Faculty of Natural Sciences • Department of Computer Science
HTML Markup •
Presentational markup describes the appearance of the text, regardless of its function. For example, boldface indicates that "boldface" should be rendered in bold text.
•
Hypertext markup links parts of the document to other documents. The anchor element hyperlink is used to create a hyperlink in the flow of text. However, usually a URL has to be supplied to the href attribute of the anchor element in order for it to function as intended, e.g. A Link will render “A Link” as a hyperlink.
A typical HTML document (in its source form) can be seen to have several types of entities that control the structure of the content. These entities are elements, attributes, data types and character references. Elements – Elements establish the basic structure for HTML markup. Elements have two basic properties: attributes and content. Each attribute and each element's content has certain restrictions that must be followed for an HTML document to be considered valid. An element usually has a start label (eg. ). The element's attributes are contained in the start label and content is located between the labels (eg. ). Some elements, such as
, will never have any content and do not need closing labels. Listed below are several types of markup elements used in HTML. •
Structural markup describes the purpose of text. For example,
Golf
establishes "Golf" as a second-level heading, which would be rendered in a browser in a manner similar to the "CSI225 Internet Computing" title at the start of this lecture. Structural markup does not denote any specific rendering, but most web browsers have standardized methods on how elements should be formatted. Further styling, however, is typically done with Cascading Style Sheets (CSS).Page 5
E Marks 2/11/2007
Attributes – Attributes are name-value pairs that describe some information about the element. They are defined within the start tag of an element as one or more whitespace-separated sequences of name=”value” pairs e.g <span id="anId" class="aClass" style="color:red;">HTML
Reference: "HTML." Wikipedia, The Free Encyclopedia. 9 Feb 2007, 15:30 UTC. Wikimedia Foundation, Inc. 12 Feb 2007
Page 6
E Marks 2/11/2007
