I want to create an application on Facebook and I will host it on our server to be used from Facebook Canvas.
I was thinking of creating the web app with Angular.JS but one of my friends told me that my web app must be drawn inside a <canvas> html tag or I will not have the full functionality of Facebook integration.
So this is my question, do I have to draw my elements inside a <canvas>? or I can use other html tags with some basic animation?
No, you do NOT need to use HTML5 Canvas. There are "Canvas Apps", but there is no relation to HTML5 Canvas. Please check out the docs for more information: https://developers.facebook.com/docs
There are only a few things that are not possible without a Canvas App. For example, you can only use Notifications with a Canvas App, or you can only use invitable_friends in a gane with Canvas implementation. Don´t worry about those before reading the docs.
Related
I am aware that Ad banners are supported in Codename One along with inneractive banners. But I would like to place an ad in a custom container such that it appears while scrolling down the container. I am not sure if there is a way to place an add inside of a Container or a WebBrowser component at the moment.
This is the approach admob's native app had adopted: https://www.google.com/admob/monetize.html#?monetize-tabset_activeEl=native-ads
We don't have builtin support for that but since you can place the browser component anywhere you want you can include web ads within that. They might not be ideal though.
Alternatively you can integrate a native banner ad framework and use peer component to place the UI view banner.
I am using the Angular Google maps directive to show maps on my webpage. Currently my markers are created using SVG but this is slow as I have to pass my information into a function that creates an SVG in memory to pass to the Google Icon. So I want to replace it with a custom HTML marker which will hopefully be less code and can leverage CSS classes for lots of the heavy lifting.
Unfortunately this isn't available as standard within the Angular Google Maps markers (unless I havent seen it?!)
I found a tutorial on how to do this with Overlays but I need clustering to work with my icons.
How can I do this? Without rewriting everything from scratch? Ideally I'd like to leverage as much of the existing angular-google-maps code as possible
The way I ended up doing this was to put in rich HTML into the labelContent property, setting a class on it via labelClass and then setting the icon to be transparent (https://maps.gstatic.com/mapfiles/transparent.png)
This way the actual icon is invisible but you can create rich HTML / CSS markers through the label. And this doesnt break functionality with the clusterer
We're trying to serve simple markup - a thumbnail, image, and some text - through DFP. This markup needs to be fluid - it's one member of a responsive grid on our website.
Assuming we can't avoid the iframe, is there a way we can get the iframe to be set at 100% width? That would probably do it.
The issues we're having is that we're forced to define an ad unit size, and that seems to dictate the dimensions of the iframe.
You can't have the control over the iframe, the best solution would be to extract the content of the iframe and append it to the parent using javascript. This way you will be able to use your websites responsive grid and class.
Sorry Mathieu but you are wrong. DFP uses friendly iFrames and you can change the width or height if you use your own creative template. We have many custom templates defined in DFP for our masthead variations that can expand, collapse, destroy ad unit's iframe.
What is the difference between Ionic Framework vs Famo.us Framework. It is possible to use both framework in one project . Which One support smooth render graphic on mobile devices ?
Both framework support AngularJs?
Both frameworks work with AngularJS, but they come from a different direction and have different goals.
Ionic
is built on top of AngularJS and extends it, providing you with buttons, grids and other ready made UI elements to help you publishing your mobile app real quick. AngularJS focuses on data binding and the MVC structure of your app and doesn't really care about whether it's running in a desktop browser or on a mobile device. Ionic concentrates on the presentation of your app data and extends AngularJS to make it fit for use on mobile devices and supply you with design patterns that mobile users have come to expect. Since Ionic sits on top of AngularJS, you can't really have Ionic without Angular.
Check out Ionic's components to get a better understanding.
Famo.us
on the other hand strives for the fastest render performance. It just so happens that you can put regular HTML into a Famo.us Surface — which is the container that holds the content to be displayed. That content can be HTML, but doesn't have to.
Famo.us itself doesn't use the standard HTML reflow to position its surfaces in the viewport but its very own implementation of a render tree, so you're free to manipulate surface position and rotation, even in 3D space, with buttery smooth performance. HTML that is put inside a surface on the other hand uses reflows to position its elements just like you're used to. Read more about the render tree.
Famo.us can output to HTML, but can also render using WebGL or even Mixed Mode, combining DOM with WebGL. This allows for fancy graphic effects that wouldn't be quite possible with plain CSS. There's also tight integration with Easing and Physics to allow for playful and realistic animation.
Now that there's Famo.us/Angular, I don't see why you couldn't use Ionic and Famo.us in the same app, although I haven't tried it yet.
Summary
Ionic sticks with the regular DOM for rendering and focuses on mobile design / UX patterns. Famo.us disregards the DOM and lets you (read: requires you to) build / populate the render tree, provides physics and allows for more complex and fluid animations. This also means that using Famo.us comes with a learning curve. Good thing is: you don't have to go 'all in', since you can build certain views of your app with Famo.us and then use regular HTML/CSS for everything else.
ionic lists work well when famous is loaded in the same index.html SPA.
Some things like touch to pan in angular-google-maps stop working when ionic and famo.us share the same page.
Transitions from a ionic tabbed state to a detail view using ion-nav-bar animate badly too.
So i recommend you to keep things separated just by switching your app from famous.html to ionic.html as needed. each implementation having its own stack of dependencies and its own separated styles as they come in the sample apps.
you can transition by using document.location.href
i think you can find a way to transition to specific states from one world to the other by setting the proper state in the url.
I am working on silverlight 4 application and need to implement google maps in the same app.
Now to implement the google maps, i was planning to use WebBrowser control but when i used it i found out that it will run only in out of browser mode.
So, i decided to use another approach since i want to implement google maps inside of my application. I then used http://csharperimage.jeremylikness.com/2010/09/hosting-html-in-silverlight-not-out-of.html alternative which was having to use iframe to show web page there. It was seems to be good alternative in start. But Here comes another twist.
On top of my app, i have one top MENU for navigation, its a classic web menu, user hover over the menu item and its sub item will expand vertically.
Now just underneath the MENU i have above HTML control to display my map. Now since the HTML browser control has higher z-Index so my vertical sub menu is goes underneath the google map and hence it not visible.
And giving silverlight app higher z-Index the iframe for HTML does not show up as it goes behind the app.
So how can i get my HTML MAP and MENU both to work? If you guys have any other alternative to implement google maps then please let me know
Thanks
I would recommend using the Silverlight Bing Maps control, with the tile-source set to Google Maps. This will give you the maps you desire, via a proper Silverlight control. You can find out about how to provide a custom tile source from Google here:
http://www.scottlogic.co.uk/blog/colin/2011/02/google-sky-on-windows-phone-7/