Yandex.Widgets Quick start
|
|
- Meredith Natalie Tucker
- 5 years ago
- Views:
Transcription
1
2 .. Version 2 Document build date: This volume is a part of Yandex technical documentation. Yandex helpdesk site: Yandex LLC. All rights reserved. Copyright Disclaimer Yandex (and its applicable licensor) has exclusive rights for all results of intellectual activity and equated to them means of individualization, used for development, support, and usage of the service. It may include, but not limited to, computer programs (software), databases, images, texts, other works and inventions, utility models, trademarks, service marks, and commercial denominations. The copyright is protected under provision of Part 4 of the Russian Civil Code and international laws. You may use or its components only within credentials granted by the Terms of Use of or within an appropriate Agreement. Any infringements of exclusive rights of the copyright owner are punishable under civil, administrative or criminal Russian laws. Contact information Yandex LLC Phone: pr@yandex-team.ru Headquarters: 16 L'va Tolstogo St., Moscow, Russia
3 Contents About the Quick Start Guide... 4 Hello, world!... 4 Distance Units Converter... 7 Index... 17
4 4 About the Quick Start Guide The Quick Start guide includes several examples that can help you get started working with widgets. Document structure This document consists of the following sections: 1. "Hello, world!" widget: an example that guides you through widget basics, from creating a widget to adding it to the widget catalog. You will need to have some basic HTML knowledge to work with the example. Knowing CSS is a plus. 2. Distance Units Converter widget: an example that demonstrates how to create widgets that dynamically process information. This widget will convert distance or length between various units of measurement (millimeters, centimeters, meters, inches and feet). The example also describes how to store the widget body on a designated server. You will need to have some basic HTML, JavaScript and CSS knowledge to work with the example. How to create a widget using a constructor Hello, world! This example demonstrates how to create a widget that prints the "Hello, world!" string on the screen. It describes how to upload the widget and how to add it to the catalog. What is inside a widget? Let's consider the following code: <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns=" xmlns:widget=" ns/" > <head> <!-- Widget properties --> <meta name="title" content="hello, World!" /> <meta name="description" content="displays Hello, world!"/> </head> <body style="margin:0"> <!-- The widget body --> <p>hello, world!</p> </body> </html> This is a ready-made widget. The XHTML file contains: Widget description The description contains widget properties including the name, a short description of the functionality, etc. A widget should contain at least the title property (its name) which is required to upload the widget to Yandex: <meta name="title" content="hello, World!" />
5 5 Note: Additionally, the description can contain settings, which are described in the Distance Units Converter example. Widget body The widget body consists of HTML code, scripts and the table of styles, which implement the widget functions. In our example, the body consists of a single line: <p>hello, world!</p> The lines at the top of the file contain metadata: <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns=" xmlns:widget=" ns/" >... </html> Attention! You should specify UTF-8 encoding. Please do not change these lines unless you clearly understand what you are doing. Inside a widget Widget properties Widget preferences How to create your own "Hello, world!" widget Create an empty file with the *.html extension and copy the widget code provided above to this file. Save the file. Now you can display the file in your browser. Note: Your browser opens files with the *.html extension by default. To allow editing of the file content, right-click the file and choose the context menu option Open with -> Select program... Select your text editor from the list of available programs. Right now our widget looks pretty dull. Add the following attribute to the tag <body>: <body style="background-color:#ffcc00; color:blue; margin:0;"> Now the text "Hello, world!" is displayed in blue letters on a bright yellow background. Now let's play with the widget properties. For example, the default widget height is 300 pixels. This is obviously too much for displaying a single text line. To solve this problem you can use the widget property height. Add the following line to the widget properties: <meta name="height" content="60" /> After the widget is uploaded to Yandex it will be displayed with a height of 60 pixels. The file contents should look like this:
6 6 <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns=" xmlns:widget=" ns/" > <head> <meta name="title" content="hello, World!" /> <meta name="description" content="displays the string Hello, world!"/> <meta name="height" content="60" /> </head> <body style="background-color:#ffcc00; color:blue; margin:0;"> <p>hello, world!</p> </body> </html> At this point, your browser should be displaying a yellow page with the text in the upper left corner. Now the widget is ready; you just need to upload it to the Yandex server in order to display the page you have created in a special designated frame (<iframe>). Creating a widget from scratch Widget template How do I upload a widget to Yandex? 1. Log in to the Developer Dashboard located at You should provide your Yandex login and password in order to access the dashboard. 2. Click the Create widget link. 3. Accept the user agreement. 4. Upload the widget data: The XHTML file for the widget. An icon for the catalog. If the upload is successful, you will be redirected to the widget editing page, where you can: Get a direct link for adding the widget. Send a request to add the widget to the shared catalog. Get code to insert into your blog. How to create a widget using a constructor How to add your widget to the widget catalog How can users install my widget? If you already know who your users are, you can just share the link to your widget with them. Users can add your widget on their pages by clicking this link. If the widget has already been added to the widget catalog, any user can find it and install it on their page. Information about the widget catalog How to add your widget to the widget catalog How does it work? When a user installs a widget, the <iframe> element is added to the page and the widget body is loaded into the element. The widget created in this example will look like this:
7 7 Distance Units Converter Developer's guide Distance Units Converter This example demonstrates how to create a widget which dynamically processes information using JavaScript. We will consider two different approaches to storing the widget body. Preparing the widget body The Distance Units Converter should convert between the following units: millimeters centimeters meters inches feet Create an HTML file implementing the widget interface: <html> <head> <style type="text/css"> body { background-color:#ffcc00; text-align:center; #toval{ color:blue; </style> </head> <body style="margin:0"> <table> <input type="text" id="fromval" style="width:80px"/> <select id="fromsystem"> <option value="mm">millimeters</option> <option selected="selected" value="cm">centimeters</option> <option value="m">meters</option> <option value="foot">feet</option> <option value="inch">inches</option> </select> <td colspan="2" align="center">= <input type="text" disabled="true" id="toval" style="width:80px"/></
8 8 td> <select id ="tosystem"> <option value="mm">millimeters</option> <option value="cm">centimeters</option> <option value="m">meters</option> <option selected="selected" value="foot">feet</option> <option value="inch">inches</option> </select> </table> </body> </html> This code creates two drop-down lists containing distance units of measurement, a field for entering the value to be converted, and an area for displaying the result. Simple style sheets are also provided. To convert data from one measurement system to another, let's use the millimeter as a base unit for distance and express all other units in terms of millimeters. We get the following ratio: Unit of measurement millimeter 1 centimeter 10 meter 1000 inch 25,4 foot 304,8 Let's express these relationships using a JavaScript object: var metrics = { "mm" : 1, "cm" : 10, "m" : 1000, "inch" : 25.4, "foot" : ; Then we can add the following conversion function: function convert(){ var val = document.getelementbyid("fromval").value; <!-- check if the entered value is correct --> if(isnan(val)){ return; <!-- if the value is correct let's convert it --> document.getelementbyid("toval").value = val * metrics[document.getelementbyid("fromsystem").value] / metrics[document.getelementbyid("tosystem").value]; The corresponding value in millimeters Now we need to make the function run each time the user changes the input value or chooses a new measurement unit. To do this we need to add the following event handlers: <input type="text" id="fromval" onfocus="watchchanges()" onblur="watchchanges()" />... <select id="fromsystem" onchange="convert()" />... <select id="tosystem" onchange="convert()" /> The fromval input field now has the events onfocus and onblur which call the function watchchanges. This function starts a timer, which monitors changes to the input field. Thus we can handle any changes, including pasting a value from the context menu. Here is the function code:
9 9 var interval = null; function watchchanges(){ interval == null? setinterval("convert()", 500) : clearinterval(interval); Now the page capable of handling the required conversions is ready. Here is the complete code: <html> <head> <style type="text/css"> body { background-color:#ffcc00; text-align:center; #toval{ color:blue; </style> <script type="text/javascript"> <!-- var metrics = { "mm" : 1, "cm" : 10, "m" : 1000, "inch" : 25.4, "foot" : ; function convert(){ var val = document.getelementbyid("fromval").value; if(isnan(val)){ return; document.getelementbyid("toval").value = val * metrics[document.getelementbyid("fromsystem").value] / metrics[document.getelementbyid("tosystem").value]; var interval = null; function watchchanges(){ interval == null? setinterval("convert()", 500) : clearinterval(interval); //--> </script> </head> <body style="margin:0"> <table> <input type="text" id="fromval" style="width:80px" onfocus="watchchanges()" onblur="watchchanges()"/> <select id="fromsystem" onchange="convert()"> <option value="mm">millimeters</option> <option selected="selected" value="cm">centimeters</option> <option value="m">meters</option> <option value="foot">feet</option> <option value="inch">inches</option> </select> <td colspan="2" align="center">= <input type="text" disabled="true" style="width:80px" id="toval"/></ td> <select id ="tosystem" onchange="convert()">
10 10 <option value="mm">millimeters</option> <option value="cm">centimeters</option> <option value="m">meters</option> <option selected="selected" value="foot">feet</option> <option value="inch">inches</option> </select> </table> </body> </html> Inside a widget Preparing the widget description The file containing the widget description must contain valid XHTML. For this reason, you should use the following format for the file where you create the widget description: <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" xmlns:widget=" ns/">... </html> Attention! You should specify UTF-8 encoding. The more detailed the properties section is, the easier it will be to find the widget in the shared catalog. Add the following fragment to the <head> block of the document: <meta name="title" content="distance Units Converter" /> <meta name="description" content="the Distance Units Converter can convert between various units used for measuring distance."/> This is where you provide information about the name of the widget and a description of its functionality. Custom settings (called preferences) are like variables where you can store information and use it, for example, to customize the widget's appearance. For example, you can add a preference that restricts operations to only work with certain measurement units. Add the following fragment to the <head> block: <widget:preferences> <preference name="mm" type="boolean" defaultvalue="true" label="millimeters" / > <preference name="cm" type="boolean" defaultvalue="true" label="centimeters" / > <preference name="m" type="boolean" defaultvalue="true" label="meters" /> <preference name="foot" type="boolean" defaultvalue="true" label="feet" /> <preference name="inch" type="boolean" defaultvalue="true" label="inches" /> </widget:preferences>
11 11 Note: To use the preferences, you should declare the namespace xmlns:widget=" wdgt.yandex.ru/ns/". Each preference is defined in a separate <preference> tag; all preferences are wrapped into the <widget:preferences> container tag. Note: The total size of the preferences should not exceed 1 kb. This is because the preferences are sent via the browser's address line (using an HTTP GET request). The following preferences form can be generated based on the code provided above: To display this form, users can click on the gear icon in the upper right corner of the widget when viewing the Yandex home page in Settings mode. Add the logic for handling preferences to the widget body: <script type="text/javascript" src=" widget.onload = function(){ widget.adjustiframeheight(); var metricnames = ["m", "cm", "mm", "foot", "inch"]; var metrics = ""; for(var i = 0; i < metricnames.length; ++i){ if(widget.getvalue(metricnames[i]) == "true"){ metrics += ("," + metricnames[i] + ","); function delothervaluesfromlist(list, values){ for(var i = 0; i < list.options.length;){ values.indexof("," + list.options[i].value + ",") == -1? list.remove(i) : + +i;
12 12 Note: This example uses the widget JavaScript API. To use this example you will need to include the file WidgetApi.js. For more information on the API, see the JS API reference. The widget event onload, which fires when the widget loads, uses the JS API method getvalue to receive the preferences that were added to the <widget:preferences> tag earlier. Note: For more information, see the section User preferences in the Developer's Guide. Then we call the delothervaluesfromlist function for both drop-down lists to remove any values that the user has not selected in the preferences form. Adding commas before and after values assures that they will be unique when you call the indexof function (otherwise, the index for meters "m" in the preferences string containing millimeters "mm" would be positive). For onload we also call the JS API method adjustiframeheight which adjusts the height of the <iframe> element so that the whole widget content is displayed without a vertical scroll bar. Widget properties Widget preferences Where to store widgets Widgets can be autonomous or server-side. The body of an autonomous widget is stored in the same file as its description. The body of server-side widgets is stored on a separate server (defined by the widget author) and the description file contains an additional src property which specifies the location of the body. Distance Units Converter as an autonomous widget To create an autonomous Distance Units Converter widget, put the widget body into the description file: <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" xmlns:widget=" ns/" > <head> <meta name="title" content="distance Units Converter" /> <meta name="description" content="the Distance Units Converter can convert between various units used for measuring distance."/> <widget:preferences> <preference name="mm" type="boolean" defaultvalue="true" label="millimeters" /> <preference name="cm" type="boolean" defaultvalue="true" label="centimeters," /> <preference name="m" type="boolean" defaultvalue="true" label="meters" /> <preference name="foot" type="boolean" defaultvalue="true" label="feet" /> <preference name="inch" type="boolean" defaultvalue="true" label="inches" / > </widget:preferences> <style type="text/css"> body { background-color:#ffcc00; text-align:center; #toval{
13 13 color:blue; </style> <script type="text/javascript" src=" WidgetApi.js"> </script> <script type="text/javascript"> <!-- var metrics = { "mm" : 1, "cm" : 10, "m" : 1000, "inch" : 25.4, "foot" : ; function convert(){ var val = document.getelementbyid("fromval").value; if(isnan(val)){ return; document.getelementbyid("toval").value = document.getelementbyid("fromval").value * metrics[document.getelementbyid("fromsystem").value] / metrics[document.getelementbyid("tosystem").value]; widget.onload = function(){ widget.adjustiframeheight(); var metricnames = ["m", "cm", "mm", "foot", "inch"]; var metrics = ""; for(var i = 0; i < metricnames.length; ++i){ if(widget.getvalue(metricnames[i]) == "true"){ metrics += ("," + metricnames[i] + ","); delothervaluesfromlist(document.getelementbyid("fromsystem"), metrics); delothervaluesfromlist(document.getelementbyid("tosystem"), metrics); function delothervaluesfromlist(list, values){ for(var i = 0; i < list.options.length;){ values.indexof("," + list.options[i].value + ",") == -1? list.remove(i) : ++i; var interval = null; function watchchanges(){ interval == null? setinterval("convert()", 500) : clearinterval(interval); //--> </script> </head> <body style="margin:0"> <table> <input type="text" id="fromval" style="width:80px" onfocus="watchchanges()" onblur="watchchanges()"/> <select id="fromsystem" onchange="convert()"> <option value="mm">millimeters</option> <option selected="selected" value="cm">centimeters</option> <option value="m">meters</option> <option value="foot">feet</option> <option value="inch">inches</option> </select>
14 14 <td colspan="2" align="center">= <input type="text" style="width:80px" disabled="true" id="toval"/></ td> <select id ="tosystem" onchange="convert()"> <option value="mm">millimeters</option> <option value="cm">centimeters</option> <option value="m">meters</option> <option selected="selected" value="foot">feet</option> <option value="inch">inches</option> </select> </table> </body> </html> Distance Units Converter as a server-side widget The body of a server-side widget should be hosted somewhere as a normal Internet page (in this example, the widget body is stored at Add the src property to the widget description: <meta name="src" content=" /> So the widget file will look like this: <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns=" xmlns:widget=" ns/" > <head> <!-- Widget properties --> <meta name="title" content="distance Units Converter" /> <meta name="description" content="the Distance Units Converter can convert between various units used for measuring distance."/> <meta name="src" content=" /> <!-- Widget preferences --> <widget:preferences> <preference name="mm" type="boolean" defaultvalue="true" label="millimeters" /> <preference name="cm" type="boolean" defaultvalue="true" label="centimeters" /> <preference name="m" type="boolean" defaultvalue="true" label="meters" /> <preference name="foot" type="boolean" defaultvalue="true" label="feet" /> <preference name="inch" type="boolean" defaultvalue="true" label="inches" / > </widget:preferences> </head> <body style="margin:0"> </body> </html> The file will look like this:
15 15 <html> <head> <!-- Cascading style sheets --> <style type="text/css"> body { background-color:#ffcc00; text-align:center; #toval{ color:blue; </style> <script type="text/javascript" src=" WidgetApi.js"> </script> <script type="text/javascript"> <!-- var metrics = { "mm" : 1, "cm" : 10, "m" : 1000, "inch" : 25.4, "foot" : ; function convert(){ var val = document.getelementbyid("fromval").value; if(isnan(val)){ return; document.getelementbyid("toval").value = document.getelementbyid("fromval").value * metrics[document.getelementbyid("fromsystem").value] / metrics[document.getelementbyid("tosystem").value]; widget.onload = function(){ widget.adjustiframeheight(); var metricnames = ["m", "cm", "mm", "foot", "inch"]; var metrics = ""; for(var i = 0; i < metricnames.length; ++i){ if(widget.getvalue(metricnames[i]) == "true"){ metrics += ("," + metricnames[i] + ","); delothervaluesfromlist(document.getelementbyid("fromsystem"), metrics); delothervaluesfromlist(document.getelementbyid("tosystem"), metrics); function delothervaluesfromlist(list, values){ for(var i = 0; i < list.options.length;){ values.indexof("," + list.options[i].value + ",") == -1? list.remove(i) : ++i; var interval = null; function watchchanges(){ interval == null? setinterval("convert()", 500) : clearinterval(interval); //--> </script> </head> <body style="margin:0"> <table> <input type="text" id="fromval" style="width:80px" onfocus="watchchanges()" onblur="watchchanges()"/> <select id="fromsystem" onchange="convert()">
16 16 <option value="mm">millimeters</option> <option selected="selected" value="cm">centimeters</option> <option value="m">meters</option> <option value="foot">feet</option> <option value="inch">inches</option> </select> <td colspan="2" align="center">= <input type="text" style="width:80px" disabled="true" id="toval"/></ td> <select id ="tosystem" onchange="convert()"> <option value="mm">millimeters</option> <option value="cm">centimeters</option> <option value="m">meters</option> <option selected="selected" value="foot">feet</option> <option value="inch">inches</option> </select> </table> </body> </html> Autonomous and server-side widgets What is the result? The widget we have created looks like this: How to create a widget using a constructor How to add your widget to the widget catalog Developer's guide
17 Index example 7 Hello, World! 4 widget 4 example 4
18
Yandex Maps API YMapsML Language Reference
19.12.2017 .. Version 2.0 Document build date: 19.12.2017. This volume is a part of Yandex technical documentation. Yandex helpdesk site: http://help.yandex.ru 2008 2017 Yandex LLC. All rights reserved.
More informationYandex.Maps API Background theory
8.02.2018 .. Version 1.0 Document build date: 8.02.2018. This volume is a part of Yandex technical documentation. Yandex helpdesk site: http://help.yandex.ru 2008 2018 Yandex LLC. All rights reserved.
More informationScripting for Multimedia LECTURE 5: INTRODUCING CSS3
Scripting for Multimedia LECTURE 5: INTRODUCING CSS3 CSS introduction CSS Level 1 --> CSS Level 2 --> CSS Level 3 (in modules) More than 50 modules are published Cascading style sheets (CSS) defines how
More informationBrief Introduction to ITU-T H.762 (LIME)
Brief Introduction to ITU-T H.762 (LIME) ITU-T LIME =Lightweight Interactive Multimedia Environment Not a new language but a simple profile of HTML and Javascript for creating interactive content with
More informationImplementing a chat button on TECHNICAL PAPER
Implementing a chat button on TECHNICAL PAPER Contents 1 Adding a Live Guide chat button to your Facebook page... 3 1.1 Make the chat button code accessible from your web server... 3 1.2 Create a Facebook
More informationWhat is XHTML? XHTML is the language used to create and organize a web page:
XHTML Basics What is XHTML? XHTML is the language used to create and organize a web page: XHTML is newer than, but built upon, the original HTML (HyperText Markup Language) platform. XHTML has stricter
More informationHTML Summary. All of the following are containers. Structure. Italics Bold. Line Break. Horizontal Rule. Non-break (hard) space.
HTML Summary Structure All of the following are containers. Structure Contains the entire web page. Contains information
More informationDesign Project. i385f Special Topics in Information Architecture Instructor: Don Turnbull. Elias Tzoc
Design Project Site: News from Latin America Design Project i385f Special Topics in Information Architecture Instructor: Don Turnbull Elias Tzoc April 3, 2007 Design Project - 1 I. Planning [ Upper case:
More informationYandex.Webmaster API Developer's guide
25.04.2013 .. Version 1.0 Document build date: 25.04.2013. This volume is a part of Yandex technical documentation. Yandex helpdesk site: http://help.yandex.ru 2008 2013 Yandex LLC. All rights reserved.
More informationYandex.Dictionary API Developer's guide
4.12.2017 .. Version 1.0 Document build date: 4.12.2017. This volume is a part of Yandex technical documentation. Yandex helpdesk site: http://help.yandex.ru 2008 2017 Yandex LLC. All rights reserved.
More informationHow browsers talk to servers. What does this do?
HTTP HEADERS How browsers talk to servers This is more of an outline than a tutorial. I wanted to give our web team a quick overview of what headers are and what they mean for client-server communication.
More informationHyperText Markup Language (HTML)
HyperText Markup Language (HTML) Mendel Rosenblum 1 Web Application Architecture Web Browser Web Server / Application server Storage System HTTP Internet LAN 2 Browser environment is different Traditional
More informationA designers guide to creating & editing templates in EzPz
A designers guide to creating & editing templates in EzPz Introduction...2 Getting started...2 Actions...2 File Upload...3 Tokens...3 Menu...3 Head Tokens...4 CSS and JavaScript included files...4 Page
More informationBookmarks to the headings on this page:
Squiz Matrix User Manual Library The Squiz Matrix User Manual Library is a prime resource for all up-to-date manuals about Squiz's flagship CMS Easy Edit Suite Current for Version 4.8.1 Installation Guide
More informationPart A Short Answer (50 marks)
Part A Short Answer (50 marks) NOTE: Answers for Part A should be no more than 3-4 sentences long. 1. (5 marks) What is the purpose of HTML? What is the purpose of a DTD? How do HTML and DTDs relate to
More informationShane Gellerman 10/17/11 LIS488 Assignment 3
Shane Gellerman 10/17/11 LIS488 Assignment 3 Background to Understanding CSS CSS really stands for Cascading Style Sheets. It functions within an HTML document, so it is necessary to understand the basics
More informationHTML Hyperlinks (Links)
WEB DESIGN HTML Hyperlinks (Links) The HTML tag defines a hyperlink. A hyperlink (or link) is a word, group of words, or image that you can click on to jump to another document. When you move the
More informationProject 3 CIS 408 Internet Computing
Problem 1: Project 3 CIS 408 Internet Computing Simple Table Template Processing with Java Script and DOM This project has you run code in your browser. Create a file TableTemplate.js that implements a
More informationTitle: Dec 11 3:40 PM (1 of 11)
... basic iframe body {color: brown; font family: "Times New Roman"} this is a test of using iframe Here I have set up two iframes next to each
More informationGIMP WEB 2.0 MENUS. Before we begin this tutorial let s visually compare a standard navigation bar and a web 2.0 navigation bar.
GIMP WEB 2.0 MENUS Before we begin this tutorial let s visually compare a standard navigation bar and a web 2.0 navigation bar. Standard Navigation Bar Web 2.0 Navigation Bar Now the all-important question
More informationHTML HTML. Chris Seddon CRS Enterprises Ltd 1
Chris Seddon seddon-software@keme.co.uk 2000-12 CRS Enterprises Ltd 1 2000-12 CRS Enterprises Ltd 2 Reference Sites W3C W3C w3schools DevGuru Aptana GotAPI Dog http://www.w3.org/ http://www.w3schools.com
More informationCascading style sheets, HTML, DOM and Javascript
CSS Dynamic HTML Cascading style sheets, HTML, DOM and Javascript DHTML Collection of technologies forming dynamic clients HTML (content content) DOM (data structure) JavaScript (behaviour) Cascading Style
More informationExam Format: Multiple Choice, True/False, Short Answer (3 points each 75 points total) Write-the-page (25 points)
CS-101 Fall 2008 Section 4 Practice Final v1.0m Name: Exam Format: Multiple Choice, True/False, Short Answer (3 points each 75 points total) Write-the-page (25 points) XHTML/CSS Reference: Entities: Copyright
More informationModule 2 (III): XHTML
INTERNET & WEB APPLICATION DEVELOPMENT SWE 444 Fall Semester 2008-2009 (081) Module 2 (III): XHTML Dr. El-Sayed El-Alfy Computer Science Department King Fahd University of Petroleum and Minerals alfy@kfupm.edu.sa
More informationVebra Search Integration Guide
Guide Introduction... 2 Requirements... 2 How a Vebra search is added to your site... 2 Integration Guide... 3 HTML Wrappers... 4 Page HEAD Content... 4 CSS Styling... 4 BODY tag CSS... 5 DIV#s-container
More informationmap1.html 1/1 lectures/8/src/
map1.html 1/1 3: map1.html 5: Demonstrates a "hello, world" of maps. 7: Computer Science E-75 8: David J. Malan 9: 10: --> 1 13:
More informationWeb Development IB PRECISION EXAMS
PRECISION EXAMS Web Development IB EXAM INFORMATION Items 53 Points 73 Prerequisites COMPUTER TECHNOLOGY Grade Level 10-12 Course Length ONE YEAR Career Cluster INFORMATION TECHNOLOGY Performance Standards
More informationDocument Object Model. Overview
Overview The (DOM) is a programming interface for HTML or XML documents. Models document as a tree of nodes. Nodes can contain text and other nodes. Nodes can have attributes which include style and behavior
More informationHere are a few easy steps to create a simple timeline. Open up your favorite text or HTML editor and start creating an HTML file.
1 of 6 02-Sep-2013 1:52 PM Getting Started with Timeline From SIMILE Widgets Contents 1 Getting Started 1.1 Note 1.2 Examples 1.3 Step 1. Link to the API 1.4 Step 2. Create a DIV Element 1.5 Step 3. Call
More informationLA TROBE UNIVERSITY SEMESTER ONE EXAMINATION PERIOD CAMPUS AW BE BU MI SH ALLOWABLE MATERIALS
LIBRARY USE LA TROBE UNIVERSITY SEMESTER ONE EXAMINATION PERIOD 2013 Student ID: Seat Number: Unit Code: CSE2WD Paper No: 1 Unit Name: Paper Name: Reading Time: Writing Time: Web Development Final 15 minutes
More informationLab 4 CSS CISC1600, Spring 2012
Lab 4 CSS CISC1600, Spring 2012 Part 1 Introduction 1.1 Cascading Style Sheets or CSS files provide a way to control the look and feel of your web page that is more convenient, more flexible and more comprehensive
More informationAdvanced HTML Scripting WebGUI Users Conference
Advanced HTML Scripting 2004 WebGUI Users Conference XHTML where did that x come from? XHTML =? Extensible Hypertext Markup Language Combination of HTML and XML More strict than HTML Things to Remember
More informationAnnouncements. Paper due this Wednesday
Announcements Paper due this Wednesday 1 Client and Server Client and server are two terms frequently used Client/Server Model Client/Server model when talking about software Client/Server model when talking
More informationYour departmental website
Your departmental website How to create an online presence, with pictures 7 September, 2016 Jānis Lazovskis Slides available online at math.uic.edu/~jlv/webtalk Things to keep in mind There are many ways
More informationSchenker AB. Interface documentation Map integration
Schenker AB Interface documentation Map integration Index 1 General information... 1 1.1 Getting started...1 1.2 Authentication...1 2 Website Map... 2 2.1 Information...2 2.2 Methods...2 2.3 Parameters...2
More informationWeb Development and HTML. Shan-Hung Wu CS, NTHU
Web Development and HTML Shan-Hung Wu CS, NTHU Outline How does Internet Work? Web Development HTML Block vs. Inline elements Lists Links and Attributes Tables Forms 2 Outline How does Internet Work? Web
More informationChapter 10: Understanding the Standards
Disclaimer: All words, pictures are adopted from Learning Web Design (3 rd eds.) by Jennifer Niederst Robbins, published by O Reilly 2007. Chapter 10: Understanding the Standards CSc2320 In this chapter
More informationCHAPTER 2 MARKUP LANGUAGES: XHTML 1.0
WEB TECHNOLOGIES A COMPUTER SCIENCE PERSPECTIVE CHAPTER 2 MARKUP LANGUAGES: XHTML 1.0 Modified by Ahmed Sallam Based on original slides by Jeffrey C. Jackson reserved. 0-13-185603-0 HTML HELLO WORLD! Document
More informationOverview. Part I: Portraying the Internet as a collection of online information systems HTML/XHTML & CSS
CSS Overview Part I: Portraying the Internet as a collection of online information systems Part II: Design a website using HTML/XHTML & CSS XHTML validation What is wrong?
More informationXAP: extensible Ajax Platform
XAP: extensible Ajax Platform Hermod Opstvedt Chief Architect DnB NOR ITUD Hermod Opstvedt: XAP: extensible Ajax Platform Slide 1 It s an Ajax jungle out there: XAML Dojo Kabuki Rico Direct Web Remoting
More informationdjango-sekizai Documentation
django-sekizai Documentation Release 0.6.1 Jonas Obrist September 23, 2016 Contents 1 About 3 2 Dependencies 5 3 Usage 7 3.1 Configuration............................................... 7 3.2 Template
More informationChapter 2:- Introduction to XHTML. Compiled By:- Sanjay Patel Assistant Professor, SVBIT.
Chapter 2:- Introduction to XHTML Compiled By:- Assistant Professor, SVBIT. Outline Introduction to XHTML Move to XHTML Meta tags Character entities Frames and frame sets Inside Browser What is XHTML?
More informationExam : 9A Title : Adobe GoLive CS2 ACE Exam. Version : DEMO
Exam : 9A0-046 Title : Adobe GoLive CS2 ACE Exam Version : DEMO 1. Which scripting language is the default for use with ASP, and does NOT require a language specification at the beginning of a Web page's
More informationAjax Simplified Nicholas Petreley Abstract Ajax can become complex as far as implementation, but the concept is quite simple. This is a simple tutorial on Ajax that I hope will ease the fears of those
More informationUnit Notes. ICAWEB411A Produce basic client-side script for dynamic web pages Topic 1 Introduction to JavaScript
Unit Notes ICAWEB411A Produce basic client-side script for dynamic web pages Topic 1 Introduction to JavaScript Copyright, 2013 by TAFE NSW - North Coast Institute Date last saved: 18 September 2013 by
More informationCopyright 2011 Sakun Sharma
Maintaining Sessions in JSP We need sessions for security purpose and multiuser support. Here we are going to use sessions for security in the following manner: 1. Restrict user to open admin panel. 2.
More informationShankersinh Vaghela Bapu Institue of Technology
Branch: - 6th Sem IT Year/Sem : - 3rd /2014 Subject & Subject Code : Faculty Name : - Nitin Padariya Pre Upload Date: 31/12/2013 Submission Date: 9/1/2014 [1] Explain the need of web server and web browser
More informationIT350 Web and Internet Programming. XHTML Tables and Forms (from Chapter 4 of the text 4 th edition Chapter 2 of the text 5 th edition)
IT350 Web and Internet Programming XHTML Tables and Forms (from Chapter 4 of the text 4 th edition Chapter 2 of the text 5 th edition) 4.10 Tables 1 Table Basics table element border, summary, caption
More informationUsing htmlarea & a Database to Maintain Content on a Website
Using htmlarea & a Database to Maintain Content on a Website by Peter Lavin December 30, 2003 Overview If you wish to develop a website that others can contribute to one option is to have text files sent
More informationIntegrating Facebook. Contents
Integrating Facebook Grow your audience by making it easy for your readers to like, share or send pages from YourWebShop to their friends on Facebook. Contents Like Button 2 Share Button.. 6 Send Button.
More informationBasic CSS Lecture 17
Basic CSS Lecture 17 Robb T. Koether Hampden-Sydney College Wed, Feb 21, 2018 Robb T. Koether (Hampden-Sydney College) Basic CSSLecture 17 Wed, Feb 21, 2018 1 / 22 1 CSS 2 Background Styles 3 Text Styles
More information3 Categories and Attributes
3 The combination of products, presentation, and service makes our store unique. In this chapter, we will see how to add products to our store. Before adding products, we need to make some decisions about
More informationInternet publishing HTML (XHTML) language. Petr Zámostný room: A-72a phone.:
Internet publishing HTML (XHTML) language Petr Zámostný room: A-72a phone.: 4222 e-mail: petr.zamostny@vscht.cz Essential HTML components Element element example Start tag Element content End tag
More informationJack s Coal Fired Pizza
Jack s Coal Fired Pizza WORDPRESS MANUAL TABLE OF CONTENTS Login... 3 Editing Existing Pages... 4 Adding New Pages... 7 Editing/Adding Text... 8 Creating a Link... 9 Linking to a PDF... 10 Making a Link
More informationMODULE 2 HTML 5 FUNDAMENTALS. HyperText. > Douglas Engelbart ( )
MODULE 2 HTML 5 FUNDAMENTALS HyperText > Douglas Engelbart (1925-2013) Tim Berners-Lee's proposal In March 1989, Tim Berners- Lee submitted a proposal for an information management system to his boss,
More informationClient-side Web Engineering 2 From XML to Client-side Mashups. SWE 642, Spring 2008 Nick Duan. February 6, What is XML?
Client-side Web Engineering 2 From XML to Client-side Mashups SWE 642, Spring 2008 Nick Duan February 6, 2008 1 What is XML? XML extensible Markup Language Definition: XML is a markup language for documents
More informationSmartBar for MS CRM 2015/2016 and Dynamics 365
v.2.2, November 2016 SmartBar for MS CRM 2015/2016 and Dynamics 365 PowerSearch (How to work with PowerSearch for MS CRM 2015/2016 and Dynamics 365) The content of this document is subject to change without
More informationCreate a cool image gallery using CSS visibility and positioning property
GRC 275 A8 Create a cool image gallery using CSS visibility and positioning property 1. Create a cool image gallery, having thumbnails which when moused over display larger images 2. Gallery must provide
More informationAlpha College of Engineering and Technology. Question Bank
Alpha College of Engineering and Technology Department of Information Technology and Computer Engineering Chapter 1 WEB Technology (2160708) Question Bank 1. Give the full name of the following acronyms.
More informationLecture : 3. Practical : 2. Course Credit. Tutorial : 0. Total : 5. Course Learning Outcomes
Course Title Course Code WEB DESIGNING TECHNOLOGIES DCE311 Lecture : 3 Course Credit Practical : Tutorial : 0 Total : 5 Course Learning Outcomes At end of the course, students will be able to: Understand
More informationGRAPHIC WEB DESIGNER PROGRAM
NH128 HTML Level 1 24 Total Hours COURSE TITLE: HTML Level 1 COURSE OVERVIEW: This course introduces web designers to the nuts and bolts of HTML (HyperText Markup Language), the programming language used
More informationAs we design and build out our HTML pages, there are some basics that we may follow for each page, site, and application.
Extra notes - Client-side Design and Development Dr Nick Hayward HTML - Basics A brief introduction to some of the basics of HTML. Contents Intro element add some metadata define a base address
More informationHTML. HTML Evolution
Overview stands for HyperText Markup Language. Structured text with explicit markup denoted within < and > delimiters. Not what-you-see-is-what-you-get (WYSIWYG) like MS word. Similar to other text markup
More informationXML PRESENTATION OF DOCUMENTS
Network Europe - Russia - Asia of Masters in Informatics as a Second Competence 159025-TEMPUS-1-2009-1-FR-TEMPUS-JPCR Sergio Luján Mora Department of Software and Computing Systems University of Alicante
More informationNotes General. IS 651: Distributed Systems 1
Notes General Discussion 1 and homework 1 are now graded. Grading is final one week after the deadline. Contract me before that if you find problem and want regrading. Minor syllabus change Moved chapter
More informationMultimedia Systems and Technologies
Multimedia Systems and Technologies Sample exam paper 1 Notes: The exam paper is printed double-sided on two A3 sheets The exam duration is 2 hours and 40 minutes The maximum grade achievable in the written
More informationPASS4TEST. IT Certification Guaranteed, The Easy Way! We offer free update service for one year
PASS4TEST IT Certification Guaranteed, The Easy Way! \ http://www.pass4test.com We offer free update service for one year Exam : 9A0-046 Title : Adobe GoLive CS2 ACE Exam Vendors : Adobe Version : DEMO
More informationjmaki Overview Sang Shin Java Technology Architect Sun Microsystems, Inc.
jmaki Overview Sang Shin Java Technology Architect Sun Microsystems, Inc. sang.shin@sun.com www.javapassion.com Agenda What is and Why jmaki? jmaki widgets Using jmaki widget - List widget What makes up
More informationCSI 3140 WWW Structures, Techniques and Standards. Markup Languages: XHTML 1.0
CSI 3140 WWW Structures, Techniques and Standards Markup Languages: XHTML 1.0 HTML Hello World! Document Type Declaration Document Instance Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson
More informationOU Mashup V2. Display Page
OU Mashup V2 OU Mashup v2 is the new iteration of OU Mashup. All instances of OU Mashup implemented in 2018 and onwards are v2. Its main advantages include: The ability to add multiple accounts per social
More information1)); getactiveeditors(d, listid); getactiveauthors(d, listid); getcheckedourfilesusercount(listid); getdocumentsbyfiletype(listid); });
More information
Web Publishing Basics I
Web Publishing Basics I Jeff Pankin Information Services and Technology Contents Course Objectives... 2 Creating a Web Page with HTML... 3 What is Dreamweaver?... 3 What is HTML?... 3 What are the basic
More informationWeb Services Application Programming Interface (API) Specification
Web Services Application Programming Interface (API) Specification Version 1.1 July 10, 2018 Web Services API Specifications 2 of 36 Table of s 1. Terrain Sources... 3 1.1. GET Method... 3 1.2. POST Method...
More informationSimple Carpool Application using SAP NetWeaver Portal, KM, XML Forms, and Google Maps
Simple Carpool Application using SAP NetWeaver Portal, KM, XML Forms, and Google Maps Applies to: SAP NetWeaver Portal 6.x\7.x, Knowledge Management (KM), and Google Maps. For more information, visit the
More informationWeb applications Developing Android/Iphone Applications using WebGUI
Web applications Developing Android/Iphone Applications using WebGUI Joeri de Bruin Oqapi Software joeri@oqapi.nl 1 Overview Web applications Create WebApp with WebGUI Turn WebApp into native mobile app
More informationProgrammazione Web a.a. 2017/2018 HTML5
Programmazione Web a.a. 2017/2018 HTML5 PhD Ing.Antonino Raucea antonino.raucea@dieei.unict.it 1 Introduzione HTML HTML is the standard markup language for creating Web pages. HTML stands for Hyper Text
More informationJSF - H:PANELGRID. JSF Tag. Rendered Output. Tag Attributes. The h:panel tag renders an HTML "table" element. Attribute & Description.
http://www.tutorialspoint.com/jsf/jsf_panelgrid_tag.htm JSF - H:PANELGRID Copyright tutorialspoint.com The h:panel tag renders an HTML "table" element. JSF Tag
More informationWeb Site Development with HTML/JavaScrip
Hands-On Web Site Development with HTML/JavaScrip Course Description This Hands-On Web programming course provides a thorough introduction to implementing a full-featured Web site on the Internet or corporate
More informationCSS CSS how to display to solve a problem External Style Sheets CSS files CSS Syntax
CSS CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles were added to HTML 4.0 to solve a problem External Style Sheets can save a lot of work External Style Sheets
More informationIndex LICENSED PRODUCT NOT FOR RESALE
Index LICENSED PRODUCT NOT FOR RESALE A Absolute positioning, 100 102 with multi-columns, 101 Accelerometer, 263 Access data, 225 227 Adding elements, 209 211 to display, 210 Animated boxes creation using
More informationGS2K Custom Webpage Build Procedure Application Note NT11598A Rev
GS2K Custom Webpage Build Procedure Application Note 80560NT11598A Rev. 3.0 2017-12-05 SPECIFICATIONS ARE SUBJECT TO CHANGE WITHOUT NOTICE NOTICE While reasonable efforts have been made to assure the accuracy
More informationintroduction to XHTML
introduction to XHTML XHTML stands for Extensible HyperText Markup Language and is based on HTML 4.0, incorporating XML. Due to this fusion the mark up language will remain compatible with existing browsers
More informationHyperlinks, Tables, Forms and Frameworks
Hyperlinks, Tables, Forms and Frameworks Web Authoring and Design Benjamin Kenwright Outline Review Previous Material HTML Tables, Forms and Frameworks Summary Review/Discussion Email? Did everyone get
More informationHow to Customize Support Portals
How to Customize Support Portals 2017 Bomgar Corporation. All rights reserved worldwide. BOMGAR and the BOMGAR logo are trademarks of Bomgar Corporation; other trademarks shown are the property of their
More informationIBM Bluemix Node-RED Watson Starter
IBM Bluemix Node-RED Watson Starter Cognitive Solutions Application Development IBM Global Business Partners Duration: 45 minutes Updated: Feb 14, 2018 Klaus-Peter Schlotter kps@de.ibm.com Version 1 Overview
More informationIntroduction to JavaScript p. 1 JavaScript Myths p. 2 Versions of JavaScript p. 2 Client-Side JavaScript p. 3 JavaScript in Other Contexts p.
Preface p. xiii Introduction to JavaScript p. 1 JavaScript Myths p. 2 Versions of JavaScript p. 2 Client-Side JavaScript p. 3 JavaScript in Other Contexts p. 5 Client-Side JavaScript: Executable Content
More informationBridges To Computing
Bridges To Computing General Information: This document was created for use in the "Bridges to Computing" project of Brooklyn College. You are invited and encouraged to use this presentation to promote
More informationTRAINING GUIDE. Rebranding Lucity Web
TRAINING GUIDE Rebranding Lucity Web Rebranding Lucity Web Applications In this booklet, we ll show how to make the Lucity web applications your own by matching your agency s style. Table of Contents Web
More informationALT-TAB: Better APEX Tabs. Scott Spendolini Director & Co-Founder
ALT-TAB: Better APEX Tabs Scott Spendolini Director & Co-Founder Welcome 2 ABOUT THE PRESENTER Scott Spendolini scott@sumneva.com @sspendol Ex-Oracle Employee of 10 years Senior Product Manager for Oracle
More informationScripting for Multimedia LECTURE 1: INTRODUCING HTML5
Scripting for Multimedia LECTURE 1: INTRODUCING HTML5 HTML An acronym for Hypertext Markup Language Basic language of WWW documents HTML documents consist of text, including tags that describe document
More informationINSTITUTE OF AERONAUTICAL ENGINEERING (Autonomous) Dundigal, Hyderabad
INSTITUTE OF AERONAUTICAL ENGINEERING (Autonomous) Dundigal, Hyderabad - 500 043 INFORMATION TECHNOLOGY TUTORIAL QUESTION BANK Course Name Course Code Class Branch : Web Technologies : ACS006 : B. Tech
More informationMotivation (WWW) Markup Languages (defined). 7/15/2012. CISC1600-SummerII2012-Raphael-lec2 1. Agenda
CISC 1600 Introduction to Multi-media Computing Agenda Email Address: Course Page: Class Hours: Summer Session II 2012 Instructor : J. Raphael raphael@sci.brooklyn.cuny.edu http://www.sci.brooklyn.cuny.edu/~raphael/cisc1600.html
More informationGetting started with Franson GpsGate 2.0
Franson GpsGate http://franson.com/gpsgate 2004-2006 Franson Technology AB, All rights reserved User's Guide Franson GpsGate v2.0 for Windows Getting started with Franson GpsGate 2.0 How you install GpsGate.
More informationIBM Worklight V5.0.6 Getting Started
IBM Worklight V5.0.6 Getting Started Creating your first Worklight application 17 January 2014 US Government Users Restricted Rights - Use, duplication or disclosure restricted by GSA ADP Schedule Contract
More informationTable Basics. The structure of an table
TABLE -FRAMESET Table Basics A table is a grid of rows and columns that intersect to form cells. Two different types of cells exist: Table cell that contains data, is created with the A cell that
More informationIntroduction to HTML5
Introduction to HTML5 History of HTML 1991 HTML first published 1995 1997 1999 2000 HTML 2.0 HTML 3.2 HTML 4.01 XHTML 1.0 After HTML 4.01 was released, focus shifted to XHTML and its stricter standards.
More informationChapter 1 Getting Started with HTML 5 1. Chapter 2 Introduction to New Elements in HTML 5 21
Table of Contents Chapter 1 Getting Started with HTML 5 1 Introduction to HTML 5... 2 New API... 2 New Structure... 3 New Markup Elements and Attributes... 3 New Form Elements and Attributes... 4 Geolocation...
More informationConfiguring Hotspots
CHAPTER 12 Hotspots on the Cisco NAC Guest Server are used to allow administrators to create their own portal pages and host them on the Cisco NAC Guest Server. Hotspots created by administrators can be
More informationStructured documents
Structured documents An overview of XML Structured documents Michael Houghton 15/11/2000 Unstructured documents Broadly speaking, text and multimedia document formats can be structured or unstructured.
More informationSchool of Computer Science and Software Engineering
1. C 2. B 3. C B 4. B 5. B 6. B 7. C (should be getelementsbyid case sensitive) 8. A 9. B 10. D 11. B 12. A 13. A 14. D 15. C 16. D 17. A 18. C 19. A 20. D P a g e 2 of 13 Section B: Long Answer Questions
More information