Hot Desking Application Web Portals Integration

Size: px
Start display at page:

Download "Hot Desking Application Web Portals Integration"

Transcription

1 Hot Desking Application Web Portals Integration NN

2 2 Document status: Standard Document issue: Document date: Product release: Release 2.2 Job function: Fundamentals Type: NTP Language type: EN, All Rights Reserved. Nortel, the Nortel logo and the Globemark are trademarks of Nortel Networks. Lotus, Sametime, IBM and related trademarks, names and logos are the property of International Business Machines Corporation and are registered and/or used in the U.S. and countries around the world. All other trademarks are the property of their respective owners.

3 Contents Introduction...5 Intended audience... 5 Fundamentals...6 Overview...6 Applets, Rendering and other control...8 Rendering Modes... 8 Other Settings... 9 The Applets How To Embed Authentication (and caching)... 27

4 4

5 5 Introduction Nortel Hot Desking Application is a web application that uses the Web Services interfaces exposed by the (ACE) to provide a portal for users to manage their various communication devices. This could be as simple as controlling the call forward status of their desk phone, to registering a Hotdesk. In addition to the main web application, there are a number of individual components (Applets from hereon in), that can be embedded in portal web pages. The Applets are generally simplified functional parts of the main web application running as standalone Adobe Flash Applications such as: Communication Devices Control Quick Call Hotdesk Registration Call Forward Context Aware Routing Directory Aggregated Presence This document provides an overview of how these Applets can be embedded and the options available to web portal developers to control their rendering in a web page. The web portal developer is recommended to refer to the many resources on the internet to understand how to address the complexity of portal web page development and embedding Adobe Flash Players. Intended audience This is intended to familiarise customer web portal developers with the basics of embedding Applets in a web page.

6 6 Fundamentals Note: The Applets have been developed and tested in both Adobe Flash Player 9.x and 10.x ( as of the date of this document). Also, note that as Adobe Flash Player is in continual development and can be installed and updated at will by end users, it is outside Nortel s control should the Applets fail to operate as originally intended. Nortel will make every attempt to fix any issues arising from new versions of the Flash Player when Adobe releases them. As the Applets are, in essence, sub-components of the functionality present on the desktop version of the main Hot Desking Application web application, refer to Hot Desking Application User Guide (NN ) which explains in detail how each component is used. There may be slight differences in how much information is presented to the end user, but the functional operation of the Applets is the same. Overview Below, Figure 1 - Overview of main Hot Desking Application, shows the main application and the annotations identify just a few of the areas that are also available as Applets. The Communications Panel. Depending on rendering mode (described later) this panel area renders as is with Make Call capability or with reduced interactivity in that in it s minimal rendering, only the device list and Make Primary control are available. The Hotdesk Registration Panel. Again depending on rendering mode, the panel renders as is with full descriptive instructions for each stage of registration or with reduced footprint and simplified instructions. The sub-area of the Communications Panel. This is known as Make Call or Quick Call. It will provide the user with an entry box and a maximum of 3 buttons: Speech Dial Phone Call Video Call

7 7 Figure 1 - Overview of main Hot Desking Application

8 8 Applets, Rendering and other control Rendering Modes In this section we will look at the various Applets and the effects of the rendering modes and other settings. The rendering modes are provisioned by passing an option/value pair via a FlashVar to the Applet in the Flash launcher embedded code of the web page. E.g. "FlashVars","render=mini, The modes currently available are: Default or nothing Mini Sametime Google Each mode has a number of effects on the rendering of the Applet ranging from complexity to width and scale render=default mode This mode can also be represented by no option/value pair. In this mode, the Applet will have all window/panel decoration and will display its contents at the same complexity level as the main Hot Desking Application. render=mini mode In this mode, the Applet will have a minimised window/panel decoration with simplified footer but will display its contents at the same complexity level as the main Hot Desking Application. render=sametime mode In this mode, the Applet will have a further minimised window/panel decoration but will present one or two tooltip locations along top branding identity bar. The contents of the Applet will display at the reduced complexity level so as to fit in a restricted view environment.

9 9 render=google mode In this mode, the Applet will have a similar minimised window/panel decoration as render=sametime mode but with minimal border padding and no tooltip locations along top branding identity bar. The contents of the Applet will also display at the same reduced complexity level so as to fit in a restricted view environment of the Google Desktop Sidebar. Other Settings This section will describe the other settings available. Fontsize and TooltipMaxWidth To complement the rendering mode, the maximum width of the tooltip balloon can be defined as well as the fontsize of the tooltip text. These are also provisioned by passing an option/value pair via a FlashVar to the Applet. e.g. "FlashVars"," fontsize=10, And "FlashVars","tooltipmaxwidth=180" xscale and yscale The scaling of the Applet can be statically set in all but render=google and render=sametime modes due to the view constraints imposed by the apps these modes were originally intended for. The scaling is represented as a value from 0.1 to 1.0 for reduced size or > 1.0 for an increased size. If 0 or a non-numeric value is specified, then scaling will be set to 1. e.g. "FlashVars","render=mini&xScale=0.75&xScale=0.75", The use of xscale or yscale will take precedence over the render modes auto resizing capability. If the values default, then the modes auto resizing will be restored. The resolution of scaling can be very fine. The internal data type storing the scale is a 53 bit Double Precision number but it is doubtful that in every day use the finest granularity change will be noticeable as it is probably way beyond the resolution of the users display monitor. Generally, the scale values will be the desired width or height in pixels divided by the minimum height before automatic scaling takes place. Therefore it is advisable to trial the Applet in a standalone web page with the html containing DIV width/height settings at 100% and use the browser to resize the Applet. When the layout and spare space around the Applet is agreeable when still at 1:1 scaling, take a screen

10 10 capture and measure the image. Next apply a scale to reduce the Applet to the desired size. xscale and yscale are independent, so if the correct aspect ratio is to be retained, use the same scaling for both X and Y. Another way is to allow the applet to scale automatically by settings the html DIV containing the embedded flash player object to the desired size and set the launcher width and height parameter to 100%. Bear in mind that if the dynamic height of the Applet is larger than the height of the containing DIV, vertical scrollbars will be added. This may be the case for the Communications Panel Applet if the end user has many devices. As seen in the example above, passing more than one option/value pair is achieved by using the & to separate the option/value pairs. NOTE: There is one exception to the rule with regard to multiple option/value pairs. The render=google mode at present does not accept multiple option/value pairs due to limitations with the Google Desktop Gadget Launchers being developed and as such the fontsize and tooltip maximum width are hard coded to 9 and 180 respectively.

11 11 The Applets Here we will look at the differences the rendering modes have on the various Applets. All Applets, when set with width, 100%, and height, 100%, in the embedding code will cause them to stretch with the browser. When the Applet gets reduced to below its minimum width for the render mode, it will scale automatically. Using specific width and height values in the embedding code will be discussed in the How to Embed section. Note: The sametime mode can be used outside of the Sametime as this mode is optimised for a small browser view area such as a tab in the UC Extender Plugin for Sametime Connect. As you will see from the following screen captures of each Applet, the footprint and complexity of the Applet reduces through the modes. When render=default or no render= parameter is used, then the tooltips modification option/value pairs have no effect. Additionally, as you will see below, the mini and default modes are largely the same from a content point of view, but what might not be apparent is that the default mode does not support the use of tooltip fontsize or tooltipmaxwidth overrides and therefore will present the Applet as originally developed in the main Hot Desking Application, albeit with scaling capability.

12 12 Communication Devices Control Figure 2 - render=default Figure 3 - render=mini

13 13 Figure 4 - render=sametime Figure 5 - render=google

14 14 Quick Call Figure 6 - render=default Figure 7 - render=mini Figure 8 - render=sametime Figure 9 - render=google

15 15 Hotdesk Registration Figure 10 - render=default Figure 11 - render=mini

16 16 Figure 12 - render=sametime Figure 13 - render=google

17 17 Call Forward Figure 14 - render=default Figure 15 - render=mini Figure 16 - render=sametime Figure 17 - render=google

18 18 Context Aware Routing Figure 18 - render=default

19 19 Figure 19 - render=mini Figure 20 - render=sametime

20 20 Figure 21 - render=google

21 21 Directory Figure 22 - render=default

22 22 Figure 23 - render=mini In the following two figures, the directory list output and scrollbars have not been shown simply to show the slight difference in font size in the Search For Contacts panel. Additionally, this Applet does not really suit being run in the following two modes. Having said that, they will scale a reasonable amount before the smaller text in a contacts business card becomes unreadable. Future releases may see a simplified view of the contacts details to enhance its use in the following modes.

23 23 Figure 24 - render=sametime Figure 25 - render=google Aggregated Presence This Applet allows for the background colour to be defined by the bgcolor, #ffffff, parameter in the embedded launcher JavaScript call. As you can see in the images below, the google render mode shows a different tooltip fontsize to the others (which is fixed at 9pt) and no copyright footer optimised for a google gadget. Figure 26 - render=default

24 24 Figure 27 - render=mini Figure 28 - render=sametime Figure 29 - render=google

25 25 How to Embed To embed the Flash Player Launcher, a JavaScript file is required. The JavaScript file provides a number of functions that are called when opening a web page where the Applet is needed. In most situations, this will be hosted and used on the IIS server in active server page file (.aspx). In the Nortel Hot Desking Application solution the JavaScript file is the stock Adobe file but there are a number of other embedding solutions available which may offer more flexibility in your portal design. ( swfobject and swfobject2 are examples of such projects official repository for swfobject can be found here Also, there is an article on Adobe s Developer Connections devnet site from the author here ). The location of the file is in the root of the installed Web Server for the Hot Desking Application solution. Its filename is AC_OETags.js and usually located in C:\Program Files\Nortel\MyPhoneAndVideo\WebServer On the following pages, there s an excerpt of some web page source html and JavaScript call code to embed the Flash Player. Various parts of the code have been highlighted to draw your attention to the critical parameters. Experienced web portal developers can embed the Flash Player as they may already be accustomed to. NOTE: The code below was taken from an active server page (.aspx), hence the references to runat= server. Also, most Applets manage their own scrolling so the html scroll tag is usually set to no.

26 26 <head runat="server"> <script src="ac_oetags.js" language="javascript"></script> <style> body { margin: 0px; } </style> </head> <body scroll="no" > <script language="javascript" type="text/javascript"> // Version check based upon the values defined in globals var hasrequestedversion = DetectFlashVer(9, 0, 28); if (hasrequestedversion) { // if we've detected an acceptable version, embed the Flash Content SWF when all tests are passed AC_FL_RunContent( "src", "AggregatedPresenceApplet", "width", "100%", "height", "100%", "align", "middle", "id", "AggregatedPresenceApplet", "quality", "high", "bgcolor", "#000000", "name", "AggregatedPresenceApplet", "wmode","transparent", "FlashVars","<options>", "allowscriptaccess","samedomain", "type", "application/x shockwave flash", "pluginspage", " } else { document.write("<div style='text align: center'><font face='verdana'><br /><img src='images/logo.png'/><br /><br />Unified Communications</font><br /><br /><font style='font size: 10pt; font family: Verdana;'><%=noFlashInstallMessage%></font></div>"); document.title = document.title + " Adobe Flash v9 Not Found"; } </script> </body> The red highlighted fields need to be changed to refer to the required Applet filename (minus the.swf extension) as found in the Web Server root folder mentioned above. The green highlighted field, <options>, must be changed to use the preferred options as discussed earlier in the document. If left blank, then the default rendering will occur.

27 27 The width and height values can be set to specific values but it is best to keep them set to 100% and set the size of the embedded Flash Player container instead. This will then allow the Applet to scale itself and add its scrollbars if needed. In testing, we have found browser compatibility is a complicated issue for the main desktop application (this was primarily due to the use of the embedded IFrame component for the Administration Console, due to its direct use of the browser to render HTML content). We found the use of Quirks modes to be most suitable with IE6.x, IE7, FireFox 3.x, Opera 9.6x and Safari 3.x (Mac). As newer versions of the popular browsers advance and resolve these incompatibilities, Quirks mode may not be required. This DOCTYPE declaration works well and was found to be most successful in the browsers mentioned. <!DOCTYPE HTML PUBLIC " //W3C//DTD HTML 4.01 Transitional//EN" > Feel free to experiment with other DOCTYPE declarations with the standalone Applets as they do not make use the IFrame component. Additionally, the wmode, opaque, setting is also not required for the Applets. Other values of transparent and window are valid, but again this is entirely down to the needs of the portal web pages. Again, feel free to experiment, but most of the Applets fill their stage. Authentication (and caching) Authentication of the user is provided by your site s current authentication model. Whichever model is being used authentication challenges usually occur when first accessing a resource on the web server this would normally be the Applet launcher web page, be it a standalone page as in use for the main Hot Desking Application or a site s portal page with a number of other resources also referenced. There is no actual authentication within the Applets, but when the Applet is requested from the Web Server, this should trigger an authentication challenge as mentioned above. If the Applet is cached on the users machine, then when the attempt the Applet initiated communication with the Web Server (to access the ACE Hot Desking Application API), an authentication challenge would be triggered. It is strongly recommend building in mechanisms into your portal pages to prevent the Applets being cached on the users machine as cached Applets can cause problems if the ACE/Hot Desking Application solution is upgraded.

Getting Started with Eric Meyer's CSS Sculptor 1.0

Getting Started with Eric Meyer's CSS Sculptor 1.0 Getting Started with Eric Meyer's CSS Sculptor 1.0 Eric Meyer s CSS Sculptor is a flexible, powerful tool for generating highly customized Web standards based CSS layouts. With CSS Sculptor, you can quickly

More information

ADOBE 9A Adobe Dreamweaver CS4 ACE.

ADOBE 9A Adobe Dreamweaver CS4 ACE. ADOBE 9A0-090 Adobe Dreamweaver CS4 ACE http://killexams.com/exam-detail/9a0-090 ,D QUESTION: 74 You use an image throughout your Web site. You want to be able to add this image to various Web pages without

More information

Perfect Student Midterm Exam March 20, 2007 Student ID: 9999 Exam: 7434 CS-081/Vickery Page 1 of 5

Perfect Student Midterm Exam March 20, 2007 Student ID: 9999 Exam: 7434 CS-081/Vickery Page 1 of 5 Perfect Student Midterm Exam March 20, 2007 Student ID: 9999 Exam: 7434 CS-081/Vickery Page 1 of 5 NOTE: It is my policy to give a failing grade in the course to any student who either gives or receives

More information

Technical Instructions

Technical Instructions Technical Instructions This Web Site Tool Kit contains multiple Web assets that you can use to easily customize your Web pages. Web assets included are animated and static banners, a sample Web page, buttons,

More information

Index. alt, 38, 57 class, 86, 88, 101, 107 href, 24, 51, 57 id, 86 88, 98 overview, 37. src, 37, 57. backend, WordPress, 146, 148

Index. alt, 38, 57 class, 86, 88, 101, 107 href, 24, 51, 57 id, 86 88, 98 overview, 37. src, 37, 57. backend, WordPress, 146, 148 Index Numbers & Symbols (angle brackets), in HTML, 47 : (colon), in CSS, 96 {} (curly brackets), in CSS, 75, 96. (dot), in CSS, 89, 102 # (hash mark), in CSS, 87 88, 99 % (percent) font size, in CSS,

More information

ITEC447 Web Projects CHAPTER 10 FLASH & SILVERLIGHT 1

ITEC447 Web Projects CHAPTER 10 FLASH & SILVERLIGHT 1 ITEC447 Web Projects CHAPTER 10 FLASH & SILVERLIGHT 1 Working with Flash and Other Embeddable Content One of the major turning points in the evolution of web design was the introduction of Flash. By designing

More information

IMY 110 Theme 11 HTML Frames

IMY 110 Theme 11 HTML Frames IMY 110 Theme 11 HTML Frames 1. Frames in HTML 1.1. Introduction Frames divide up the web browser window in much the same way that a table divides up part of a page, but a different HTML document is loaded

More information

Designing the Home Page and Creating Additional Pages

Designing the Home Page and Creating Additional Pages Designing the Home Page and Creating Additional Pages Creating a Webpage Template In Notepad++, create a basic HTML webpage with html documentation, head, title, and body starting and ending tags. From

More information

ThingLink User Guide. Andy Chen Eric Ouyang Giovanni Tenorio Ashton Yon

ThingLink User Guide. Andy Chen Eric Ouyang Giovanni Tenorio Ashton Yon ThingLink User Guide Yon Corp Andy Chen Eric Ouyang Giovanni Tenorio Ashton Yon Index Preface.. 2 Overview... 3 Installation. 4 Functionality. 5 Troubleshooting... 6 FAQ... 7 Contact Information. 8 Appendix...

More information

Implementing a chat button on TECHNICAL PAPER

Implementing 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 information

Using Dreamweaver CC. Logo. 4 Creating a Template. Page Heading. Page content in this area. About Us Gallery Ordering Contact Us Links

Using Dreamweaver CC. Logo. 4 Creating a Template. Page Heading. Page content in this area. About Us Gallery Ordering Contact Us Links Using Dreamweaver CC 4 Creating a Template Now that the main page of our website is complete, we need to create the rest of the pages. Each of them will have a layout that follows the plan shown below.

More information

ORB Education Quality Teaching Resources

ORB Education Quality Teaching Resources These basic resources aim to keep things simple and avoid HTML and CSS completely, whilst helping familiarise students with what can be a daunting interface. The final websites will not demonstrate best

More information

Programmazione Web a.a. 2017/2018 HTML5

Programmazione 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 information

Liferay Themes: Customizing Liferay s Look & Feel

Liferay Themes: Customizing Liferay s Look & Feel Liferay Themes: Customizing Liferay s Look & Feel Liferay is a JSR-168 compliant enterprise portal. Starting with version 3.5.0, Liferay provides a mechanism for developers to easily customize the user

More information

Quick Start Guide. This guide will help you get started with Kentico CMS for ASP.NET. It answers these questions:

Quick Start Guide. This guide will help you get started with Kentico CMS for ASP.NET. It answers these questions: Quick Start Guide This guide will help you get started with Kentico CMS for ASP.NET. It answers these questions:. How can I install Kentico CMS?. How can I edit content? 3. How can I insert an image or

More information

NEW WEBMASTER HTML & CSS FOR BEGINNERS COURSE SYNOPSIS

NEW WEBMASTER HTML & CSS FOR BEGINNERS COURSE SYNOPSIS NEW WEBMASTER HTML & CSS FOR BEGINNERS COURSE SYNOPSIS LESSON 1 GETTING STARTED Before We Get Started; Pre requisites; The Notepad++ Text Editor; Download Chrome, Firefox, Opera, & Safari Browsers; The

More information

Flash Image Enhancer Manual DMXzone.com Flash Image Enhancer Manual

Flash Image Enhancer Manual DMXzone.com Flash Image Enhancer Manual Flash Image Enhancer Manual Copyright 2009 All Rights Reserved Page 1 of 62 Index Flash Image Enhancer Manual... 1 Index... 2 About Flash Image Enhancer... 3 Features in Detail... 3 Before you begin...

More information

How to lay out a web page with CSS

How to lay out a web page with CSS How to lay out a web page with CSS A CSS page layout uses the Cascading Style Sheets format, rather than traditional HTML tables or frames, to organize the content on a web page. The basic building block

More information

Stamp Builder. Documentation. v1.0.0

Stamp  Builder. Documentation.   v1.0.0 Stamp Email Builder Documentation http://getemailbuilder.com v1.0.0 THANK YOU FOR PURCHASING OUR EMAIL EDITOR! This documentation covers all main features of the STAMP Self-hosted email editor. If you

More information

Moodle Plugin for CopySafe Web -- Installation for Moodle 3.5 and later --

Moodle Plugin for CopySafe Web -- Installation for Moodle 3.5 and later -- Moodle Plugin for CopySafe Web -- Installation for Moodle 3.5 and later -- About this Plugin and CopySafe Web This Moodle plugin enables websites that use Moodle CMS to upload, display and manage pages

More information

Dreamweaver: Portfolio Site

Dreamweaver: Portfolio Site Dreamweaver: Portfolio Site Part 3 - Dreamweaver: Developing the Portfolio Site (L043) Create a new Site in Dreamweaver: Site > New Site (name the site something like: Portfolio, or Portfolio_c7) Go to

More information

HTML TAG SUMMARY HTML REFERENCE 18 TAG/ATTRIBUTE DESCRIPTION PAGE REFERENCES TAG/ATTRIBUTE DESCRIPTION PAGE REFERENCES MOST TAGS

HTML TAG SUMMARY HTML REFERENCE 18 TAG/ATTRIBUTE DESCRIPTION PAGE REFERENCES TAG/ATTRIBUTE DESCRIPTION PAGE REFERENCES MOST TAGS MOST TAGS CLASS Divides tags into groups for applying styles 202 ID Identifies a specific tag 201 STYLE Applies a style locally 200 TITLE Adds tool tips to elements 181 Identifies the HTML version

More information

Human Resources Diploma Toolbox. BSB50801 Diploma of Business (Human Resources)

Human Resources Diploma Toolbox. BSB50801 Diploma of Business (Human Resources) Technical manual Human Resources Diploma Toolbox BSB50801 Diploma of Business (Human Resources) Technical manual... 1 Client technical requirements... 2 Accessibility... 3 File structure... 5 Software

More information

Chapter 1 Getting Started with HTML 5 1. Chapter 2 Introduction to New Elements in HTML 5 21

Chapter 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 information

How to set up a local root folder and site structure

How to set up a local root folder and site structure Activity 2.1 guide How to set up a local root folder and site structure The first thing to do when creating a new website with Adobe Dreamweaver CS3 is to define a site and identify a root folder where

More information

Advanced Dreamweaver CS6

Advanced Dreamweaver CS6 Advanced Dreamweaver CS6 Overview This advanced Dreamweaver CS6 training class teaches you to become more efficient with Dreamweaver by taking advantage of Dreamweaver's more advanced features. After this

More information

Adaptations by PVII responsive and then creates your page instantly Al Sparber & Gerry Jacobsen PVII

Adaptations by PVII responsive and then creates your page instantly Al Sparber & Gerry Jacobsen PVII Adaptations by PVII is a Dreamweaver extension that allows you to select from 5 unique responsive layouts and then creates your page instantly. We hope you enjoy using this product as much as we did making

More information

Overview of the Adobe Dreamweaver CS5 workspace

Overview of the Adobe Dreamweaver CS5 workspace Adobe Dreamweaver CS5 Activity 2.1 guide Overview of the Adobe Dreamweaver CS5 workspace You can access Adobe Dreamweaver CS5 tools, commands, and features by using menus or by selecting options from one

More information

S4B Video to Flash Soft4Boost Help S4B Video to Flash www.sorentioapps.com Sorentio Systems, Ltd. All rights reserved Contact Us If you have any comments, suggestions or questions regarding S4B Video to

More information

Wanted! Introduction. Step 1: Styling your poster. Activity Checklist. In this project, you ll learn how to make your own poster.

Wanted! Introduction. Step 1: Styling your poster. Activity Checklist. In this project, you ll learn how to make your own poster. Wanted! Introduction In this project, you ll learn how to make your own poster. Step 1: Styling your poster Let s start by editing the CSS code for the poster. Activity Checklist Open this trinket: jumpto.cc/web-wanted.

More information

Fonts, text, and colour on the web. Sourcing, resizing, and inserting web site images MGMT 230 LAB

Fonts, text, and colour on the web. Sourcing, resizing, and inserting web site images MGMT 230 LAB Fonts, text, and colour on the web Sourcing, resizing, and inserting web site images MGMT 230 LAB Fonts and font families Font families are used in web development rather than just the name of one font

More information

HTML. Mohammed Alhessi M.Sc. Geomatics Engineering. Internet GIS Technologies كلية اآلداب - قسم الجغرافيا نظم المعلومات الجغرافية

HTML. Mohammed Alhessi M.Sc. Geomatics Engineering. Internet GIS Technologies كلية اآلداب - قسم الجغرافيا نظم المعلومات الجغرافية HTML Mohammed Alhessi M.Sc. Geomatics Engineering Wednesday, February 18, 2015 Eng. Mohammed Alhessi 1 W3Schools Main Reference: http://www.w3schools.com/ 2 What is HTML? HTML is a markup language for

More information

Human Resources Diploma Toolbox, version 1.1. BSB50801 Diploma of Business (Human Resources)

Human Resources Diploma Toolbox, version 1.1. BSB50801 Diploma of Business (Human Resources) Technical manual Human Resources Diploma Toolbox, version 1.1 BSB50801 Diploma of Business (Human Resources) Technical manual... 1 Client technical requirements... 2 Accessibility... 3 File structure...

More information

introduction to XHTML

introduction 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 information

Configuring Anonymous Access to Analysis Files in TIBCO Spotfire 7.5

Configuring Anonymous Access to Analysis Files in TIBCO Spotfire 7.5 Configuring Anonymous Access to Analysis Files in TIBCO Spotfire 7.5 Introduction Use Cases for Anonymous Authentication Anonymous Authentication in TIBCO Spotfire 7.5 Enabling Anonymous Authentication

More information

Websites. Version 1.7

Websites. Version 1.7 Websites Version 1.7 Last edited 15 Contents MyNetball Information...3 Websites...4 Web packages...4 Setting up the layout...5 Uploading files and images...6 Using Dropbox to Increase your Website Data...7

More information

DNN Module for CopySafe Web. -- Installation Guide -- About this Module and CopySafe Web

DNN Module for CopySafe Web. -- Installation Guide -- About this Module and CopySafe Web DNN Module for CopySafe Web -- Installation Guide -- About this Module and CopySafe Web This DNN module enables websites using DNN to upload, display and manage pages and posts that show encrypted images

More information

KMC Converge GFX User Guide

KMC Converge GFX User Guide KMC Converge GFX User Guide GENERAL INFORMATION...2 Support...2 Notes and Cautions...2 Important Notices...2 INSTALLING KMC CONVERGE GFX...3 Installing...3 Licensing...3 Browser support...3 USING CONVERGE

More information

Introduction to WEB PROGRAMMING

Introduction to WEB PROGRAMMING Introduction to WEB PROGRAMMING Web Languages: Overview HTML CSS JavaScript content structure look & feel transitions/animation s (CSS3) interaction animation server communication Full-Stack Web Frameworks

More information

Haymarket Business Media RECRUITMENT AD SPECIFICATIONS AND STYLE GUIDE 2018

Haymarket Business Media RECRUITMENT AD SPECIFICATIONS AND STYLE GUIDE 2018 Contents Standard ad formats... 1 Rich Media Ad Units... 2 HTML5 Creatives... 3 ZIP BUNDLES... 3 STUDIO... 4 Additional information... 5 This document is subject to change Please always download the most

More information

HTML and CSS COURSE SYLLABUS

HTML and CSS COURSE SYLLABUS HTML and CSS COURSE SYLLABUS Overview: HTML and CSS go hand in hand for developing flexible, attractively and user friendly websites. HTML (Hyper Text Markup Language) is used to show content on the page

More information

Table Basics. The structure of an table

Table 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 information

Using CSS for page layout

Using CSS for page layout Using CSS for page layout Advantages: Greater typographic control Style is separate from structure Potentially smaller documents Easier site maintenance Increased page layout control Increased accessibility

More information

Creating your first website Part 4: Formatting your page with CSS

Creating your first website Part 4: Formatting your page with CSS Adobe - Developer Center : Creating your first website Part 4: Formatting your page... Page 1 of 23 Dreamweaver Article Creating your first website Part 4: Formatting your page with CSS Jon Varese Adobe

More information

Introduction to using HTML to design webpages

Introduction to using HTML to design webpages Introduction to using HTML to design webpages #HTML is the script that web pages are written in. It describes the content and structure of a web page so that a browser is able to interpret and render the

More information

AGENDA. EMBEDDING FONTS [ Font Files & CSS font-family ] :: Online Font Converter :: ADD font-family css code to style.css

AGENDA. EMBEDDING FONTS [ Font Files & CSS font-family ] :: Online Font Converter :: ADD font-family css code to style.css CLASS :: 12 05.04 2018 3 Hours AGENDA CREATE A WORKS PAGE [ HTML ] :: Open index.html :: Save As works.html :: Edit works.html to modify header, 3 divisions for works, then add your content :: Edit index.html

More information

Configuring Hotspots

Configuring 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 information

ADVANCED CHARTING IN APPLICATION EXPRESS

ADVANCED CHARTING IN APPLICATION EXPRESS ADVANCED CHARTING IN APPLICATION EXPRESS Dimitri Gielis Apex Evangelists PURPOSE OF THIS PAPER More and more people prefer to have a graphical representation about their data. A picture shows more than

More information

Chapter 1 Introduction to Dreamweaver CS3 1. About Dreamweaver CS3 Interface...4. Creating New Webpages...10

Chapter 1 Introduction to Dreamweaver CS3 1. About Dreamweaver CS3 Interface...4. Creating New Webpages...10 CONTENTS Chapter 1 Introduction to Dreamweaver CS3 1 About Dreamweaver CS3 Interface...4 Title Bar... 4 Menu Bar... 4 Insert Bar... 5 Document Toolbar... 5 Coding Toolbar... 6 Document Window... 7 Properties

More information

epromo Guidelines DUE DATES NOT ALLOWED PLAIN TEXT VERSION

epromo Guidelines DUE DATES NOT ALLOWED PLAIN TEXT VERSION epromo Guidelines HTML Maximum width 700px (length = N/A) Image resolution should be 72dpi Maximum total file size, including all images = 200KB Only use inline CSS, no stylesheets Use tables, rather than

More information

Attributes & Images 1 Create a new webpage

Attributes & Images 1 Create a new webpage Attributes & Images 1 Create a new webpage Open your test page. Use the Save as instructions from the last activity to save your test page as 4Attributes.html and make the following changes:

More information

Do It Yourself Website Editing Training Guide

Do It Yourself Website Editing Training Guide Do It Yourself Website Editing Training Guide Version 3.0 Copyright 2000-2011 Sesame Communications. All Rights Reserved. Table of Contents DIY Overview 3 What pages are editable using the DIY Editing

More information

IBM Forms V8.0 Custom Themes IBM Corporation

IBM Forms V8.0 Custom Themes IBM Corporation IBM Forms V8.0 Custom Themes Agenda 2 Overview Class Names How to Use Best Practice Styling Form Items Test Custom CSS Sample Overview 3 To create custom theme you must be familiar with the basic concept

More information

INFS 2150 / 7150 Intro to Web Development / HTML Programming

INFS 2150 / 7150 Intro to Web Development / HTML Programming XP Objectives INFS 2150 / 7150 Intro to Web Development / HTML Programming Designing a Web Page with Tables Create a text table Create a table using the , , and tags Create table headers

More information

Contents. BEA WebLogic Mobility Server Mobilize Your Portal Guide

Contents. BEA WebLogic Mobility Server Mobilize Your Portal Guide Contents BEA WebLogic Mobility Server Mobilize Your Portal Guide Version 3.3 December 2005 Copyright Copyright 1995-2005 BEA Systems, Inc. All Rights Reserved. Restricted Rights Legend This software is

More information

Guidelines for doing the short exercises

Guidelines for doing the short exercises 1 Short exercises for Murach s HTML5 and CSS Guidelines for doing the short exercises Do the exercise steps in sequence. That way, you will work from the most important tasks to the least important. Feel

More information

MPX Server Software User Manual

MPX Server Software User Manual MPX Server Software User Manual Contents 1 Server Software Installation... - 3 - Initial Setup... - 6-2 Software Interface... - 10 - Login Page:... - 10-2.1 Homepage... - 12-2.2 Resources... - 13-2.3 Composer...

More information

Table of content. Creating signup form Associating automation tools to signup form Signup form reports...42

Table of content. Creating signup form Associating automation tools to signup form Signup form reports...42 A User Guide Signup forms are the most popular tools for building a subscriber database. They let your website visitors become subscribers by entering basic details such as name and email address. The

More information

RC Justified Gallery User guide for version 3.2.X. Last modified: 06/09/2016

RC Justified Gallery User guide for version 3.2.X. Last modified: 06/09/2016 RC Justified Gallery User guide for version 3.2.X. Last modified: 06/09/2016 This document may not be reproduced or redistributed without the permission of the copyright holder. It may not be posted on

More information

Contents AD SPECIFICATIONS AND STYLE GUIDE 2018

Contents AD SPECIFICATIONS AND STYLE GUIDE 2018 Contents Standard ad formats... 2 Bulletins... 3 HTML5 Creatives... 4 ZIP BUNDLES... 4 STUDIO... 5 Additional information... 6 What s happening to Flash?... Error! Bookmark not defined. Please always download

More information

As we design and build out our HTML pages, there are some basics that we may follow for each page, site, and application.

As 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 information

Creating HTML files using Notepad

Creating HTML files using Notepad Reference Materials 3.1 Creating HTML files using Notepad Inside notepad, select the file menu, and then Save As. This will allow you to set the file name, as well as the type of file. Next, select the

More information

Flash, Video. How to add Flash movies into your site How to add video and audio to your site HTML5 <video> and <audio> elements

Flash, Video. How to add Flash movies into your site How to add video and audio to your site HTML5 <video> and <audio> elements 9 Flash, Video & Audio XX XX X X How to add Flash movies into your site How to add video and audio to your site HTML5 and elements Flash is a very popular technology used to add animations,

More information

How to lay out a web page with CSS

How to lay out a web page with CSS How to lay out a web page with CSS You can use table design features in Adobe Dreamweaver CS3 to create a simple page layout. However, a more powerful technique is to use Cascading Style Sheets (CSS).

More information

A designers guide to creating & editing templates in EzPz

A 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 information

SupeTube Server Guide

SupeTube Server Guide SupeTube Server Guide SAFARI Montage now offers school districts a way to publish video content for anyone in the world to access. SupeTube provides a familiar web-based interface with thumbnails that

More information

The Benefits of CSS. Less work: Change look of the whole site with one edit

The Benefits of CSS. Less work: Change look of the whole site with one edit 11 INTRODUCING CSS OVERVIEW The benefits of CSS Inheritance Understanding document structure Writing style rules Attaching styles to the HTML document The cascade The box model CSS units of measurement

More information

AD SPECIFICATIONS AND STYLE GUIDE 2018

AD SPECIFICATIONS AND STYLE GUIDE 2018 Contents Standard ad formats... 1 Bulletins... 2 Rich Media Ad Units... 2 HTML5 Creatives... 3 ZIP BUNDLES... 3 STUDIO... 4 Additional information... 5 All creatives can be run through Third Party servers

More information

STD 7 th Paper 1 FA 4

STD 7 th Paper 1 FA 4 STD 7 th Paper 1 FA 4 Choose the correct option from the following 1 HTML is a. A Data base B Word Processor C Language D None 2 is a popular text editor in MS window A Notepad B MS Excel C MS Outlook

More information

AD SPECIFICATIONS AND STYLE GUIDE IMPORTANT INFORMATION Please ensure that all Third Party Tags are SSL compatible (see page 9)

AD SPECIFICATIONS AND STYLE GUIDE IMPORTANT INFORMATION Please ensure that all Third Party Tags are SSL compatible (see page 9) All creatives can be run through Third Party servers such as flashtalking, Sizmek, ADTECH or DFA if a file size larger than the stated amount is needed. Responsive Design Our sites have been designed to

More information

Downloads: Google Chrome Browser (Free) - Adobe Brackets (Free) -

Downloads: Google Chrome Browser (Free) -   Adobe Brackets (Free) - Week One Tools The Basics: Windows - Notepad Mac - Text Edit Downloads: Google Chrome Browser (Free) - www.google.com/chrome/ Adobe Brackets (Free) - www.brackets.io Our work over the next 6 weeks will

More information

KEEP THEM ON YOUR WEBSITE! INTEGRATING THIRD-PARTY TOOLS TO PROVIDE A CONSISTENT USER EXPERIENCE

KEEP THEM ON YOUR WEBSITE! INTEGRATING THIRD-PARTY TOOLS TO PROVIDE A CONSISTENT USER EXPERIENCE KEEP THEM ON YOUR WEBSITE! INTEGRATING THIRD-PARTY TOOLS TO PROVIDE A CONSISTENT USER EXPERIENCE Michael Braun Hamilton Reference and Web Design Librarian Community College of Vermont The Problem http:www.emporia.edu/libsv/

More information

Design Document V2 ThingLink Startup

Design Document V2 ThingLink Startup Design Document V2 ThingLink Startup Yon Corp Andy Chen Ashton Yon Eric Ouyang Giovanni Tenorio Table of Contents 1. Technology Background.. 2 2. Design Goal...3 3. Architectural Choices and Corresponding

More information

Release Date April 24 th 2013

Release Date April 24 th 2013 Release Date April 24 th 2013 Table of Contents 1. Overview...5 1.1 HTML Player...5 1.2 Why are we changing?...5 1.3 What do you need to do?...5 1.4 Will everything change to HTML?...5 1.5 Will the look/feel

More information

Third party edm - material specification

Third party edm - material specification In order to ensure a quick and smooth turnaround of EDMs, as well as to ensure correct and accurate delivery of the creative, it is necessary that the clients follow the guidelines below when submitting

More information

Using Dreamweaver CS6

Using Dreamweaver CS6 Using Dreamweaver CS6 4 Creating a Template Now that the main page of our website is complete, we need to create the rest of the pages. Each of them will have a layout that follows the plan shown below.

More information

OZONE Widget Framework

OZONE Widget Framework OZONE Widget Framework October 8, 2012 Publication/Revision History Release Date Revised Document OWF 6.0.1 October 8, 2012 Initial Document OWF 6 September 28, 2012 Contents 1... 1 1.1 Installation Information...

More information

Enlargeit! Version 1.1 Operation Manual

Enlargeit! Version 1.1 Operation Manual Enlargeit! Version 1.1 Operation Manual Contents Page 1 What is EnlargeIt! 2 2 What does EnlargeIt! need 2 3 Displaying pictures 2 3.1 Easy integration 2 3.2 Failsafe integration 3 4 Displaying flash (*.swf)

More information

Dreamweaver CS3 Lab 2

Dreamweaver CS3 Lab 2 Dreamweaver CS3 Lab 2 Using an External Style Sheet in Dreamweaver Creating the site definition First, we'll set up the site and define it so that Dreamweaver understands the site structure for your project.

More information

Insert/Edit Image. Overview

Insert/Edit Image. Overview Overview The tool is available on the default toolbar for the WYSIWYG Editor. The Images Gadget may also be used to drop an image on a page and will automatically spawn the Insert/Edit Image modal. Classic

More information

2004 WebGUI Users Conference

2004 WebGUI Users Conference WebGUI Site Design 2004 WebGUI Users Conference General Rules of Web Design Content is King good content is more important than anything else. keeps people interested. even if your design is bad, content

More information

Kaltura Video Package for Moodle 2.x Quick Start Guide. Version: 3.1 for Moodle

Kaltura Video Package for Moodle 2.x Quick Start Guide. Version: 3.1 for Moodle Kaltura Video Package for Moodle 2.x Quick Start Guide Version: 3.1 for Moodle 2.0-2.4 Kaltura Business Headquarters 5 Union Square West, Suite 602, New York, NY, 10003, USA Tel.: +1 800 871 5224 Copyright

More information

Modules Documentation ADMAN. Phaistos Networks

Modules Documentation ADMAN. Phaistos Networks Modules Documentation ADMAN Phaistos Networks Table of Contents TABLE OF CONTENTS... 2 KEYWORDS... 5 FLASH BANNERS... 6 Options... 6 Public methods... 6 Public events... 6 Example... 7 EXPANDING BANNERS...

More information

File: SiteExecutive 2013 Core Modules User Guide.docx Printed September 30, 2013

File: SiteExecutive 2013 Core Modules User Guide.docx Printed September 30, 2013 File: SiteExecutive 2013 Core Modules User Guide.docx Printed September 30, 2013 Page i Contact: Systems Alliance, Inc. Executive Plaza III 11350 McCormick Road, Suite 1203 Hunt Valley, Maryland 21031

More information

Scientific Communication CITS4008. Designing and Writing Web Pages Rachel Cardell-Oliver 2013 Based on notes by Robyn Owens

Scientific Communication CITS4008. Designing and Writing Web Pages Rachel Cardell-Oliver 2013 Based on notes by Robyn Owens Scientific Communication CITS4008 Designing and Writing Web Pages Rachel Cardell-Oliver 2013 Based on notes by Robyn Owens Proposed in 1989 by Tim Lee at CERN Mosaic released in 1993 Working group to define

More information

1.0 Overview For content management, Joomla divides into some basic components: the Article

1.0 Overview For content management, Joomla divides into some basic components: the Article Joomla! 3.4.x Training Manual Joomla is an online content management system that keeps track of all content on your website including text, images, links, and documents. This manual includes several tutorials

More information

Design Project. i385f Special Topics in Information Architecture Instructor: Don Turnbull. Elias Tzoc

Design 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 information

<body bgcolor=" " fgcolor=" " link=" " vlink=" " alink=" "> These body attributes have now been deprecated, and should not be used in XHTML.

<body bgcolor=  fgcolor=  link=  vlink=  alink= > These body attributes have now been deprecated, and should not be used in XHTML. CSS Formatting Background When HTML became popular among users who were not scientists, the limited formatting offered by the built-in tags was not enough for users who wanted a more artistic layout. Netscape,

More information

HTML TIPS FOR DESIGNING.

HTML TIPS FOR DESIGNING. This is the first column. Look at me, I m the second column.

More information

And program Office to FlipBook Pro is powerful enough to convert your DOCs to such kind of ebooks with ease.

And program Office to FlipBook Pro is powerful enough to convert your DOCs to such kind of ebooks with ease. Note: This product is distributed on a try-before-you-buy basis. All features described in this documentation are enabled. The unregistered version will be added a demo watermark. About Office to FlipBook

More information

Mindjet on-premise Release Notes: Version 3.1

Mindjet on-premise Release Notes: Version 3.1 Mindjet on-premise Release Notes: Version 3.1 January 30, 2013 Mindjet Corporation Toll Free: 877-Mindjet 1160 Battery Street East San Francisco CA 94111 USA Phone: 415-229-4200 Fax: 415-229-4201 www.mindjet.com

More information

MadCap Software. Movies Guide. Flare 2017 r2

MadCap Software. Movies Guide. Flare 2017 r2 MadCap Software Movies Guide Flare 2017 r2 Copyright 2017 MadCap Software. All rights reserved. Information in this document is subject to change without notice. The software described in this document

More information

Nielsen Answers User Interface Standards. Version 4.0 4/27/09

Nielsen Answers User Interface Standards. Version 4.0 4/27/09 Nielsen Answers User Interface Standards Version 4.0 4/27/09 Contents How to Use This Guide Contents INTRODUCTION... 1 HOW TO USE THIS GUIDE... 1 CAN T FIND THE STANDARD YOU NEED?... 1 APPLICATION TYPES...

More information

Chapter 1 Self Test. LATIHAN BAB 1. tjetjeprb{at}gmail{dot}com. webdesign/favorites.html :// / / / that houses that information. structure?

Chapter 1 Self Test. LATIHAN BAB 1. tjetjeprb{at}gmail{dot}com. webdesign/favorites.html :// / / / that houses that information. structure? LATIHAN BAB 1 Chapter 1 Self Test 1. What is a web browser? 2. What does HTML stand for? 3. Identify the various parts of the following URL: http://www.mcgrawhill.com/books/ webdesign/favorites.html ://

More information

Getting Started. Player App Installation. Updated on October 2, 2017

Getting Started. Player App Installation. Updated on October 2, 2017 1 Getting Started Updated on October 2, 2017 Player App Installation If the hardware you are using did not come pre-installed with the Revel Player app you will need to install this first. Windows hardware

More information

HTML5. clicktag implementation

HTML5. clicktag implementation HTML5 clicktag implementation Date: 18 02-2016 Version: 2.0 Summary Introduction... 3 Google Web Designer... 4 Adobe Edge... 5 Swiffy... 7.swf file with clicktag... 8 Case 1: clicktag explicit... 8 Case

More information

FORMS. The Exciting World of Creating RSVPs and Gathering Information with Forms in ClickDimensions. Presented by: John Reamer

FORMS. The Exciting World of Creating RSVPs and Gathering Information with Forms in ClickDimensions. Presented by: John Reamer FORMS The Exciting World of Creating RSVPs and Gathering Information with Forms in ClickDimensions Presented by: John Reamer Creating Forms Forms and Surveys: When and What to Use them For Both Allow you

More information

Web Community Manager 2.20 Release Notes

Web Community Manager 2.20 Release Notes New or Changed Functionality or User Experience GENERAL Sign-in with Google Login You can now allow users to sign-in with their Google TM login information. The user s Google email address must be associated

More information

Styles, Style Sheets, the Box Model and Liquid Layout

Styles, Style Sheets, the Box Model and Liquid Layout Styles, Style Sheets, the Box Model and Liquid Layout This session will guide you through examples of how styles and Cascading Style Sheets (CSS) may be used in your Web pages to simplify maintenance of

More information

Video Embedder. Plugin for Joomla! This manual documents version 9.x of the Joomla! extension.

Video Embedder. Plugin for Joomla! This manual documents version 9.x of the Joomla! extension. Video Embedder Plugin for Joomla! This manual documents version 9.x of the Joomla! extension. https://www.aimy-extensions.com/joomla/video-embedder.html 1 Introduction The Joomla! plugin Aimy Video Embedder

More information