Welcome to Xara Online Designer
If you're using 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. 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: Current versions of the Xara Online Designer editor are limited to just editing text and simple image replacement. You cannot (yet) perform other edits. This is also Beta software subject to bugs, and regular changes and updates.
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 Dropbox, 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. Editing is limited to changing text, and replacing simple pictures. The text editor provides the usual text options, and selection of pre-defined Text Styles in the document. Beta Note: The current release has some significant limitations. You can’t edit text inside groups. Picture editing and replacement is limited to plain images, not within in groups or inline or with effects such as shadow and outlines. These limitations will be addressed soon. 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 Designer 11. 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
You need to be the registered owner of a Xara Web Designer 11 or Designer Pro X11 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 (coming soon) 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 Web Designer 11 or Designer Pro X11. 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?
You can sign-in for the first time using the Xara account credentials, (the same one used to purchase WD11 or Pro X11) and connect to either or both of Dropbox or Google Drive later. In this case the email address used by your Dropbox or Google does not have to be the same as for Xara account.
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 soo. 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 Xara 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. Picture needs updating. The user-interface in Xara Online Designer is very simple with just a few controls along the top:
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).
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’.
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. 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. In this first release, only editing of text, and replacing of ‘simple images’ is enabled. 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 grouped items, and this includes buttons, graphics, navigation bars 4. There is no page control to add / remove pages. 5. You can’t edit text on layers. 6. The + menu is only useful for replacing images in simple photos at this 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.
