Friday, August 31, 2012

Aptana Studio - Alternative to Adobe Dreamweaver



If you can not afford Adobe Dreamweaver, you can try Aptana Studio.  Aptana Studio is an open source web design software can can be downloaded from:
http://www.aptana.com/
 Aptana Studio 3 can be used to  build, edit, preview and debug HTML, CSS and JavaScript websites with PHP and Ruby on Rails web development. It supports HTML5, CSS3, JavaScript, Ruby, Rails, PHP and Python.

Example 1: test JavaScript file in Aptana Studio:

1) Run  Aptana Studio
2) Create a project "test" using web-project template.
3) You can see index.html.  Under index.html, right click mouse and create new file called test1.js
4) Edit index.html, add line
    <script type="text/javascript" src="test1.js"> </script>
    between <body> and </body>
5) In test1.js,  add
alert("This is a test");

6) At the top bar of the menu, click run. This is a test popup.


Example: test PHP file in Aptana Studio in local computer
1) You can  install Apache and PHP in localhost or  install XAMPP:
To install XAMPP:
 http://www.apachefriends.org/en/xampp-windows.html
2)Run  Aptana Studio.  Select (or switch) workspace to C:\xampp\htdocs or the web server root location
3) Create File -> new PHP project and a new PHP file such as test2.php:

 <?php
    phpinfo();
?>

Right click test2.php, Click Run As->Run Configuration.
A Window popup,  Under server, select base url and type http://localhost or whatever the server address (if remote server, you need to setup ftp and publish)
And select Append project name, and click run
4) I found that directly click run at the top menu bar not working. I need to use "run as".

Reference:
http://dev.tiki.org/XAMPP-Aptana


Thursday, August 30, 2012

location.search.substring in JavaScript



location.search.substring in JavaScript extracts the values of each query string variable. It starts the index value as 1 after the "?" question mark, separated by  "&" sign.

Example: in web address:
wysiwyg_frame.html?doc_body&reference

location.search.substring(1) return doc_body
location.search.substring(2) return reference

Wednesday, August 29, 2012

Open rar file using RAR File Open Knife



"RAR File Open Knife" software can be downloaded from:
http://www.rar-file-open-knife.com/rar_file_open_knife.php

It is used to open  rar files,  extract rar files and it is free.
It is 2-11% faster than WinRAR, 7-Zip etc.

Tuesday, August 28, 2012

Javascript: detection browser type



To detect the browser type in JavaScript: (>-1 shows the bowser type)

           var is_firefox = navigator.userAgent.toLowerCase().indexOf('firefox');
           var is_msie = navigator.userAgent.toLowerCase().indexOf('msie');
           var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome'); 
           var is_safari = navigator.userAgent.toLowerCase().indexOf('safari'); 
          if(is_firefox>-1)
           {
                     alert("Your browser is FireFox");
           }
          else if(is_msie>-1)
          {
                       alert("Your browser is MSIE");

           }
           else if(is_chrome>-1)
           {
                      alert("Your browser is Chrome");
           }

          elseif(is_safari>-1)
         {
                       alert("Your browser is Safari");
          }

Although Safari is originally from Mac, you can download it for Windows:
http://support.apple.com/downloads/Safari_3_2_2_for_Windows

All these 4 browsers can be tested in Windows.


PHP, extract content from HTML file



We may need to extract content from a HTML file. For example I got a HTML file from Tinymce editor as below:
<div class="mceContentBody">
<p>This is a test</p>
</div>

I only need the content:This is a test

We can use PHP function: strip_tags, which strips HTML and PHP tags from a string.

Below is the PHP code to extract content:  This is a test
<?php
 $mystring='
<div class="mceContentBody">
<p>This is a test</p>
</div>';
echo strip_tags($mystring);
?>

Friday, August 24, 2012

Unpack or decode JavaScript after compressed



My previous article:
http://jiansenlu.blogspot.ca/2012/08/online-javascript-compressor.html
 showed how to compress JavaScript code using JavaScript online compressor.

We know there are  a lot of JavaScript codes compressed  in Jquery and Tinymce and its plugin.
They are very difficult to read without uncompressed. How to unpack or decode these codes?

We can use  online JavaScript beutifier:
http://jsbeautifier.org/

Copy your compressed JavaScript code in the text box and click "Beautify JavaScript or HTML" button to uncompress the code. This is very useful tool  when you want to modify those source codes in Jquery, Json and Tinymce.

Tuesday, August 21, 2012

Paste from MS Word to Tinymce online editor



When we  copy the text from Microsoft Word to Tinymce online  editor, sometimes  extra characters are added on.  This is due to that  "paste" plugin in Tinymce not initialized.
You can also  add buttons: "paste as plain text" and "paste from word" in the Tinymce. But  you  do not have to add these buttons: "paste as plain text" and "paste from word" due to that   adding "paste" plugin already fixes the bug.

 Example: add "paste" plugin,   "paste as plain text" and "paste from word" buttons in Tinymce initialization:
<script type="text/javascript">

        tinymce.init({
             mode : "textareas",
           editor_selector : "mce-editor",

            elements: "table,advhr,advimage,advlink,preview,print,contextmenu,paste",
            theme: "advanced",
            plugins: 'paste',
            theme_advanced_buttons1: "fontselect, fontsizeselect,pastetext,pasteword",
            theme_advanced_buttons2: "",
            theme_advanced_buttons3: "",
            theme_advanced_buttons4: "",
            theme_advanced_toolbar_location: "top",
            theme_advanced_toolbar_align: "left",
            extended_valid_elements: "p,span[*],delete[*],insert[*]",
            height: '400'
        });
</script> 

Saturday, August 11, 2012

Online Javascript compressor



Online Javascript compressor website:
http://javascriptcompressor.com/

You just need to paste your Javascript code and press compress button to get compressed JavaScript code, with all the comments and whitespace stripped out.

After compressed,  the bandwidth and page load times are kept  as small as possible, but the code is also difficult to read.

Wednesday, August 8, 2012

Add "track changes" feature in tinymce



We can add "track changes" feature in tinymce using ice plugin.
Ice plugin can be downloaded from:
https://github.com/NYTimes/ice/downloads

 tinymce track changes plugin Demo can be found:
http://nytimes.github.com/ice/demo/

Below is the detail:
1) Copy ice_0.4.0/tinymce/ice and   ice_0.4.0/tinymce/icesearchreplace
to  tinymce plugin, such as
 tiny_mce_3/plugins

2)  tinymce init script:
    <script type="text/javascript">

        tinymce.init({
            mode: "exact",
            elements: "tinymce",
            theme: "advanced",
            plugins: 'ice,icesearchreplace',
            theme_advanced_buttons1: "bold,italic,underline,|,undo,redo,|,search,replace,|,ice_togglechanges,
ice_toggleshowchanges,iceacceptall,icerejectall,iceaccept,icereject",
            theme_advanced_buttons2: "",
            theme_advanced_buttons3: "",
            theme_advanced_buttons4: "",
            theme_advanced_toolbar_location: "top",
            theme_advanced_toolbar_align: "left",
            extended_valid_elements: "p,span[*],delete[*],insert[*]",
            ice: {
                user: { name: 'Geoffrey Jellineck', id: 11},
                preserveOnPaste: 'p,a[href],i,em,b,span'
            },
            height: '400'
        });
       
        function setUserMCE(el) {
            var name = $(el).find(':selected').data('username');
            var id = $(el).find(':selected').data('userid');
            tinymce.execCommand('ice_changeuser', {id: id, name: name});
        }
       
        </script>
3)Display tinymce editor
<script type="text/javascript" src="lib/tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
<div id="content">
                <div id="tinymce-wrapper">
                    <textarea id="tinymce" style="width: 100%">
                   
                    </textarea>
                </div>
            </div>

Javascript cool application demo



Javascript cool application demo can be found here:
 http://js1k.com/2012-love/demos
Below is a simple music Javascript game from this demo: (Click color band to hear music)



Source code:
<script>

  math = Math;

for(tune = [hit = i = track = '']; i<32;)
  for(k = l = 11025,
      v = i?i-31&&(v+math.random()*3-1)%6|0:1,
      tune[i++] = v+1>>1; k--;)
    track += String.fromCharCode(
      math.sin('28?KTd'.charCodeAt(v)*k/597)
      *math.min((l-k)/83, k/l)
      *(i%2&&i%8-3?99:33)+128);

player = new Audio('data:audio/wav;base64,UklGRqSIFQBXQVZFZm10IBAAAAA\
BAAEARKwAAESsAAABAAgAZGF0YYCI' + btoa(' \0'+track+track+track+track));

///////////////////////////////////////////////////////////////////////////
/// Handle Clicks / Draw Stuff (146 bytes)
///////////////////////////////////////////////////////////////////////////

string = 4;

onclick = draw = function(x,y,w,h) {
  h ? a.fillRect(cwidth/2+x*scale-w/2,y,w,h)
    : w ? a.fillText(w,cwidth/2+x,194+y)
        : (y=(x.pageX-cwidth/2)/math.pow(1.01,x.pageY)+16>>3)>>2
            ?0: string = y
};

///////////////////////////////////////////////////////////////////////////
/// Game Loop (559 bytes)
///////////////////////////////////////////////////////////////////////////

setInterval(function() {
  step = player.currentTime%32*20|0;

  step | string&4 || player.play(hearts = 0, hit = 15, mult = 1);

  scale = 4;
  draw(y=0,0,cwidth=c.width=innerWidth,cheight=c.height=300);

  for(a.font = 4+a.font.slice(a.shadowBlur=1); y<cheight; y++)
    for(k = 5, scale /= .99,
        f = step+110-y/2, d = f/10|0,
        a.globalAlpha = y/cheight; k--;
        k-4 ? draw(k*2-3,y,1.2*scale,1)
        : y-198 || draw(0,y,260,4)&draw(cheight,103,'? '+(hit&&hearts))
          & draw(111,0,'? '+(step?mult:''))
          & draw(-130,-step*2,'chime  hero'))
      a.fillStyle = s = k-4 && f%10<8 | hit>=d | d>63 | d%4==1
        | k-tune[d%16*2] ? '#'+'fa33a0'.substr(k,3) : Q='#fff',
      a.shadowColor = k-string ? s : Q;

  if(n = step/5+1>>1)
    mult = n%4 && hit<n-3 ? 0 : mult,
    n%4-1 && hit<n & string==tune[n%16*2] && (hit = n, hearts += ++mult),
    player.volume = mult | !step ? 1:1e-8;

  string = 4
}, 50)
 </script>

Tuesday, August 7, 2012

Web developer Quick Reference for HTML, CSS, JavaScript, PHP, MySQL and Flash



No matter how much you are good programmer, you can not remember everything. Below are Web developer Quick Reference for HTML, CSS, JavaScript, PHP, MySQL and Flash, which will help you save time.

1) HTML Quick Reference
2) CSS Quick Reference
3) JavaScript Quick Reference
4) jQuery Quick Guide
5) Adobe Flash Quick Reference
6) PHP Quick Reference
7) MySQL Quick Reference
8) ASP.NET Quick Reference
9) Unicode Quick Reference
10) XML Quick Reference
11)  mod_rewrite and. htaccess Quick Reference





Monday, August 6, 2012

HTML5 application examples



Today, many Web technology enthusiasts try using HTML5 to produce a rich variety of applications. Below are some examples:

1) Bomomo
Cool art generator that runs in your browser. Select one of the dynamic brushes and start playing around.

2) Tunneler : Cool art generator

3) Geolocation: With your consent, this map will plot your approximate location.

4) Magnetic: Particles orbit around magnets which can be dragged around.
Double click to add more magnets.

5) Google Box: Google Images Gift Box - CSS 3D example

6) HTML5 Video Destruction: Block based destruction of HTML5 video. Click video to blow it up!

7) Sinuous: game: The goal is simple: avoid the red dots!

8) Cloth Simulation


 

Some HTML5 web templates for free Download



In the past few years, web designers had already started to pay attention and use of HTML5 a, and now HTML5 has been more widely used abroad have been produced based on HTML5 website. Here I will list some   sophisticated site templates based on HTML5 and CSS3.

1. Software (Free): http://www.csstemplatesfree.org/software.html

Software is a very delicate enterprise products based on HTML5 and CSS3 web site templates, free download.

2. Vivid Photo (Free): http://www.priteshgupta.com/templates/vivid-photo/

Vivid Photo is an elegant photography website templates for photographers or photographers friends.

3.Hope Center (Free)

4. Androidian (Free)

5. Blue Band (Free)

The Blue Band is a very cool music theme HTML5 and CSS3 web site template.

6. Life Book (Free)

This template is suitable as a blog, it is similar to Wordpress theme.

7 Mr. Hurley (Free)

8. Coffee Cols (Free)

9. Acallia (Free)

10. Serenity (Free)

11. Thom Sander (Free)

12. Superior (Free) and  Think Simple (Free)

This is an appropriate corporate website HTML5 and CSS3 web site template.

13 Im Creatives (Free)

14 Design Studio (Free)

15. Ost Magazine (Free)

16. Deliccio (Free)

 

 

 

 

 

 

 

 

 

Friday, August 3, 2012

Create a multipage HTML form using javascript



When a HTML form is very long, we need to divide it to several pages.
There are several ways to do this.  Below is to use JavaScript.
Design idea:
1) All pages are in a single form. In the first page, other pages are hidden.
using JavaScript function moveto(id, current, check) to move to next page or  previous page.
When moving to next page, the previous page will not be displayed and next page is displayed using CSS style: style="display: none;"
2) To validate  the form, create <span></span>, if the input filed is not filled, create waring message  between <span> using
document.getElementById(current).getElementsByTagName("span")[0].innerHTML = "Warning: form incomplete.";
Below is the code:
<html>

<script type="text/javascript">
    <!--
    function moveto(id, current, check)
    {
        valid = true;
       
        if (check == 1)
        {
            object = document.getElementById(current);
            valid = validate(object);
        }

        if(valid == true)
        {
            document.getElementById(current).style.display = "none";
            document.getElementById(current).getElementsByTagName("span")[0].innerHTML = "";
            document.getElementById(id).style.display = "block";
        }
        else
        {
            document.getElementById(current).getElementsByTagName("span")[0].innerHTML = "Warning: form incomplete.";
        }
    }
   
    function validate(id)
    {
        input = id.getElementsByTagName("input");
        valid = true;
       
        for(i = 0; i < input.length; i++)
        {
            if(input[i].value == "")
            {
                valid = false;
            }   
        }
       
        return valid;
    }
    -->
</script>
<form action="" method="post" onsubmit="return validate(document.getElementById('form3'));">
    <table id="form1" border="0">
        <tr>
            <td>name</td>
            <td><input type="text" name="name" /></td>
        </tr>
        <tr>
            <td>surname</td>
            <td><input type="text" name="surname" /></td>
        </tr>
        <tr>
            <td colspan="2"><button type="button" onmouseup="moveto('form2','form1',1);">Next -&gt;</button></td>
        </tr>
        <tr>
            <td colspan="2"><span></span></td>
        </tr>
    </table>
   
    <table id="form2" style="display: none;" border="0">
        <tr>
            <td>username</td>
            <td><input type="text" name="username" /></td>
        </tr>
        <tr>
            <td>password</td>
            <td><input type="password" name="password" /></td>
        </tr>
        <tr>
            <td>repeat password</td>
            <td><input type="password" name="repeatPassword" /></td>
        </tr>
        <tr>
            <td><button type="button" onmouseup="moveto('form1','form2',0);">&lt;- Back</button></td>
            <td><button type="button" onmouseup="moveto('form3','form2',1);">Next -&gt;</button></td>
        </tr>
        <tr>
            <td colspan="2"><span></span></td>
        </tr>
    </table>
   
    <table id="form3" style="display: none;" border="0">
        <tr>
            <td>E-mail address</td>
            <td><input type="text" name="email" /></td>
        </tr>
        <tr>
            <td><button type="button" onmouseup="moveto('form2','form3',0);">&lt;- Back</button></td>
            <td><input type="submit" name="submit" value="submit" /></td>
        </tr>
        <tr>
            <td colspan="2"><span></span></td>
        </tr>
    </table>
</form>
</html>

Result:


name
surname

Thursday, August 2, 2012

CSS code generators



You may not want to write CSS code from scratch. CSS3 maker is an online tool to generat CSS code, you can get shadows, fonts, gradients etc.  The link of CSS3 maker is:
http://www.css3maker.com/index.html 

Another CSS3 generator about border and  background:
http://www.css3.me/

CSS layout generator can be found:
http://csslayoutgenerator.com/

To generate professional CSS menus:
http://cssmenumaker.com/

For CSS button generator:
http://css3button.net/