Web Design 2.0: Xu Hướng Mới

Đã từ khá lâu khi những trang Web 2.0 dùng các hình khối có góc tròn (rounded-corner) và những đường cong như một tiêu chuẩn trên giao diện. Nhưng những xu thế mới trong thiết kế trở về với những đường thẳng có vẻ đang được ưa chuộng.

Một số website tiêu biểu

Trước hết chúng ta hãy xem một số trang chủ mà chắc cũng giống như tôi các bạn sẽ phải thốt lên “Oh, cool!”. Đây là những website tiêu biểu cho xu hướng thiết kế mới hiện nay.

1. Shoeboxed.com

shoeboxed.com là một trang web giúp bạn theo dõi các hóa đơn mua hàng và chia sẻ việc mua sắm của mình với bạn bè. Dịch vụ này có vẻ được ưa chuộng ở phương Tây vì họ rất “tính toán” trong việc mua bán.

Bảng màu chính:

2. Wishlistr.com

Có bao giờ bạn cảm thấy lúng túng khi đi mua quà mừng thôi nôi, sinh nhật hay tân gia một ai đó vì chẳng biết “thân chủ” muốn cái gì? Với tính thực dụng cố hữu, người phương Tây thường tạo ra một “Wish List” liệt kê danh sách những thứ mình mong muốn; nhìn vào danh sách này bạn sẽ biết chắc mình nên mua gì. Nhưng sẽ ra sao nếu có hai hay nhiều người hơn cùng mua một món quà? Dịch vụ web wishlistr.com sẽ giúp bạn tìm ra giải pháp. (Ở Việt Nam thì hơi khác, trong đa số trường hợp chúng ta đều có thể dùng… phong bì ).

3. Church Plant Media

churchplantmedia.com là một dịch vụ CMS (content management system). Nếu bạn muốn tạo ra một cool website tương tự như họ thì đây là địa chỉ nên tìm đến.

Bảng màu chính:

4. Corking Design

corkingdesign.co.uk là một công ty thiết kế web chuyên nghiệp. Tất nhiên website của họ phải thể hiện điều đó.

Bảng màu chính:

5. Revolver

Revolver là trang web giới thiệu một công cụ cùng tên giúp bạn dễ dàng thay đổi hình nền hay tạo các showcase hình trên trang web của mình.

Bảng màu chính:

6. YikeSite

YlikeSite là một CMS khác nhưng chức năng đơn giản hơn Church Plant Media, chủ yếu giúp bạn tạo ra các website tĩnh giới thiệu công ty/dịch vụ của mình.

Bảng màu chính:

Một số website khác:

Blogadda.com

Dibusoft

Enrichment

HyperPixel Design

NetNova

Studio3K

Xu hướng thiết kế

Chúng ta dễ dàng nhận thấy thiết kế layout cùa các trang web trên dùng chủ yếu là các dải màu thẳng kéo dài hết màn hình. Các phần của trang web được phân cách bằng các dải màu sắc tách biệt chứ không dùng các đường biên (border). Màu nền đậm (hay nổi hơn) ở phía trên và nhạt dần (hay chìm hơn) ở các phần dưới, tùy theo nội dung mà trang web muốn nhấn mạnh.

Ở phần header, chúng ta thường chỉ thấy logo trang web và menu định hướng đơn giản, làm cho người dùng chú ý hơn tới phần nội dung phía dưới. Các biểu tượng sinh động, rõ ràng giúp ta rất dễ nắm bắt các nội dung, chức năng quan trọng nhất mà trong web cung cấp. Chúng ta không thấy có hình người nào trong các trang web này mà thay vào đó là các hoạt hình khiến người dùng có cảm giác dịch vụ trang web cung cấp rất dễ sử dụng.

Ngoài ra các biểu tượng (icons and badges) cũng giúp nhấn mạnh các chức năng mà website cung cấp.

Menu định hướng của các trang web này rất rõ ràng, ít mục và không có nhiều tầng giúp cho người dùng không bi lạc vào mê cung các mục menu cha, con, cháu chắt… mà có thể đến nơi cần tới chỉ với một cú nhấp.

Nhận xét chung

Khỏi cần phải ca ngợi về độ chuyên nghiệp mà các nhà thiết kế thế hệ 2.0 đã đạt tới, ưu tiên hàng đầu cho một trang web hiện nay là giúp người dùng cảm thấy dễ nắm bắt, dễ sử dụng các chức năng mà dịch vụ web đó cung cấp. Việc sử dụng đúng màu sắc, biểu tượng là cả một nghệ thuật, nó nói lên trình độ của nhà thiết kế nhưng quan trọng hơn là nó làm nổi bật trọng tâm của trang web.

Cách đây hơn một năm trong một bài viết khác tôi đã đề cập tới những yếu tố căn bản của design 2.0 như sử dụng div layout, CSS, XHTML… Tôi có thể nhận thấy hầu hết các trang web 2.0 của Việt Nam đã đi theo xu hướng thiết kế này, kết quả là chúng ta có những giao diện thanh thoát hơn, dễ định hướng hơn. Nhưng cũng phải nói là không có nhiều website đạt tới trình độ hoàn hảo như các trang web mà chúng ta vừa điểm qua. Điều dễ nhận biết là vai trò của designer trong quyết định bố cục các trang web tại Việt Nam không lớn và họ thường phải thỏa hiệp với xu hướng bày tất cả ra mặt tiền của ban lãnh đạo. Có vẻ như chúng ta còn phải học hỏi nhiều từ các đồng nghiệp phương Tây.

(Theo StyleIgnite)

Presentation Logic với PHP

Presentation Logic hiểu nôm na là những phần của hệ thống “chăm lo” công việc hiển thị thông tin, giao tiếp với người dùng… Trong ứng dụng web, presentation chính là trang HTML.

Trong các ứng dụng PHP đời đầu, mã PHP được trộn lẫn vào HTML,các ứng dụng trở nên cực kỳ rối rắm và chắc chắn là tính khả mở không cao, khả năng kế thừa và mở rộng thấp. Một trong những tiêu chí hàng đầu cho một ứng dụng PHP hiện đại ngày nay là phải tách biệt rõ ràng business logic và presentation logic. Kiến trúc MVC (Model – View – Controller) làm rất tốt công việc đó, và trong MVC, V là presentation.

Trong ứng dụng web theo kiến trúc MVC, View thường chia thành 2 phần: transform view và template view! Và transform view là phần thực hiện presentation logic.

1. Template engine

Phong cách truyền thống của PHP là các template engines, có rất nhiều template engine có quá trình phát triển lâu dài và được tin tưởng.

Phải nhắc đến đầu tiên là Smarty. Smarty gần như đã trở thành template engine chính thống trong PHP. Người ta nói rằng, lịch sử PHP đã sang trang mới kể từ khi Smarty xuất hiện. Smarty được tin tưởng và sử dụng trong rất nhiều dự án PHP từ rất nhỏ đến rất lớn như Flickr.com chẳng hạn.

Smarty không tách biệt mã HTML khỏi PHP, quá trình process của Smarty:

- Lập trình viên/designer diễn tả logic trong template bằng mã template của Smarty. Mã này cũng có các structure như if, foreach vvv. Các biến và object được assign từ bên ngoài vào.

- Smarty compiler sẽ dịch mã template sang mã PHP trộn lẫn với HTML, sau đó ghi kết quả ra file.

- Include file vừa tạo ra vào trong code.

Xong xuôi!

Smarty, thật sự là một lựa chọn tốt, vì mã template của nó đa dạng, mạnh nhưng không phức tạp như PHP. Cho nên trong các dự án sử dụng PHP có sự phân công công việc rõ ràng giữa developer và designer, người ta không cần phải lo lằng về việc các designer không biết lập trình nữa.

Tuy nhiên một điểm yếu của Smarty là nó phải thông qua một quá trình compile, mặc dù nó làm việc này rất tốt nhưng vẫn có rất nhiều ý kiến cho rằng nó chậm. Cũng phải thôi, xét cho cùng, PHP là text processing, và không nên process thêm một tầng nữa. Để có được performance cao hơn, các PHP framework thường sử dụng thẳng PHP vào trong template. Mã PHP ở đây được viết theo kiểu rút gọn. Ví dụ:

if ($babe == 'Mai Phuong Thuy'):
// do something with her
endif;

Như vậy, rõ ràng là sẽ hiệu quả hơn về mặt tốc độ, tuy nhiên nó sẽ không có được những điểm mạnh mà Smarty có. Cho nên một số developer khi làm việc với Cake, Symfony, hay Zend Framework vẫn thích dùng Smarty thay thế cho object View sẵn có của các framework này.

Anyways, nếu bạn cần tìm một template engine như thế, hãy lựa chọn Savant, có 2 phiên bản dành cho PHP4 và PHP5: http://phpsavant.com. Savant có API giống Smarty, cho nên bạn có thể switch sang nó từ Smarty mà chỉ cần thay đổi các file template/

Tôi vừa nhắc đến 2 template engine phổ biến và mạnh nhất, chúng trở thành một phần không thể thiếu của rất nhiều ứng dụng PHP. Nó giúp developers phân công rõ ràng những gì designers có thể “chạm”, tách biệt presentation logic khỏi business logic. Một số framework còn thêm cả các helper để trợ giúp việc tạo mã ajax vào trong template engine của họ!

2. XSLT (eXtensible Stylesheet Language Transformations)

Tuy nhiên, lại tuy nhiên;), template engine chưa phải là sự lựa chọn duy nhất.

Đầu tiên là nó chưa chuẩn hóa! Có thể khi tuyển designer, bạn lại phải huấn luyện họ sử dụng Smarty vì từ trước đến giờ họ chỉ làm việc với các developer .NET! Tiếp theo đó, presentation logic của bạn là PHP, về performance, nó không tốt hơn so với khi process ở một tầng thấp hơn.

Vậy, đâu là sự lựa chọn tiếp theo? Đó là XSLT(http://www.w3.org/TR/xslt). Trong trường hợp bạn chưa hiểu lắm, thì XSLT là một nhánh của XML được tạo ra để transform tài liệu XML từ dạng này sang dạng khác, từ XML sang XML, xHTML; hay sang bất cứ loại tài liệu gì! Với một nguồn dữ liệu duy nhất là XML, bạn có thể xuất ra trang web, RSS và nhiều nhiều nữa… Ứng dụng PHP của bạn có thể dụng chung nguồn dữ liệu của một ứng dụng Java, .NET, miễn là cả 2 đều chọn XSLT.

‘Với XSLT, presentation logic của bạn không còn là PHP nữa, nó là XSLT, hay là XML, nó được thực thi bằng một XSLT procesor được viết bằng C. Trong PHP5, bạn có thể thực thi XSLT bằng đối tượng XSLTProcessor. Bạn có thể xem các tutorial về đối tượng này bằng cách vào http://google.com, ở đó bạn sẽ thấy một text box duy nhất, gõ vào đó “XSLT PHP” và bấm enter. Hoặc nếu ngớ ngẩn một chút thì chờ tôi viết .

Tuy nhiên XSLT quá phức tạp cho các ứng dụng con con. Bởi lẽ bạn phải làm cách nào đó để chuyển đổi dữ liệu trong database sang XML, làm nảy sinh ra vấn đề back-end caching… buộc bạn phải có một thiết kế rất tốt. Cho nên, XSLT thường chỉ được ưa chuộng trong các dự án lớn, nơi đòi hỏi sự chuẩn hóa cao độ.

Bạn có thể tham khảo bitflux CMS, một ứng dụng PHP5 khai thác XML và XSLT.

Chúc bạn may mắn với sự lựa chọn của mình!

(trích từ Huy)

Web 2.0 không chỉ là công nghệ

Được xem là một cuộc cách mạng trên thế giới mạng, thế hệ web mới có những thay đổi quan trọng không chỉ ở nền tảng công nghệ mà còn cả ở cách thức sử dụng – hình thành nên môi trường cộng đồng, ở đó mọi người cùng tham gia đóng góp cho xã hội “ảo” chứ không chỉ “duyệt và xem”.

Web 2.0 là gì? Làm sao phân biệt đâu là Web 1.0 đâu là Web 2.0? Thuật ngữ “Web 2.0″ đang trở nên thịnh hành và có phần được lăng xê quá mức. Thực chất, Web 2.0 có nghĩa là sử dụng web đúng với bản chất và khả năng của nó!

Mục tiêu đầu tiên của những người tiên phong xây dựng Internet là nhằm kết nối các nhà nghiên cứu và các máy tính của họ với nhau để có thể chia sẻ thông tin hiệu quả. Khi bổ sung World Wide Web (năm 1990), Tim Berners-Lee cũng nhằm mục tiêu tạo phương tiện cho phép người dùng tự do đưa thông tin lên Internet và dễ dàng chia sẻ với mọi người (trình duyệt web đầu tiên do Berners-Lee viết bao gồm cả công cụ soạn thảo trang web). Tuy nhiên, sau đó web đã phát triển theo hướng hơi khác mục tiêu ban đầu.

Tuy có một số ngoại lệ nhưng thế giới Web 1.0 (thế hệ web trước Web 2.0) chủ yếu gồm các website “đóng” của các hãng thông tấn hay các công ty nhằm mục đích tiếp cận độc giả hay khách hàng hiệu quả hơn. Nó là phương tiện phát tin hơn là phương tiện chia sẻ thông tin. Chỉ đến gần đây, với sự xuất hiện của nhiều kỹ thuật mới như blog (hay weblog), wiki… web mới trở nên có tính cộng đồng (và cộng tác) hơn và trở nên gần hơn với sự kỳ vọng và khả năng thực sự của nó.

Khái niệm

Khái niệm Web 2.0 đầu tiên được Dale Dougherty, phó chủ tịch của OReilly Media, đưa ra tại hội thảo Web 2.0 lần thứ nhất do OReilly Media và MediaLive International tổ chức vào tháng 10/2004. Dougherty không đưa ra định nghĩa mà chỉ dùng các ví dụ so sánh phân biệt Web 1.0 và Web 2.0: “DoubleClick là Web 1.0; Google AdSense là Web 2.0. Ofoto là Web 1.0; Flickr là Web 2.0. Britannica online là Web 1.0; Wikipedia là Web 2.0. v.v…”. Sau đó Tim OReilly, chủ tịch kiêm giám đốc điều hành OReilly Media, đã đúc kết lại 7 đặc tính của Web 2.0:

1. Web có vai trò nền tảng, có thể chạy mọi ứng dụng

2. Tập hợp trí tuệ cộng đồng

3. Dữ liệu có vai trò then chốt

5. Phần mềm được cung cấp ở dạng dịch vụ web và được cập nhật không ngừng

4. Phát triển ứng dụng dễ dàng và nhanh chóng

6. Phần mềm có thể chạy trên nhiều thiết bị

7. Giao diện ứng dụng phong phú

Thoạt đầu, Web 2.0 được chú trọng tới yếu tố công nghệ, nhấn mạnh tới vai trò nền tảng ứng dụng. Nhưng đến hội thảo Web 2.0 lần 2 tổ chức vào tháng 10/2005, Web 2.0 được nhấn mạnh đến tính chất sâu xa hơn – yếu tố cộng đồng.

Công nghệ

Thực tế, ứng dụng trên web là thành phần rất quan trọng của Web 2.0. Hàng loạt công nghệ mới được phát triển nhằm làm cho ứng dụng trên web “mạnh” hơn, nhanh hơn và dễ sử dụng hơn, được xem là nền tảng của Web 2.0.

Kiến trúc công nghệ của Web 2.0 hiện vẫn đang phát triển nhưng cơ bản bao gồm: phần mềm máy chủ, cơ chế cung cấp nội dung, giao thức truyền thông, trình duyệt và ứng dụng.

Cung cấp nội dung

Bước phát triển đầu tiên và quan trọng nhất hướng đến Web 2.0 đó là cơ chế cung cấp nội dung, sử dụng các giao thức chuẩn hoá để cho phép người dùng sử dụng thông tin theo cách của mình (nghĩa là có khả năng tùy biến thông tin). Có nhiều giao thức được phát triển để cung cấp nội dung như RSS, RDF và Atom, tất cả đều dựa trên XML. Ngoài ra còn có các giao thức đặc biệt như FOAF và XFN dùng để mở rộng tính năng của website hay cho phép người dùng tương tác.

Dịch vụ web

Các giao thức truyền thông 2 chiều là một trong những thành phần then chốt của kiến trúc Web 2.0. Có hai loại giao thức chính là REST và SOAP. REST (Representation State Transfer) là dạng yêu cầu dịch vụ web mà máy khách truyền đi trạng thái của tất cả giao dịch; còn SOAP (Simple Object Access Protocol) thì phụ thuộc máy chủ trong việc duy trì thông tin trạng thái. Với cả hai loại, dịch vụ web đều được gọi qua API. Ngôn ngữ chung của dịch vụ web là XML, nhưng có thể có ngoại lệ.

Một ví dụ điển hình của giao thức truyền thông thế hệ mới là Object Properties Broadcasting Protocol do Chris Dockree phát triển. Giao thức này cho phép các đối tượng ảo (tồn tại trên web) tự biết chúng “là gì và có thể làm gì”, nhờ vậy có thể tự liên lạc với nhau khi cần.

Phần mềm máy chủ

Web 2.0 được xây dựng trên kiến trúc web thế hệ trước nhưng chú trọng hơn đến phần mềm làm việc ở “hậu trường”. Cơ chế cung cấp nội dung chỉ khác phương thức cấp phát nội dung động (của Web 1.0) về danh nghĩa, tuy nhiên dịch vụ web yêu cầu tiến trình làm việc và dữ liệu chặt chẽ hơn.

Các giải pháp phát triển theo hướng Web 2.0 hiện nay có thể phân làm 2 loại: hoặc xây dựng hầu hết tính năng trên một nền tảng máy chủ duy nhất; hoặc xây dựng ứng dụng “gắn thêm” cho máy chủ web, có sử dụng giao tiếp API.

Cộng đồng

Công nghệ chỉ là “bề nổi” của Web 2.0, chính cộng đồng người dùng mới là yếu tố nền tảng tạo nên thế hệ web mới. Việc chuyển từ “duyệt và xem” sang “tham gia” là cuộc cách mạng thực sự, dĩ nhiên nhờ có sự phát triển công nghệ giúp hiện thực khả năng này nhưng ở đây muốn nhấn mạnh đến hành vi của người dùng đối với web.

Hiện trạng phổ biến của các website thế hệ 1.0 đó là chứa nhiều thứ phiền toái và làm việc chậm chạp, dường như luôn muốn gửi đến người dùng thông điệp: đây là website của chúng tôi chứ không phải của bạn. Căn nguyên của vấn đề có thể là do chủ sở hữu các website cảm thấy họ “cho không” cái gì đó. Đôi khi chủ sở hữu website cho rằng càng làm khó người dùng thì họ càng được lợi! Điển hình như một số site cho bạn đọc đoạn đầu của bài viết rồi yêu cầu bạn phải đăng ký (có phí hay không) để đọc nốt phần còn lại.

NHỮNG VẤN ĐỀ CỦA WEB 2.0 • Quá kỳ vọng: Nhiều người cho rằng Web 2.0 sẽ đặt dấu chấm hết cho ứng dụng cài đặt trên máy tính (ứng dụng desktop) và là giải pháp cho mọi vấn đề trong lĩnh vực phần mềm. Các ứng dụng Web 2.0 yêu cầu kết nối Internet ổn định và nhanh để làm việc. Trừ khi kết nối băng rộng được phủ khắp, còn không thì Web 2.0 chỉ là một bổ sung cho cách thức chúng ta làm việc (bên cạnh ứng dụng desktop). • Quá đơn giản: Web 2.0=Ajax! Cũng như Web 2.0, Ajax được kỳ vọng quá nhiều, thậm chí nhiều người còn đánh đồng Ajax với Web 2.0. Thực chất, Ajax chỉ là một trong số nhiều công nghệ nền tảng của Web 2.0 và Ajax còn có những hạn chế. • Quá chú trọng công nghệ: RSS, SOA, Ajax… hàng loạt công nghệ nổi đình nổi đám gần đây được gắn liền với Web 2.0. Người ta hăm hở áp dụng các công nghệ mới mà không quan tâm đến các tính chất quan trọng hơn: truyền thông, cộng tác, trí tuệ cộng đồng.

Dĩ nhiên, với sự phổ biến của các phần mềm máy chủ, trong đó có cả phần mềm miễn phí như Apache thì người dùng có thể đưa lên web bất kỳ thông tin gì. Tuy nhiên có nhiều yếu tố cản trở: kỹ năng tạo website, hạn chế của nhà cung cấp dịch vụ Internet, việc bảo mật và kiểm duyệt…

Về cơ bản, Web 2.0 trao quyền nhiều hơn cho người dùng và tạo nên môi trường liên kết chặt chẽ các cá nhân với nhau. Giờ đây có nhiều ví dụ cho thấy cộng đồng người dùng có thể đóng góp thông tin giá trị khi họ có phương tiện thích hợp. Wikipedia có lẽ là ví dụ nổi tiếng nhất. Tuy có nhiều học giả không đánh giá cao Wikipedia, nhưng họ quên một điều quan trọng: nó đủ tốt, miễn phí và nhiều người có thể đọc. Ngoài ra còn có những ví dụ khác như các site Reddit và Digg để cho người dùng quyết định thông tin gì là quan trọng, hay del.icio.us cho phép mọi người chia sẻ những địa chỉ web hay.

Web 2.0 cho phép mọi người có thể đưa lên mạng bất cứ thông tin gì. Với số lượng người tham gia rất lớn, đến mức độ nào đó, qua quá trình sàng lọc, thông tin sẽ trở nên vô cùng giá trị. Ở đây có sự tương đồng với thuyết chọn lọc tự nhiên.

Kết luận

Thật sự, Web 2.0 không phải là cái gì đó hoàn toàn mới mà là sự phát triển từ web hiện tại. Nó vẫn là web như chúng ta dùng lâu nay, chỉ có điều giờ đây chúng ta làm việc với web theo cách khác. Các website không còn là những “ốc đảo” mà trở thành những nguồn thông tin và chức năng, hình thành nên môi trường điện toán phục vụ các ứng dụng web và người dùng.

Không phải là viễn cảnh, Web 2.0 đã hiện hữu quanh chúng ta với hàng loạt website thế hệ mới. Xu hướng chuyển đổi sang Web 2.0 đang diễn ra mạnh mẽ và là xu thế tất yếu.

(Theo PCWORLDVN)

Sự kiện emotino trong cộng đồng doanh nghiệp …

Emotino có gốc từ chữ “emotion”, nghĩa là Cảm Xúc. Khi nghĩ đến giới kinh doanh, mọi người vẫn thường liên tưởng đến hình ảnh những con người luôn bận rộn với những chiến lược, sản phẩm mới, họp hành, công tác. Tuy nhiên bên trong những con người ấy vẫn luôn tồn tại nhiều cảm xúc khác nữa, về cuộc sống, con người, về những thú vui trong công việc, những niềm vui nỗi buồn đằng sau một chiến lược thành công… Tất cả hình thành nên một thế giới đầy những xúc cảm trong kinh doanh. Chúng tôi chọn tên gọi EMOTINO vì muốn đó còn là một cái tên thật riêng biệt, mang những phẩm chất, tính cách riêng cho cộng đồng này: sự sáng tạo, tinh thần học hỏi, chia sẻ và niềm tự hào rất riêng của mỗi thương hiệu, nhân hiệu. Cùng với sự phát triển của các hình thức truyền thông cá nhân, blog, podcast, vblog,… Emotino là cộng đồng đầu tiên tại Việt Nam hướng đến việc tạo ra một kênh giao lưu, đối thoại trực tiếp giữa các doanh nhân và doanh nghiệp với mọi người, là một kênh xây dựng thương hiệu và thông tin đến khách hàng vô cùng hiệu quả mà không bị hạn chế về không gian và thời gian. Trong sự bùng nổ công nghệ thông tin, một thế giới phẳng đã và đang hiện ra ngày một rõ nét hơn bao giờ hết. Lượng người truy cập vào internet ngày một gia tăng với tốc độ chóng mặt tại Việt Nam, chiếm đại đa số là giới trẻ và nhân viên công sở, văn phòng, các doanh nghiệp, người tiêu dùng hiện đại. Chúng tôi – đội ngũ quản trị – mong muốn Emotino thực sự là một kênh đối thoại trực tiếp đầy thú vị giữa các doanh nhân, doanh nghiệp và mọi người! (được trích từ Mr.Hùng)