With the use of flash, when browse for files, multiple file can be selected which could not be provided in the IE7,8 browsers.

However, you should take note for the ASP.NET.
Notes for the ASP.NET:

Window Authentication cannot be used due to the limitation of the flash which does not properly handle HTTP Authentication (or you need to write a page which allow anonymous access)
Forms Authentication can still be used but you need to search about the custom handling.

HTTP Authentication is handled at the Web Server/Browser level with HTTP response codes and HTTP headers.
Once authenticated the browser remembers that you already authenticated to this site and just sends the auth data with each request (otherwise you’d have to re-auth with every request).

Detail

Requirement: Flash and jQuery.
Reference: http://www.uploadify.com/
License: Open Source

不過過了這麼久，chowky 再次去看看，跟進一下之前所看好的 full calendar 的開發情況是怎樣。

chowky 的眼光果然不錯，現在的full calendar 已經加入了 day view 的week view ，基本一個calendar 所要求的都經已達到，chowky 覺得十分滿意，有機會的話會採用這個control (hm…老實說、主要原因是免費)

documentation, api 都足夠，integration 應該不困難

License: open source (dual licensed under the MIT or GPL)
Demo: http://arshaw.com/fullcalendar/

你只要一click 就會反轉，之後就會見到簡單的description~

Note: 這個只支援modern browser…. ie 6就無機會用到了，因為利用了css3。這個是利用了 jQuery Flip plug-in。

用法都十分之簡單~
HTML 的structure 就是利用 div

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<div title="Click to flip" class="sponsor">
	<div class="sponsorFlip">
		<img alt="More about google" src="img/sponsors/google.png">
	</div>
 
	<div class="sponsorData">
		<div class="sponsorDescription">
			The company that redefined web search.
		</div>
		<div class="sponsorURL">
			<a href="http://www.google.com/">http://www.google.com/ </a>
		</div>
	</div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

body{
	/* Setting default text color, background and a font stack */
	font-size:0.825em;
	color:#666;
	background-color:#fff;
	font-family:Arial, Helvetica, sans-serif;
}
 
.sponsorListHolder{
	margin-bottom:30px;
}
 
.sponsor{
	width:180px;
	height:180px;
	float:left;
	margin:4px;
 
	/* Giving the sponsor div a relative positioning: */
	position:relative;
	cursor:pointer;
}
 
.sponsorFlip{
	/*  The sponsor div will be positioned absolutely with respect
		to its parent .sponsor div and fill it in entirely */
 
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	border:1px solid #ddd;
	background:url("img/background.jpg") no-repeat center center #f9f9f9;
}
 
.sponsorFlip:hover{ /*而且ie6 不支援 div :hover，ie6 只支援到a:hover ，大家要留意啦*/
	border:1px solid #999;
 
	/* CSS3 inset shadow: */
	-moz-box-shadow:0 0 30px #999 inset;
	-webkit-box-shadow:0 0 30px #999 inset;
	box-shadow:0 0 30px #999 inset; /*css3...這個是for ie 的呢~ 不過就無shadow 呢*/
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

.sponsorFlip img{
	/* Centering the logo image in the middle of the .sponsorFlip div */
 
	position:absolute;
	top:50%;
	left:50%;
	margin:-70px 0 0 -70px;
}
 
.sponsorData{
	/* Hiding the .sponsorData div */
	display:none;
}
 
.sponsorDescription{
	font-size:11px;
	padding:50px 10px 20px 20px;
	font-style:italic;
}
 
.sponsorURL{
	font-size:10px;
	font-weight:bold;
	padding-left:20px;
}
 
.clear{
	/* This class clears the floats */
	clear:both;
}

Javscript 方面，Sponsor wall 是利用了jquery ，和jquery ui for interface. 所以大家記得 include 這兩個js 以及 css….
接著當然係 document ready 時要做的javscript 呢~

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

$(document).ready(function(){
	/* The following code is executed once the DOM is loaded */
 
	$('.sponsorFlip').bind("click",function(){
 
		// $(this) point to the clicked .sponsorFlip element (caching it in elem for speed):
 
		var elem = $(this);
 
		// data('flipped') is a flag we set when we flip the element:
 
		if(elem.data('flipped'))
		{
			// If the element has already been flipped, use the revertFlip method
			// defined by the plug-in to revert to the default state automatically:
 
			elem.revertFlip();
 
			// Unsetting the flag:
			elem.data('flipped',false)
		}
		else
		{
			// Using the flip method defined by the plugin:
 
			elem.flip({
				direction:'lr',
				speed: 350,
				onBefore: function(){
					// Insert the contents of the .sponsorData div (hidden
					// from view with display:none) into the clicked
					// .sponsorFlip div before the flipping animation starts:
 
					elem.html(elem.siblings('.sponsorData').html());
				}
			});
 
			// Setting the flag:
			elem.data('flipped',true);
		}
	});
 
});

原文是利用了php 來generate data 的，不過chowky 覺得不太重要所以就算。大家有興趣可以去原文看看呢~

Source: http://tutorialzine.com/2010/03/sponsor-wall-flip-jquery-css/

所以今天就介紹一個東西可以助你自訂右制的content menu，還可以自己加入不同的圖示，非常方便。

當你需要做web-base 的system 就好需要這個plugin 呢~

用法:

<!-- necessary libraray -->
<script src="jquery-1.4.2.min.js" type="text/javascript"><!--mce:0--></script> <!-- jQuery Core -->
<script src="jquery.contextMenu.js" type="text/javascript"><!--mce:1--></script> <!-- context menu plugin js -->
 <!-- context menu style sheet-->
 
<ul id="myMenu" class="contextMenu">
 
	<li class="edit">
        <a href="#edit">Edit</a></li>
 
 
	<li class="cut separator">
        <a href="#cut">Cut</a></li>
 
 
	<li class="copy">
        <a href="#copy">Copy</a></li>
 
 
	<li class="paste">
        <a href="#paste">Paste</a></li>
 
 
	<li class="delete">
        <a href="#delete">Delete</a></li>
 
 
	<li class="quit separator">
        <a href="#quit">Quit</a></li>
 
</ul>

加入jquery dom ready 的 javascript

$(document).ready( function() {
 
    $("#selector").contextMenu({
        menu: ''myMenu''
    },
        function(action, el, pos) {
        alert(
            ''Action: '' + action + ''\n\n'' +
            ''Element ID: '' + $(el).attr(''id'') + ''\n\n'' +
            ''X: '' + pos.x + ''  Y: '' + pos.y + '' (relative to element)\n\n'' +
            ''X: '' + pos.docX + ''  Y: '' + pos.docY+ '' (relative to document)''
            );
    });
 
});

Demo 示範:http://labs.abeautifulsite.net/projects/js/jquery/contextMenu/demo/
License: Dual License (GPL and MIT)
Source: http://abeautifulsite.net/2008/09/jquery-context-menu-plugin

原來都幾易用呢~

可能大家都見過，不過呢~，近來~這個plugin 加入了去jquery ui 作為component，所以支援了apply 不同 theme 的能力，所以大家可以隨便換theme ，都幾好用呢~。

用法好簡單，html的basic structure 都是利用常用的 unorder list “ul” 和 “li”。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

 
<script type="text/javascript" src="jquery-1.3.2.min.js"></script> <!-- jQuery core -->
<script type="text/javascript" src="fg.menu.js"></script> <!-- dropdown list plugin -->
 
<link type="text/css" href="fg.menu.css" media="screen" rel="stylesheet" /> <!-- dropdown list style sheet -->
<link type="text/css" href="theme/ui.all.css" media="screen" rel="stylesheet" /> <!-- jQuery UI theme -->
 
 
<ul>
  <li><a href="#">Menu option</a></li>
  <li><a href="#">Menu option</a></li>
  <li><a href="#">Menu option</a>
    <ul>
      <li><a href="#">Child menu option</a></li>
      <li><a href="#">Child menu option</a></li>
      <li><a href="#">Child menu option</a></li>
    </ul>
  </li>
  <li><a href="#">Menu option</a></li>
</ul>

之後dom ready 時加上init 的code

1
2
3
4
5
6
7
8

$(document).ready(function(){
	$('#myMenuButton').menu({
		content: $('#myContent').html(),		
		maxHeight: 180,
		positionOpts: { offsetX: 10, offsetY: 20 },
		showSpeed: 300
	});
});

Demo 效果: http://www.filamentgroup.com/examples/menus/ipod.php
License: MIT and GPL
Source: http://www.filamentgroup.com/lab/jquery_ipod_style_and_flyout_menus/

不過有人竟然開始就把這個做出來~，佩服

Sprite 的hit test 其實都很花時間的。所以大家暫時不是考慮真正的使用。看來只能佩服一下而已~

當然，簡單的minigame 應該都是可以做到的。

gameQuery has the following features:

* multi layer-sprite animations
* sprite hierarchies (grouping)
* collision detection
* swappable sound support
* periodic callbacks
* keyboard state polling
* free and open source license

期待他們做到一個很理想的engine~

Source: http://gamequery.onaluf.org/

近來jQuery 推出新的release 1.4. 聽聞 performance 改善了很多。

No. of Function Calls (因為減少了很多不必要 method 的call，可能就是大大改善performance 的原因)

dom 的insertion 看來需要的時間真是快了很多 (ie 系列快了很多)


Performance of .html() ，重大的speed 改善

Performance of .remove() and .empty() ，很強呢~

Lets take a closest look at some useful changes

*
All setter method now accept a function as value:

.css(), .attr(), .val(), .html(), .text(), .append(), .prepend(), .before(), .after(),.replaceWith(), .wrap(), .wrapInner(), .offset(), .addClass(), .removeClass(), and.toggleClass().

$(‘div.demo-container’).html(function() { var emph = ” + $(‘p’).length + ‘ paragraphs!’; return ‘All new content for ‘ + emph + ”; });

*
Quick Element Construction:

When you create a single element with the jQuery function, you can now pass in an object to add attributes and events at the same time:

jQuery(”

“, { id: “foo”, css: { height: “50px”, width: “50px”, color: “blue”, backgroundColor: “#ccc” }, click: function() { $(this).css(“backgroundColor”, “red”); } }).appendTo(“body”);

* Event Multi-binding:
You can now pass an object of many events to bind to an element:

$(“div.test”).bind({ click: function(){ $(this).addClass(“active”); }, mouseenter: function(){ $(this).addClass(“inside”); }, mouseleave: function(){ $(this).removeClass(“inside”); } });

* All Events Can Be Live Events:
Has been introduced cross-browser support for change, submit, focusin, focusout, mouseenter, and mouseleave via the event delegation in .live(). Note that if you need a live focus event, you should use focusin and focusout rather than focus and blur, because focus and blur do not bubble. Also, live() also now accepts a data object, just as bind() has:

$(“p”).live(“myCustomEvent”, function(e, myName, myValue){ $(this).text(“Hi there!”); $(“span”).stop().css(“opacity”, 1) .text(“myName = ” + myName) .fadeIn(30).fadeOut(1000); }); $(“button”).click(function () { $(“p”).trigger(“myCustomEvent”); });

* before, after, replaceWith on disconnected nodes:
You can now use before, after, and replaceWith on nodes that are not attached to the DOM. This allows you to do more complex manipulations before inserting the final structure into the DOM.

jQuery(” “).before(“Hello”).appendTo(“body”)

* .offset( coords | Function )
It is now possible to set the offset of an element. Offset, like all setter methods, can now also accept a function as a second argument.

$(MyEl).offset({ top: 10, left: 30 });

* New .delay() method:
The .delay() method will delay any further elements in the queue for the specified number of milliseconds.

$(“div”).fadeIn().delay(4000).fadeOut();

developer 當然會擔心，update 了之後會有問題。
但~其實只有很少的地方是incompatible 已而~

* .add() no longer plainly concatenates the results together, the results are merged and then sorted in document order.
* .clone(true) now copies events AND data instead of just events.
* jQuery.data(elem) no longer returns an id, it returns the element’s object cache instead.
* jQuery() (with no arguments) no longer converts to jQuery(document).
* .val(“…”) on an option or a checkbox is no longer ambiguous (it will always select by value now, not by text value).
* jQuery.browser.version now returns engine version.
* jQuery is now strict about incoming JSON and throw an exception if we get malformed JSON. If you need to be able to evaluate malformed JSON that is valid JavaScript, you can make a text request and use eval() to evaluate the contents.
* Param serialization now happens in the PHP/Rails style by default. You can use jQuery.ajaxSettings.traditional = true; to use traditional parameter serialization. You can also set the behavior on a per-request basis by passing traditional: true to the jQuery.ajax method.
* jQuery.extend(true, …) No longer extends non-plain-objects or arrays.
* If an Ajax request is made without specifying a dataType and it is returned as text/javascript, it will be executed. Previously, an explicit dataType was required.
* Setting an Ajax request’s ifModified now takes ETags into consideration.

Source: http://blog.skitsanos.com/2010/01/what-is-new-in-jquery-14-features-for.html

User 找不到想要的info，看完就算，對於你的目標，就是否這麼簡單呢？你可能會失到potential customers。

所以website navigation 上面一定要花心機去令website 更容易去browse.

這方面就應該要參考一下其他人的做法呢。

1. 簡潔的 Menu Navigation
這個例子當然會是apple 的design。直接的表達，就會避免混亂，而且可以令到visitors 更容易找到想要的資料

2. 加上主頁的link去自己的logo 上
現在很多不同的website 都已經是這樣做了，差不多是 standard 做法，最重要的是visitors 早已習慣。


3. 準確易明的的Link Description
若果文字上能夠做到簡單易明，visitor 就會能夠expect 之後出現的content.

4. Site Map
當然對於靜態（static）的website 就要自己再寫多頁，平常使用的cms 就一定會有這種功能。一個sitemap 可以讓vistor 很快就找到自己想要的content. 而且sitemap 對SEO 會有很大的幫助。若果你的網站是很大就一定要有啦～

5. 搜尋功能
當你的website 的content 比較多的時候，人們就會直接search，可能visitor 已經有一些特定的目標，有個search 的功能就令visitor 很快找到想要的features / products 。所以必定要加！
你可以選擇，利用google 的custom search 的功能 or custom made，當然正常的CMS 就已經會加上site search這個功能。

6. Navigation Active State
這個可以令visitors 可以立即知道自己哪一個地方。

7. Breadcrumbs
當click 左入不同的links 之後，就會忘記是怎樣click 的呢～這個是適合一些很大的website。這個功能可以令user 知道自己website 的位置。

Source: http://blog.webassist.com/2009/12/7-crucial-usability-tips-for-website-navigation/

這個demo 就教你利用webkit 的css animation 去做一個閃閃下的button~~..

因為是利用了webkit 的關係，所以~~…..只可以做到safari, google chrome show 到出來。

做法就很簡單 (當然是因為利用了css 的animation)

//Animation
@-webkit-keyframes greenPulse {
from { background-color: #749a02; -webkit-box-shadow:: 0 0 9px #333; }
50% { background-color: #91bd09; -webkit-box-shadow:: 0 0 18px #91bd09; }
to { background-color: #749a02; -webkit-box-shadow:: 0 0 9px #333; }
}

//把 button 的class 加入effect
a.green.button {
-webkit-animation-name: greenPulse;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
}

Source: http://www.zurb.com/playground/radioactive-buttons

首先是titanium 是 opensource，另外這件東的 concept 其實不錯的，真的有點似adobe air，mobile, desktop 的version 都有buildin 的sqlite support。 主要的分別，titanium 就是compiled and run in native OS，所以分為，mobile version, desktop version and web version ，而 ADOBE AIR 就放在flash platform / AIR 之中。而titanium 就比adobe air 走快了一步，支援了mobile (iphone and andriod) ，所以都有些人認為是air 的最大的competitor (為什麼沒有m$ 的silverlight，不入流呢)。

另外就說說怎樣開發~
Titanium 很特別 (有好有壞)，他應用了web technology，所以要用到html/css/javascript 另外還可以用ruby, python, php (這方面真的很怪)

Adobe Air 就利用了flex + actionscript 3.0 (大家都應該熟的呢~)

[都說說silverlight... 利用了.net framework ，所以可以用c# / vb (chowky 只會用c#，不是chowky 不懂，只是利用vb 這個structured language 來做object oriented 的programming... 很難接受呢)。這方面silverlight 和air 相似，大家都要install runtime 才可以用得到]

chowky 雖然覺得titanium 的concept 不錯，可惜的是，immature，documentation 不足夠。 搞到chowky 看了很多零碎的documentation.

titanium 其實有點怪呢，利用了web 技術 (有點說不通) ， 因為web 是stateless 的所以才會有 session 的，而 titanium 就利用了app: ，取代了”http:” (desktop 都要navigateURL….不習慣~)

另外，就是加入了php, python, ruby，(大家有無奇怪呢，這些是server-side programming, ruby好像不是server-side…，anyway, web 向來都是 client-server architecture 的)。titanium 的做法，就是加入

<script ></script> (這是基本的javasciprt)

<script type="text/php"></script>

<script type="text/pyton"></script>
<script type="text/ruby"></scirpt>

純粹javascript 開發必定很辛苦，有了php 的支援，應該好了很多呢~

不過值得一讚的是titanium 已經加入了collaboration / analysis / distribution 的功能，所以長期來說，如果稳定了的話，真有可能會很強呢~ 整個流程在開發工具之前已經想好。 (整個流程剛剛才在adobe 上加入)

題外話，究竟是否adobe 學習了titanium 的做法，直接把flash compile as 一個native 的iphone application，等apple 沒有法子阻止。

總結一下:

Titanium concept 上不錯，不過還要時proof cross platform 的能力。chowky 覺得這不算是最好時機學習。
既然是native 的 OS application，desktop 的native control 方面，其實可以做深入一不點，（雖然air這方面都沒有做到）。
analysis, distribution 的功能雖然有，但必定沒有adobe推出的這麼完整。
做一些簡單的widget (都只是和web app 差不多，而且還有distribution 和analysis 的功能)，chowky 覺得是可以的，但中型至大型的project 就不用考慮了。

Source: http://www.appcelerator.com/