Wednesday, September 28, 2011

Using Google Chart Tools - Visualization: Pie Chart

It's a example of using Google Chart Tools - Visualization: Pie Chart.

Using Google Chart Tools - Visualization: Pie Chart

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>i can code! for Web.</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart']});
</script>
<script type="text/javascript">
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'name');
data.addColumn('number', 'data');
data.addRows(5);
data.setValue(0, 0, 'A');
data.setValue(0, 1, 50);
data.setValue(1, 0, 'B');
data.setValue(1, 1, 50);
data.setValue(2, 0, 'C');
data.setValue(2, 1, 50);
data.setValue(3, 0, 'D');
data.setValue(3, 1, 25);
data.setValue(4, 0, 'E');
data.setValue(4, 1, 25);

// Create and draw the visualization.
new google.visualization.PieChart(document.getElementById('visualization')).
draw(data, {title:"Google Chart Tools - Visualization: Pie Chart"});
}

google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="visualization" style="width: 600px; height: 400px;"></div>
</body>
</html>

Tuesday, September 27, 2011

jQTouch

jQTouch is a jQuery plugin for mobile web development on the iPhone,
Android, iPod Touch, and other forward-thinking devices.

http://jqtouch.com/


Sunday, September 25, 2011

Targeting screen sizes by using media queries

In this exercise, we have two css files, desktop.css and mobile.css. In our HTML, dualcss.html, we will load the suitable css according to the browser width (not the device screen width in this exercise).

desktop.css
mobile.css

desktop.css
body {
font-size: 50px;
font-weight: bold;
font-family: Arial;
}
a { font-style: italic; }
h1 {
font-size: 50px;
font-weight: bold;
font-family: Arial;
}


mobile.css
body {
font-size: 10px;
font-weight: bold;
font-family: Arial;
}
a { font-style: italic; }
h1 { font-style: italic; }


dualcss.html
<html>
<head>
<title>i can code! for Web: Dual CSS</title>

<link rel="stylesheet" type="text/css" href="mobile.css" media="only screen and (max-width: 480px)" />
<link rel="stylesheet" type="text/css" href="desktop.css" media="screen and (min-width: 481px)" />

</head>
<body>
<h1>i can code! for Web: Dual CSS</h1>
<p><a href="http://icancode-4-web.blogspot.com/">http://icancode-4-web.blogspot.com/</a></p>
</body>
</html>



Saturday, September 24, 2011

Yahoo! Site Explorer transition to Bing Webmaster Tools

Bing Webmaster Tools are supporting the Yahoo! Site Explorer community. Webmasters should now be using the Bing Webmaster Tools to ensure that their websites continue to get high quality organic search traffic from Bing and Yahoo!.斜體

Since the middle of August 2011, the Bing Webmaster Tools have also been integrating traffic data from Yahoo! into its reports. Please check out the Bing Webmaster blog post for more information.



Friday, September 23, 2011

IE 9 Guide for Developers


The Internet Explorer 9 Guide for Developers provides a look at the features and improvements in Internet Explorer 9. By using this guide, web developers and designers can take full advantage of these enhancements.

link: http://msdn.microsoft.com/en-us/ie/ff468705

Wednesday, September 21, 2011

Developer Preview of Google+ Hangouts API


Google announced developer preview of Google+ Hangouts API, The Google+ Hangouts API allows you to develop collaborative apps that run inside of a Google+ Hangout. Hangout apps behave much like normal web apps, but with the addition of the rich, real-time functionality provided by the Hangouts APIs. Apps have the ability to control aspects of the user interface, synchronize data between hangout participants, and respond to various events in the hangout.

Getting started is easy. First, build your app or just start with one of the pre-built examples. Next, register it in the APIs Console, and tell us who on your team should be able to load your app. Then, start a hangout with your app!

http://developers.google.com/+/hangouts/

Saturday, September 17, 2011

Define callback functions

It's a example show how to define callback function; for example, open, close.



Define callback functions



<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.16/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.16/themes/smoothness/jquery-ui.css">
<title>jQuery UI Dialog</title>
</head>
<body>
i can code! for Web.
<div id="myDialog">
Test Dialog of jQuery UI
</div>
<script>
(function($){

var functionOK = function(){
alert("OK");
},
functionCancel = function(){
alert("Cancel");
},
Options = {

open: function() {
alert("callback function - open");
},

close: function() {
alert("callback function - close");
},

title: "<a href='http://icancode-4-web.blogspot.com/'>i can code! for Web.</a>",
buttons:{
"OK": functionOK,
"Cancel": functionCancel
}
};

$("#myDialog").dialog(Options);
})(jQuery);
</script>
</body>
</html>

Set dimensions of jQuery UI dialog

To set dimensions of jQuery UI dialog, we can use options of width, height, minWidth, minHeight, maxWidth, maxHeight.



example:



Set dimensions of jQuery UI dialog



<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.16/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.16/themes/smoothness/jquery-ui.css">
<title>jQuery UI Dialog</title>
</head>
<body>
i can code! for Web.
<div id="myDialog">
Test Dialog of jQuery UI
</div>
<script>
(function($){

var functionOK = function(){
alert("OK");
},
functionCancel = function(){
alert("Cancel");
},
Options = {

width: 300,
height: 200,
minWidth: 200,
minHeight: 200,
maxWidth: 600,
maxHeight: 250,

title: "<a href='http://icancode-4-web.blogspot.com/'>i can code! for Web.</a>",
buttons:{
"OK": functionOK,
"Cancel": functionCancel
}
};

$("#myDialog").dialog(Options);
})(jQuery);
</script>
</body>
</html>

Tuesday, September 13, 2011

Add buttons in jQuery UI dialog

example:
buttons in jQuery UI dialog

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.16/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.16/themes/smoothness/jquery-ui.css">
<title>jQuery UI Dialog</title>
</head>
<body>
i can code! for Web.
<div id="myDialog">
Test Dialog of jQuery UI
</div>
<script>
(function($){

var functionOK = function(){
alert("OK");
},
functionCancel = function(){
alert("Cancel");
},
Options = {
title: "<a href='http://icancode-4-web.blogspot.com/'>i can code! for Web.</a>",
buttons:{
"OK": functionOK,
"Cancel": functionCancel
}
};

$("#myDialog").dialog(Options);
})(jQuery);
</script>
</body>
</html>



Set linkable title on jQuery UI dialog

example:
linkable title on jQuery UI dialog
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.16/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.16/themes/smoothness/jquery-ui.css">
<title>jQuery UI Dialog</title>
</head>
<body>
i can code! for Web.
<div id="myDialog">
Test Dialog of jQuery UI
</div>
<script>
(function($){
var Options = {
title: "<a href='http://icancode-4-web.blogspot.com/'>i can code! for Web.</a>"
};

$("#myDialog").dialog(Options);
})(jQuery);
</script>
</body>
</html>



Monday, September 12, 2011

Example of jQuery UI - Dialog

jQuery UI - Dialog

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.16/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.16/themes/smoothness/jquery-ui.css">
<title>jQuery UI Dialog</title>
</head>
<body>
i can code! for Web.
<div id="myDialog" title="My Dialog">
Test Dialog of jQuery UI
</div>
<script>
(function($){
$("#myDialog").dialog();
})(jQuery);
</script>
</body>
</html>

Sunday, September 11, 2011

Apply style on div

Apply style on DIV



<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test CSS</title>
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<style>
body { margin-left: 30px; margin-right: 15px; background-color: #ffffff }
h1{font: bold italic 20pt helvetica}

#background{
background: #a0a0a0;
width: 400px;
height: 300px;
position: relative;
overflow: hidden;
}
#reddot {
background: #f00;
position: absolute;
width: 30px;
height: 30px;
left: 185px;
top: 135px;
border-radius: 15px;
}

</style>
</head>
<body>
<h1>i can code! for Web</h1>
<center>
<div id="background">
<div id="reddot"></div>
</div>
</center>

</body>
</html>



Saturday, September 10, 2011

Load jQuery from web page, without download.

To load jQuery, we can add the code below:
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>

example:
<html>
<head><title>Test CSS</title>
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<style>
body { margin-left: 30px; margin-right: 15px; background-color: #ffffff }
h1{font: bold italic 24pt helvetica}
p { font-size: 20px; }
</style>
</head>
<body>
<h1>i can code! for Web</h1>
<p>Load something here...</p>
<script>
$(function(){
alert("Hello, from i can code! for Web.\n"
+ "jQuery loaded.");
});
</script>
</body>
</html>



Test jQuery

Wednesday, September 7, 2011

Link css in separated file

It have same output as last post Simple usage of css, with css in separated file.


<html>
<head><title>Test CSS</title>
<link rel="stylesheet" href="mycss.css" type="text/css">
</head>
<body>
<h1>i can code! for Web</h1>
<p>Test CSS</p>
</body>
</html>



mycss.css

body { margin-left: 30px; margin-right: 15px; background-color: #ffffff }
h1{font: bold italic 24pt helvetica}
p { font-size: 20px; }




Simple usage of css

Simple CSS


<html>
<head><title>Test CSS</title>
<style>
body { margin-left: 30px; margin-right: 15px; background-color: #ffffff }
h1{font: bold italic 24pt helvetica}
p { font-size: 20px; }
</style>
</head>
<body>
<h1>i can code! for Web</h1>
<p>Test CSS</p>
</body>
</html>




Related Post:
-Link css in separated file



HTML5 Rocks - A resource for open web HTML5 developers


HTML5 Rocks is a site made by Google, with resources for open web HTML5 developers.

Safari Developer Tools Guide (former Safari User Guide for Web Developers)


Safari 4.0 and later includes built-in tools such as the Web Inspector to help you prototype, analyze, debug, and optimize websites and web applications. Safari 5.0 and later has additional tools you can use to develop and debug Safari extensions.

Safari has tools for prototyping HTML, CSS, and JavaScript, tools for interactively inspecting and debugging elements, attributes, properties, and styles, an integrated JavaScript debugger, and optimization tools such as audits, a latency and download timeline, and a JavaScript profiler.

These tools are built into Safari on the desktop (Mac OS X and Windows) and you can enable them in other Webkit-based applications. A subset of the tools are available in Safari on iOS-based devices (iPhone, iPad, and iPod touch).

Know more: Safari Developer Tools Guide (former Safari User Guide for Web Developers)