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.
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).
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’.
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.
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.
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.