Animated Banner with Google Web Design

0

I created an animated banner using the Google Web Design tool. For those who have used it, it creates the banner with HTML5 CSS and Javascript.

To embed this banner on my page I've used the HTML tag:

            <div class="row">

              <iframe src="banner/rodrigo.html" width="305" height="255"></iframe>

            </div>

I wanted to know if this is the right way to embed an animated banner on a website, or if there is another way, for example: Make google web design save as an SVG file something like that.

    
asked by anonymous 28.09.2017 / 03:50

1 answer

1

Addressing your issue in general terms of front-end development and leaving aside the possibilities of the Google Web Design tool.

There are several ways to include your banner / rodrigo.html page, I say that the iframe attribute is not the best option for this case as it is very limited. I emphasize that iframe is not necessarily wrong, just that it is not good practice.

If you're developing with PHP, you can dynamically add your page as follows:

<?php include 'banner/rodrigo.html'; ?>
  

Practice inclusion with PHP this link.

If you are just developing the design itself, no dynamic content, you can use Javascript as follows:

Include the <script> tag in the <head> of your site, it will contain the information of the file to be included and the <div> that will be used.

<html> 
  <head> 
    <script src="jquery.js"></script> 
    <script> 
    $(function(){
      $("#include").load("banner/rodrigo.html"); 
    });
    </script> 
  </head> 

  <body> 
     <div id="include"></div>
  </body> 
</html>
  

Read more about inclusion via Javascript in this topic.

* Since Google Web Design must include jquery, you will not need the tag that calls the library.

* Note that I'm not considering the contents of your banner/rodrigo.html file, your .css file, jquery conflicts, etc.

    
28.09.2017 / 04:06