Preview on Mobile Device

klaatu

Hey everyone. When Trivantis released 16.2 one of the new features added was a "slim server" to preview your content. Until Sergey told me to look at the URL when I launched a preview in a browser, I had not noticed it. This is a wonderful addition and unless I missed it, I'm surprised Trivantis did not make it more well known. I usually use a local server, like Wammp, to preview my web design work, spa's and e-learning content to see how they look and function on actual mobile devices. For content created in Lectora this is not necessary anymore. Try this, it is simple.

First, you need to make sure that both the computer with Lectora and whatever mobile device you'll be using are on the same wifi network. Then, open up a command prompt on the computer and type ipconfig. Jot down the Ip address of your computer.

Next, in Lectora, preview your project in a browser. Look at the URL. You should see something like localhost:3750/intro.html. Localhost is the hostname of the computer your on and the number after the colon is the port. The initial page name follows.

With this preview up, open a browser on your mobile device and in its address bar enter the ip address you jotted down followed by a colon, the port, forward slash and page name form the browser preview. Example 192.168.1.3:3750/intro.html

You should now be looking at your preview on the mobile device. If this is not working for you first make sure that both devices are on the same network. If they are you might have to check to see if port 3750 is being blocked by the computers firewall. If so, you'll have to add it as an exception.

This is the best method to preview your hard work to make certain it will look and function as you want especially when your working with responsive design.

Thanks again to Sergey for making me aware of it. Great feature, Trivantis!

mnotermans5114

Recently i am using Ghostlab2 to preview Lectora projects directly on desktop, mobiles and tablets simulteanously. I have to do some more tests whether it fullfills its promises, but sofar it looks good.

http://www.vanamco.com/ghostlab/
https://www.youtube.com/watch?v=LaKGPK-q1f0

Main advantages i think so far are:
- easy use of QR codes to directly see your project on any device
- test in 1 device and see the others reflect changes
- have inspector tools available for all devices

Sounds like a salesperson, but well when working on complex multidevice projects as i am any improvement on testing it on all devices is a big win of time ;-)

~Math

jvalley4735

We're glad you liked the enhancement!

ssneg

Lectora Online generates a QR code for previewing on a mobile device. Lectora Desktop could do the same since it can get the local IP of the machine and encode it into the QR code.

mnotermans5114

Lets hope we get something like it for the upcoming releases. I do like the approach of Ghostlab. Using QR codes to quickly get access on your devices, but even better it syncs your devices simulteanously. Working perfectly on a combo of my Mac, Samsung and iPad and iPhone... so i develop and test on my Mac/PC... when published from Lectora pull the html inside Ghostlab and see it on all my devices. I am not sure yet ( have to do some more testing ) whether Ghostlab uses the proper RCD views Lectora generates or just pushes a desktopview into a view for the specific device...Have to test that...

But in the end..for future releases of Lectora it would be nice to have:

• QR codes for publish and test ( also in publisher/inspire )
• Linked setup like in Ghostlab.
• Inspection tools for your html. Preferably on your desktop, but when linked you could inspect your devices.

Ghostlab shows how. Really could speedup multidevice development...

 

~Math

klaatu

I think it's nice enough to have the slim server built in. QR codes would be nice but I'd rather see effort being put towards making Lectora build SVG and CSS buttons, standard media queries in external CSS, and the correction of any possible outstanding bugs.

jvalley4735

In 16.2 when publishing to RL you do automatically get a QR code created when the content is published.  This is so you can easily share the course with reviewers.  Would you like to also see this feature included with other publishing options like HTML or SCORM?

mnotermans5114

@Jennifer YES

jvalley4735

I've brought this to the developers attention. Thanks for the suggestion!