Google account logout script in Google application

Gmail logout link:
https://www.google.com/accounts/Logout
or
https://mail.google.com/mail/u/0/?logout&hl=en
Google account logout link:
https://mail.google.com/mail/?logout&hl=en
JS script:
<script type="text/javascript">
popup1=window.open("https://mail.google.com/mail/?logout&hl=en",'','width=600,height=400');
</script>
can be used to logout Gmail account.
But I do not like the popup window. I used Google oauth 2.0 to login my Google calendar application. When users login the Google account in popup window,  they may think they login in oauth 2.0 in my Google calendar application.
So I need to hide the logout popup window.  If users need to login, they should go to my login button using oauth 2.0.
After I added popup1.close();  the popup window is closed, but users are not logged out.
<script type="text/javascript">
popup1=window.open("https://mail.google.com/mail/?logout&hl=en",'','width=600,height=400');
 popup1.close();
</script>

Using Iframe, finally the following script logged out the Google account without popup new window.
 <script type="text/javascript">
document.getElementById('myIFrame').src='https://www.google.com/accounts/Logout';
     timeOut();
</script>
  <iframe id="myIFrame" src="" style='display:none;' >

Display multi youtube videos in one frame

Below is to use iframe to display multi youtube videos in one frame
<ul><li><a target="innerframe11" href="http://www.youtube.com/v/4MR6D7tL38U">1. The Fifth Element Music Video (1997) (RyoDrake Productions)  </a></li><li><a target="innerframe11" href="http://www.youtube.com/v/mfvJWGxX6w8">2. TOP DANCE-HOUSE SONGS 2009-2010(6)  </a></li><li><a target="innerframe11" href="http://www.youtube.com/v/axUixg0RFaI">3. TURKISH MALE BELLY DANCER DiVA</a></li><li><a target="innerframe11" href="http://www.youtube.com/v/VdVePfolNDA">4. Kaskade &amp; Deadmau5 - Move For Me (Official Music Video) </a></li><li><a target="innerframe11" href="http://www.youtube.com/v/2jRWeXYOF9k">5. HAIFA WAHBI (Maktoolash Lahd) NEW ARABIC SONG </a></li><li><a target="innerframe11" href="http://www.youtube.com/v/W2hnLYuCzgQ">6. DAIYA DAIYA-BEST HINDI MOVIE SONGS  </a></li>
<li><a target="innerframe11" href="http://www.youtube.com/v/Jkrn6ecxthM">7. &quot;Mac or PC&quot; Rap Music Video - Mac vs PC  </a>
</li></ul><iframe width="100%" height="600" src="http://www.youtube.com/v/4MR6D7tL38U" name="innerframe11"></iframe> 

Click each link, the video will be displayed in same frame.

• 1. The Fifth Element Music Video (1997) (RyoDrake Productions)
• 2. TOP DANCE-HOUSE SONGS 2009-2010(6)
• 3. TURKISH MALE BELLY DANCER DiVA
• 4. Kaskade & Deadmau5 - Move For Me (Official Music Video)
• 5. HAIFA WAHBI (Maktoolash Lahd) NEW ARABIC SONG
• 6. DAIYA DAIYA-BEST HINDI MOVIE SONGS
• 7. "Mac or PC" Rap Music Video - Mac vs PC

Append elements and replace elementes in JavaScript

1. To append an element, suppose we have div with id="result"
<div id="result"></div>
We want to append all summary from  resp.items array, first we create a  list element
document.createElement('li'); then we append to this text and append to result id:
<script type="text/javascript">
  for (var i = 0; i < resp.items.length; i++) {
var li = document.createElement('li');
li.appendChild(document.createTextNode(resp.items[i].summary));
document.getElementById('result').appendChild(li);
 }
</script>
2.  To replace an element, suppose we have div with id="result1"
    <div id="result1">test</div>
 We use $('#result1').html(output1); to replace existing text.
<script type="text/javascript"> 
var output1="new output";
 $('#result1').html(output1);
</script>

Get client ID for Google API using OAuth 2.0

Google updated its authentication system using OAuth 2.0.
 https://developers.google.com/accounts/docs/OAuth2

The previous code:
<script type="text/javascript">

function logMeIn() {
  scope = "https://www.google.com/calendar/feeds/yourname%40gmail.com/";
      if (!google.accounts.user.

     checkLogin(scope)) {   
      var token = google.accounts.user.login(scope,domain);
    }else
    {
        alert("You're logged in already!");
    }

}

</script>

should be changed to 

<script src="https://apis.google.com/js/client.js"></script>

<script type="text/javascript">
function logMeIn() {
    var config = {
    'client_id': 'your_id',
    'scope': 'https://www.googleapis.com/auth/calendar'
  };
  gapi.auth.authorize(config, function() {
    console.log(gapi.auth);
    console.log(gapi.auth.getToken().access_token);
  });
}
</script>

 

So we need cliend_id in config to use Oauth 2.0. To get client_id

1) Login your Google account, go to
https://code.google.com/apis/console/.
2) Click on Create project…
3) Select Calendar API for calendar application
4) Create API access, Create oauth 2.0 client ID

 

 

 

Password protected zip file in Windows 7

In Windows XP, we can right click the zip file and select explorer->File and enter password for zip file. But there is no such feature in Windows 7.

One solution is to use peazip.  peazip is a free Zip utility, extract RAR TAR ZIP files,
compress, convert, split and encrypt archives,150+ archive formats supported. peazip can be download from:
http://peazip.sourceforge.net/

After install peazip, start peazip,
click Tools at the top menu, select "enter password/keyfile"  and enter password.
Select the files  in the content and click add, a new window will show. Click OK to zip the files.
And this zip file is password protected.

cache and no-cache in Firefox

In HTML, set no-cache between <head> and <.head> if you do not want to cache the website
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="-1">

There is a small software mozilla_cache_viewer, you can download it from
http://www.nirsoft.net/utils/mozilla_cache_viewer.html 

So you can view the cache in detail after you install it. You can delete part of cache.
cache location is:
C:\Users\<username>\AppData\Local\Mozilla\Firefox\Profiles\gxiyxcl0.default\Cache 
Sometime AppData can not be seen, but you can see it by type this directory.

You can clear all cache in Firefox .

1. At the top of the Firefox window, click on the Firefox button (Tools menu in Windows XP) and then click Options
2. Select the Advanced panel.
3. Click on the Network tab.
4. In the Cached Web Content section, click Clear Now.

The hottest video in youtube attracts 500 million visitors

Korean video
 PSY - GANGNAM STYLE (강남스타일) M/V
 now is the hottest video in youtube. There are 500 million visitors, 2 million like and 0.2 million dislike.
Can you believe this?  Unbelievable.

Video: PSY - GANGNAM STYLE (강남스타일) M/V 

Difference between “include” and “require” in php

1.include("cart.inc") and require("cart.inc"), which should be used in PHP?

If cart.inc does not exist, include("cart.inc") will continue to execute with ignoring warning message,
while require("cart.inc") will halt the script.
It is better to use require("cart.inc") so we can know the error first.

2.Difference between echo, print, var_dump and print_r in PHP?
1) echo a string, not return value
2) print a string, return value 1
3) print_r, not only output a string, but also object type etc
4) var_dump, is similar to print_r, but produces more information than print_r.

3.What is difference between single quote and C in PHP?
The variable in double quote is evaluated, while in single quote it is left as it is.

Website SEO

SEO Stands for Search Engine Optimization.

How Search Engine Works ?

1) Googlebot uses crawling technique via software  called  crawler or  spider to fetch all the web pages linked to a web site.
So it is better to establish as many links as possible for your websites.
2) Then search engine  index the web pages and store in a giant database  and gives a rank.
3) Display the search results.

To do Search Engine Optimization:

1) create more original good content, put each page keywords and titles.
2) submit links to open directory and search engine, exchange links to other websites.

HTML file name convention for SEO

1) Separate words with hyphens rather than underscores, it is better less than 4 words The html file name should be similar to title name.
Below is the Google site create the html file name  for me html-file-name-convention.html for my chapter title HTML file name convention 

2) sub-directory name is not important, but keep as shorter as possible.

3) HTML file size less than 101K better. Google will chop the size above it.

Although human readers prefer flash, video, frame and fancy JavaScript, search engine as a software prefers long pure text.

To do SEO for web design,

 
1) avoid frame  Javascript code, flash, animated gif etx
2) avoid use too many HTML elements.
3) content related to the topic and title.
4) not to use too deep directories, try to as close as the root directory.

 
For example my keyword is SEO, where to put this keyword?
In HTML code:

<html>
<head>
<title>SEO</title>
<meta name="description" content="SEO" />
<meta name="keywords" content=""SEO" />
</head>
<body>
<h1>SEO</h1>
<a href="https://sites.google.com/site/jiansenhtmlcsstutorial/chapter-6-seo/chapter-6-3-where-to-put-keywords-for-seo" title="SEO">SEO keyword guide</a>
<img src="seo.gif" alt="SEO">
  <!-- SEO comment line>
<p> SEO
</p>

</body>
</html>
So we can put keywords in title, meta tag, <h1> headline, link, alt tag,  HTML comment line and body text.

How to choose keywords?
Go to : Google Keyword Tool
Type keyword or your web address, get High Competition Keywords.

 

 

Jquery $() factory function

Jquery is a powerful JavaScript library which simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery can quickly find the matching elements in DOM using selectors.

Jquery can be downloaded from:
http://jquery.com/

A lot of jQuery beginners may not get used to $() function in jQuery.

$() factory function ( the same as jQuery(), used in case of conflicting with other JavaScript functions) is used as a jQuery selector to  find out matching elements from a DOM based on a given variable, which can be:

1) tag name, for example  $("p") to get the object between <p> </p>
2) tag ID， for example $('#myid')  to select the element with ID myid, such as <p id="myid"> </p>
3) class, for example $('.myclass')  to select the element with class myclass, such as <p class="myclass"> </p>
4) Universal *, for example $(*) selects all elements in the document.
5) Combination, for example $(p > *)  selects all elements that are children of <p>; $("li > ul") selects all elements matched by <ul> that are children of  <li>.

Resize and drag for image detail using zoom.it

You may want your image drag and resize like Google map. Now you can use zoom.it (http://zoom.it) to create application and embed code for you.

1) Go to
http://zoom.it/pages/create/
copy your image url to the input box
2) Click create and you can see the new format of the image
3) Click embed to get embed code.
Demo: Click  the image to zoom in, drag the image to see different part of the image,  there are zoom in, zoom out and full screen selection at bottom. This application is especially good for high resolution images and Panoramas images.

Monitor server down and get email notification

Reference:
http://techawakening.org/website-downtime-free-sms-alerts-google-docs/988/ 

Using Google document to monitor web server down. The notification  can be sent by an email and posted in your Google calendar.
1) Click here to make copy of the Google Spreadsheet, assuming you have login your Google account.
2) Modify the websites and email address to yours in F column in your copy of Google document.
3)  Now select Tools-> Script editor  in your copy of Google document.
(note there is a bug in the script:
line 71 change
 var email = sheet.getRange("F5").getValue();
to
 var email = sheet.getRange("F8").getValue();
)
you can see:
 /**   Get Free SMS alerts for your Site's Uptime and Downtime  **/

/**   Original Script by Amit Agarwal 26/03/2012  **/
/**   http://labnol.org/?p=33232  **/

/*    Modified by Shunmugha Sundaram to get SMS alerts
      and to support multiple site monitoring- 31/03/2012 */
/*    Instructions at http://techawakening.org/?p=988 */
function isMySiteDown()
{
var i=3; 
// Tweak the loop variable if you want to monitor more then 4 sites.
for (i=3;i<=6;i++)
   {   
  // In cell E3 enter the URL of the site you want to monitor  
  var url = SpreadsheetApp.getActiveSheet().getRange("F"+i).getValue();
        if(url.length)
         {
           var scriptvalue=ScriptProperties.getProperty("status"+ i);
  if (!scriptvalue) {
     ScriptProperties.setProperty("status" + i, 200);
   
  }
            
  var response, error;

  try {   
    response = UrlFetchApp.fetch(url);
  
  } catch(error)
   
  {  
   insertData(error, -1, url, i, "Website down");
   continue;
  }
 
  var code = response.getResponseCode();
 
  if (code == 200)
  {
    {
    insertData("Up", code, url, i, "Website up"); }
   
  }
  else
    insertData(response.getContent()[0], code,url, i,"Website down");
     //end if
          }
  else
  {
    //Don't poll it
  }
     }
}
function insertData(error, code, url, i, msg) { 
 
  
  if (ScriptProperties.getProperty("status"+i) == code)
  {
   return;
  }
    
  var sheet = SpreadsheetApp.getActiveSheet();
  var email = sheet.getRange("F8").getValue();
  var row   = sheet.getLastRow() + 1;
  var now = new Date().getTime();
 
  sheet.getRange(row,1).setValue(new Date());
  sheet.getRange(row,2).setValue(url);
  sheet.getRange(row,3).setValue(error);
  sheet.getRange(row,4).setValue(code);
 
  ScriptProperties.setProperty("status"+i, code);
 
  if(code!=200)
   
  CalendarApp.createEvent( url + ' is DOWN' ,
                            new Date(now+40000),
                            new Date(now+40000)).addSmsReminder(0);
  else
   
  CalendarApp.createEvent( url + ' is UP' ,
                            new Date(now+40000),
                            new Date(now+40000)).addSmsReminder(0);
 
 // Uncomment the below line if you want to get Email alerts too.
 
  //MailApp.sendEmail(email, msg, error);
}
4. If you want to monitor more than 4 sites (max 4 sites are current setting), you can change the loop
for (i=3;i<=6;i++) in the script.
If you want to receive email notification, uncomment the last line:
 MailApp.sendEmail(email, msg, error);
5)  Important step: set your  trigger.
 Go to Tools – > Script Editor – > Resources – > Current Script’s Triggers,  Under Run select “isMySiteDown” then in set  a Time-Driven trigger for every 15 minutes or others .
6) Now you can check your servers down information in your copy of Google document and email.

Convert your aduio to mp3,ogg and other formats using switch

In HTML5, we have <audio> tag to embed audio:
<audio controls="controls">
  <source src="jiansen.mp3" type="audio/mp3">
  <source src="jiansen.ogg" type="audio/ogg">
Your browser does not support this audio format.
</audio> 
Here mp3 is for Internet Explorer, Chrome, and Safari, and ogg file is for Firefox and Opera.

If we have wma audio files  or other formats, we need to convert them to mp3 and ogg formats.
We can use Switch Audio File Converter Software, which can be downloaded from:
http://www.nch.com.au/switch/
There is a free version. It can be used in to convert and encode sound files on PC and Mac.
Supported Audio File Formats: wav, mp3, wma, m4a, ogg, mid, flac, mov amr, aac, au, aif, raw, dvf, vox, gsm, dss, wmv and many other audio formats.
switch program:

Uninstall UUSee

UUSee is a P2P TV or streaming video application program from China. UUSee streams hundreds if not thousands of TV channels. But  UUSee produces a lot of junk, spam and unwanted programs and ads for revenue although it is free.

To uninstall or remove  UUSee, you can go to control panel->remove program. But you may find you can not remove UUSee or the related directory. The message said "it is used by another program". This is because UUSee is still running. You need to stop the process first.  Press Ctrl+Alt+delete->Task manager-, go to Windows task manager  and click processes at the top menu, find all UUSee related and click end process.  Then go to remove the program from the control panel.

Use Firebug in Cross Browser

Firebug is a powerful web development tool, can be downloaded from:
 http://getfirebug.com/
Firebug can   inspect HTML,  modify style and layout in real-time, and act as an advanced JavaScript debugger.

Include this script in your code:

Stable live link

Include the following code at the top of the <head> of your page:
 <script type="text/javascript" src="https://getfirebug.com/firebug-lite.js"></script>

Test MySQL connection in php using xampp

XAMPP is a very easy to install Apache Distribution for Linux, Solaris, Windows and Mac OS X. The package includes the Apache web server, MySQL, PHP, Perl, a FTP server and phpMyAdmin.

XAMPP Web Site

Go to http://localhost/phpmyadmin/ after installing xampp
create database "test" under Database tab. Under "Users", check database username "root", host "localhost", password "no" for default

My default working directory is: C:\xampp\htdocs\xampp\
 Create a directory phptest, input the following script in test.php:
<?php
  
$db_host = "localhost";
$db_username = "root";
$db_pass = "";
$db_name = "test";

if(mysql_connect("$db_host","$db_username","$db_pass"))
{echo "connect to MySQL server ".$db_host." with username ".$db_username."<br />";}
else die ("could not connect to mysql");
if(mysql_select_db("$db_name"))
{echo "connect to dtabase ".$db_name;}
else die("no database");            
?>
Run
http://localhost/xampp/phptest/test.php

If everything is OK, the result should return:
connect to MySQL server localhost with username root
connect to dtabase test

Online text difference checker

Online text difference checker:
http://diffchecker.com/3GH67u45

t

Diff Checker is a free online diff tool that gives you the text differences between two blocks of text. Upload or paste the contents of two files and click 'Find Difference!'

Online photo editor, similar to Photoshop

This is the website for online photo editor:
http://pixlr.com/editor/
Its function is similar to Photoshop and based on flash.

Another one is for vector photo, called SVG Editor：
http://svg-edit.googlecode.com/svn-history/r1771/trunk/editor/svg-editor.html

A very tough verification code

This is a very interesting verification code. Did the same painting to send the contact form.

 If you want to try, the link is HERE:
http://www.geee.net/contact.htm

This is what I did, Surely I will fail,

image reflection and CoverFlow

Design image reflection and CoverFlow only using ActionScript and the images are loaded from external directory "image", image names:02.jpg,03.jpg,04,jpg,05.jpg, 06.jpg each image size 320(width)*220.
 Demo, click side images to move to the center. The source code based on greensock tweenlite library.
http://www.greensock.com/tweenlite/
and summerTree library
1) Open Flash CS5, create actionscript 3.0 document, In ActionScript settings, document class: Main
2) put :02.jpg,03.jpg,04,jpg,05.jpg, 06.jpg each image size 320(width)*220 under directory image, where image directory and fla file are under the same directory
3) download greensock tweenlite, com directory and image directory are under the same directory
4) set org.summerTree library, org and com are under the same directory.
5)Main.as and the download pack can be found:
 https://sites.google.com/site/flashandsourcecodebyjiansen/main_page/chapter-1-8-3-image-reflection-and-coverflow

Create a Google site for flash source code

Designing a flash is an engineering. It is better to keep tools, blocks and templates for speeding up the design. I keep some  flash tools, building blocks and fla files in a Google site:
https://sites.google.com/site/flashandsourcecodebyjiansen/

Draw a tree only using actionscript

There are two ways to create a flash:
Draw in Flash CS5 or Create flash using Actionscript.
I am a programmer rather than an artisit. I tend to create flash only using actionscript.
Draw a tree only using actionscript demo:
Steps:
1) Open new document in Flash CS5, select actionscript 3.0
2) Press F9, paste the following code:
var sec:Sprite=new Sprite();
var mc = sec.graphics;
function dl(ax, ay, bx, by) {
mc.moveTo(ax, ay);
mc.lineStyle(0, 0x008000, 100);
mc.lineTo(bx, by);
}
function lzh(x, y, l, angle, n) {
if (n>0) {

var a_l, a_r, x1, x1_l, x1_r, y1, y1_l, y1_r, x2, x2_l, y2, y2_l, x2_r, y2_r;
x1 = x+0.5*l*Math.cos(angle*Math.PI/180);
y1 = y-0.5*l*Math.sin(angle*Math.PI/180);
x2 = x+l*Math.cos(angle*Math.PI/180);
y2 = y-l*Math.sin(angle*Math.PI/180);
dl(x, y, x2, y2);
a_l = angle+30;
a_r = angle-30;
l = l*2/3;
lzh(x2, y2, l, angle-Math.random()*10, n-1);
lzh(x1, y1, l*2/3, a_l, n-1);
lzh(x1, y1, l*2/3, a_r, n-1);
lzh(x2, y2, l*2/3, a_l, n-1);
lzh(x2, y2, l*2/3, a_r, n-1);
}
}
lzh(300, 400, 120, 90, 6);
addChild(sec);
var AuthorInfo:TextField=new TextField();
 AuthorInfo.selectable=false;
 AuthorInfo.autoSize=TextFieldAutoSize.CENTER;
 AuthorInfo.text="@Jiansen Lu";
 AuthorInfo.x=200-AuthorInfo.width/2;
 AuthorInfo.y=330;
 addChild(AuthorInfo);

Design a clock only using ActionScript

Below is the demo to design a clock only using ActionScript. The source code and more flash can be found:
 https://sites.google.com/site/flashandsourcecodebyjiansen/main_page/chapter-1-9-4-design-clock-only-using-actionscript

Design muti choice quetions in Flash

Below is the multi choice questions in Flash, mainly based on actionScript:

Some of the code:
1) To add a title in AS3:
var myText:TextField = new TextField();
myText.text = "                                                         Multi Choice Questions\n";
addChild(myText);
myText.width = 350;
myText.height = 40;
myText.textColor = 0xFF0000;

2) To add a link in AS3:
 var style:StyleSheet = new StyleSheet();
var link:TextField = new TextField();
style.setStyle("A",{textDecoration:"underline", color:"#0000FF", fontSize:"24", fontFamily:"Arial", fontWeight:"bold" });
link.styleSheet = style;
link.width = 380;
link.htmlText = "<a href='http://jiansenlu.blogspot.ca/'>http://jiansenlu.blogspot.com/</a>";
addChild(link);
link.x=20;
link.y=350;

Import ActionScript 3 external class to Flash CS5

Suppose you have flash file myflash.fla in
/work_dir/myflash.fla
and you have Main class in:
/work_dir/com/example/Main.as
Main.as is as follows:

package com.example
{
    public class Main extends Sprite
    {
        public function Main():void
        {
            trace("here");
        }
    }
}

There are two ways to call Main class in Flash CS5.
 1) In Flash CS5, File->ActionScript setting-> document class, input Main
or
2) Press F9, import the following script:

var test:Main = new Main();
addChild(test);

There is some difference between method 1) and method 2
If stage.stageWidth is used in the script, the method 1 is recommended. The method 2 will return the following error message:
Error #1009: Cannot access a property or method of a null object reference.

Flash Scroll Effect

Based on online flash tutorial, create a flash with open scroll animation effect.