Mobile-Web-App: Web Service

Showing posts with label Web Service. Show all posts

Sunday, November 24, 2013

Share your HTML pages in Google Drive to public

You can make your files/folders in Google Drive visible to public on web, so you can use your Google Drive as a simple web server.

To make it public:
- Login your Google Drive.
- Right click on the folder/file you want to share with public.
- Select Share... > Share...
- Change Who can access.
- Select Public on the web. So anyone on the Internet can find and access.
- Save.

Get the link of your HTML page:
- Right click on the file.
- Share... > Share...
- Copy the Link to share.
- Open the link in browser.
- Click Preview.
- A preview window will be opened, It's your taget link.

Try my shared HTML in Google Drive:
https://googledrive.com/host/0B69wuI993SmgUTBpdEJmS0dTRjA/testJQueryUI_Accordion.html

Friday, September 28, 2012

Google Web Search API (Deprecated)

The Google Web Search API lets you put Google Search in your web pages with JavaScript. You can embed a simple, dynamic search box and display search results in your own web pages or use the results in innovative, programmatic ways.

Note: The Google Web Search API has been officially deprecated. It will continue to work as per Google's deprecation policy, but the number of requests you may make per day will be limited. Therefore, you are encouraged to move to the new Custom Search API.

Example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Hello World - Google  Web Search API Sample</title>
    <script src="https://www.google.com/jsapi"
        type="text/javascript"></script>
    <script language="Javascript" type="text/javascript">
    //<!
    google.load('search', '1');

    function OnLoad() {
      // Create a search control
      var searchControl = new google.search.SearchControl();

      // Add in a full set of searchers
      var localSearch = new google.search.LocalSearch();
      searchControl.addSearcher(localSearch);
      searchControl.addSearcher(new google.search.WebSearch());
      searchControl.addSearcher(new google.search.VideoSearch());
      searchControl.addSearcher(new google.search.BlogSearch());
      searchControl.addSearcher(new google.search.NewsSearch());
      searchControl.addSearcher(new google.search.ImageSearch());
      searchControl.addSearcher(new google.search.BookSearch());
      searchControl.addSearcher(new google.search.PatentSearch());

      // tell the searcher to draw itself and tell it where to attach
      searchControl.draw(document.getElementById("searchcontrol"));

      // execute an inital search
      searchControl.execute("mobile-web-app.blogspot.com");
    }
    google.setOnLoadCallback(OnLoad);

    //]]>
    </script>
  </head>
  <body>
    <div id="searchcontrol">Loading</div>
  </body>
</html>

Saturday, May 19, 2012

Google Chart Tools Geochart

Google Chart Tools provide visualization of Geochart. You can easy to embed map of a country, a continent, or a region with tregion mode or marker mode.

NCC Group has released its Origin of Hacks report for the first quarter of 2012, tracking the countries from which global computer hacking originated throughout the first three months of the year. The data will be used as a example to demonstrate Geochart.

Please note that that data in the chart is roughly. Hi-resolution map and top-10 table available on request, please refer http://www.nccgroup.com/newsandevents/latest/12-05-17/Origins_of_Global_Hacks_UK_leaps_up_hacking_league_table.aspx

<html>
  <head>
    <script type='text/javascript' src='https://www.google.com/jsapi'></script>
    <script type='text/javascript'>
     google.load('visualization', '1', {'packages': ['geochart']});
     google.setOnLoadCallback(drawRegionsMap);

      function drawRegionsMap() {
        var data = google.visualization.arrayToDataTable([
          ['Country', '%'],
    ['US', 17],
    ['China', 13],
    ['Russia', 12],
    ['Netherlands', 11],
    ['Ukraine', 3],
    ['Germany', 2],
    ['United Kingdom', 2],
    ['South Korea', 2],
    ['Denmark', 2],
    ['Brazil', 2]
        ]);

        var options = {};

        var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
        chart.draw(data, options);
    };
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Sunday, May 6, 2012

GoMoMeter: analyze the experience of mobile users on your site

This tool, GoMoMeter, shows you how your current site looks on a smartphone, and provides a free report with personalized recommendations tailored to how your business can build a more mobile-friendly experience.

Saturday, April 7, 2012

OpenLayers: Free Maps for the Web

OpenLayers makes it easy to put a dynamic map in any web page. It can display map tiles and markers loaded from any source. OpenLayers has been developed to further the use of geographic information of all kinds. OpenLayers is completely free, Open Source JavaScript, released under the 2-clause BSD License (also known as the FreeBSD).

OpenLayers Home: http://www.openlayers.org/

Create, optimize, and deploy stunning cross-browser web maps with the OpenLayers JavaScript web mapping library

Learn how to use OpenLayers through explanation and example
Create dynamic web map mashups using Google Maps and other third-party APIs
Customize your map's functionality and appearance
Deploy your maps and improve page loading times
A practical beginner's guide, which also serves as a reference with the necessary screenshots and exhaustive code explanations

In Detail

Web mapping is the process of designing, implementing, generating, and delivering maps on the World Wide Web and its products. OpenLayers is a powerful, community driven, open source, pure JavaScript web mapping library. With it, you can easily create your own web map mashup using WMS, Google Maps, and a myriad of other map backends. Interested in knowing more about OpenLayers? This book is going to help you learn OpenLayers from scratch.

OpenLayers 2.10 Beginner's Guide will walk you through the OpenLayers library in the easiest and most efficient way possible. The core components of OpenLayers are covered in detail, with examples, structured so that you can easily refer back to them later.

The book starts off by introducing you to the OpenLayers library and ends with developing and deploying a full-fledged web map application, guiding you through every step of the way.

Throughout the book, you'll learn about each component of the OpenLayers library. You'll work with backend services like WMS, third-party APIs like Google Maps, and even create maps from static images. You'll load data from KML and GeoJSON files, create interactive vector layers, and customize the behavior and appearance of your maps.

There is a growing trend in mixing location data with web applications. OpenLayers 2.10 Beginner's Guide will show you how to create powerful web maps using the best web mapping library around.

This book will guide you to develop powerful web maps with ease using the open source JavaScript library OpenLayers.

What you will learn from this book

Learn how to set up OpenLayers and use it to create your own web maps
Debug your map to find out how it works and how to fix things that break
Investigate the multitude of different layer types OpenLayers supports out of the box
Customize your map's settings to support different projections, resolutions, controls, and more
Learn about what projections are and how to work with them
Use Google, Bing, Yahoo, and other third-party maps directly in your own map
Understand the numerous map controls provided out of the box and learn how to develop and customize your own
Add real-time, client-side interaction with the Vector layer and customize its appearance
Work with external data formats like KML, GeoJSON, and many others
Develop a complex web map application using external data sources from Flickr, Twitter, and more
Learn how to deploy and optimize your web map

Approach

This is a beginner's guide with the essential screenshots and clearly explained code, which also serves as a reference.

Who this book is written for

This book is for anyone who has any interest in using maps on their website, from hobbyists to professional web developers. OpenLayers provides a powerful, but easy-to-use, pure JavaScript and HTML (no third-party plug-ins involved) toolkit to quickly make cross-browser web maps. A basic understanding of JavaScript will be helpful, but there is no prior knowledge required to use this book. If you've never worked with maps before, this book will introduce you to some common mapping topics and gently guide you through the OpenLayers library. If you're an experienced application developer, this book will also serve as a reference to the core components of OpenLayers

OpenStreetMap - The Free World Map

OpenStreetMap is a free worldwide map, created by people like you and me. The data is free to download and use under its open license. Create a user account to improve the map.

Web Site: OpenStreetMap

This book introduces the OSM project, its aims and objectives, and its history, then guides you through the process of gathering, editing, and using OpenStreetMap data using a series of real-world examples. This book is the perfect aid for geographic-information professionals interested in using OpenStreetMap in their work and web designers and developers who want to include mapping in their sites, and want a distinctive style. It is for you if you have a need to use maps and geographic data for work or leisure, and want accurate, up-to-date maps showing the information you're interested in, without details you don't need. If you want to use maps for navigation and want more or less detail than traditional printed maps give this book is perfect for you.

Sunday, February 26, 2012

About Facebook JavaScript SDK

The JavaScript SDK provides a rich set of client-side functionality for accessing Facebook's server-side API calls. These include all of the features of the REST API, Graph API, and Dialogs. Further, it provides a mechanism for rendering of the XFBML versions of our Social Plugins, and a way for Canvas pages to communicate with Facebook.

reference: http://developers.facebook.com/docs/reference/javascript/

Monday, January 16, 2012

Using Android fonts on webpage

Using Android fonts on webpage

Last article demonstrate how to Using Google web fonts in your web page. If you have a webpage/web-app target Android audiences, and want your app have Android look and feel, you can embed Android fonts provided by Google web fonts: Droid Sans, Droid Sans Mono and Droid Serif.

Open http://www.google.com/webfonts in your browser, type droid in the search box. All the three Android fonts will be listed.

Search droid in http://www.google.com/webfonts

Last article I show how to embed one fonts, now I will show how to use Collection.

Click Collection buttons in all three available fonts, they will be listed in the bottom. And then click the Use button.

Almost done! Verify your settings below and then copy the code for your website.

Scroll down to 3. Add this code to your website, copy the code as the first element in the of your HTML document.

<link href='http://fonts.googleapis.com/css?family=Droid+Sans|Droid+Sans+Mono|Droid+Serif' rel='stylesheet' type='text/css'>

Add the font name to your CSS styles just as you'd do normally with any other font.
font-family: 'Droid Sans', sans-serif;
font-family: 'Droid Sans Mono', sans-serif;
font-family: 'Droid Serif', serif;

like as:
h1 { font-family: 'Droid Sans', sans-serif; font-weight: 400; }

Example:

<!doctype html>
<head>
<link href='http://fonts.googleapis.com/css?family=Droid+Sans|Droid+Sans+Mono|Droid+Serif' rel='stylesheet' type='text/css'>
</link>
<title>Mobile-Web-App: Android Fonts</title>
<meta charset="utf-8"></meta>
<meta name = "viewport" content = "width = device-width, height = device-height" />
 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>

    <style>
h2 { font-family: 'Droid Sans', sans-serif; font-weight: 400; } 
h3 { font-family: 'Droid Sans Mono', sans-serif; font-weight: 400; }
h4 { font-family: 'Droid Serif', serif; font-weight: 400; } 
    </style>

</head>
<body>
 
<div data-role="page" id="home">
<div data-role="header">
<h1>Google Web Fonts: Droid</h1>
</div>
 
<div data-role="content">
<h2>Droid Sans</h2>
<h3>Droid Sans Mono</h3>
<h4>Droid Serif</h4>
</div>
 
<div data-role="footer">
<h4><a href="http://mobile-web-app.blogspot.com/">http://mobile-web-app.blogspot.com/</a></h4>
</div>
 
</div>
 
</body>
</html>

Sunday, January 15, 2012

Using Google web fonts in your web page: Hundreds of free, open-source fonts optimized for web!

About Google Web Fonts

Google Web Fonts makes web fonts quick and easy to use for everyone, including professional designers and developers. We believe that there should not be any barriers to making great websites.

Our goals are to create a directory of core web fonts for the world and to provide an API service so that anyone can bring quality typography to their webpages.

The API service runs on Google's servers. They are fast, reliable and tested. Google provide the service free of charge. It is possible to add Google Web Fonts to a website in seconds.

A web built with web fonts is a web that is more beautiful, more readable, more accessible and more open.

Open Source Fonts

All of the fonts are Open Source. This means that you are free to share your favorites with friends and colleagues. You can even improve or customize them and collaborate with the original designer. And you can use them in every way you want, privately or commercially – in print, on your computer, or in your websites.

We are working with designers around the world to publish quality typeface designs that are made for the web. If you design fonts and would like to contribute your own designs, please get in touch. Fonts in the directory can become very popular and seen by millions of people every day.

— The Google Web Fonts Team

It's very easy to use any Google web fonts on your page:

Visit Google web fonts http://www.google.com/webfonts, click "Start choosing fonts" to start.

Scroll to choose the fonts, for example: Flavors. Click Quick-use.

Now your fonts is prepared.

scroll down to "3. Add this code to your website:", copy the code as the first element in the <head> of your HTML document.

<link href='http://fonts.googleapis.com/css?family=Flavors' rel='stylesheet' type='text/css'>

Add the font name to your CSS styles just as you'd do normally with any other font.

h1 { font-family: 'Flavors', cursive; font-weight: 400; }

Example:

<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Flavors' rel='stylesheet' type='text/css'>
<title>Google Web Fonts</title>

<style>
h1 { font-family: 'Flavors', cursive; font-weight: 400; }
</style>
</head>
<body>

<h1>Mobile-Web-App: Google Web Fonts</h1>

</body>
</html>

next:
- Using Android fonts on webpage

Sunday, December 25, 2011

FREE AWS (Amazon Web Services)

AWS (Amazon Web Services) is introducing a free usage tier to new AWS customers get started in the cloud. New AWS customers will be able to run a free Amazon EC2 Micro Instance for a year, while also leveraging a free usage tier for Amazon S3, Amazon Elastic Block Store, Amazon Elastic Load Balancing, and AWS data transfer. AWS’s free usage tier can be used for anything you want to run in the cloud: launch new applications, test existing applications in the cloud, or simply gain hands-on experience with AWS.

know more: http://aws.amazon.com/free/