How to make sure your application fit into all devices
Quote from rocote on August 27, 2020, 9:44 pmHi Luis.
What's the best way to make sure my app works well on desktop and mobile devices (phone and tablet)?
I am of course talking about VisualNeo Web.
Roger
Hi Luis.
What's the best way to make sure my app works well on desktop and mobile devices (phone and tablet)?
I am of course talking about VisualNeo Web.
Roger
Quote from luishp on August 28, 2020, 9:49 am@rocote, unfortunately there is not an easy answer for your question because there are many different techniques to solve the multiple decvice screen resolution problem:
- You can just zoom in or out your design to fit the device screen. This is the easiest way and you can accomplish it using FitAppToScreen command. The problem is in some devices the font size and the whole design could be quite big or very small, not getting the best results on every device.
- An alternative is to have different designs for each screen resolution so you redirect the user to the appropiated design using different Pages sizes. In this case use SetResponsivePages command in combination with the appropiated CSS to make each Page to get a different size.
- Another option is to detect the device (desktop, tablet or mobile) and redirect the user to the appropiated App using neoDeviceGetInfo to detect the device and LoadApp to load the appropiated app.
- Finally real Responsive Sites use BootStrap built-in CSS classes (included in VisualNEO Web) or the newest Fluid CSS Grid Layout present in modern web browsers. Both of them require some CSS expertise.
Latest VisualNEO Web version (20.8.22) includes some enhancements to facilitate the creation of responsive sites. I will share some samples in the near future, so they can be used as templates but, as responsive sites do not use absolute positioning, it's not possible to just drag and drop VisualNEO Web objects and it's necessary to work with HTML code a lot more.
Regards.
@rocote, unfortunately there is not an easy answer for your question because there are many different techniques to solve the multiple decvice screen resolution problem:
- You can just zoom in or out your design to fit the device screen. This is the easiest way and you can accomplish it using FitAppToScreen command. The problem is in some devices the font size and the whole design could be quite big or very small, not getting the best results on every device.
- An alternative is to have different designs for each screen resolution so you redirect the user to the appropiated design using different Pages sizes. In this case use SetResponsivePages command in combination with the appropiated CSS to make each Page to get a different size.
- Another option is to detect the device (desktop, tablet or mobile) and redirect the user to the appropiated App using neoDeviceGetInfo to detect the device and LoadApp to load the appropiated app.
- Finally real Responsive Sites use BootStrap built-in CSS classes (included in VisualNEO Web) or the newest Fluid CSS Grid Layout present in modern web browsers. Both of them require some CSS expertise.
Latest VisualNEO Web version (20.8.22) includes some enhancements to facilitate the creation of responsive sites. I will share some samples in the near future, so they can be used as templates but, as responsive sites do not use absolute positioning, it's not possible to just drag and drop VisualNEO Web objects and it's necessary to work with HTML code a lot more.
Regards.
Quote from rocote on August 28, 2020, 7:13 pmYou're right, it's not an easy answer to explain. But as you say, with examples in a VisualNeo Web application, this will definitely help.
I thank you all the same for the notes you added. It's already a good start.
Luis, I take this opportunity to give everyone a little gift. I hope it will be okay with you.
I thought I would share my latest pieces of music that I composed with everyone in order to relax or entertain you while you work on programming with VisualNeo Web or VisualNeo Win.
The pieces are on Youtube and they are in public mode. So you can share them with anyone if you want.
Good day everyone!
Here's the links (3 pieces)
Presto
C’est la vie …
Libération (New link)
Abbey Road (Arrangement) - I removed PRIVATE mode and replaced it with UNLIST because it seems that private was not working. Hope it is working for everyone now. All voices from this arrangement are original (A Capella) from the group members find on YouTube. But all instruments are played or written by me.
Happy programming everyone!
You're right, it's not an easy answer to explain. But as you say, with examples in a VisualNeo Web application, this will definitely help.
I thank you all the same for the notes you added. It's already a good start.
Luis, I take this opportunity to give everyone a little gift. I hope it will be okay with you.
I thought I would share my latest pieces of music that I composed with everyone in order to relax or entertain you while you work on programming with VisualNeo Web or VisualNeo Win.
The pieces are on Youtube and they are in public mode. So you can share them with anyone if you want.
Good day everyone!
Here's the links (3 pieces)
Presto
C’est la vie …
Libération (New link)
Abbey Road (Arrangement) - I removed PRIVATE mode and replaced it with UNLIST because it seems that private was not working. Hope it is working for everyone now. All voices from this arrangement are original (A Capella) from the group members find on YouTube. But all instruments are played or written by me.
Happy programming everyone!
Quote from rocote on August 28, 2020, 7:42 pmThank you Luis. Give this one to your son. I think he his playing guitar. Hein? :)
Abbey Road (Arrangement) - I removed PRIVATE mode and replaced it with UNLIST because it seems that private was not working. Hope it is working for everyone now.
Thank you Luis. Give this one to your son. I think he his playing guitar. Hein? :)
Abbey Road (Arrangement) - I removed PRIVATE mode and replaced it with UNLIST because it seems that private was not working. Hope it is working for everyone now.
Quote from CDY@44 on August 29, 2020, 3:17 amHi Luis,
Some samples will be very appreciated ! Also help file for plugins (actions in red).
Best regards,
Hi Luis,
Some samples will be very appreciated ! Also help file for plugins (actions in red).
Best regards,
Quote from rocote on August 29, 2020, 4:31 pmСпасибо большое, Вадим. Когда я изучал музыку в университете, я открыл для себя великого русского композитора. Музыка очень жива в России и в Европе. Спасибо за ваш комментарий, мы очень ценим его.
Роджер :)
Спасибо большое, Вадим. Когда я изучал музыку в университете, я открыл для себя великого русского композитора. Музыка очень жива в России и в Европе. Спасибо за ваш комментарий, мы очень ценим его.
Роджер :)
Quote from luishp on August 29, 2020, 6:32 pm@rocote @cdy44-2 please take a look here for a real responsive template project:
https://visualneo.com/forum/topic/responsive-website-template
Regards.
@rocote @cdy44-2 please take a look here for a real responsive template project:
https://visualneo.com/forum/topic/responsive-website-template
Regards.
Quote from rocote on September 23, 2020, 3:01 amHello Luis, I have experimented with the "NeoDeviceGetInfo" plugin.
Very interesting and it works well except for one detail which is missing and which would be very useful. The plugin offers four options about the "device". Would it be possible to have the size of the tablet screen. There are 7 ", 8", 10 inch tablets etc ...
How can I get the information of the screen size?
Roger
Hello Luis, I have experimented with the "NeoDeviceGetInfo" plugin.
Very interesting and it works well except for one detail which is missing and which would be very useful. The plugin offers four options about the "device". Would it be possible to have the size of the tablet screen. There are 7 ", 8", 10 inch tablets etc ...
How can I get the information of the screen size?
Roger
Quote from luishp on September 23, 2020, 8:47 amHow can I get the information of the screen size?
@rocote I think that's not possible. Perhaps just an estimation using [NAB.WindowWidth] and [NAB.WindowHeight] variables.
Take a look here for an interesting discussion about this:
https://www.sitepoint.com/community/t/how-to-get-actual-screen-size/6738Regards.
How can I get the information of the screen size?
@rocote I think that's not possible. Perhaps just an estimation using [NAB.WindowWidth] and [NAB.WindowHeight] variables.
Take a look here for an interesting discussion about this:
https://www.sitepoint.com/community/t/how-to-get-actual-screen-size/6738
Regards.
Quote from rocote on September 23, 2020, 5:21 pmThank Luis for your answer.
I found this. Is there a way to use this JavaScript code in VisualNeo Web?
https://www.tutorialrepublic.com/faq/how-to-detect-screen-resolution-with-javascript.php#:~:text=Answer%3A%20Use%20the%20window
Thank Luis for your answer.
I found this. Is there a way to use this JavaScript code in VisualNeo Web?
Quote from asmat on September 23, 2020, 5:33 pmyes, @rocote use JavaScript like this:
BEGINJS //here but your javascript code alert("Your screen resolution is: " + screen.width + "x" + screen.height); ENDJS
yes, @rocote use JavaScript like this:
BEGINJS
//here but your javascript code
alert("Your screen resolution is: " + screen.width + "x" + screen.height);
ENDJS
Quote from rocote on September 23, 2020, 5:36 pmThanks @Asmat, you're the best! Very appreciated!
I will try it today for sure!
Thanks @Asmat, you're the best! Very appreciated!
I will try it today for sure!
Quote from luishp on September 23, 2020, 6:07 pm@asmat, @rocote, note that VisualNEO Web already includes these Predefined Global Variables:
[NAB.ClientHeight] [NAB.ClientWidth] [NAB.WindowHeight] [NAB.WindowWidth]Regards.
@asmat, @rocote, note that VisualNEO Web already includes these Predefined Global Variables:
[NAB.ClientHeight] [NAB.ClientWidth] [NAB.WindowHeight] [NAB.WindowWidth]
Regards.
Quote from rocote on September 23, 2020, 7:41 pmFirst thanks LUIS.
@Asmat, I tried what you offered to write javascript, but nothing appeared in my browser. Do you have a concrete example for VNWeb?
I definitely did something wrong.
Thank you again!
First thanks LUIS.
@Asmat, I tried what you offered to write javascript, but nothing appeared in my browser. Do you have a concrete example for VNWeb?
I definitely did something wrong.
Thank you again!
Quote from rrey on September 25, 2020, 5:04 pmHola @rocote ,
Hablando de música puede que te interese esto. Hace años cree con Neobook y actionscript de adobe flash un generador de puzzles de sonido. Este generador es capaz de coger un archivo mp3 y en unos segundos dividiar el audio uy convertielo en un puzzle. Tuvo mucho éxito en la comunidad educativa. Ahora quiero hacer lo mismo pero que genere en formato html 5 en vez de archivos swf de flash. Y lo quiero hacer con VisualNeo.
Aquí tienes ejemplos de puzzles de música y el generador creado con Neobook que genera los archivos web y flash.
Hola @rocote ,
Hablando de música puede que te interese esto. Hace años cree con Neobook y actionscript de adobe flash un generador de puzzles de sonido. Este generador es capaz de coger un archivo mp3 y en unos segundos dividiar el audio uy convertielo en un puzzle. Tuvo mucho éxito en la comunidad educativa. Ahora quiero hacer lo mismo pero que genere en formato html 5 en vez de archivos swf de flash. Y lo quiero hacer con VisualNeo.
Aquí tienes ejemplos de puzzles de música y el generador creado con Neobook que genera los archivos web y flash.