Mobile-Web-App

Monday, June 25, 2012

Easy build Google I/O 2012 Live Gadget for your site

Google I/O 2012 is coming June 27-29, 2012 Moscone Center, San Francisco. You can build your Google I/O 2012 Live Gadget on your site easily.

Visit https://developers.google.com/events/io/io-live-gadget-configurator to make one for your site.

HTML5 details and summary

HTML5 provides <details> and <summary> to create an interactive widget that shows and hides some content.

Please note that not all browser support <details> and <summary>, it's the screen shot run the example on Google Chrome.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mobile-Web-App: HTML5 details</title>

</head>
<body>
<h1>Mobile-Web-App: HTML5 details</h1>
 
<details>
 <summary>details</summary>
 <p>The details element represents a disclosure widget from which the user can obtain additional information or controls.</p>
</details>

</body>
</html>

Saturday, June 23, 2012

Google lower price of Google Maps API

Google lower Maps API usage fees and simplifying limits for both Styled and regular maps. Here are the details:

Changes to pricing. While the Maps API remains free for the vast majority of sites, some developers were worried about the potential costs. In response, we have lowered the online price from US $4 per 1,000 map loads to 50¢ per 1,000 map loads.
Simplified limits. We’re eliminating the previous distinction between Styled Maps and regular unstyled maps. The same usage limits and pricing now apply to applications using Styled Maps and the default Google Maps style.

Source: Google Geo Developers Blog -Lower pricing and simplified limits with the Google Maps API

Wednesday, June 20, 2012

Creating Your First Ubuntu App

A tutorial for how to create you first Ubuntu application. The tutorial shows how to create a simple web browser by generating a project, setting up your user interface, writing the code, and creating an Ubuntu package.

css exercise: text shadow

Example to apply shadow on text with css.

text-shadow: x y blur-amount colour;

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mobile-Web-App: test css</title>
<style>

h1{
 text-shadow: 10px 10px 15px #aaa;
 color: #000;
 font: 200% Arial;
 font-weight: bold;
 
}

</style>
</head>
<body>
<h1>Mobile-Web-App: CSS Exercise - text shadow</h1>

</body>
</html>

Saturday, June 16, 2012

jsFiddle - an online editor for web snippets.

jsFiddle is a playground for web developers, a tool which may be used in many ways. You can use it as an online editor for snippets build from HTML, CSS and JavaScript.

Play jsFiddle online: http://jsfiddle.net/

Chrome App version is available in Chrome Web Store here.

Tuesday, June 12, 2012

jQuery fadeIn effect

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
  <script>
  $(document).ready(function(){
    $("#myimage").hide();
    $("#myimage").fadeIn("slow");
  
  }) 

  </script>
</head>
<body>
<p>fadeIn</p>
<img id="myimage" src="http://goo.gl/BlQEX"/>

</body>
</html>