How to easily embed (iframe) Google Docs on your Web Pages!

Google Docs are pretty neat, they save as you type, you can easily share them with other gDrive users and even use them as a collaboration platform with up to 10 people working on it at the same time!

But sharing a Google Doc can go beyond simply sharing it with other gDrive users, if you go to:
File - Publish on the Web...


And click the Start Publishing bottom you'll get a Document Link and an Embeddable Code.


The Document Link its basically a special webpage that shows the contents of your Google Doc, and it gets automatically updated every 5 minutes! So anyone with the link can see it on their web browser, no extra software needed! And don't worry, unless you specifically allow public editing, no one can edit or delete your document.

This is very convenient, and to make it even more convenient, daddy Google is a big spoiler and added a few gadgets at the bottom so you can easily share your new and super cool Doc on a Webpage via G+, Gmail, Facebook or Twitter and save you some precious time!

But if you feel this is way too common user for your standards, there are more fancy ways to use this feature so you can use them embedded on your Webpage or Blog thanks to iframes, you can use this to show your Doc in 2 ways, with or without the "embedded" tag:

This is how it looks without the embedded tag:


Note that when the embedded tag isn't active, the background of the document its transparent and it shows the Doc's name on a speacial header and a footer from Google.

And this is how it looks with the embedded tag:


Note that when the embedded tag is active, the iframe height only affects the container, but not the document itself, so a scrollbar appears in case the document needs more space, the advantage is that you can use it without the document's title and footer.

Feel free to change the width and height to best fit your needs, you can also choose to use it with or without a frameborder.

So, what's the advantage of using an embedded Doc inside a webpage? Well they are great for content you wish to be able to update easily, it's way easier to update a Google Doc than a normal webpage, you can even do it from your mobile... also you can choose to allow specific people to be able to do edit the Doc and the copy on your site will get updated automatically. You can even choose to place different documents on a single page, each one with access to different users and you can even add some that can be edited by anyone!

So all this dynamic content doesn't sound appealing enough for you? Well, you can add some CSS3 goodness to your site and can make those Docs look like announcement boards with some cool animations and/or 3D effects... Also remember that with CSS3, all this special iframes can get this effects automatically, you just need to plan your code carefully.

Use Google Draws instead of Docs and you might find a new way to create easily updated banners for your pages...

Hope you liked this article, feel free to post your comments, thoughts or share your ideas at the bottom of the article. Happy coding!

A developer's adventure at Google IO 2013 -part II-

by +Mauro Solcia (Smokybob)

Part II

Google Chrome Updates

Google Chrome is growing in usage and features, new picture and video formats/API were introduced this year with WebP and VP9, high quality formats with new compressions to provide same quality with less bandwidth usage; but the main focus is in to make Chrome an ecosystem where developers can build Packaged Apps with the same web technologies used for normal online web apps but with additional features to be able to work offline and with direct access to the hardware while being OS independent.

The focus on the Packaged Apps is supported even more by the fact that all the IOers got a free Chromebook Pixel that is sold for 1300$ way more than what we payed for the conference.

As anticipated before, many were not so happy about this gift; many said that is not possible to use is as a developer machine if not for web development and even there is difficult; that it’s only a browser and even as an “advanced consumer user” it’s limited.

This is all lack of knowledge!

Many Googlers and a some IOers that use Chrome at 80%+ were gladly showing others that they were partially right about Development, but that there are a lot of alternatives already in the Chrome Web Store and some are in development.

For Example at the time of the I/O there wasn’t an offline IDE, a couple of week after that one popped out at an Alpha stage but stable enough to build a simple packaged app.

WeVideo and other Web Company had sandboxes to show the power of their webapps on Chromebook Pixels

At the end of the I/O many took back their statements and are now really happy with the Chromebook Pixel.

I was happy the first day and helped out anyone with their “migration” and after a month I keep getting happier about it, and about Chrome OS.

This were the news for Developers shown at the KeyNote, but this are only something near 50% of all the new features for developers.

Now the “consumers” new features.

Google Plus Update

41 new features released in a single batch!

The bigger ones were the following:

• Full Redesign: From a 1 column to a responsive design, with up to 3 columns and the posts are now more like Google Now’s Card.

• Photo Autoenhance: using the power of Google’s servers, every photo we upload get’s enhanced but we can switch back to the original anytime we like. As a casual photographer I really like this feature; my photos are crispier and more beautiful, with lights right and more colorful.

• Photo Autoawesome: if we burst shot photos of the same place, Google Plus is able to understand it and create an awesome .gif for us with the photos we've taken.

Google Hangouts

Finally “one app to rule them all!”.

Google Talk, Hangouts and Google Plus Messenger are now one app with additional features while still keeping the specific ones from the single apps.

Sadly XMPP protocol is discontinued and the apps (like Pidgeon or imo) that supported Google Talk now have to rebuild part of the code.

Google Play Music

New design more “cards” like the ones in Google Now, and the new feature All Access that enable the access to all the Music in the Google Play Store for 9.99$/month and to create radios starting from an Artist/Album/Song.

Unfortunately for now is an US only feature, there are some workaround to use it from outside US, in fact I’m using it heavily even if I’m Italian and currently in Italy.

Google Voice Search

If you have an android device you might have already tried this experience with Google Now, at the I/O was presented and last week was available in a lot of non US country.

Now we can go to google.com(or .it or whatever) and start a voice search, after that the search will keep listening for other voice inputs and search again for us.

Additionally the use of knowledge graph is implemented, this means that if I ask Google “Show me the photo I took in San Francisco” it will show me a result with a link to all my Google Plus Photos that I took back in San Francisco.

Google Maps

An update to Google Maps web version can be previewed at the address http://maps.google.com/preview . After being enabled to use the preview version.

This new version use WebGL technology to show every content obtaining an astonishing rendering speed and optimizing bandwidth usage.

The new layout is similar to the Google Maps App on IOs.

The map is now “more personal”, the search result use Knowledge Graph information to display first the information more relevant to us and to what our Google Plus friends prefer.

For Example if I search for a restaurant nearby, the first results are mexican restaurants because I was on a lot of mexican restaurants lately and some Indian ones because my friends have rated indian restaurant high in the last few weeks.

Another cool change, I've tried in SF, is the new way that public transportation is displayed.

After having results with public transportation, you can “drill down” to a more detailed view where you can see the schedule time and different waiting time for the proposed alternatives.

A couple of Easteregg or at least features that have, in my opinion, no real use, are Realtime Clouds and Space view.

To see those two, I have to admit they are really cool, you have to switch to heart mode and zoom out until you see the full globe.

If you watch in the background of the globe the stars and planets are in the right position, you can then rotate the Earth and see the day and night line as well as the different constellation changing.

The clouds you see on the globe are in near real time, you can zoom in a little bit and still see them on your region; in realtime enough to be a cool feature but I’ll never try to make a forecast out of them :-)

With this, the news from the KeyNote, have ended, but more developer related stuff was presented the other days.

Google Glass

Google Glass had a lot of sessions related to what can be done now and what to expect from it.

I personally have skipped all of them and watched some of them the next week, BUT I WAS ABLE TO TRY THEM!

My experience

It was a brief experience, I had them on for 10 to 15 minutes, so I can't really say how they feel on a daily basis, but I can say they are better than I expected them to be.

First of all forgot all you know about the way you interact with the technology and the way a device provide you back content, then you can start appreciating Google Glass in it’s entirety.

I wear prescription glasses but only for the left eye, and mainly to not overstress the right one that try to compensate for the left, so I had no problem using the device.

They are light, even with the battery and all, they weight less than my prescription glasses.

As soon as I get the device on my nose, I try to watch at the “screen” and moving my head up I accidentally turn it on, having that well known Clock card in sight.

Behind it I see the Googler that is guiding me in the Glass Experience and I can simply switch my focus to her and the card is still there but it’s not in the way of my sight, plus the image look's greyish with opacity at 30%, but when you focus your sight on it is more like 90% so you can see the card clearly.

First my guide tell me to try the Voice commands: Ok Glass, Take a picture... nothing happens, another try a little bit louder... nothing again, one last try even louder, enough to be heard from people at 5 meters in loud environment like the Google I/O, and then a picture is taken.

Sadly I couldn’t share it with my account as I was in guest mode and you need to set up the sharing contacts with the MyGlass App.

Let’s switch back to the touch commands; it feels a little bit unnatural at first to swipe from back to front to get the last timeline card, I think it’s mostly because our brain translate the gestures as if we were doing them on a phone; after a couple of minutes you get the hang of it and the “Oh crap wrong gesture” drops to nearly none.

After playing around a bit with the menu, it’s time to try the bone conducting sound and watching a video on the tiny screen.

The sound is low quality, but just right for a phone call or a podcast, not for listening to music, it’s loud but not as much that you can’t hear to the person in front of you talking with you; if needed you can close your ears and the sound is a little bit amplified.

The video plays well and it’s clear, but I can still see behind it; in this case it’s a bit difficult to focus on what is behind it while was rather simple while a photo was shown.

Sadly I was so excited that I didn't think of trying Navigation directions but a friend tried it the day before and told me it’s like with normal cards but when needed the card appears a little bit more “dense” to recall your attention on the next turn you have to do.

Privacy concerns

Taking a photo with voice is quick but anyone can hear you nearby, so no stealth mode.

Using the touchpad is done by: 1. wake up the device, 2. access the menu, 3. go to the “take picture” menu item, 4. Aim and shoot; if you are fast you can do all this in around 2 or 3 seconds while the screen is on and anybody can see you looking up and swiping your temple like a mad men.

There is a quick photo button, but after the photo is took the screen come up with the photo, not so stealth.

Anybody can be a lot more stealth while casually playing with it’s phone.

Take your conclusions.

Prescription Lense

We were reassured that Google is working with some big names in the prescription lense business to provide a version for people with prescriptions (I think the first batch of customer will be 70% with glasses), at the I/O I’ve seen a couple of model, one round a one more squared, but one thing's for sure, we'll need to buy a specific version with our prescription lense because the frame is part of the device itself.

Some hacks are in progress to mount the Explorer edition on existing pair of Glass, let’s see what will be our opinion when they put the device on the market for everyone.

Google Drive and Google Apps Script

Not a lot of new features for Google Drive, but the one presented opened up a lot of possibilities.

First of all the hugely requested ability to access document format content from Apps script, and now that we have seen the API we know why it took such a long time.

The Document API make possible to access the data in a document in DOM style with child items and a structure as complex as our documents can be, with formats (bold,italic, font size, etc..), images and other “embedded” objects (like Drawings).

For more info you can see the Session I attended and the Official Documentation.

Another interesting feature that I’m happy about and I'll be using next week for work, is the dynamic creation of Forms and the new update to the Forms.

Sadly I have yet to take a deeper look at the Session and Documentation but I've talked with a couple of Dev that worked a bit on it and they were pretty excited.

Feel free to leave your comments at the bottom of the article.

A developer's adventure at Google IO 2013 -part I-

by +Mauro Solcia (Smokybob)

I was lucky enough to be able to attend the Google I/O conference this year... This year the conference was less about “incredible wonders” for the general public, and more focused on the tools Google provide to the Developer to build incredible wonders and attempt at “moon shots”. Some new cool features “consumer side” were presented, but nothing as big as last year’s Google Glass presentation.

At first, many at the conference were a little disappointed especially when they told that they were going to give us the Chromebook Pixel as many were anticipating something like a Nexus 5 or a new Tablet.

Some people called the Chromebook Pixel “A browser on a good HW”; while this is in part true, this statement show that some attendees did not use Chrome at his full potential with all the Apps and extensions available in the Chrome Web Store.

Google Glass session were always so packed that you had to go at the presentation before the one you were interested only to take a sit; after the first day many choose to follow the streaming from outside or, like me, to go at other sessions and watch the Google Glass Session the next week.

KeyNote

It was my first time in a big conference like this, when you are waiting for the keynote to start everyone is whispering with other people at what could be presented in moments, this year a lot were wrong.

I’m not going to list all the things that were presented during the keynote, I think many of you already saw the video in streaming or the day after, so I’ll be focusing what I and the people near me felt about some of the new products/features.

Android new Locations APIs

A lot of Android Developer were at the I/O and this new feature set was well accepted because it provides a simpler and more optimized way to access Location information.

I have no direct experience with location based Android Apps, but talking with some developers with experience in this field and they confirmed it was a lot of work to balance good location informations and battery consumption.

The best thing about this new APIs is that they are integrated in the Google Play Services, so they are available from Android 2.2 +, we are talking about 80 or 90% of the active devices.

Google Cloud Messaging

Here the big news are 3.

The first is Upstream messages, now the device can send messages to the server with the same service the server can send the messages to the client; this solve a lot of problems, we don’t need a dedicated service and port to send data to our server and rely on the Google Cloud Messaging only for “heads up” from the server.

The second one, is that the notifications are now synced across the devices, because now the cloud messaging queue is associated to a user id and not to a device, or at least the developer can now have different devices to get notified for the same “queue”.

The third one was not shown in the keynote, but it’s well explained in this session, and is the support of the XMPP protocol that enables application to open a persistent channel to stream messages in nearly real time with our server but leveraging the Google Cloud Messaging.

I’m personally really happy about the last one, as many big clients are not so happy to open ports and authorize external addresses on the firewall, but it’s a lot more simple to have them authorize a single address with google in it and then use the same address for all the different applications we are going to build.

Google Play Game API

Weeks before the Google I/O, after the My Glass API teardown some news about this new API leaked, but we only supposed what the API was capable of.

The new API is a full infrastructure to manage gaming on Android, from the ability to store scores and progress so that the user can play our game on his phone and then continue on his tablet when it’s back home, to multiplayer management with a lot of problems around it managed by the API.

I’m not a game developer, but some of the people I was roaming around the Google I/O are, and we discussed a lot about the problems behind the multiplayer management, connection, synchronization between devices, etc... a lot of code and a lot of headache for the developers and the server managers.

There were not many session about this but there is one very informative that can be found here.

Android Studio

After seeing that Google made an optimized IDE based on Eclipse for Dart, I was hoping to see a counterpart for Android and here we have Android Studio based on IntellyJ.

The full introductory session can be found on the Google I/O Playlist here.

I have yet to try it fully, there are a lot of changes; some at the core (the new building system Gradle), some other to simplify the development process (new UI templates, new plugins, etc...).

If you already developed for Android with IntelliJ, I was told, you feel at home with new shiny features; if you developed with Eclipse, you feel the IDE is faster and lighter but it’s different and you need some time to adapt to it.

The main problem I've faced is when I try to import apps written using Eclipse, if they are really simple, the import works flawlessly, if the app get’s a little bit complex, some things doesn’t work E.g. Action Bar Sherlock implementations need to be kind of rebuild from the ground up.

My personal advise is to branch your current apps and start working with the new UI, try a quick fix and current implementations should be done with Eclipse, but a full switch by the end of the year is a good thing as some features might not be there in the ADT plugin for Eclipse in the future.

Google Play Developer Console Updates

New really anticipated features were added to the Google Play Developer Console, for those that don’t know what it is, that's where developers manages the published apps.

There are 3 major features:

Alpha and Beta versions: Now we can add alpha and beta version and release them to a set of trusted users.

Staged Rollout: Right now, when one deploys a new version, every user gets the new version as soon as possible, when you have 1,000 active users it’s not a big problem, but when you have several thousands and the app connects to your server, it could be a problem. Now we can release the new version to a percentage of users and after some time increment the percentage until you are confident that nothing will break.

Optimization Tips: Using all the data related to the app, the developer console can point out some area of improvement for our app, from the Tablet support, to adding a specific language due to the growing installs on a specific region of apps that are similar to ours.

Other features added to the Developer Console are:

Metrics: It’s kind of an extension of Google Analytics with a specific target on Android Apps.

Revenue Graphs: Better improved graphs for sold apps, with new details to help developer improve their revenues.

App Translation Service: from the developer console we can buy professional translations of our app strings.

Stay around to read the next part of the A developer's adventure at Google I/O 2013 were you can read about:

• Google Chrome updates.
• Google plus updates.
• Google Hangouts.
• Google Play Music.
• Google Maps.
• Google Glass.
• Google Drive & Google Apps Script.