Mobile-Web-App: June 2012

Saturday, June 30, 2012

Mobile JavaScript Application Development: Bringing Web Programming to Mobile Devices

When developing apps for the latest smartphones, you’re faced with several vexing questions. How many platforms do you need to accommodate? What level of support do mobile browsers provide? To help you address these and many other key issues, this guide provides a hands-on tour of the most powerful JavaScript frameworks available today.

You’ll build sample apps with jQuery Mobile, Sencha Touch, and PhoneGap to learn the unique advantages—and disadvantages—of each framework. From there, you can determine which one is best for your project. This book is ideal for web developers familiar with JavaScript, HTML, and CSS.

Experience the simplicity of jQuery Mobile for building cross-browser applications
Learn how Sencha Touch’s architecture, widgets, and blazing-fast rendering engine makes it a good choice for enterprise software
Use PhoneGap to package your web app into a native iOS, Android, or Windows Phone application
Discover the impact of various HTML5 features on mobile app development
Pick up JavaScript productivity tips as you delve into its object orientation, closures, and coding conventions

Friday, June 29, 2012

Google I/O 2012 - Dart - A Modern Web Language

The two creators of Dart will discuss the rationale behind Dart's design and its impact on web scalability and performance.

They'll also present how Dart helps developers innovate by increasing their productivity without breaking backwards compatibility.

Google I/O 2012 - Web Programming with Dart

Google I/O 2012 - Putting the App Back into Web App - Web Programming with Dart

Do you want to build blazingly fast applications with beautiful graphics and offline support? Would you like to run those apps anywhere on the open web? Would you like to develop those apps in a language that supports modular large-scale development while keeping the lightweight feel of a scripting language? This session will show you how to use the Dart programming language to develop the next generation of amazing applications for the open web.

Google I/O 2012 - Maps for Good

Developers are behind many cutting-edge map applications that make the world a better place. In this session we'll show you how developers are using Google Earth Builder, Google Earth Engine, Google Maps API and Android apps for applications as diverse as ethno-mapping of indigenous cultural sites, monitoring deforestation of the Amazon and tracking endangered species migrations around the globe. Come learn about how you can partner with a non-profit to apply for a 2012 Developer Grant and make a positive impact with your maps.

Tuesday, June 26, 2012

HTML5 figure and figcaption

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

</head>
<body>
<h1>Mobile-Web-App: HTML5 figure and figcaption</h1>
 
<figure>
 <img src="http://goo.gl/BlQEX"/>
 <figcaption>
  <p>http://mobile-web-app.blogspot.com/</p> 
 </figcaption>
</figure>

</body>
</html>

Highligh text using HTML5 mark Tag

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

</head>
<body>
<h1>Mobile-Web-App: HTML5 mark</h1>
 
<p>Highligh text using HTML5 <mark>mark</mark> Tag</p>


</body>
</html>

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>

Friday, June 8, 2012

Load Flickr images and display in horizontal scroll bar, using jQuery

The former "Load Flickr image in JSON format, using jQuery - display in <ul>". In this version, it's modified to display in horizontal scroll bar.

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

    $.getJSON(
      "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",
      { format: "json"},
        function(data){  
          var number_of_image = 0;
          $.each(data.items, function(i,item){  
            var new_img = $(document.createElement("img")); 
            new_img.attr("src", item.media.m); 
            new_img.css({"width": 150, "height": 150, "margin": 5});    
            $("#flickrimage").append(new_img);
            
            number_of_image++;
            
          }); 

          $("#flickrimage").css({"width": number_of_image * 160});       
        }
      );
      
  
  }) 

  </script>
</head>
<body>
<p>Display Flickr images in horizontal scroll bar</p>
<div style="width:800px; height: 180px; overflow:scroll;">
<div id="flickrimage">
</div>
</div>
</body>
</html>

Wednesday, June 6, 2012

The new, larger version of the Internet: IPv6

google.com/ipv6 -- Vint Cerf, Chief Internet Evangelist at Google, and a founding father of the Internet, discusses the next version of the Internet, IPv6, and why we need it.

When the Internet launched operationally in 1983, no one ever dreamed that there might be billions of devices and users trying to get online. But like a telephone network that is running out of phone numbers, the current Internet is running out of IP addresses, and if we don't roll out Internet Protocol v6 (IPv6), we won't have the room we need to grow and the Internet would become tangled, unsafe and unsustainable.

Tuesday, June 5, 2012

IPv6 is coming to the world

Major Internet service providers (ISPs), home networking equipment manufacturers, and web companies around the world are coming together to permanently enable IPv6 for their products and services by 6 June 2012.

Organized by the Internet Society, and building on the successful one-day World IPv6 Day event held on 8 June 2011, World IPv6 Launch represents a major milestone in the global deployment of IPv6. As the successor to the current Internet Protocol, IPv4, IPv6 is critical to the Internet's continued growth as a platform for innovation and economic development.

~ http://www.worldipv6launch.org/

Monday, June 4, 2012

Facebook open source internal C++ library

Facebook release Folly(Facebook Open-source LibrarY), an open-source C++ library developed and used at Facebook.

~ https://github.com/facebook/folly

Sunday, June 3, 2012

Load Flickr image in JSON format, using jQuery

Example to load Flickr image in JSON format, using jQuery.

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
  <script>
  $(document).ready(function(){
  
    var div_flickrimage = document.getElementById("flickrimage");
    var new_ul = $(document.createElement("ul"));
    $(new_ul).appendTo(div_flickrimage);
  
    $.getJSON(
      "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",
      { format: "json"},
        function(data){
          $.each(data.items, function(i,item){
          
            var new_li = $(document.createElement("li"));
            $("<img/>").attr("src", item.media.m).appendTo(new_li);
            new_li.appendTo(new_ul);
            
          });          
        }
      );
  })  

  </script>
</head>
<body>
  <div id="flickrimage"></div>

</body>
</html>

Create HTML List using jQuery

Example to create HTML List using jQuery:

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8"/>
  <title>Mobile-Web-App: Create HTML List using jQuery</title>  
  <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
         
  <script > 
    $(document).ready(function(){ 
      var div_info = document.getElementById("info");
    
      var new_ul = $(document.createElement("ul"))

      $(create_li("Sunday")).appendTo(new_ul);
      $(create_li("Monday")).appendTo(new_ul);
      $(create_li("Tuesday")).appendTo(new_ul);
      $(create_li("Wednesday")).appendTo(new_ul);
      $(create_li("Thursday")).appendTo(new_ul);
      $(create_li("Friday")).appendTo(new_ul);
      $(create_li("Saturday")).appendTo(new_ul);
      $(new_ul).appendTo(div_info);
    }
  )          

  function create_li(item){  
    var new_li = $(document.createElement("li"));   
    $("<p>" + item + "</p>").appendTo(new_li);    
    return new_li;
  }      

  </script>
  
</head>
<body>
  <H1>Mobile-Web-App: Create HTML List using jQuery</H1> 
  <div id="info">
  </div>
  
</body>
</html>

Related:
- Create HTML List using Javascript

Create HTML List using Javascript

Example to create HTML List using Javascript:

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8"/>
  <title>Mobile-Web-App: Create HTML List using Javascript</title>
         
  <script > 
    function myOnLoad(){ 
      var div_info = document.getElementById("info");
    
      var new_ul = document.createElement("ul");
      
      new_ul.appendChild(create_li("Sunday"));
      new_ul.appendChild(create_li("Monday"));
      new_ul.appendChild(create_li("Tuesday"));
      new_ul.appendChild(create_li("Wednesday"));
      new_ul.appendChild(create_li("Thursday"));
      new_ul.appendChild(create_li("Friday"));
      new_ul.appendChild(create_li("Saturday"));
      
      div_info.appendChild(new_ul);
    }            
    
  function create_li(item){
    var new_li = document.createElement("li"); 
    new_li.innerHTML = item;
    return new_li;
  }
  
  window.onload = myOnLoad;
  </script>
  
</head>
<body>
  <H1>Mobile-Web-App: Create HTML List using Javascript</H1> 
  <div id="info">
  </div>
  
</body>
</html>

Related:
- Create HTML List using jQuery

Saturday, June 2, 2012

Web workers - Multi-thread on HTML5

The specification (Web workers) defines an API for running scripts in the background independently of any user interface scripts.

This allows for long-running scripts that are not interrupted by scripts that respond to clicks or other user interactions, and allows long tasks to be executed without yielding to keep the page responsive.

Workers are relatively heavy-weight, and are not intended to be used in large numbers. For example, it would be inappropriate to launch one worker for each pixel of a four megapixel image. The examples below show some appropriate uses of workers.

Generally, workers are expected to be long-lived, have a high start-up performance cost, and a high per-instance memory cost.

details: http://www.whatwg.org/specs/web-apps/current-work/multipage/workers.html

The Web Hypertext Application Technology Working Group (WHATWG) is a growing community of people interested in evolving the Web. It focuses primarily on the development of HTML and APIs needed for Web applications.

The WHATWG was founded by individuals of Apple, the Mozilla Foundation, and Opera Software in 2004, after a W3C workshop. Apple, Mozilla and Opera were becoming increasingly concerned about the W3C’s direction with XHTML, lack of interest in HTML and apparent disregard for the needs of real-world authors. So, in response, these organisations set out with a mission to address these concerns and the Web Hypertext Application Technology Working Group was born.

Friday, June 1, 2012

Windows 8 Release Preview

It's Windows reimagined and reinvented from a solid core of Windows 7 speed and reliability. It's an all-new touch interface. It's a new Windows for new devices. And it's easy to try now—whether you're installing it for the first time, or moving from Windows 8 Consumer Preview. Download Here.