Web Dev Bros » google http://www.webdevbros.net hot talk about web development Wed, 16 Dec 2009 12:59:24 +0000 http://wordpress.org/?v=2.8.6 en hourly 1 How to render HTML in code.google.com http://www.webdevbros.net/2009/06/09/how-to-render-html-in-codegooglecom/ http://www.webdevbros.net/2009/06/09/how-to-render-html-in-codegooglecom/#comments Tue, 09 Jun 2009 15:12:15 +0000 julien http://www.webdevbros.net/?p=250 Update: see latest article Publishing Flex applications to Google Code SVN repository

If you are hosting or contributing to an open-source project on code.google.com using SVN as source control, there is small trick to render .html source files as HTML and not raw text (default). Make sure you set the following SVN property for each file: svn:mime-type "text/html". I find this quite useful for showing examples or demos (using it for Flash/Flex).

]]> http://www.webdevbros.net/2009/06/09/how-to-render-html-in-codegooglecom/feed/ 0 Google chart api introduces QR codes (2D bar codes) support http://www.webdevbros.net/2008/07/11/google-chart-api-introduces-qr-codes-2d-bar-codes-support/ http://www.webdevbros.net/2008/07/11/google-chart-api-introduces-qr-codes-2d-bar-codes-support/#comments Fri, 11 Jul 2008 07:16:26 +0000 Michal http://www.webdevbros.net/?p=186 As usual the guys at google have been busy and released a nice new feature for their (quite new) google chart api. It support 2D bar codes also known as QR codes. Whats more, they even offer a free decoding library for it (Xzing). Big respect googlers to your free APIs

]]> http://www.webdevbros.net/2008/07/11/google-chart-api-introduces-qr-codes-2d-bar-codes-support/feed/ 2 Translate easily with JavaScript and the Google language API http://www.webdevbros.net/2008/03/26/translate-easily-with-javascript-and-the-google-language-api/ http://www.webdevbros.net/2008/03/26/translate-easily-with-javascript-and-the-google-language-api/#comments Wed, 26 Mar 2008 09:41:27 +0000 Michal http://www.webdevbros.net/2008/03/26/translate-easily-with-javascript-and-the-google-language-api/ wow, google recently released an API for their translation services called Google language API. Thats a good news but it even gets better! The api is really easy to use and applications can be boosted within minutes. The reference can be found here

Here is a quick example of how to translate something...

PLAIN TEXT
JAVASCRIPT:
  1. google.language.translate('my mum is swimming', 'en', 'de', function(result) {
  2.   alert(result.translation);
  3. });

and it gets better and even easier: its possible to let the API detect the language .. so nothing you have to take care about anymore.

PLAIN TEXT
JAVASCRIPT:
  1. google.language.detect('Deutsch ist auch eine Sprache',
  2.  function(result) {
  3.   alert(result.language);
  4. });

Further reading: An introduction to the language API and translation tools.

Now its time to come up with some nice little tools, widgets which use this service. "a user selects a paragraph an your page, clicks a button and suddenly the text is translated into the desired language".

]]> http://www.webdevbros.net/2008/03/26/translate-easily-with-javascript-and-the-google-language-api/feed/ 0 Google released free chart API (usage example) http://www.webdevbros.net/2007/12/08/google-released-free-chart-api-usage-example/ http://www.webdevbros.net/2007/12/08/google-released-free-chart-api-usage-example/#comments Sat, 08 Dec 2007 13:34:47 +0000 Michal http://www.webdevbros.net/2007/12/08/google-released-free-chart-api-usage-example/ chart Two days ago the guys at google released a brand new api. It's called Google Chart API. and is free for approx. 50.000 requests per day. This should be enough for smaller projects ;) The interface is quite easy: You call URL's for your desired graphs. Also the Data is passed directly via the URL as parameters. I did not have the time yet to experiment a lot with it but from the first sight it looks very professional and i will give it a try in one of my administration areas. Here is a custom made example where I illustrate the visitors of webdevbros from the past two weeks in a nice graph...

The exmple uses real data from webdevbros for demonstration (yeah i know its not soo much). The next graph shows unique visitors of webdevbros for the last 2 weeks. Both weeks are compared to each other:

Looks amazing, isnt it? It took me 20 minutes to set this thing up. I got the data from google analytics and assembled an URL for the chart API. This is the URL which is needed for the graph above (within an image tag)

PLAIN TEXT
HTML:
  1. <img src="http://chart.apis.google.com/chart
  2. ?chs=350x200
  3. &amp;chtt=Comparison+of+last+2+weeks|unique+visitors+on+webdevbros.net
  4. &amp;chts=000000,10
  5. &amp;chg=16.6,25,1,5
  6. &amp;chm=R,000000,0,0.66,0.67
  7. &amp;chxt=x,y
  8. &amp;chdl=w48|w49
  9. &amp;chxl=0:|Mon|Tue|Wed|Thu|Fri|Sat|Sun|1:|0|55|110|165|220
  10. &amp;chd=t:79.1,81.8,81.4,78.6,85.0,33.6,29.1|72.7,79.1,90.9,94.6,80.5,38.2,28.2
  11. &amp;cht=lc
  12. &amp;chco=ff0000,0000ff">

(note if you want to test it directly within your browser (without img tag) you need to get rid of the line breaks and replace the & with real ampersands (&). Within an image they must be escaped)

The only tricky thing is that you have to convert your data values manually into percentag values. Which you do easily by dividing each value by your maximum value. In my example the following table demonstrates the calculation best (note: the maximum value is marked bold)

week 48 percentage week 49 percentage
Mon 174 79.1 160 72.7
Tue 180 81.8 174 79.1
Wed 179 81.4 200 90.9
Thu 173 78.6 208 94.6
Fri 187 85.0 177 80.5
Sat 74 33.6 84 38.2
Sun 64 29.1 62 28.2

Which results in the following parameter for the chart API:
chd=t:79.1,81.8,81.4,78.6,85.0,33.6,29.1|
72.7,79.1,90.9,94.6,80.5,38.2,28.2

The rest is just formatting your graph like labeling your axes, labeling your graph, setting colours, setting grids, choosing your chart type, etc. The API offers the most important customizations. I implemented a grid to outline the values and added some labels and a vertical marker to seperate the weekend from the rest of the week (black line). You see that there is a real whole on weekends :)

Last but not least here are some other exmples taken from the google chart API ...

chart3.png

chart4.png

have fun playing with it...

]]> http://www.webdevbros.net/2007/12/08/google-released-free-chart-api-usage-example/feed/ 5