Thứ Bảy, 29 tháng 11, 2008

Đoạn mã chống copy bài viết và hình ảnh

<script language="JavaScript1.2">
var message="Text Here";
function click(e) {
if (document.all) {
if (event.button==2||event.button==3) {
alert(message);
return false;
}
} else {
if (e.button==2||e.button==4) {
e.preventDefault();
e.stopPropagation();
alert(message);
return false;
}
}
}
if (document.all) { // for IE
document.onmousedown=click;
} else { // for FF
document.onclick=click;
}
</script>

<script type="text/javascript">
function ehan( evnt )
{
if( evnt.which == 3 )
{
alert( "Text Here" );
return false;
}
return true;
}
function ocmh()
{
alert( "Text Here" );
return false;
}
document.oncontextmenu = ocmh;
document.captureEvents( Event.MOUSEDOWN );
if( document.layers ) document.onmousedown = ehan;
</script>

<script language="JavaScript">
if (window!=top){top.location.href=location.href;}
</script>

<script type="text/javascript">
<!--
var omitformtags=["input", "textarea", "select"]
omitformtags=omitformtags.join("|")
function disableselect(e){
if (omitformtags.indexOf(e.target.tagName.toLowerCase())==-1)
return false
}
function reEnable(){
return true
}
if (typeof document.onselectstart!="undefined")
document.onselectstart=new Function ("return false")
else{
document.onmousedown=disableselect
document.onmouseup=reEnable
}
-->
</script>

<script language="JavaScript">
if (window!=top){top.location.href=location.href;}
</script>

<script type="text/javascript">
<!--
var omitformtags=["input", "textarea", "select"]
omitformtags=omitformtags.join("|")
function disableselect(e){
if (omitformtags.indexOf(e.target.tagName.toLowerCase())==-1)
return false
}
function reEnable(){
return true
}
if (typeof document.onselectstart!="undefined")
document.onselectstart=new Function ("return false")
else{
document.onmousedown=disableselect
document.onmouseup=reEnable
}
-->
</script>

Đặc điểm của một số thuộc tính CSS - Sự khác nhau của IE và chuẩn chung

Các vấn đề sẽ đề cập
1. IE and the box model
2. IE versions and Doctype modes

IE and the box model

Cho dù bạn có thích hoặc căm ghét, Internet Explorer của Microsoft vẫn là một trình duyệt chính đựơc sử dụng hiện nay. Điều đó có nghĩa là vài điểm bạn cần xem xét khi thiết kế để khắc phục một vài điểm chưa hợp lý về CSS.
Một ví dụ dơn giản là một số phiên bản của IE thể hiện các hộp (box model) một cách khác biệt so với các trình duyệt chuẩn. Và các file CSS của bạn nhìn trên IE sẽ khác so với các trình duyệt còn lại như: firefox, opera.
Với một hộp vuông có chiều rộng 200px và được bạn gán thuộc tính "padding:20px; border:20px;" thì chiều rộng chuẩn của nó sẽ được tính như sau
Chiều rộng thể hiện
chiều rộng chuẩn (200px) + padding (20px+20px) + borders (20px+20px) = 280px.
Thế nhưng một vài phiên bản của IE sẽ tính ra chiều rộng bằng công thức: content, padding and borders together = 200px.
Nguồn:http://css.maxdesign.com.au/listamatic/about-boxmodel.htm

Chủ Nhật, 23 tháng 11, 2008

Sử dụng Connection Strings với CSDL SQL Server 2005

SQL Native Client ODBC Driver:

Standard security:
Driver={SQL Native Client};Server=myServerAddress;Database=myDataBase;Uid=myUsername;Pwd=myPassword;

Trusted Connection:
Driver={SQL Native Client};Server=myServerAddress;Database=myDataBase;Trusted_Connection=yes;

Ghi chú: "Integrated Security=SSPI" tương tự như "Trusted_Connection=yes"

Connecting to an SQL Server instance:
Driver={SQL Native Client};Server=myServerName\theInstanceName;Database=myDataBase;Trusted_Connection=yes;

Prompt for username and password:

oConn.Properties("Prompt") = adPromptAlways
Driver={SQL Native Client};Server=myServerAddress;Database=myDataBase;
Enabling MARS (multiple active result sets):
Driver={SQL Native Client};Server=myServerAddress;Database=myDataBase;Trusted_Connection=yes;MARS_Connection=yes;

Ghi chú:

"MultipleActiveResultSets=true" tương tự như "MARS_Connection=yes"

Sử dụng ADO.NET 2.0 cho MARS. MARS không hỗ trợ ADO.NET 1.0 và ADO.NET 1.1.

Encrypt data sent over network:
Driver={SQL Native Client};Server=myServerAddress;Database=myDataBase;Trusted_Connection=yes;Encrypt=yes;

Attach a database file on connect to a local SQL Server Express instance:
Driver={SQL Native Client};Server=.\SQLExpress;AttachDbFilename=c:\asd\qwe\mydbfile.mdf; Database=dbname;Trusted_Connection=Yes;

Attach a database file, located in the data directory, on connect to a local SQL Server Express instance:
Driver={SQL Native Client};Server=.\SQLExpress;AttachDbFilename=|DataDirectory|mydbfile.mdf; Database=dbname;Trusted_Connection=Yes;

Database mirroring:
Data Source=myServerAddress;Failover Partner=myMirrorServer;Initial Catalog=myDataBase;Integrated Security=True;

SQL Native Client OLE DB Provider:

Standard security:
Provider=SQLNCLI;Server=myServerAddress;Database=myDataBase;Uid=myUsername;Pwd=myPassword;

Trusted connection:
Provider=SQLNCLI;Server=myServerAddress;Database=myDataBase;Trusted_Connection=yes;

Connecting to an SQL Server instance:
Provider=SQLNCLI;Server=myServerName\theInstanceName;Database=myDataBase;Trusted_Connection=yes;

Prompt for username and password:
oConn.Properties("Prompt") = adPromptAlways
oConn.Open "Provider=SQLNCLI;Server=myServerAddress;DataBase=myDataBase;

Enabling MARS (multiple active result sets):
Provider=SQLNCLI;Server=myServerAddress;Database=myDataBase;Trusted_Connection=yes;MarsConn=yes;

Ghi chú:

"MultipleActiveResultSets=true" tương tự như "MARS_Connection=yes"

Sử dụng ADO.NET 2.0 cho MARS. MARS không hỗ trợ ADO.NET 1.0 và ADO.NET 1.1.

Encrypt data sent over network:
Provider=SQLNCLI;Server=myServerAddress;Database=myDataBase;Trusted_Connection=yes;Encrypt=yes;

Attach a database file on connect to a local SQL Server Express instance:
Provider=SQLNCLI;Server=.\SQLExpress;AttachDbFilename=c:\asd\qwe\mydbfile.mdf; Database=dbname;Trusted_Connection=Yes;

Attach a database file, located in the data directory, on connect to a local SQL Server Express instance:
Provider=SQLNCLI;Server=.\SQLExpress;AttachDbFilename=|DataDirectory|mydbfile.mdf; Database=dbname;Trusted_Connection=Yes;

Database mirroring:
Data Source=myServerAddress;Failover Partner=myMirrorServer;Initial Catalog=myDataBase;Integrated Security=True;

SqlConnection (.NET):

Standard Security:
Data Source=myServerAddress;Initial Catalog=myDataBase;User Id=myUsername;Password=myPassword;

hoặc:

Server=myServerAddress;Database=myDataBase;User ID=myUsername;Password=myPassword;Trusted_Connection=False;

Trusted Connection:
Data Source=myServerAddress;Initial Catalog=myDataBase;Integrated Security=SSPI;

hoặc:

Server=myServerAddress;Database=myDataBase;Trusted_Connection=True;

Connecting to an SQL Server instance:
Server=myServerName\theInstanceName;Database=myDataBase;Trusted_Connection=True;

Trusted Connection from a CE device:
Data Source=myServerAddress;Initial Catalog=myDataBase;Integrated Security=SSPI;User ID=myDomain\myUsername;Password=myPassword;

Connect via an IP address:
Data Source=190.190.200.100,1433;Network Library=DBMSSOCN;Initial Catalog=myDataBase;User ID=myUsername;Password=myPassword;

Ghi chú: 1433 là cổng mặc định của SQL Server.

Enabling MARS (multiple active result sets):
Server=myServerAddress;Database=myDataBase;Trusted_Connection=True;MultipleActiveResultSets=true;

Ghi chú:

"MultipleActiveResultSets=true" tương tự như "MARS_Connection=yes"

Sử dụng ADO.NET 2.0 cho MARS. MARS không hỗ trợ ADO.NET 1.0 và ADO.NET 1.1.

Attach a database file on connect to a local SQL Server Express instance:
Server=.\SQLExpress;AttachDbFilename=c:\asd\qwe\mydbfile.mdf;Database=dbname;Trusted_Connection=Yes;

Attach a database file, located in the data directory, on connect to a local SQL Server Express instance:
Server=.\SQLExpress;AttachDbFilename=|DataDirectory|mydbfile.mdf; Database=dbname;Trusted_Connection=Yes;

Using an User Instance on a local SQL Server Express instance:
Data Source=.\SQLExpress;Integrated Security=true;AttachDbFilename=|DataDirectory|\mydb.mdf;User Instance=true;

Database mirroring:
Data Source=myServerAddress;Failover Partner=myMirrorServer;Initial Catalog=myDataBase;Integrated Security=True;

Asynchronous processing:
erver=myServerAddress;Database=myDataBase;Integrated Security=True;Asynchronous Processing=True;

SQL Server 2005 special:
C#
using(SqlConnection connection = new SqlConnection("context connection=true"))
{
connection.Open();
// Use the connection
}

VB.Net
Using connection as new SqlConnection("context connection=true")
connection.Open()
' Use the connection
End Using

Link tham khảo

Thứ Hai, 17 tháng 11, 2008

Tìm kiếm trong lập trình

Để đọc hiểu bài này, bạn phải đọc 2 bài trước nó gồm :
- Lập trình Generic với C#.
- Sắp xếp.

Bên cạnh thao tác sắp xếp, ta cũng có một số thao tác cũng rất hay gặp khi lập trình liên quan đến tìm kiếm, ví dụ :
- Tìm kiếm một phần tử trong một danh sách chưa sắp xếp.
- Tìm kiếm một phần tử trong một danh sách đã dc sắp xếp rồi (giải thuật phổ biến nhất là BinarySearch).
- Insert một phần tử vào một danh sách đang dc sắp xếp rồi mà vẫn đảm bảo tính sắp xếp của danh sách đó (thường dùng BinarySearch để xác định ví trí để insert trc, rồi mới insert).
- Xác định vị trí cần thiết trong một danh sách đã sắp xếp để insert một phần tử mới vào (cũng dùng BinarySearch).

Bài viết này tôi sẽ giới thiệu một số hàm dc viết theo kiểu Generic Function, với tính tái sử dụng rất cao, performance tốt, có thể được sử dụng trong nhiều dự án C# khác nhau. Trừ khi yêu cầu của bạn rất đặc thù, còn không thì >95%, bạn có thể sử dụng nó mỗi khi gặp những vấn để nói trên. Trong bài viết này, tôi sẽ gửi kèm theo file.cs này, vì có rất nhiều thủ tục, bạn có thể sử dụng nó như là thư viện cho dự án của mình. Một số trường hợp còn thiếu (ex : tìm kiếm sử dụng IComparer), bạn có thể bổ sung, bằng cách viết tương tự, rất đơn giản.
Đầu tiên, thì cũng như thao tác Sort, BinarySearch cũng đã dc .Net cung cấp sẵn, tuy nhiên rất tiếc là nó có một hạn chế rất lớn, và tớ hầu như ko sử dụng hàm đó của .Net, và tự viết lấy theo Generic Function.
Nhược điểm của BinarySearch của .Net.
Giao diện hàm đó như sau (xem phần definition của List hoặc Array) :

public class List<T>{
int BinarySearch(T item);
}

Giả sử bạn có một danh sách Person{int id, string name}. Nếu bạn muốn tìm tên của người có id = 10 thì sao. Với hàm BS này, bạn phải truyền vào một đối tượng Person có id=10, và name=null(cái ji cũng dc :D, vì thao tác so sánh thực hiện trên id) => performance ko tốt do phải new Person.

Vậy nếu tôi chỉ muốn truyền vào id thôi, ko new một Person nữa có dc ko? OK với những hàm được giới thiệu sau đây.
Nếu danh sách Person là một List thì như sau :

public static int searchOnSorted<E, K>(IList<E> list, K key) where E : IComparable<K>
{
if (list == null) return CommonConstant.UNFOUND;

int mid = 0,
head = 0,
tail = list.Count - 1;
while (head <= tail) {
mid = (head + tail) >> 1;
int cmp = list[mid].CompareTo(key);
if (cmp > 0) {
tail = mid - 1;
} else if (cmp < 0) {
head = mid + 1;
} else {
return mid;
}
}
return CommonConstant.UNFOUND;
} // end of BinarySearch

Nếu danh sách Person là một Person[] thì như sau :

public static int searchOnSorted<E, K>(E[] array, K key) where E : IComparable<K>
{
if (array == null) return CommonConstant.UNFOUND;

int mid = 0,
head = 0,
tail = array.Length - 1;
while (head <= tail) {
mid = (head + tail) >> 1;
int cmp = array[mid].CompareTo(key);
if (cmp > 0) {
tail = mid - 1;
} else if (cmp < 0) {
head = mid + 1;
} else {
return mid;
}
}
return CommonConstant.UNFOUND;
} // end of BinarySearch

Để có thể sử dụng dc hàm này, bạn cần chỉnh lớp Person một chút như sau, bắt nó implement IComparable như sau :

public class Person : IComparable<Person>, IComparable<int>
{
public int id;
public string name;
public Person(int inNo, string inName)
{
id = inNo;
name = inName;
}

#region IComparable Members
public int CompareTo(Person other)

Chủ Nhật, 16 tháng 11, 2008

Sắp xếp

Sắp xếp là một thao tác rất thường gặp khi lập trình, rất may, trong C#, Java, C++ ... đã cung cấp sẵn những hàm phục vụ vấn đề này, biết sử dụng thư viện này sẽ tiết kiệm dc kha khá thời gian lập trình, code lại trong sáng, dễ đọc. Bài viết này sẽ giới thiệu về cách thực hiện sắp xếp trong C#. Trừ khi yêu cầu quá đặc biệt, thì nhìn chung >95% các trường hợp, bạn ko cần phải tự viết các hàm sắp xếp cho dự án của mình.
1. Sắp xếp một danh sách hoặc mảng các đối tượng
Giả sử ta có đối tượng Person{int id; string name}. Ta muốn sau này có nhu cầu sắp xếp một danh sách/mảng các Person (List, IList hoặc Person[] và ...) tăng dần theo id, thì ta phải cho lớp Person này implement IComparable như sau :

public class Person : IComparable<Person>
{
public int id;
public string name;
public Person(int inNo, string inName)
{
id = inNo;
name = inName;
}

#region IComparable Members
///
/// Ham nay se duoc su dung khi goi ham sap xep cung cap boi .Net.
/// Ngam dinh la sap xep tang dan, neu ham nay tra lai ket qua nhu sau :
/// == 1 : this > other;
/// == 0 : this == other;
/// == -1 : this <>
/// Neu co tinh muon sap xep giam dan thoi thi co the viet nhu sau :
/// return -id.CompareTo(other.id);
///
///
///
public int CompareTo(Person other)
{
return id.CompareTo(other.id);
}
#endregion
}


Sau khi có lớp Person như trên, ta thực hiện sắp xếp như sau :
Với List, IList thì

List<Person> personList = new List<Person>();
// add them mot so doi tuong Person vao bien list noi tren
// code here

//////////////////////////////////////////////////////////////////////////
// thuc hien sap xep danh sach Person tang dan theo id cua Person
// ham Sort nay da duoc .Net cung cap san, dung QuichSort, co giao dien :
// public void Sort();
// ham Sort nay se tu dong su dung ham "public int CompareTo(Person other)"
// de thuc hien sap xep.
personList.Sort();
// done, danh sach da sap xep xong, tang dan theo id.


Với Array

//////////////////////////////////////////////////////////////////////////
Person[] personArr = new Person[5];
// add them mot so doi tuong Person vao bien array noi tren
// code here

//////////////////////////////////////////////////////////////////////////
// thuc hien sap xep mang Person tang dan theo id cua Person
// ham Sort nay da duoc .Net cung cap san, dung QuichSort, co giao dien :
// public void Sort();
// ham Sort nay se tu dong su dung ham "public int CompareTo(Person other)"
// de thuc hien sap xep.
Array.Sort(personArr);
// done, mang da sap xep xong, tang dan theo id.

Nếu muốn sắp xếp giảm dần thì như thế nào ?
Có 2 cách :
- Cách 1 : bạn sửa hàm CompareTo của Person (chỉ khi ta chỉ muốn sắp xếp giảm dần thôi), làm như thế nào thì mình đã comment trong hàm CompareTo bên trên rồi.
- Cách 2 : bạn thực hiện reverse lại, làm như sau

//////////////////////////////////////////////////////////////////////////
// neu muon lay danh sach giam dan, ta co the thuc hien theo 2 buoc
// thuc hien sap xep tang dan theo cach noi tren
personList.Sort(); // => de sap xep tang dan.
personList.Reverse(); // => de dao nguoc thu tu sap xep
// done, ta da co danh sach dc sap xep giam dan

Vậy lúc này bạn đã có thể sắp xếp theo id rồi, nhưng lúc khác bạn lại muốn có một danh sách sắp xếp theo name thì sao ?
Lúc này, bạn định nghĩa thêm một lớp để implement IComparer, lớp đó như sau :

public class PersonComparerIncreaseOnName: IComparer<Person>
{
#region IComparer Members
///
/// Ham nay se duoc su dung khi thuc hien sap xep tang dan Person theo name.
///
///
///
///
public int Compare(Person x, Person y)
{
return x.name.CompareTo(y.name);
}
#endregion
}


Và khi muốn gọi sắp xếp, ta gọi hàm sau :
Với List, IList thì

//////////////////////////////////////////////////////////////////////////
// thuc hien sap xep danh sach Person tang dan theo name cua Parson
// ham Sort nay da duoc .Net cung cap san, dung QuickSort, co giao dien :
// public void Sort(IComparer);
// ham Sort nay se tu dong su dung ham "public int Compare(Person x, Person y)"
// de thuc hien sap xep.
personList.Sort(new PersonComparerIncreaseOnName());
// done, danh sacg da sao xeo tang dan theo name.


Với Array thì

//////////////////////////////////////////////////////////////////////////
// thuc hien sap xep mang Person tang dan theo name cua Parson
// ham Sort nay da duoc .Net cung cap san, dung QuickSort, co giao dien :
// public void Sort(IComparer);
// ham Sort nay se tu dong su dung ham "public int Compare(Person x, Person y)"
// de thuc hien sap xep.
Array.Sort(personArr, new PersonComparerIncreaseOnName());
// done, mang da sap xep xong tang dan theo name.


Nếu tôi sử dụng một lớp có sẵn, tôi không thể khiến lớp đó implement IComparable thì sao ?
Ko vấn đề ji, bạn làm y hệt theo cách ta sắp xếp theo name, định nghĩa thêm một class implement IComparer như trên, và ta có thể sắp xếp như thường.

2. Sắp xếp một danh sách hoặc một mảng các Struct
Hoàn toàn ko có khác biệt gì với sắp xếp struct và class, vì trong C#, một struct cũng có thể implement các Interface giống hệt class, ví dụ sau là struct Person :

public struct Person : IComparable<Person>
{
public int id;
public string name;
public Person(int inNo, string inName)
{
id = inNo;
name = inName;
}

#region IComparable Members
///
/// Ham nay se duoc su dung khi goi ham sap xep cung cap boi .Net.
/// Ngam dinh la sap xep tang dan, neu ham nay tra lai ket qua nhu sau :
/// == 1 : this > other;
/// == 0 : this == other;
/// == -1 : this <>
/// Neu co tinh muon sap xep giam dan thoi thi co the viet nhu sau :
/// return -id.CompareTo(other.id);
///
///
///
public int CompareTo(Person other)
{
return id.CompareTo(other.id);
}
#endregion
}

Đối với sắp xếp trong Java hay C++ cũng có kỹ thuật tương tự.
That's all. Go Together In Development.

Thứ Sáu, 14 tháng 11, 2008

Make run a Java program with command

// class NewClass => file NewClass.java
package test;

public class NewClass {
int i;
public NewClass(int index) {
// TODO Auto-generated constructor stub
i = index;
}
public int getI() {
return i;
}
public void setI(int i) {
this.i = i;
}
}

// class Test contains main function => file Test.java
package test;

public class Test {
public static void main(String[] args)
{
NewClass newClass = new NewClass(10);
System.out.println(newClass.getI());
}

}

Lâu rồi ko viết Java, trước có note lại cách make run để ghi nhớ. Ghi nhớ này chưa hoàn chỉnh và hệ thống lắm nhưng giờ chưa có điều kiện để viết, lúc nào rảnh thì viết sau. Để make run một Java program, ta dùng lệnh sau :
/* command to execute the program, with file.class (not yet jar)
* . : current directory.
* test.Test : test is package name, and Test is the main Class (do not go into the test directory).
*/

java -classpath . test.Test

Thứ Ba, 11 tháng 11, 2008

Phong cách thiết kế web hiện nay!!!

Bài viết này là bài viết tổng hợp, để bạn thấy được những phân tích về xu hướng trong thiết kế.

1. Các đặc điểm chung
Các site tuyệt vời đã chia sẻ cho chúng ta các đặc điểm thiết kế:
* Bố cục đơn giản
* Thiết kế hướng tâm
* Thiết kế nội dung, không trang
* Hạn chế hiệu ứng 3D
* Màu sắc nền mềm và trung tính
* Hạn chế màu sắc nổi
* Hạn chế biểu tượng (icon) phức tạp
* Sự phong phú của khoảng trắng
* Văn bản (text) to đẹp
Và các đặc điểm này giúp cho chúng tuyệt vời, và chúng ta sẽ xem xét các đặc điểm đó từng cái một.

2. Bố cục đơn giản
Có lẽ chúng ta thấy cách thiết kế đơn giản 1 và 2 cột hơn nhiều năm về trước. Cảm giác chung nhất bạn có thể thấy là các nhà thiết kế thấy điều đó làm các trang đơn giản và làm việc tốt hơn.
Các trang này đơn giản chỉ đọc theo cách từ trên xuống dưới, và bạn không cần đưa mắt xung quanh, và bạn chỉ quan sát vùng bạn đang có. Nó làm dịu đi và mềm hơn cho các trình duyệt khi phải đọc nội dung của một trang web, dĩ nhiên sẽ đỡ mất thời gian hiển thị hơn.
3. Thiết kế hướng tâm
Điều khác mà bạn phải chú ý về tất cả các trang hot ở trên là chúng là chúng đều được bố trí ở trục giữa. Vào thời điểm 2 năm trước đây, bạn sẽ tìm thấy rất nhiều bố cục lỏng lẻo và được căn chỉnh trái hoặc cố định độ rộng, ngày nay nội dung đã được đưa vào giữa trang.

Các bố cục hướng trái ít được dùng hơn. Cũng thế, bố cục mềm dẻo (full-width) đầy độ rộng cũng ít được phổ biến. Suy sét đúng thì chúng ta luôn cố gắng có được nhiều thông tin để "vượt qua rào cản trên" (ví dụ: ẩn đi màn hình không cần thanh trượt scroll). Bố cục mềm dẻo tự giãn phù hợp với tiêu chí này.
Tuy vậy, ngày nay chúng ta vẫn có nhiều khả năng phù hợp với việc cuộn và kéo tăng khoảng trống và độ cao của các dòng văn bản.

4. Thiết kế nội dung, không có trang
Phong các thiết kế web hiện đại tốt là đặt ít thành phần vào nền của trang web - nền trang web nên để một cách trong sáng. Và nên tập chung vào việc thiết kế nội dung trên trang web.

Chúng ta cùng xem xét các hiệu ứng như:
* Tối giảm, loại bỏ bớt các hộp bên trong một bố cục trang web
* Làm mềm, đơn giản và tạo khả năng dùng lại cho trang web
* Sử dụng các màu sắc mạnh mẽ và hiệu ứng 3D là tập chung vào các phần cần nổi bận bên trên, bao gồm là các nhánh chính
* Tiêu điểm là được đánh dấu các chủ đề chính, sao cho chúng dễ nhìn thấy nhất và thiết kế thật tốt.

5.Tại sao lại là căn giữa?
Tôi thích gióng hàng, căn giữa và sử dụng hầu hết cho các thiết kế.
Khi nội dung được căn giữa màn hình, nó sẽ được chú ý trước tiên và rõ ràng.
Và nó cũng thỏa mãn được tiêu chí cho việc đơn giản và cân bằng, việc quan sát nó được thực hiện một cách dễ dàng dọc từ trên xuống đến dưới.
Hầu hết các thiết kế hướng tâm được cố định độ rộng (có thể theo pixel hoặc phần trăm) hay đôi khi là tự giãn rộng (ví dụ như trang. Forecast Advisor). Lợi ích chủa nó là bảo toàn được độ rộng của nối dung (thực thế với cách thức tự giãn rộng, kích thước phông chữ có thể thay đổi) đó là chiều cao dòng có thể lớn hơn màn hình.

6. Sử dụng hiệu ứng 3D một cách tiết kiệm
Tất cả các trang hot nhất đều sử dụng hiệu ứng màu chuyển sắc gradient, chúng đưa đến các thanh, hộp bo tròn để tạo cảm giác mềm cho không gian nền, hoặc tạo một biểu tượng chuẩn với hiệu ứng nổi khối và bóng mờ
Hiệu ứng phản chiếu & lan tỏa cũng được tận dụng. Bóng đổ cũng vẫn được dùng thêm.

Thương hiệu được làm tròn bất kì chỗ nào

7. Sử dụng các dòng chữ lớn đẹp
Tôi không nói rằng tất cả các dòng chữ text trên trang web của bạn phải là cỡ chữ quá cỡ. Mà thực tế trong một số phần chữ nhỏ lại là đẹp (chúng ta chú ý rằng chỉ dùng một ít chữ nhỏ trong trang web thôi)

8. Cái gì là ý tưởng tốt ở đây
Hãy tạo các văn bản quan trọng trong trang web có cỡ chữ lớn hơn kích thước bình thường Nếu tất cả văn bản của bạn to, thì sẽ không có chữ nào là to lớn cả.Sử dụng chữ lớn để giúp khách thăm website nhanh chóng biết site bạn là gì, cái gì là quan trọng và đặc điểm của các vùng họ muốn xem tiếp theo.

Nguồn :Itgatevn Graphics Group (Theo DESIGNFROMSCTRASH) MauThietKe.com tổng hợp!

Thứ Hai, 10 tháng 11, 2008

Quy trình phát triển GUI cho WebSite of iGURU

Bài viết không đi sâu vào nghệ thuật thiết kế Web, bài viết chỉ ra các bước nên làm với một dự án thiết kế giao diện Web.
Quy trình được dựa trên Chuẩn IWP phiên bản 1.0 của IGURU. Bài viết có sử dụng giao diện của Website bán hàng trực tuyến, Web site tin tức

Quy trình bao gồm các bước sau:
Bước 1: Xác định yêu cầu của khách hàng.
Bước 2: Phác thảo ý tưởng trên giấy
Bước 3: Đánh giá mẫu phác thảo
Bước 4: Thiết kế đồ hoạ bản đơn sắc
Bước 5: Phối màu cho giao diện Web
Bước 6: Xây dựng tài liệu về chuẩn CSS, clientsite script, ảnh, folder cho trang Web
Bước 7: Sử dụng các ngôn ngữ đánh dấu, lập trình để thiết kế giao diện.
Bước 8: Test giao diện trên các trình duyệt
Bước 9: Chuyển mã nguồn tới bộ phận phát triển Web

Bước 1: Xác định yêu cầu của khách hàng.
Yêu cầu là một điều kiện hoặc khả năng mà hệ thống phải tuân theo hoặc có. Nhiều khi khách hàng cũng không biết họ cần gì, nên khi xác định yêu cầu bạn nên xây dựng trước một biểu mẫu câu hỏi để lấy yêu cầu của khách hàng. Yêu cầu phải đạt những tiêu chí sau:

  • Yêu cầu phải bao quát giao diện, chức năng, cấu trúc nội dung, đối tượng xem Web site.
  • Trao đổi thông tin dựa trên các yêu cầu đã xác định trước khi tiếp cận khách hàng. Bạn phải nghiên cứu về yêu cầu chung của khách hàng trước khi tiếp cận.
  • Xây dựng bảng câu hỏi logic để chuyển đổi sang phân tích yêu cầu nghiệp vụ, yêu cầu hệ thống đơn giản, dễ dàng.
  • Đặt độ ưu tiên, lọc và theo dõi các yêu cầu.
  • Đánh giá khách quan các chức năng và hiệu năng.

Bước 2: Phác thảo ý tưởng trên giấy
Nào giờ là lúc bạn thể hiện hoa tay của mình, để linh hoạt trong việc phác ý tưởng, bạn nên sử dụng bảng vẽ, bút chì, thước kẻ và tẩy. Với những dụng cụ trên bạn phác ý tưởng, ở đây là bố cục trên giấy. Dựa vào kinh nghiệm thành công của bạn, bạn thấy những tiêu chuẩn nào nên có, ví dụ các tiêu chuẩn sau của IWP 1.0:

  • Banner không quá 1/3 màn hình thực của người sử dụng (màn hình thực là màn hình của trình duyệt có thể xem được trang Web, đã bỏ đi các thanh tool bar của trình duyệt Web).
  • Sitebar không lớn quá 25% chiều rộng trang Web.
  • ....

Bạn cũng nên xây dựng chuẩn bố cục dựa trên nội dung đối với toàn bộ Web site. Web site là tập hợp của những trang Web, mỗi trang Web tập hợp các nội dung có mối liên quan hoặc không giữa các trang Web. Dựa vào nội dung, bạn chia trang Web làm 02 vùng:

  • Vùng template (theo chuẩn IWP)
  • Vùng hiệu chỉnh.

Vùng template là vùng không hiệu chỉnh hoặc hiệu chỉnh rất ít xuyên suốt các trang Web của Web site.
Vùng hiệu chỉnh là vùng có thay đổi nội dung trong hầu hết các trang Web của Web site.
Bạn nên cân nhắc trước khi xác định vùng nào là vùng template hoặc vùng hiệu chỉnh, vì việc này sẽ ảnh hưởng đến xây dựng mã CSS, HTML chung của giao diện Web site.

Bạn cũng nên quy chuẩn các đối tượng trong bố cục để dễ trình bày, quản lý, theo dõi. Ví dụ: Ảnh là hình chữ nhật có đánh dấu x; chữ là đường kẻ,...
Nếu đây là một dự án phức tạp bạn nên tham khảo quy trình RUP và kết hợp với quy trình này để ra một giải pháp quản lý dự án phù hợp hơn.

Ví dụ:

Bước 3: Đánh giá mẫu phác thảo
Bạn nên có tối thiểu 03 mẫu phác trên giấy, sau đó bạn treo lên tường và mời những người khác cùng xem và đánh giá. Mẫu phác thảo đạt những yêu cầu phải trả lời được những câu hỏi như sau:

  • Họ thích mẫu nào?
  • Mẫu thiết kế có đáp ứng các yêu cầu của khách hàng không?
  • Tìm thông tin, chức năng có dễ không?
  • Đứng xem, bạn có thấy bố cục có rời rạc không? Có thẩm mỹ không?

Nếu câu trả lời không đạt yêu cầu trên bạn nên ngồi lại và vẽ tiếp, điều này sẽ giúp bạn giảm chi phí nhiều nếu bạn sử dụng máy tính để thiết kế. Sau khi chọn được một mẫu chúng ta chuyển sang bước 4.

Bước 4: Thiết kế đồ hoạ bản đơn sắc
Sau khi phác thảo xong, bạn sử dụng công cụ đồ hoạ máy tính để thiết kế mẫu giao diện Web. Đầu tiên chúng ta cần xem bố cục trên Máy tính có hợp lý không, chính vì vậy chúng ta chưa phối màu cho các mảng màu, đường kẻ, chữ cho trang Web, tất cả các bạn để thang màu xám để bước tiếp theo phối màu dễ dàng hơn. Tuyệt đối không để màu trắng và đen với những vùng muốn phối màu khác hai mầu trên.

Nếu bạn sử dụng công cụ đồ hoạ, chúng tôi đề xuất sử dụng Photoshop CS2 để áp dụng các chuẩn thiết kế giao diện dễ dàng hơn. Ví dụ đặt tên, sắp xếp folder, phân cấp folder, áp màu cho layer,...

Sau khi căn chỉnh bố cục và thiết kế xong, bạn nên in ra và lại treo lên tường mời mọi người đến đánh giá giống như bước 3. Đánh giá hiện giờ cần phải trả lời những câu hỏi như sau:

  • Tìm thông tin, chức năng có dễ không? Không dễ vì sao? Do độ tương phản, kích cỡ, …?
  • Trình bày thông tin quan trọng có dễ tìm với giới hạn của màn hình thực hay không?
  • Giao diện có dễ đọc, dễ sử dụng với người dùng mục tiêu hay không?
  • Giao diện có thể hiện ra tính cách riêng hay không?
  • ….

Ví dụ:

Bước 5: Phối màu cho giao diện Web
Khi bản đơn sắc đạt yêu cầu, bạn chuyển sang phối màu cho giao diện Web. Khi phối màu cho giao diện bạn nên tuân thủ các phương pháp chẳng hạn như sau:

  • Dựa vào màu sắc yêu cầu từ bảng câu hỏi để đưa ra phương pháp phối màu cho Web site. Có 1 màu chủ đạo, 1 màu thứ cấp và các màu chỏi để tăng phần sinh động cho Web.
  • Với màu nền là màu pha gam xám sẽ có kiểu phối màu riêng. Ví dụ phần nội dung sẽ có màu đỏ, vàng chanh, vàng, cam, xám, da trời,… tuỳ thuộc vào mục đích của Web site.
  • Với text nên tối đa 3 màu, 3 font, 3 cỡ chữ, 3 kiểu chữ, 3 kiểu trace, kerning.

Ví dụ:

Chủ Nhật, 9 tháng 11, 2008

Lập trình generic (template) với C#

Trong C# hỗ trợ lập trình generic khá mạnh, nếu bạn biết sử dụng lập trình generic thì bạn tiết kiệm được khá khá thời gian lập trình, và tính tái sử dụng code rất cao, vẫn đảm bảo tính trong sáng khi code mà performance của chương trình hầu như ko giảm. Trong C#, bạn có thể lập trình Generic với Class, Struct, Function.
1. Lập trình Generic với Class.
Chắc bạn đã quá quen thuộc với khai báo
List nameList = new List();
Đây là khai báo sử dụng một danh sách các string, trong đó lớp List là một lớp được lập trình dạng generic, bạn có thể dễ dàng khai báo một danh sách các đối tượng thuộc kiểu bất kì. Rõ ràng tính tái sử dụng lớp List cao hơn rất nhiều lớp List ko có generic.
Áp dụng phương pháp cách định nghĩa lớp này, chúng ta có thể tạo những lớp generic khác nhau. Tớ ví dụ ở đây lớp Couple được sử dụng rất nhiều khi tớ viết code.

    public class Couple<T, E>
{
public T elementA;
public E elementB;
public Couple(T inA, E inB)
{
elementA = inA;
elementB = inB;
}
}

Lớp này được dùng khi bạn muốn có một đối tượng tạm thời chỉ gồm hai phần tử, bình thường bạn phải định nghĩa một class mới để phù hợp với kiểu của 2 phần tử nói trên, nhưng với Couple bạn ko cần thiết phải làm điều đó.
Ví dụ bạn muốn một đối tượng gồm 2 phần tử string và một số integer, bạn khai báo như sau :
Couple couple = new Couple("Age", 29);
Khi đó couple.elementA sẽ có kiểu string nhận giá trị "Age" và couple.elementB sẽ có kiểu int nhận giá trị 29.
Cũng với lớp này, bạn có thể tạo một lớp danh sách các bộ đôi string và int như sau :

List<Couple<string, int>> listCouple = new List<Couple<string, int>> ();

Và khi đó List[5].elementA sẽ có kiểu string, trả về giá trị string của Couple có index 5 trong List nói trên.
Hoặc khi hàm bạn viết cần phải trả về 2 đối tượng, thì việc sử dụng Couple cũng là một cách tốt, trong sáng và vẫn rất OPP:D.
Chú ý, bạn có thể bổ sung thêm Property cho lớp Couple nếu thấy cần thiết (khi lập trình aspx chẳng hạn), thêm như bình thường.

    public class Couple<T, E>
{
public T elementA;
public E elementB;
public Couple(T inA, E inB)
{
elementA = inA;
elementB = inB;
}
public T ElementA
{
get{return elementA;}
set{elementA = value;}
}
}

Tương tự như vậy, bạn có thể khai báo thêm các lớp Generic Triple (bộ ba) và Quad

    public class Triple<T, E, F>
{
public T elementA;
public E elementB;
public F elementC;
public Triple(T inA, E inB, F inC)
{
elementA = inA;
elementB = inB;
elementC = inC;
}
}

public class Quad<T, E, F, G>
{
public T elementA;
public E elementB;
public F elementC;
public G elementD;
public Quad(T inA, E inB, F inC, G inD)
{
elementA = inA;
elementB = inB;
elementC = inC;
elementD = inD;
}
}

Bạn có thể tận dụng 3 lớp nói trên trong các dự án C# của bạn, sẽ tiết kiệm nhiều thời gian đấy. Chú ý phải định nghĩa thêm nhé, đây không phải là lớp sẵn có của .Net.

2. Lập trình Generic với Struct.
Nhìn chung, ko có ji khác biệt trong cách lập trình Generic Struct và Generic Class, ví dụ sau là Struct Couple:

    public struct Couple<T, E>
{
public T elementA;
public E elementB;
public Couple(T inA, E inB)
{
elementA = inA;
elementB = inB;
}
public T ElementA
{
get{return elementA;}
set{elementA = value;}
}
}

Nói chung, nếu ko phải quá bận tâm vào performance, thì hầu như ta có thể dùng Class thay vì dùng Struct trong lập trình C#. Tớ sẽ phân biệt sự khác nhau, và ưu nhược điểm của việc sử dụng Struct trong C# trong một bài viết khác.

3. Lập trình Generic Function.
C# cũng cho phép lập trình Generic với hàm, sau đây là một ví dụ :

    public string toString<T>(List<Couple<string, T>> list)
{
string result = "";
foreach (Couple<string, T> pair in list){
string tmp = pair.elementA + " : " + pair.elementB.ToString();
result += tmp + '\n';
}
return result;
}

Đây là ví dụ một hàm trả về một string tương ứng với nội dung của một danh sách bộ đôi của một String và một loại object nào đó (string, int, ...) sẽ được thay thể trong mỗi trường hợp call cụ thể. Có lẽ đây ko phải là ví dụ hay cho Generic Function. Nhưng nhờ lập trình Generic Function, tớ đã có thể viết hàm BinarySearch rất tổng quát, có thể được tái sử dụng trong rất nhiều dự án khác, tiết kiệm rất nhiều thời gian. Tớ sẽ giới thiệu hàm này trong bài nói về Sắp xếp và Tìm kiếm sau.

Link tham khảo học C#, Js, VB.Net ...

Tớ tìm thấy một link tham khảo khá tốt, có nhiều example, phù hợp với nhiều trình độ.

- C# :

Link1 : http://www.java2s.com/Tutorial/CSharp/CatalogCSharp.htm

Link2 : http://www.java2s.com/Code/CSharp/CatalogCSharp.htm

- Js :

Link1 : http://www.java2s.com/Code/JavaScriptReference/CatalogJavaScriptReference.htm

Link2 : http://www.java2s.com/Tutorial/JavaScript/CatalogJavaScript.htm

Trên trang http://www.java2s.com/ nói trên, có rất example của nhiều ngôn ngữ khác nhau, được phân loại rất tốt.

Sử dụng Visual Assist trong lập trình DotNet (p2)

Sau khi sử dụng VA, nó cải thiện hiệu quả lập trình của tớ lên khoảng 20%, mặc dù lúc đầu cũng mất ít thời gian làm quen, nhưng bây giờ thì nó là tool không thể thiếu. Tớ giới thiệu qua một số lợi ích khi dùng VA :
1. Hỗ trợ các snippet, là các template các câu lệnh, và chúng ta có thể edit bổ sung các snippet đó.

2. Cung cấp một cái nhìn rộng hơn về một file với VA Outline, rất tiện lợi khi xem cấu trúc một file, tớ rất thích tính năng này, một tính năng ko thể thiếu khi tớ viết code.

3. Hỗ trợ các chức năng refactor để hiệu chỉnh code, mặc dù .Net cũng đã cung cấp tính năng này nhưng giải thuật viết ko tốt, chạy khá rùa với dự án lớn, còn VA cũng có những hạn chế nhất định. Tớ sẽ viết và so sánh về các chức năng Refactor này sau, tuy nhiên tớ recommend dùng Encapsule Field của VA thay vì Encapsule Field của .Net, tính năng gen code Property từ định nghĩa member rất tiện lợi.

Chuột phải vào member, và chọn Encapsulate Field

Và property dc gen tự động như sau

Bạn nên định nghĩa phím tắt cho tính năng này, Tool-> Option -> Environement -> Keyboard, search Encapsule, chọn VAssistX.EncapsulateField rồi Assign fim tắt bạn muốn, tớ dùng Ctrl+K, F. Tớ rất hay dùng phím tắt này.

4. Cho phép Browse nhanh chóng đến file cần tìm dựa theo tên file, hoặc một phần tên file. Trong các dự án lớn, thư mục Project có rất nhiều file, việc tìm và mở file đôi khi mất khá nhiều thời gian, làm bực mình. Với VAssist, bạn chỉ cấn nhớ mang máng tên file là có thể tìm thấy nó, sử dụng phím tắt Atl+Shift+O.

5. Clipboard extend, có thể dễ dàng quay lại những bản ghi clipboard trước đây, sử dụng phím tắt Ctrl-Shift-V, chú ý, nên sử dụng Unikey4.0, để không gây đụng độ clipboard.

6. Menu context hiện ra khi ấn Ctrl-SpaceBar lúc đang chọn một vùng text nào đó, bàn có thể dễ dàng đóng một đoạn code trong một câu lênh try, for, if ... với menu này.

7. Một số phím tắt tiện dụng khác, như Atl-M để di chuyển qua lại giữa các hàm, Ctrl-Shift-S để find Symbol rất hay, nhưng chạy hơi nặng nên tớ tắt đi (phần setting đã hạn chế tính năng này rồi :D).

Read more : http://bnok.vn/gtidev/su-dung-visual-assist-trong-lap-trinh-dotnet-p1.html

Alt-Shift-F10 : phím tắt quan trọng mà VisualNetters phải biết

Tớ nhận thấy nhiều người trong cty mình ít khi sử dụng phím tắt, và cũng ít tận dụng hết những hỗ trợ của công cụ khi lập trình. Theo kinh nghiệm lập trình của cá nhân tớ, là nếu biết tận dụng nó, hiệu quả lập trình có thể tăng lên ít nhất 50%.

Alt-Shift-F10

Đây là phím tắt đáng giá nhất của .Net, nó tăng hiệu quả lập trình của tớ lên ít nhất 15%, đem lại phần nào cảm giác ngày xưa lập trình trên esclipse :D, (bây giờ tốc độ code C# của tớ cũng đã ngang Java ngày trước). Phím tắt này dùng trong 3 trường hợp sau :
- Để thêm tự động các using còn thiếu : khi bạn sử dụng một lớp mà chưa khai báo using, đương nhiên bị lỗi. Nhiều lúc thao tác thêm using bằng tay rất khổ cực, mất thời gian, phím tắt này sẽ thêm đúng và chính xác luôn using của lớp chưa được khai báo using. Đưa con trỏ nháy lên tên lớp chưa dc khai bao using (lúc này tên lớp có màu đen), và nhấn phím tắt nói trên, và sau đó tên lớp sẽ chuyển sang màu xanh, tức là đã thêm using thành công. Nếu bạn sử dụng một lớp của một thư viện ngoài, hoặc của một project khác, thì bạn cần add reference trước, vì phím tắt này ko thể tự add reference dc :D .
- Thêm hàm mới on-the-fly : khi đang code, đoạn code cần gọi đến một hàm hoặc một phương thức chưa tồn tại, bình thường bạn sẽ tự khai báo thêm một hàm mới, và viết code cho nó rồi mơi quay lại code tiếp đoạn code trên và gọi đến hàm vừa viết, thao tác này cũng mất khá thời gian, nhất là khi hàm đó thuộc một lớp khác. Nếu sử dụng phím tắt này, bạn tiếp kiệm thời gian khai báo một hàm mới, và vẫn tiếp tục dòng suy nghĩ hiện tại. Làm như sau, bạn cứ code tiếp, gọi đến hàm chưa tồn tại này như thể nó đã tồn tại rồi, với đầy đủ các tham số đầu vào cần thiết của hàm đó, sau đó để con trỏ nháy trên tên hàm đó, và nhấn phím tắt nói trên, hàm đó sẽ được gen khai báo chính xác giao diện tương ứng với hàm vừa bị gọi, tiết kiệm dc một đống thòi gian, bạn có thể cứ code tiếp mạch suy nghĩ hiện tại, hàm kia thích code sau cũng được.
- Implement một interface : khi viết một lớp implement một interface nào đó, bạn phải implement đẩy đủ giao diện của interface đó vào lớp nói trên. Nếu không sử dụng công cụ, bạn phải viết tay lại tất cả các khai báo của inteface nói trên, nói chung rất mất thời gian, và cũng ko đảm bảo chính xác. Một cách khá hơn, bạn right-click vào tên interface, và chọn implement interface -> implement interface. Nhưng cách mà tớ hay dùng nhất là dùng phím tắt nói trên, khi đưa con trỏ nháy lên trên tên interface.

Example :


Trên hình minh họa là Couple là một class chưa có using, có màu đen, khi đưa trỏ nháy của keyboard lên sẽ thấy một dấu gạch ngang bên dưới tên lớp, nếu đưa chuột vào đó, sẽ hiện ra hình trên.

Ấn Atl-Shift-F10 hoặc click chuột vào hình hiện thêm sẽ hiện ra hình sau :

Chọn xong, nó sẽ thêm using cho mình, và tên lớp sẽ chuyển sang màu xanh.