Solved

Web Site Creation by Xara Web Designer

Posted on 2011-09-05
9
525 Views
Last Modified: 2012-05-12
Hi

I am using Xara Web Designer for building a web site.

1. I wish Importing a chart from another web site and to periodically refresh the chart - actually to import a new, updated chart each time one may open the web page where the chart is displayed.

Xara support "Import Graphic From Web..." function,
By using this function the chart is imported when the site is created and  stored as an image in the html "images" folder.
Does Xara support"Import a new chart each time the web page may open" function?
a. If yes - how to use this function?
b. If not - how can I add html code to teh web page for this function?

2. Similarly, I want providing the users a link to another (3rd party) web page.
Adding a link is simple - not a problem
What I want do is to import the 3rd party's web page to a frame in my site
a. How can I do this by Xara (if possible)
b. How can I do it by using html code (2nd priority as I am not html expert)

Thank you, Doron



2. I wish
0
Comment
Question by:DORON_GOLDBERG
  • 4
  • 4
9 Comments
 
LVL 38

Expert Comment

by:BillDL
ID: 36487898
Hi Doron

You haven't specified your 2nd "wish" ;-)

The problem with the Xara Web Designer application is really in its ease of use which is exemplified by their repeated statement "no HTML skill required".  I have never used the software, but it is evident in looking at the "features" on their website that the option to actally flip over to the underlying code of your page whenever you need to is probably either not available or hidden away from you.

The difficulty in knowing what to suggest to you is not knowing exactly what code the software uses to insert an image when you use the "Import Graphic From Web..." option.  It is clear that it is just "fetching" (stealing really) an image from another site and making it one of your own site's files rather than fetching it from the other site, hence the "Import" expression.

What you are trying to do is "Hotlink" to an image on another site.  You should be aware that if you do not own that other site where the graph image resides, or have not sought permission from the site owner to do so, then "hotlinking" to such an image is scorned because it is bad Internet etiquette in the same way that inserting a web link into a Facebook comment loads part of that web page into a box below the comment.  You have to bear in mind that people with websites generally pay for them to be hosted and may have "bandwidth limits".  Each time the image is loaded from their site into yours it uses their bandwidth.

Here's what to do so we can advise you.

On the site where the graph image resides, RIGHT-Click on it in your Browser and choose "Properties".

For example, go to the XARA website and do this on the logo at the top left.  It should open a new Properties dialog and show that it is an image file and display the full Web Path (URL) to the .PNG image used for the logo:
http://www.xara.com/theme/xtreme5/xaralogo.png

In such a case you will usually see the "Save PICTURE As" option in the Right-Click menu.

If you can do this for your graph image, then it can be hotlinked to so that it loads from that site into yours.

Right-Click on the "Experts-Exchange" logo at the top left of this page.
It DOES NOT say it is an image file, only shows the URL as a PAGE on the site, and your Right-Click menu DOES NOT show the "Save Picture s" option.

If the graph image on the other site is like the behaviour of the Experts-Exchange logo, then it is being shown using some other kind of code such as CSS (Cascading Style Sheets) and we would really need to know the address of the web page you are seeing the graph on.

If, when you Right-Click on the graph, it shows you the "Adobe Flash Player" menu like you get if you do the same in a YouTube video, then your "image" is not an image, or at least not being displayed as a standard image.

You said that "By using this function the chart is imported when the site is created and  stored as an image in the html 'images' folder", so you presumably know the file name of the graph image that was inserted in your page.

Open the saved *.HTM web page that you embedded the image into in your browser.  Use the "View . Source" menu option in the browser and it should open the code in Notepad or other text editor.  Use the Edit > Find menu option in your text editor and enter the file name of the locally stored graph image.

If it is found in the code of the web page, scroll over some of the lines above and below it and paste them back here into a new "Code Snippet".  We should be able to tell you how to change the code so that it loads the image from the other site rather than from a locally saved file, but generally all you would do is change the path to the file from, example:

<img src="images/Filename.jpg" width="384" height="216">

to:

<img src="http://www.somesite/images/Filename.jpg" width="384" height="216">

Please be aware about what I said about the practice of "hotlinking" to offsite content without consent of the site owner being bad etiquette.
0
 

Author Comment

by:DORON_GOLDBERG
ID: 36491543
Hi Bill

Thank you for your efforts to support me.

Instead of your "if" statements, lets see what happen in my site.

1. The diagram we need is ours - we trade Forex and send the trade results to a site www.mt4i.com that use to present trading results of trader to the public.
So don't worry - these our trade results charts we want get and present updated results,
actually for each visitor - when open the relevant page - we want the picture to be downloaded from the MT4i site,

2. One of our accounts (that is not running now) trade results are at:
http://www.mt4i.com/users/demo02/stats
When click on "charts"you will move to the chart sindow

3. The chart location is at (right click etc.):
http://www.mt4i.com/charts/ResultChart.aspx?id=demo02&type=daycumulativeprofit&w=850&h=570&rx=1315339261460

4. In Xara - you have a function named: "Import Graphic From Web"
When clicking on the function, is required to enter the graphic URL address
and, naturally - I add the above address, and the picture is importing to the site.

5. Xara is importing the graphic/picture and store it as an image in the site "images" folder

6. Xara enable "export" the site html code in order to upload it to the server where the site is stored (the world's understand HTML and not Xara code).
When right clicking on <my-site> on the image you see that the image is stored at:
http://<my-site>.com/index_htm_files/114.png
as any other stills picture.

7. Attached please the site index.html file
There are x3 charts I import for x3 different MT4i.com pages.
the 1st picture stored at:
http://robo-trend.com/index_htm_files/114.png
Originally imported from:
www.mt4i.com/charts/ResultChart.aspx?id=robo-trend_live_s&type=daycumulativeprofit&w=850&h=570&rx=1315340215098

When I know - how to import the diagrams to the site from the site is cane from (changing the html code)
I will be able to repeat the process to all the charts and to change it each time I may change and upload the index.html file.

My site is: www.robo-trend.com (under developmental - not published yet)
On the home page you will see the x3 charts
Clicking on any chart takes you to the relevant mt4i.com web page

Second issue
==========
When a visitor may click on the chart to see the full details at mt4i.com site
I want "import" the whole page top my site and to present it in a frame in my site - I do not want the visitors to be moved completely outside my site to mt4i.com site but to keep them in my site and to let them browse at mt4i.com pages from my site frame.

It is looks that your next answer will give me the solution

Thank you again, Doron

index.htm
0
 
LVL 38

Accepted Solution

by:
BillDL earned 500 total points
ID: 36502341
Hello Doron

I have to advise you that I am not expert in ASP Programming, which is how the "www.mt4i.com" site works, but I have been looking at the Web Addresses you provided.  If you break down the following example URL:

http://www.mt4i.com/charts/ResultChart.aspx?id=robo-trend_live_s&type=daycumulativeprofit&w=850&h=570&rx=1315340215098

into separate parts, you can see the Query that is being sent to the site so that it can get and return the "ResultChart.png" in their web page.

id=robo-trend_live_s
type=daycumulativeprofit
w=850
h=570
rx=1315340215098

The "w" and "h" values are the Width and Height values in pixels that "ResultChart.png" should be displayed.
The ID and Type values tell it where in their records to look:
"robo-trend_live_s" refers to "Live Small Account"
"daycumulativeprofit" refers to "Cumulative Profit Banked Per Day".
I am not sure what "RX" is an abbreviation for, but it clearly passes a unique number depending on the type of trading results requested, eg. "Cumulative Profit Banked Per Day" (daycumulativeprofit).

On your own home page:
http://www.robo-trend.com/index.htm page
your left image:
http://www.robo-trend.com/index_htm_files/0.png
shows the chart for the Live Small Account and is linked to:
http://www.mt4i.com/users/robo-trend_live_s/stats

Under the "Charts" tab of the www.mt4i.com "Stats" page:
http://www.mt4i.com/users/robo-trend_live_s/stats
if you choose the "Cumulative Profit Banked Per Day (excluding deposits)" option, and then RIGHT-Click on the chart and choose "Properties", you will see this:

http://www.mt4i.com/charts/ResultChart.aspx?id=robo-trend_live_s&type=daycumulativeprofit&w=850&h=330&rx=1315481489617

It is displaying "ResultChart.png" at 850 Wide x 330 High (pixels).
Copy and paste this full URL into the address bar of a new browser tab and it will display ONLY the chart image at those dimensions.

Change the dimensions to 261 x 246 like this:

http://www.mt4i.com/charts/ResultChart.aspx?id=robo-trend_live_s&type=daycumulativeprofit&w=261&h=246&rx=1315481489617

and it will display a squashed image of the chart instead of the wide one, and this size matches the images you have on your home page.  You can actually remove the   "&rx=1315481489617" part from the end of the URL in the browser address bar and it still loads.

So, by passing different parameters in the URL you can display the same chart you have called for in a different way.  You can get that chart to display INSIDE YOUR OWN page instead of using a locally saved image file, and this way you will get the chart with live results each time the page loads or is refreshed.

Open your "index.htm" in a text editor and locate the code that loads the "Mini Live Account ($4K)" chart image, which is currently "index_htm_files/0.png".

Here is the bit of code that loads "0.png" into your page:
 
<a href="http://www.mt4i.com/users/robo-trend_live_s/stats" onclick="return(xr_nn());">
<img class="xr_ap" src="index_htm_files/0.png" alt="" title="Click Here =&gt; Robo-Trend Live Small Account" onmousemove="xr_mo(this,0,event)" style="left: 37px; top: 589px; width: 261px; height: 246px;"/>
</a>

Open in new window

Change the    src="index_htm_files/0.png"    part to the URL that actually sends the query to the mt4i.com server and make the hyperlink open in a new page or tab by adding      <a target="_blank" href="     like this:
 
<a target="_blank" href="http://www.mt4i.com/users/robo-trend_live_s/stats" onclick="return(xr_nn());">
 <img class="xr_ap" src="http://www.mt4i.com/charts/ResultChart.aspx?id=robo-trend_live_s&type=daycumulativeprofit&w=261&h=246&rx=1315481489617" alt="" title="Click Here =&gt; Robo-Trend Live Small Account" onmousemove="xr_mo(this,0,event)" style="left: 37px; top: 589px; width: 261px; height: 246px;"/>
</a>

Open in new window

Save the changes and upload the modified "index.htm" in your web server.

By changing the code for each of the other two images, ie. "Small Live Account ($25K)" and "Large Live Account ($500K)" to the following you should be able to get live charts in your page that link to the correct pages on the www.mt4i.com site and you will not have to embed a new image each day.

"Small Live Account ($25K)" Chart image is currently "index_htm_files/7.png", size = 302 x 244 pixels.  Change code in your index.htm to this:
 
<a target="_blank" href="http://www.mt4i.com/users/robo-trend_live_m/stats" onclick="return(xr_nn());">
<img class="xr_ap" src="http://www.mt4i.com/charts/ResultChart.aspx?id=robo-trend_live_m&type=daycumulativeprofit&w=302&h=244&rx=1315484718621" alt="" title="Click Here =&gt; Robo-Trend Live Medium Account" onmousemove="xr_mo(this,0,event)" style="left: 301px; top: 589px; width: 302px; height: 244px;"/>
</a>

Open in new window


"Large Live Account ($500K)" Chart image is currently "index_htm_files/10.png", size = 308 x 246.  Change code in your index.htm to this:
 
<a target="_blank" href="http://www.mt4i.com/users/robo-trend_live_l/stats" onclick="return(xr_nn());">
<img class="xr_ap" src="http://www.mt4i.com/charts/ResultChart.aspx?id=robo-trend_live_l&type=daycumulativeprofit&w=308&h=246&rx=1315485117925" alt="" title="Click Here =&gt; Robo-Trend Live Large Account" onmousemove="xr_mo(this,0,event)" style="left: 595px; top: 587px; width: 308px; height: 246px;"/>
</a>

Open in new window


You will probably have to mess around with the sizes of the images to get a reasonable represenattion of them, eg. make them all the same height and width, inclreasing the dimensions a bit.  If you change the dimensions that you pass in the URL that loads the images, then you will also have to change the HTML code in your page where it tells the browser what size to display the image and the exact placement of them.  They need to match.  The image size is the "width" and "height" values, and the position is the left" and "top" values in the "style" bit of the code, eg.:

style="left: 595px; top: 587px; width: 308px; height: 246px;"

To do this, I suggest that you use the Xara editor to change the dimensions and placement of static locally saved PNG images, Save your HTM file, and THEN change the src=" " code in a text editor.

Let us know how this works for you.

Bill
0
 
LVL 38

Expert Comment

by:BillDL
ID: 36502358
One problem I can see is if the Stats have not yet been completed on the www.mt4i.com site and it just has a blank chart.  That is what will load in your home page unfortunately.  Checking the status of the stats and substituting with a fixed image if empty is something that is far beyond my skills and knowledge.
0
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 

Author Comment

by:DORON_GOLDBERG
ID: 36557685
Hi Bill

Highly appreciate your detailed answer
I will try implementing your suggestions into the web page code and see if it works.
Form what I read above - it is looks that this might work :-)

I didn't renew the Expert-Exchange subscription that expire on Sep. 24, 2011

Since I will not be able to accept your solution (after testing it) and/or asking additional questions, I am accepting your solution

Thank you again.
Doron
0
 

Author Closing Comment

by:DORON_GOLDBERG
ID: 36557693
Hi Bill

My subscription at expert-exchange expire on Sep. 24, 2011 and I do not think that I'll have time before than to integrate your code it the web page.
I certainly do so withing the next days.
However, as I do not know if I will have an access to approve your solution after testing it, I accepted your solution as it looks to me when reviewing your suggestions accurate and correct.

Thank you again, Doron

P.S the graph is white because I stopped updating this account (the site is under construction)
0
 

Author Comment

by:DORON_GOLDBERG
ID: 36557702
Hi Bill
By mistake I marked "C" and not "A" when approved yur solution
I am sending an email to the admin asking how to change it
rgds
0
 
LVL 38

Expert Comment

by:BillDL
ID: 36565026
Thank you very much Doron and ModernMatt.
0

Featured Post

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

Suggested Solutions

Keep your audience engaged and get the most out of your next presentation with these quick Prezi tips.
Many programs have tried to outwit PowerPoint in terms of technology and skill. These programs, however, still lack several characteristics that PowerPoint has possessed from the start. Here's why PowerPoint replacements won't entirely work for desi…
In this Micro Tutorial viewers will learn how to remove an unwanted object using Photoshop’s feature known as content-aware fill.
Add visuals to your Prezi to keep your audience engaged. Learn how to embed images, edit them, and more in this video micro tutorial. Select "Insert" from the top menu in your Prezi editor: Select "Image": A toolbar will pop in from the right …

706 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now