Welcome to Xara Online Designer

If you're using Microsoft OneDrive, Dropbox or Google Drive for storage of your

document (.xar or .web) files, there's now an innovative way of editing the content of

your document using an online web application.

Just using a web browser you can open any .xar or .web file, view and edit the text,

replace photos, and re-publish your document. Yes, this means you can view and edit

your Xara files that are on your Windows computer, using your iPad, Android tablet or a

Mac, from anywhere in the world.

This shows the Online Designer editor in a browser window (this document). Thumbnails of the document are on the left. The controls on the top bar access the main features. The right side shows the properties panel, in this case for editing text. Warning: Beta: This is also Beta software subject to bugs, and regular changes and updates.

Free or Premium version

There are two version of the online editor. A free ‘Client Editing’ version that has limited editing capabilities, and a Premium version, that is available to all owners of the current version Web Designer or Designer Pro, that has more powerful editing capabilities. Here’s a Feature Comparison Chart of the differences.

Quick Start Guide

1. Go to cloud.xara.com and click the Designer sign-in. 2. Choose the Xara sign-in option and enter the username and password you used to purchase Web Designer or Designer Pro. 3. This takes you to the file picker where you can open any .xar file you have saved in OneDrive, Dropbox or Google Drive. The first time you access these you will be asked to grant permission to access your files. 4. The operation of the editor should be pretty self evident. Click on the text to edit, or click on a picture to adjust or replace it. 5. There are options under the Documents menu to Save (which saves a copy back to your cloud drive and will be synced back to your Windows computer). To save a copy (like Save As) first select ‘Make a copy’ then you can Save to any cloud drive location. 6.  If you have saved the web hosting FTP details in the document, you can re- publish your website by selecting this Share icon. The text editor provides the usual text options, and selection of pre-defined Text Styles in the document. Use the links on the left to discover more.

Use cases

Shared editing

If you use the file sharing capabilities of Dropbox or Google Drive you can allow third parties to view and even edit your .xar file using just a web browser.  Why is this useful? Consider these scenarios:

1) Website Design for your clients

Web Designer and Designer Pro are used by many professional web designers - it's the fastest way to prototype websites, to produce and publish no-programming, designer- created websites. Now Xara Online Designer gives you (the website designer) the ability to allow your client (the customer) to update specific parts of their website, using any web browser, and re-publish their own changes.  This is a type of Content Management System (CMS) that is super-easy to use (not to say really fast, fluid, and WYSIWYG). Website owners, often small business owners, rarely have the time, skill or inclination to learn web design or new desktop software. We have designed Xara Online Designer to be usable by even the most non-tech savvy users. This allows, for example, the client to update the content and replace pictures. They click Save using Online Designer, and within 30 seconds or so, your Designer file has been updated on your computer with all their new content.  They click ‘Publish’ and
their website is updated. The great thing about this approach is that the client cannot mess with the design - they can only update the text and pictures, using a web-based system that dramatically simpler and easier to use than alternatives.  Your client has the power to update and re-publish their content, as often as they like, without involving you - and their files are synced to your cloud drive (and desktop computer). Q: How does the client actually get access to Xara Online Designer since currently only paying Web Designer users can access it? A: They can obtain a Xara Online Designer client license through the Xara shop, that gives them access to Xara Online Designer. This is currently (while in Beta) free of charge.

2) Update your own websites and Xara documents from

anywhere

Xara Online Designer means you can now update the content, add or replace pictures, save your file, and re-publish your website using just a web browser, even an iPad or Android tablet.  If you have the Dropbox or Google Drive utilities installed on your desktop computer your changed files will automatically be updated on your computer as well. Update your news, your blog content, your prices, food menus, or product descriptions, from anywhere, using any connected PC or tablet. This release is focused on updating website content, but Xara Online Designer can open any Xara .xar file, so you can use it as an online word processor, or a way to update the content of any Xara file - DTP documents, Presentations, documents of any type.  And, thanks to desktop sync via Dropbox or Google Drive, the file you’re updating online, is the same one as you have on your desktop computer.

3) Collaborative Documents

Say you’re working on a Web Presentation created using Web Designer. But you have multiple people who contribute content, perhaps one designer who controls the overall look and graphic design of your presentation.  The designer can use the full power of Web Designer desktop version, shares that file with one or more colleagues, who can add content using the Xara Online Designer editor. All editing the one file,  synced back through the cloud to the desktop of anyone who wants the file.

How to use the Online Designer editor

In order to use the Premium version you need to be the registered owner of the current version of Xara Web Designer Premium or Xara Designer Pro product purchased through the Xara store.

First time use of Xara Online Designer

Go to cloud.xara.com and click the sign-in link. You will be presented with this sign-in screen. These 4 options allow you to sign-in via different services,  Xara, OneDrive, Google or Dropbox. You do not need to create a new account with a new username and password - you can sign in with your existing Xara account (that you used to purchase Web Designer), or you can sign-in through Google or Dropbox. Important: The first time you sign-in, if you use Google or Dropbox, the email associated with those accounts must be the same as you used to purchase Xara Web Designer or Xara Designer Pro. By clicking the Dropbox, Google or OneDrive links here, you will be transferred to their servers, and asked whether you give permission for Xara Online Designer services to access your files. In order to use this service, and edit Xara files in the cloud, it must be available in the cloud - your files must be stored in Dropbox, Google Drive or OneDrive. If you are not already signed into Dropbox, Google or OneDrive you will be asked to enter your credentials. It’s important to understand that you are now on Dropbox,  Google or OneDrive website at this point. Xara does not know and cannot access, by any means, your Dropbox, Google or OneDrive account credentials. The benefit of signing in with Google or Dropbox, is that you do not have to remember another account username / password. If you are signed into these services (if you use them regularly you almost certainly are already) once you have granted Xara permission, you will not need to enter any username / password details again. Getting access to Xara Online Designer is then a one click process.
Dropbox is asking if it’s OK to give access to Xara Online Designer Accessing your files: Since you are editing Xara files stored in Dropbox, Google or OneDrive cloud, our servers need to access those files - which is why this permission request happens.  Once you have given permission to see your files (and save edited files back to your cloud drive) then you pick the files you want to edit using the Xara Online Designer file picker - see below. Technical note: This system is called OAuth and is used by thousands of companies that provide services that want to read or write files to your cloud drive such as Dropbox, in a secure and safe way that does not send your passwords to the services accessing your cloud drive. No files are accessed until you pick them in Xara Online Designer.  You are in charge and you can withdraw access rights at any time using the corresponding cloud drive websites. You pick the files you want to edit, and when it comes to saving them, where in your Dropbox, Google Drive or Microsoft OneDrive you want to save them.

What if my Dropbox or Google email does not match the one

used to purchase Web Designer?

This is fine. Sign-in for the first time using the Xara account credentials, (the same one used to purchase Designer). Once you’re signed-in, click the Google Drive, Dropbox or OneDrive icons in the picker - these services will ask your permission to connect Xara Online to your cloud-drive, as shown above. But once this is done, you can sign-in but just clicking the Dropbox or Google link on the sign-in panel. There’s no longer any need to use the Xara username and password. Instead Dropbox, Google or One Drive will authenticate you. If you’re logged into any of these services already (you probably will be) then there’s no need to enter any username and password - you get one click access to Xara Online Designer.

Picking your documents from the cloud

When you want to edit a Xara document online you use the file picker, that looks like this: The large icons above the ‘Recent Documents’ label are the different cloud drive services we support Google Drive, Dropbox (OneDrive coming soon).  Just click one of these to get a view of the Xara files in that cloud-drive, and navigate to the file you want to open. Just click a file to edit. The lower half of the screen shows thumbnails of all recent documents, showing the date last accessed and which cloud drive the file came from.

File picker tips

The controls, top right, allow you to sort by Date or Name, and view by thumbnail or list. In List view you also sort by file size. The file picker only shows .xar and .web document files. When you’re picking images (you can replace images in your document) it shows image thumbnails. You can zoom the thumbnails to be smaller or larger by using Ctrl + mouse wheel. On a touch-driven device just pinch zoom. Whenever you choose to open or save a file, the picker always starts from this ‘home screen’ showing the different cloud drives you can pick from, and recent files. But when you go into any cloud drive, it will remember where you were last. When navigating the file picker, the top left shows you the path you are currently looking at. You can navigate up the hierarchy by clicking any of the folder names and back to the home screen by clicking the cloud icon: The X, left end, will close the file picker and return you to the editor. The cloud icon is the picker home screen, where you can pick which cloud drive, and see recent files.
On desktop mouse systems if you hold the pointer over a file it shows you the full filename and size. When you access a folder of Xara documents for the first time, the file thumbnails have to be generated, which can take a few seconds. After this they are cached and subsequent access to this folder will be faster.

Using the Online Designer editor

When you pick a .xar or .web file from your cloud drive it opens the editor onto your document. Xara Online Designer editor (editing this document) showing the document (and items on the pasteboard), thumbnails of the pages down the left side, controls along the top. The user interface is the same for touch-based devices such as tablets and for desktop. The text editing side panel show on the right, appears automatically on wide screens, but not for narrower screens such as tablets. In the latter case it’s necessary to click the properties control button  on the top bar to show, or hide it again.
The controls for Xara Online Designer are very simple, with just a few buttons along the top bar: The center region of the top bar show various status messages, and if there’s nothing selected on the page, the filename of the current file. Tip: Press Esc to clear any selection, or tap on the background. Tip: Hold the mouse pointer over the filename on the top bar to see which cloud drive and pathname of the file (Dropbox only).

Navigating around your document

All pages in your document are shown one above the other, even for websites. This is like selecting the ‘Multi-page view’ in desktop Web Designer. You can push pages around (scroll) by simply dragging anywhere on the page - even on non-selected objects. This is true of touch and mouse systems.  Scroll bars appear as soon as you move the page or move the mouse near the page edge - you can drag these as normal to rapidly move through the document. Alternatively, when over selected text (where a drag would normally select some text) you can press the mouse center button (the wheel) and drag. The system offers fast, fluid ‘momentum scrolling’ on all devices. This is common on touch-based devices such as phones and tablets. You can ‘throw’ a page in one direction to rapidly scroll up or down. Just tap to stop scrolling. On the left edge we show page thumbnails, Simple click a page to scroll to that page. For longer documents you can scroll the page thumbnail area by using mouse wheel, or dragging on the thumbnails. You can hide and show the thumbnail panel by sliding left / right on it, or just tapping the projecting ‘drag handle’.
Open, and save your documents Add items to the page Text editor controls Publish Settings & Sign-out Undo and Redo Current file, and selection status

Zoom

Uniquely for a web based application, Xara Online Designer editor offer the classic Xara feature of an amazing zoom range, but that’s actually faster and more fluid than desktop software (assuming you have a reasonably modern computer).  There are numerous ways to zoom in and out on your document: Hold Ctrl or Shift keys down and use mouse wheel. This zooms in around the mouse pointer position Ctrl+0 (zero) key will zoom to 100% view Ctrl with (+) plus and (-) key to zoom in /out one step On touch based device you can use pinch-zoom gesture. There’s also a zoom tool a magnifier icon lower left corner. This operates in two ways: Drag the magnifier icon up the left edge of the screen to zoom in Drag right along the bottom edge to zoom out. This zooms around the center of the screen, but you can set a zoom focus point by clicking on the magnifier and clicking on the point you want to zoom into. After this dragging the magnifier will zoom around that point on the page. Click the magnifier and drag across the screen to zoom into that area. Double click on the magnifier to toggle between current and previous zoom level. Note that in the current version most non-text objects on your page are shown as bitmaps, so zooming into vector graphics shows them as blurred.

Editing Text

Just click or tap on your text, to place a caret and display a slide-in panel of text controls. For narrow screens, such as tablets, the side panel does not automatically appear - tap the properties icon  to make it appear, or disappear. Beta Note: The current version cannot edit text that is within groups, and this often includes headings, text in side panels etc. This restriction will be removed in a forthcoming update.
image caption
The text editor controls appear when you click on some text. You can hide and show the side-panel by clicking the ‘Controls’ icon on the top bar   or by swiping right to hide it. The text controls are limited to selecting Text Styles (as defined in the document) and the usual Bold, Italic, Underline, Strike-through controls. The yellow  Hi  applies a yellow highlight color (text background). If you want a wider range of text style options, define additional Styles in the Designer desktop software - these will appear in the Style menu, top of the text editor controls.

Key short-cuts

The editor supports a wide range of key short-cuts. You can find the list under the Settings menu.

Variants

If you’re editing a Responsive Website design that has one or more variant designs (for mobile etc), you can select the different variants under the Settings menu, top-right: As with the desktop Web Designer editing the content in one variant will update it in the other variant, assuming it’s been ‘live shared’ across both variants.

Replacing Photos

You can replace ‘simple photos’ in this version. These are plain images on the page that are not grouped, inline, or with attributes such as outlines, shadows etc. (Support for these will come later.)
You can replace images three ways: Drag and drop a image file from your file explorer onto the image Click the image and select the ‘Replace’ menu, or the + icon on the top bar where you can either select a file form your local disc, or Pick the image from Dropbox or Google drive cloud drive. When uploading an image from your local computer (the first two above), the image is resized before being uploaded, to be HD resolution (which is usually more than enough for any website). This speeds up the upload process. For example uploading a full res original 8 Mbyte photo file might take 4 minutes with a typical home ADSL internet connection, but only 30 seconds using this system. If your photos are stored in Google or Dropbox it’s recommended to select the ‘From cloud drive’. That will take a second or two only even for full res images. (Because the image is transferred directly from Google or Dropbox servers to our servers, which is a very fast operation).

Adjusting Photos

When you select a simple image you get two adjustment controls that appear in the top right and bottom left corner. You can drag on these controls to adjust the size and rotation of the image in the frame (top right control) and to adjust the position within the frame (the hand control). This is particularly useful for images that are an unusual aspect ratio, such as the above example. The operation of this is not unlike the fill tool in desktop Web Designer, except that you see a faint version of the whole image as you drag to tell the extent of the full un- cropped image.

Saving & Syncing

The document you are editing is on Xara servers in the cloud. When you click Save (Documents menu, top left) or type Ctrl+S, it saves the document back to your cloud drive.  If you have the Dropbox, Google Drive desktop sync utility running on your desktop computer, or you’re using Microsoft OneDrive with Windows 8 or 10, then a few seconds later the file will be saved back to your computer.  If you have the file open in the desktop Designer program, it will be opened in the desktop version.
Similarly if you have the same file open in the desktop version of Web Designer or Pro X11 on your Windows computer, do a Save operation to your Dropbox, Google or OneDrive folder, it will get synced to the cloud, and from there to the Xara server and into Xara Online Designer editor. So you can edit your document in the cloud or on the desktop, click Save in either and the other will be updated a few seconds later.

Edit clashes

It’s important to realise that this means the same document can be edited in two places at the same time - on your desktop and in Xara Online Designer, and that saving from one will overwrite the file open in the other editor. But in this case both the desktop Web Designer and Xara Online Designer will detect and alert you that the file has been modified. You get the option of discarding your changes, or keeping them in a new document. Incidentally the same applies if two people are editing the same file, using desktop Web Designer, that is shared in Dropbox, Google or OneDrive. The simple answer in these cases is to manage a hand-over of editing. Both editors will also detect the file has been changed externally, and if this document is open, with no local changes, will just re-open it. For example, if you have a file open in Web Designer and Xara Online Designer, you can save in one, or the other, and after the sync has occurred, the other will automatically be updated. So it’s recommended that when editing the same document on your desktop and in the cloud, you save regularly, which causes the other one to be updated. And that you do not make edits in one, then the other, without saving.

Save As..

You can save a copy of the file you’re working on by selecting the Documents menu ‘Make a copy’. This will create a ‘homeless’ copy of the file that is not associated with any cloud drive.  If you now select Documents > Save, you can select a cloud drive, and navigate to the desired folder to save.

Publishing

If you save the Publish settings in the .xar file, (Publish tab on the Web Properties dialog - select the ‘Save Publish Settings in document option) then you can also publish a file directly from Xara Online Designer. Just choose the  Share icon on the top bar. If you have not saved the password in file, you will be promoted for it.

What you can and cannot edit using Xara Online

Designer

1. Text editing is deliberately limited to selecting or applying only named Text Styles saved in the document, simple effects such as bold, italic, strike-through etc. The list of available short-cuts for these is listed under the Settings menu, top right: 2. Click the Settings menu and chose ‘Latest Updates’ to read what the latest additions and fixes are. This also includes a list of known restrictions and bugs.  This is Beta software and is evolving rapidly. 3. You can’t edit navigation bars. 4. You can’t edit text on layers. 5. The + menu has only a limited number of options for adding content currently - it will be expanded over time. It is our goal that all of these things will be editable in Xara Online Designer in due course. Other Notes:

How does Xara Online Designer work?

We are running a special version of the Xara Designer program on Xara servers, accessed and controlled via the web browser.  It’s important to understand that this is not a browser version of Xara Designer (your document is not just stored in the web browser). The edits you are performing are happening on the server version of Designer. When you click Save, nothing is going from your browser - this saves from the server version direct to your cloud-drive, such as Dropbox.  Dropbox will then, in turn, sync that file to your desktop. If you have that file open in your desktop Designer, it will automatically re-open the updated version. This sync process, from the time you click Save to the time it’s updated on the desktop typically takes 30 seconds or so - depending on the size of the file and the speed of your internet connection.  Similarly if you make edits on your desktop version, click save, Dropbox will upload this to the cloud, which is then, in turn, transferred to the Xara Online Designer, where you will see those changes in your browser. This direction can take longer, especially for large files, because many internet connections are slower at uploading files. Continual Cloud Sync As you make changes to your file in Xara Online Designer it is continually updating the server version of your document (the thumbnail pulses to indicate a server update). It doesn’t matter if you get disconnected from the Internet, or you do a browser re-load, or even close your browser, all your edits are safe. You can select Documents > Save  (or Ctrl+S) to save the changes back to Dropbox or Google Drive (and thus to your local hard disc if you have these set to sync to your computer). The next time you go back
into Xara Online Designer, from any computer or tablet, this document will be in the Recent Document list for easy one-click recovery. If you leave the web browser unattended for 30 minutes, or if you close the browser, switch off your computer or even have a power cut, all your edits are safe and saved back to the cloud drive it came from.

Is my document secure? Can other people see my files I’m

editing?

All communication with your browser uses encrypted connection layers, using the equivalent of https (the same as secures your details when purchasing or entering credit card details).  The security of your documents in Dropbox or Google drive depends primarily on the strength of your password. You are strongly recommended to use two-stage authentication (Dropbox details) (Google details).  The security of files in Google or Dropbox (assuming you use sensible passwords) is as great, and probably greater than, files stored on your local hard disc (it’s likely easier to hack your computer than it is to hack Google).

Sharing files so other can see or edit your documents

To share files just make sure they are saved to your Dropbox, Google or OneDrive folder on your computer. With both Google Drive and Dropbox you can share a folder with anyone else who is using those services. You can do this via their websites, or by right clicking on a folder on your hard drive (assuming you have installed Google or Dropbox file sync applications). Note: These cloud-drive services also provide a quick ‘share a link’ option for files. This is currently not suitable for sharing Xara files for editing online. You need to share a folder with the recipient who also needs to have a similar cloud- drive account. The person you are sharing the folder with needs to be able to see the folder and files in their Dropbox or Google Drive. They can then open the same file using the Online Designer file picker - and you can now edit this file together.  Once you have given access to someone else to access your files, you can just copy the page URL of the document in Xara Online Designer, and send that to you collaborators.  Only those authorised to see the document (as determined by your share options in Dropbox and Google) will be able to open and edit it. Obviously, from a security point of view, you should only share the folder or files in Dropbox or Google with those you want to edit your Xara files.

Compatibility

Because Xara Online Designer is web-based, it’s compatible with all computers that can run a modern web browser, be it a Raspberry Pi, Chromebook, Linux computer, any modern Android tablet (running Chrome browser), iPad or Macs. We recommend using ‘evergreen’ browsers, that are self updating so they get regular
bug fixes and feature enhancements. This includes Internet Explorer 11, Microsoft’s new Windows 10 Edge browser, the latest versions of Firefox for desktops  Chrome (and Chrome for Android) and Safari for OSX and iOS. On Android please use the latest Chrome for Android, not the old ‘native browser’.

Touch interfaces

Xara Online Designer is compatible with and designed from the ground-up to work with touch-driven screens, including desktop computers, laptops, and tablets (iPads and Android tablets). It is not recommended to use this on small screen devices such as phones. Pinch Zoom Xara Online Designer is designed to work with the usual tablet touch gestures such as scrolling the page (with momentum scroll), and pinch zoom.  In fact the two finger pinch gesture performs a combined zoom and pan operation.

Tablets

Like a native tablet app On both iPads and Android tablets you can ‘save to home screen’ the Xara Online Designer app, and when launched from the home screen, it behaves more like a dedicated native app - it has no browser ‘chrome’, so the app works full screen. You should find that it behaves as fast and as smoothly as equivalent native apps. On iPad click the highlighted icon and select ‘Add to Home Screen’.  Make sure you are running iOS version 8.3 or later as Apple fixed some important bugs in this area. Portrait orientation is better on tablets Holding a tablet upright gives you more working area with the soft keyboard on screen. See below:

Google Drive on the web

Google’s plan is that you can use Google Drive on the web, as a purely web-based operating system, with your files and your applications all being web-based ‘in the cloud’. Everything operated using only a web browser, from anywhere in the world, from any device. Xara Online Designer fits with that vision. A web-based way of viewing, editing and publishing your documents. Thumbnails When you save a file using Xara Online Designer, it will create thumbnails for the file that is visible in the Google Drive web version (if you put it into Thumbnail view). Open with… Google Drive goes further than Dropbox, in that you can associate file types with web applications, so that double clicking on your file, (or right click and Open With…) in the web version of Google Drive, it will open the file directly in Xara Online Designer (in a new browser tab). You can now edit and Save and you file isa saved back to the cloud - no need to use desktop software for any part of the process.
Left: Online Designer on an iPad.  If you ‘save to home screen’ Xara Online Designer operates like a native app.  In portrait orientation there’s more screen area to view the document and controls.  The left thumbnail bar and the text edit control can be hidden to give even more space. (Slide the thumbnail side-bar off the screen. Or, can hide and show the text controls using the top bar icon, shown in blue).  You can use Bluetooth external keyboards with both Android and iPad tablets, in which case the on-screen keyboard is not shown.