Thiết kế Giao diện dành cho Người sử dụng là một công việc trong quy trình phát triển một Website. Tại Việt Nam, nhiều doanh nghiệp vừa và nhỏ không quan tâm chất lượng phần mềm, dịch vụ sau bán hàng mà thường quan tâm đến giao diện Web có đẹp hay không. Tuy nhiên đây lại là hạn chế của hầu hết các doanh nghiệp thiết kế Web. Trong phạm vi cho phép,chúng tôi xin trình bày các bước xây dựng Giao diện Web cho người sửdụng, nhằm giúp các bạn đạt hiệu quả thiết kế giao diện cao hơn...
Quy trình phát triển GUI cho Web site. Thiết kế Giao diện dành cho Người sử dụng là một công việc trong quy trình phát triển một Website. Tại Việt Nam, nhiều doanh nghiệp vừavànhỏ không quan tâm chất lượng phần mềm, dịch vụ sau bán hàng mà thườngquan tâm đến giao diện Web có đẹp hay không. Tuy nhiên đây lại là hạnchế của hầu hết các doanh nghiệp thiết kế Web. Trong phạm vi cho phép,chúng tôi xin trình bày các bước xây dựng Giao diện Web cho người sửdụng, nhằm giúp các bạn đạt hiệu quả thiết kế giao diện cao hơn. Bài viết này không có tham vọng chỉ ra Marketing với Web như thế nào,nhưng việc hiểu về quy trình làm Web giúp các Marketer có phương phápphối hợp tốt hơn qua đó phối hợp với nhà cung cấp dịch vụ Web của côngty, sản phẩm, dịch vụ đạt hiệu quả cao hơn. 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 02 giao diện của Website bán hàng trực tuyến, Web site tin tức do iGURU thiết kế 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. Mục tiêu của giai đoạn này là xác định chính xác yêu cầu hoặc tư vấncho 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ảituâ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êucầ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ủakhách hàng. Yêu cầu phải đạt những tiêu chí sau:
Mẹo: để có thể hoàn thành Web nhanh chóng và chính xác nên đặt những câu hỏi:
Bước 2: Phác thảo ý tưởng trên giấy Mục tiêu của bước này là định hình bố cục của trang Web. Nào giờ là lúc bạn thể hiện hoa tay của mình, để linh hoạt trong việcphác ý tưởng, bạn nên sử dụng bảng vẽ, bút chì, thước kẻ và tẩy. Dựavà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êncó, ví dụ các tiêu chuẩn sau của IWP 1.0:
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ậphợp các nội dung có mối liên quan hoặc không giữa các trang Web. Dựavào nội dung, bạn chia trang Web làm 02 vùng:
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ùnghiệu chỉnh, vì việc này sẽ ảnh hưởng đến xây dựng mã CSS, HTML chungcủ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ảnlý, theo dõi. Ví dụ: Ảnh là hình chữ nhật có đánh dấu x; chữ là đườngkẻ,... 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ếthợ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 Mục đích của bước này là đánh giá mẫu phác nào phù hợp với yêu cầu, mong muốn của khách hàng. Để tìm hiểu sâu hơn về thiết kế Web và Thương hiệu bạn xem các bài viết khác tại iGURU Blog. 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ườngvà mời những người khác cùng xem và đánh giá. Mẫu phác thảo đạt nhữngyêu cầu phải trả lời được những câu hỏi như sau:
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 Mục tiêu của bước này là đánh giá bản phác trên giấy khi chuyển sangĐồ hoạ vi tính bố cục có phù hợp với yêu cầu và mong muốn của kháchhàng hay không. 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ướctiếp theo phối màu dễ dàng hơn. Nếu bạn phối màu trong giai đoạn nàybạn sẽ phải đối mặt với hai rủi ro: Sai bố cục và sai phối màu. 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ầutrê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ắpxếp folder, phân cấp folder, áp màu cho layer,... Với iGURU, một số chuẩn dùng trong thiết kế đồ hoạ vi tính được định nghĩa như sau:
Ví dụ:  Khi bản đơn sắc đạt yêu cầu, bạn chuyển sang phối màu cho giao diệnWeb. Khi phối màu cho giao diện bạn nên tuân thủ các phương pháp chẳnghạn như sau:
Mẹo: Giai đoạn phối màu rất dễ bị ảnh hưởng bởi màu sắc của ảnh ( ví dụ banner). Đây là điểm có lợi nhưng cũng là điểm có hại cho thiết kế giao diện Website. Nhiều người ban đầu chọn ảnh cuốn hút và truyền đạt chính xácthông điệp của Web site và giờ họ chèn vào để lấy cảm hứng thiết kế từảnh. Một số người không có kiến thức về media hoặc không có đánh giáđúng mức hiệu quả của ảnh đem lại cho Web site, họ chọn những tấm ảnhkhông đúng thông điệp, từ đó họ thiết kế nhầm mầu sắc do ảnh hưởng từảnh. Ví dụ:   Bước 6: Xây dựng chuẩn CSS, clientsite script, ảnh, folder cho trang Web Mục đích của giai đoạn này giúp Web site dễ bảo trì, giảm mã, nộidung hiển thị tốt hơn với tỉ lệ mã thấp, linh động trong định nghĩakiểu. Và quan trọng hơn, nó giúp cả quy trình sản xuất, triển khai, bảotrì ít rủi ro hơn. Các chuẩn bao gồm:
Ví dụ trong một thẻ DIV chúng ta định nghĩa như sau:
Bước 7: Sử dụng các ngôn ngữ đánh dấu, lập trình để thiết kế giao diện Mục đích của giai đoạn này là thiết kế Web bằng HTML, CSS ( Flash, JS, AJAX, … nếu có) Chúng ta chuyển tải giao diện đồ hoạ sang trang Web.
Công việc của một người thiết kế Web lúc này giống như một người lậptrình nhiều hơn là một nhân viên thiết kế. Anh ta chỉ cần hiểu rõ cáchbiểu diễn phông chữ, màu sắc, canh lề, các loại đường, nét, chiều cao,độ rộng, ảnh nền các loại, ảnh, xác định vị trí cho các khối… sao chogiống các bản thiết kế đồ hoạ nhất. Mẹo: người thực hiện thực hiện bước này phải hiểu thấu đáo vềHTML, CSS, JS nếu không giao diện sẽ hiển thị không như bản vẽ đồ hoạvi tính trên nhiều trình duyệt khác nhau. Bước 8: Kiểm thử giao diện trên các trình duyệt Mục tiêu của giai đoạn này là kiểm soát việc hiển thị chính xáctrang Web như giao diện đồ hoạ của bước 5 trên các trình duyệt Web khácnhau. Tối thiểu chúng ta phải kiểm soát việc hiển thị đúng như giao diện thiết kế trên các trình duyệt:
Mỗi Web site đều nhắm đến một số phân khúc khách hàng, có một định vịvà thị trường mục tiêu. Rất ít Web site có thể phục vụ tốt toàn bộ cáctrình duyệt Web, nên bạn cần nghiên cứu người dùng cuối mục tiêu củamình dùng trình duyệt Web nào và thiết kế sao cho hiển thị tốt trên cáctrình duyệt đó. Nghe đến đây chắc hẳn bạn sẽ vò đầu bứt tai sao mà phức tạp thế! Bạnyên tâm, với kinh nghiệm của iGURU Việt Nam, một người chưa biết về CSSchỉ cần học với chuyên gia 4 giờ/ ngày trong vòng 1 tuần là có thể sửdụng thành thạo CSS. Mẹo: người thực hiện bước này nên tìm các đoạn mã hack CSS đểứng dụng vào việc thiết kế trang Web cho nhiều trình duyệt. Tải sáchtại: http://iguru.vn/forum/forumdisplay.php?f=33 Người thực hiện việc thiết kế CSS cũng nên theo dõi người truy nhập vàoWeb ( ví dụ từ Google Analytics), từ đó tổng hợp số liệu sử dụng trìnhduyệt Web của họ để có thể liên tục cập nhật mã CSS cho trang Web, giúptrang Web hiển thị tốt theo xu hướng sử dụng trình duyệt của người dùngcuối. Bước 9: Chuyển mã tới bộ phận lập trình Mục tiêu của giai đoạn này là chuyển các trang Web hiển thị tốt trêncác trình duyệt chính cùng với các thành tố của trang Web tới bộ phậnlập trình. Phải chắc chắn bộ phận lập trình cũng hiểu được yêu cầu bắt buộc củagiao diện và chuẩn thiết kế của bước 6. Thông thường các yêu cầu vàchuẩn này được quản lý dự án hoặc trưởng nhóm thông báo trước để các bộphận không hiểu nhầm nhau. Các yêu cầu bắt buộc và chuẩn thiết kế không chỉ được chuyển tới bộphận lập trình mà còn chuyển tới bộ phận kiểm thử ( test) để họ có thểxây dựng các kịch bản kiểm thử, thông qua đó họ kiểm tra được chấtlượng của dự án. Nếu có phát sinh lỗi, họ sẽ thông báo lại bộ phận thiết kế và lập trình để sửa lỗi.
Nếu bạn cũng đang có ý định muốn trở thành một người thiết kế web một cách chuyên nghiệp, bạn có thể tham khảo một trong các khóa học tại Việt Tâm Đức một công ty chuyên hoạt động trong lĩnh vực thiết kế web, đào tạo lập trình web.
|
Chủ Nhật, 26 tháng 10, 2014
Quy trình thiết kế giao diện website dành cho người sử dụng
Thứ Tư, 10 tháng 9, 2014
ĐỒ HỌA VÀ THIẾT KẾ WEB MỐI QUAN HỆ
ĐỒ HỌA VÀ THIẾT KẾ WEB MỐI QUAN HỆ
Học thiết kế web như thế nào, muốn thiết kế web phải học cái gì, nên bắt đầu từ đâu và cần những gì? Đó là những câu hỏi thường xuất hiện đầu tiên trong đầu của những ai chưa biết gì về web và đang muốn bắt đầu tìm hiểu hay đang có ý trở thanh nhà Thiết kế web chuyên nghiệp.
Đối với một người mới bắt đầu thì hướng tiếp cận đúng đắn sẽ mang lại hiệu quả rất cao đồng thời rút ngắn được rất nhiều thời gian cho quá trình học tập và nghiên cứu của mình..
Đầu tiên thì bạn cần biết Thiết kế web là gì? Và học thiết kế web như thế nào?
- Thiết kế web là công việc của một Web Designer (Chuyên viên Thiết kế web) có nhiệm vụ tạo ra bộ mặt hay còn gọi là Giao diện (Template) website một cách hoàn chỉnh. Giao diện này có thể ở dạng Ảnh hoặc dạng Web Tĩnh HTML.
- Công việc của một Web Designer đó là sử dụng các công cụ Đồ họa và Thiết kế như: Photoshop, AI, Flash, Dreamweaver,… để biến ý tưởng của khách hàng thành phác thảo trên giấy và chuyển phác thảo đó thành giao diện web dạng Ảnh hoặc File .HTML
Chúng ta học cái gì?
Bạn phải xác định khi tự học thiết kế web để có thể trở thành nhà thiết kế web thì con đường đi khá chông gai, chúng ta phải cố gắng hết mình thì sẽ đạt được thành công. Do ngày nay, các công ty hầu như họ đều muốn mang một phong cách riêng để định vị thương hiệu của mình. Và ngay cả website của họ thì họ cũng mong muốn có điều đó, phải thật đặc biệt, không giống bất kì website nào khác, phải có phong cách riêng. Và bản thân là một nhà thiết kế web thì bạn phải làm được điều đó.
Vậy mình làm việc đó như thế nào nhỉ? Điều đâu tiên đó là phải có ý tưởng đã, sau đó chúng ta phải biết dùng các công cụ đồ họa như Photoshop, illustrator, corel, ….. Không chỉ dừng lại ở biết không đâu, mà bạn phải hiểu thật chuyên sâu và tường tận nó, chỉ có như thế thì bạn mới họa được cái ý tưởng “lạ” ở trong đầu của mình ra. Không chỉ vậy, bạn cũng phải biết lập trình vì đôi khi chính bạn sẽ người phải thực hiện chuyển từ PDS ->HTML,CSS đấy. Là một nhà thiết kế web thì bạn sẽ phải luôn nghĩ ra những hiệu ứng độc đáo cho website, những thiết kế mới lạ. Để làm được điều đó thì bạn cần phải biết Jquery, Javascript…
Học thiết kế web nên bắt đầu từ đâu?
Điều bắt buộc là bạn phải học từ căn bản đi lên rồi mới học đến những cái nâng cao và chuyên sâu. Vì cần phải có gốc vững chắc thì mới đứng vững được, nếu bạn cứ đâm đầu vào học ngay cái nâng cao thì bạn sẽ thấy chán nản và không kiên trì theo được. Nguy hiểm nhất chính là lỗ hổng kiến thức, nó sẽ làm cho bạn khó khăn trong việc tự phát triển cái mới.
Vậy thì học ở đâu nhỉ? Câu hỏi này cũng dễ trả lời. Nếu bạn quyết tâm + có lực thì hãy đến các trung tâm đào tạo về lập trình và thiết kế web. Tại đây thì bạn sẽ được học theo một trình tự hợp lý. Còn nếu bạn muốn tự tìm tòi học hỏi thì càng đơn giản, chỉ cần có một cái máy tính nối mạng là ổn. Nhưng tối muốn nhấn mạnh là các bạn phải có quyết tâm.
Quá trình tự học cụ thể sẽ như sau: HTML+ CSS +Photoshop -> Jquery -> PHP -> WordPress(có nhiều mã nguồn khác nhau). Đây là đối với các bạn tự học thiết kế web, tự tìm tòi học hỏi tại nhà. Còn với các bạn đi trung tâm thì sẽ có giáo trình và bài giảng bài bản.
Công cụ nào tốt nhất
Đối với người học thiết kế web thì photoshop, illustrator hoặc corel là những phần mềm mà nhà tuyển dụng yêu cầu là bắt buộc phải có. Hiện nay, trên thị trường có rất nhiều phần mềm hỗ trợ ta trong việc thiết kế web và lập trình web. Tuy nhiên thì mỗi người sẽ thích dùng một editor khác nhau đơn giản vì nó phù hợp họ. Và tất nhiên, với bạn cũng vậy, nếu bạn là người mới hãy trải nghiệm đi và bạn sẽ tìm ra phần mềm thích hợp nhất với mình.
Để làm được một website thì bạn cũng biết là phải trải qua nhiều giai đoạn “Ý tưởng -> phát thảo ý tưởng -> thiết kế ý tưởng bằng PTS -> chuyển từ PTS sang web tĩnh -> Chuyển từ web tĩnh sang web động”. Mỗi giai đoạn nó điều đòi hỏi chúng ta phải có kiến thức nhất định về nó thì mới có thể làm tốt được. Do đó, nghề làm web không đơn giản như chúng ta tưởng, đây có thể coi là một môn nghệ thuật rèn luyện tính kiên nhẫn.
TÌM HIỂU MỘT CHÚT VỀ DRUPAL NÀO
Drupal đã phát triển thành một nền tảng được coi là mạnh mẽ nhất để xây dựng các trang web xã hội và ngữ nghĩa, đồng thời trở nên dễ sử dụng hơn bao giờ hết.
KORTRIJK, BELGIUM & CHICAGO, IL — Ngày 5 tháng 1 năm 2011 - Cộng đồng Drupal trên toàn thế giới cùng với Hiệp hội Drupal đón chào việc công bố chính thức ra mắt Drupal 7, nền tảng web được đánh giá là mạnh nhất hiện nay. Drupal là một nền tảng mã nguồn mở để quản lý nội dung website, hiện đang được ứng dụng trên hàng triệu website và các ứng dụng web. Những ứng dụng tiêu biểu là trang web của Nhà Trắng của tổng thống Mỹ WhiteHouse.gov và nhiều trang web của các nghệ sĩ âm nhạc của hãng Warner Media Group. Drupal phiên bản 7 [D7] mang đến công nghệ web mới nhất và các cải tiến đáng kể đối với người sử dụng. Drupal 7 cũng đang được chính thức trong các site có khả năng chịu tải rất cao, như trang Examiner.com, đứng trong top 100 website của Mỹ và tăng lưu lượng 19% từ tháng 10 tới tháng 11, với hơn 22.4 triệu lượt người sử dụng hàng tháng.
KORTRIJK, BELGIUM & CHICAGO, IL — Ngày 5 tháng 1 năm 2011 - Cộng đồng Drupal trên toàn thế giới cùng với Hiệp hội Drupal đón chào việc công bố chính thức ra mắt Drupal 7, nền tảng web được đánh giá là mạnh nhất hiện nay. Drupal là một nền tảng mã nguồn mở để quản lý nội dung website, hiện đang được ứng dụng trên hàng triệu website và các ứng dụng web. Những ứng dụng tiêu biểu là trang web của Nhà Trắng của tổng thống Mỹ WhiteHouse.gov và nhiều trang web của các nghệ sĩ âm nhạc của hãng Warner Media Group. Drupal phiên bản 7 [D7] mang đến công nghệ web mới nhất và các cải tiến đáng kể đối với người sử dụng. Drupal 7 cũng đang được chính thức trong các site có khả năng chịu tải rất cao, như trang Examiner.com, đứng trong top 100 website của Mỹ và tăng lưu lượng 19% từ tháng 10 tới tháng 11, với hơn 22.4 triệu lượt người sử dụng hàng tháng.
"Nền tảng Drupal 7 mới này cung cấp các trường API, lưu trữ và cache thay đổi, cho phép sử dụng Mongo như là giải pháp 'Không SQL' cho các ứng dụng chịu tải cao và có khả năng mở rộng. Bộ khung kiểm thử đơn vị mới đảm bảo phần lõi ổn định, đã được chứng minh qua những lần hợp nhất lõi hệ thống khi phát triển dự án của chúng tôi. Trang Examiner.com, với lưu lượng sử dụng cực lớn và khả năng xuất bản tức thì, sẽ rất khó khăn thậm chí không thể phát triển được trên các phiên bản trước đây của Drupal" ông Jim Davidson, chủ tịch của Examiner.com nói.
Dự án phát triển Drupal 7 kết hợp giữa các chỉ dẫn của các chuyên gia công nghệ, cùng với phản hồi của cộng đồng, để làm cho việc sử dụng được dễ dàng hơn. Việc cải tiến cách thức sử dụng bao gồm quản lý dễ dàng hơn, quản lý các cập nhật, truy xuất và tạo nội dung.
Angie Byron (hay Webchick), người bảo trì phát triển lõi của Drupal 7 khẳng định "Drupal 7 cải tiến giao diện người dùng, nâng cao truy xuất, quản lý hình ảnh tốt hơn, hỗ trợ các dữ liệu meta đa nội dung, an toàn bảo mật, khả năng mở rộng và nâng cao trao đổi cơ sở dữ liệu. Drupal 7 vượt qua 30 nghìn lượt kiểm tra để đảm bảo tính ổn đinh. Tóm lại, đây là một bước tiến to lớn cho Drupal và cho tất cả các nhà phát triển website, và chúng tôi rất hạnh phúc vì có thể chính thức giới thiệu Drupal 7 cho thế giới."
Drupal là phần mềm mã nguồn mở được sử dụng bởi hơn nửa tỉ người trên 200 quốc gia và 189 ngôn ngữ. Gần 1000 thành viên của cộng đồng Drupal đã và đang đóng góp trực tiếp phát triển lõi Drupal 7 và các module kèm theo.
"Drupal đã tăng trưởng như một hiện tượng từ phiên bản 6. Phiên bản 7 này tạo ra bước cải tiến lớn cho việc sử dụng, tốc độ và chức năng”, Dries Buytaert, nhà sáng lập và trưởng nhóm phát triển Drupal cho biết. “Chúng tôi mở ra một chương mới trong việc phát triển web, và cùng với mọi người trên thế giới đóng chào sự kiện ra mắt Drupal 7 vào ngày 7 tháng 1 năm 2011"
Những chức năng quan trọng mới của Drupal 7
Cải tiến giao diện sử dụng đáp ứng nhu cầu của đa số 80% người sử dụng, cho phépthực hiện các công việc thường gặp dễ dáng hơn, các thiết lập mặc định thông minh, phân quyền cho người tạo nội dung và đơn giản hóa việc quản lý chung.
Hỗ trợ trong lõi các chức năng hình ảnh như thay đổi kích cỡ, cắt ảnh.
Chức năng kiểm thử được xây dựng sẵn và tự động hóa cho mỗi bản vá giúp cho hệ thống ổn định lâu dài.
Quản lý nâng cấp các phiên bản và chuyển đổi từ Drupal 6 sang Drupal 7.
Tốc độ và khả năng mở rộng tốt hơn bằng công nghệ cache tiên tiến, mạng truyền dữ liệu (CDN) và sao chép dữ liệu master-slave.
Các trường tùy chỉnh trong lõi, các trường dữ liệu cho mọi loại nội dung và cho cả người dùng, phân loại cùng với hỗ trợ và đa ngôn ngữ.
Lớp cơ sở dữ liệu tóm tắt cho phép sử dụng nhiều loại CSDL như Maria, DB, Microsoft SQL, MongoDB, Oracle, MySQL, PostgresSQL hoặc SQLite.
"Tại SubHub, chúng tôi giúp mọi người đạt lợi nhuận từ nội dung trực tuyến của họ. Một năm trước, chúng tôi quyết định bắt đầu với Drupal 7 để phát triển nền tảng quản lý nội dung thế hệ mới của chúng tôi", Jamie Wiseman, trưởng nhóm phát triển của SubHubLite tại Cardiff, Wales, Vương quốc Anh nói. "Khả năng linh hoạt của Drupal giúp chúng tôi xây dựng được hệ thống chúng tôi hằng mơ ước".
Drupal nổi tiếng trên thế giới vì mở rộng hỗ trợ đa ngôn ngữ và hỗ trợ người tàn tật, như đã được chứng nhận tại Hà Lan là thích ứng 100% với Yêu cầu tiếp cận nội dung web (WCAG 2.0) của tổ chức World Wide Consortium (W3C)
Hỗ trợ công nghệ web ngữ nghĩa đa nội dung (RDFa) trong lõi của Drupal 7
Drupal 7 đang tiên phong trong việc đẩy mạnh chấp nhận RDFa (chuẩn về Khung miêu tả đa nội dung trong thuộc tính của W3C). Như chúng ta đã biết, Google và Bing phụ thuộc vào các dữ liệu tự động lấy từ các trang web khác.Thiết kế của Drupal 7 nhúng dữ liệu meta ngữ nghĩa vào lõi, giúp cho nội dung của các trang web ứng dụng Drupal 7 dễ dàng được các công cụ tìm kiếm lọc và phân tích. RDFa cung cấp thêm thông tin cho các công cụ tìm kiếm, những thông tin không hiển thị cho người dùng như là kinh độ và vĩ độ của một điểm trên bản đồ, hay cung cấp chuẩn thời gian chuẩn ISO cho từng địa phương và hiển thị kết quả tìm kiếm cho từng quốc gia.
Theo Dries, nhà sáng lập Drupal, "giới thiệu công nghệ ngữ nghĩa vào lõi của Drupal sẽ là đóng góp lớn cho tương lai của web."
Về Hiệp hội Drupal
Hiệp hội Drupal là tổ chức phi lợi nhuận hỗ trợ cộng đồng Drupal bằng tài trợ, hạ tầng, tổ chức sự kiện, quảng cáo và phân phối. Được hỗ trợ bởi các thành viên cá nhân và tổ chức, Hiệp hội sử dụng các nguồn lực để giúp đẩy mạnh phát triển Drupal.
Dự án phát triển Drupal 7 kết hợp giữa các chỉ dẫn của các chuyên gia công nghệ, cùng với phản hồi của cộng đồng, để làm cho việc sử dụng được dễ dàng hơn. Việc cải tiến cách thức sử dụng bao gồm quản lý dễ dàng hơn, quản lý các cập nhật, truy xuất và tạo nội dung.
Angie Byron (hay Webchick), người bảo trì phát triển lõi của Drupal 7 khẳng định "Drupal 7 cải tiến giao diện người dùng, nâng cao truy xuất, quản lý hình ảnh tốt hơn, hỗ trợ các dữ liệu meta đa nội dung, an toàn bảo mật, khả năng mở rộng và nâng cao trao đổi cơ sở dữ liệu. Drupal 7 vượt qua 30 nghìn lượt kiểm tra để đảm bảo tính ổn đinh. Tóm lại, đây là một bước tiến to lớn cho Drupal và cho tất cả các nhà phát triển website, và chúng tôi rất hạnh phúc vì có thể chính thức giới thiệu Drupal 7 cho thế giới."
Drupal là phần mềm mã nguồn mở được sử dụng bởi hơn nửa tỉ người trên 200 quốc gia và 189 ngôn ngữ. Gần 1000 thành viên của cộng đồng Drupal đã và đang đóng góp trực tiếp phát triển lõi Drupal 7 và các module kèm theo.
"Drupal đã tăng trưởng như một hiện tượng từ phiên bản 6. Phiên bản 7 này tạo ra bước cải tiến lớn cho việc sử dụng, tốc độ và chức năng”, Dries Buytaert, nhà sáng lập và trưởng nhóm phát triển Drupal cho biết. “Chúng tôi mở ra một chương mới trong việc phát triển web, và cùng với mọi người trên thế giới đóng chào sự kiện ra mắt Drupal 7 vào ngày 7 tháng 1 năm 2011"
Những chức năng quan trọng mới của Drupal 7
Cải tiến giao diện sử dụng đáp ứng nhu cầu của đa số 80% người sử dụng, cho phépthực hiện các công việc thường gặp dễ dáng hơn, các thiết lập mặc định thông minh, phân quyền cho người tạo nội dung và đơn giản hóa việc quản lý chung.
Hỗ trợ trong lõi các chức năng hình ảnh như thay đổi kích cỡ, cắt ảnh.
Chức năng kiểm thử được xây dựng sẵn và tự động hóa cho mỗi bản vá giúp cho hệ thống ổn định lâu dài.
Quản lý nâng cấp các phiên bản và chuyển đổi từ Drupal 6 sang Drupal 7.
Tốc độ và khả năng mở rộng tốt hơn bằng công nghệ cache tiên tiến, mạng truyền dữ liệu (CDN) và sao chép dữ liệu master-slave.
Các trường tùy chỉnh trong lõi, các trường dữ liệu cho mọi loại nội dung và cho cả người dùng, phân loại cùng với hỗ trợ và đa ngôn ngữ.
Lớp cơ sở dữ liệu tóm tắt cho phép sử dụng nhiều loại CSDL như Maria, DB, Microsoft SQL, MongoDB, Oracle, MySQL, PostgresSQL hoặc SQLite.
"Tại SubHub, chúng tôi giúp mọi người đạt lợi nhuận từ nội dung trực tuyến của họ. Một năm trước, chúng tôi quyết định bắt đầu với Drupal 7 để phát triển nền tảng quản lý nội dung thế hệ mới của chúng tôi", Jamie Wiseman, trưởng nhóm phát triển của SubHubLite tại Cardiff, Wales, Vương quốc Anh nói. "Khả năng linh hoạt của Drupal giúp chúng tôi xây dựng được hệ thống chúng tôi hằng mơ ước".
Drupal nổi tiếng trên thế giới vì mở rộng hỗ trợ đa ngôn ngữ và hỗ trợ người tàn tật, như đã được chứng nhận tại Hà Lan là thích ứng 100% với Yêu cầu tiếp cận nội dung web (WCAG 2.0) của tổ chức World Wide Consortium (W3C)
Hỗ trợ công nghệ web ngữ nghĩa đa nội dung (RDFa) trong lõi của Drupal 7
Drupal 7 đang tiên phong trong việc đẩy mạnh chấp nhận RDFa (chuẩn về Khung miêu tả đa nội dung trong thuộc tính của W3C). Như chúng ta đã biết, Google và Bing phụ thuộc vào các dữ liệu tự động lấy từ các trang web khác.Thiết kế của Drupal 7 nhúng dữ liệu meta ngữ nghĩa vào lõi, giúp cho nội dung của các trang web ứng dụng Drupal 7 dễ dàng được các công cụ tìm kiếm lọc và phân tích. RDFa cung cấp thêm thông tin cho các công cụ tìm kiếm, những thông tin không hiển thị cho người dùng như là kinh độ và vĩ độ của một điểm trên bản đồ, hay cung cấp chuẩn thời gian chuẩn ISO cho từng địa phương và hiển thị kết quả tìm kiếm cho từng quốc gia.
Theo Dries, nhà sáng lập Drupal, "giới thiệu công nghệ ngữ nghĩa vào lõi của Drupal sẽ là đóng góp lớn cho tương lai của web."
Về Hiệp hội Drupal
Hiệp hội Drupal là tổ chức phi lợi nhuận hỗ trợ cộng đồng Drupal bằng tài trợ, hạ tầng, tổ chức sự kiện, quảng cáo và phân phối. Được hỗ trợ bởi các thành viên cá nhân và tổ chức, Hiệp hội sử dụng các nguồn lực để giúp đẩy mạnh phát triển Drupal.
NÊN CHỌN WORDPRESS HAY BLOGGER
Một câu hỏi cũng đã từng khiến mình phân vân khi chọn Blogger hay WordPress để thành lập cái blog này. Mình đã phải chuyển đi chuyển lại từ Blogger > WordPress > Blogger > WordPress rổi mình quyết định chọn WordPress là nơi gửi gắm kiến thức, tình cảm của mình cũng một phần bởi vì mình giỏi WordPress hơn là Blogger.
Bạn chon WordPress hay Blogger để viết Blog?
So Sánh Blogger Vs WordPress
Khi bạn bắt đầu tạo và viết blog, sẽ có rất nhiều loại blog platform cho bạn lựa chọn. Bạn có thể chọn một loại blog platform thương mại (phải trả tiền), hoặc một blog platform miễn phí, và việc đầu tiên trước khi nghĩ đến Blog là bạn phải lựa chọn một công cụ phù hợp nhất với nhu cầu của mình.
Tìm Hiểu Về Blogger/ Blogspot
Blogger hay còn gọi là Blogspot. Đây là blog platform đầu tiên trong lịch sử và hiện nay vẫn còn tồn tại trong thế giới của blog. Nó miễn phí nhưng mã nguồn không được mở. Nhiều blog phát triển cũng đang sử dụng Blogger để lưu trữ dữ liệu.
Ưu Điểm Của Blogger/ Blogspot
- Không mất thêm một khoản phí nào ngoài tiền mùa Domain (Bạn không cần tốn bất kì chi phí để tạo thành công một Blog bằng BlogSpot. Bạn được cấp một tên miền miễn phí với dạng *.blogspot.com, sử dụng hosting miễn phí không giới hạn từ Google. Nếu muốn chuyên nghiệp hơn thì chỉ cần đầu tư chừng $10 để đăng kí một tên miền quốc tế nữa là ngon!)
- Đảm bảo an toàn bảo mật: Vì đây thuộc sở hữu của Google không ai có thể hack tài khoản blogger của bạn dễ dàng được.
- Có nhiều Template chuẩn SEO, giao diện đẹp mà hoàn toàn miễn phí.
- Được phát triển từ Google nên chắc cũng được ưu tiên hơn một chút
- Không lo về các vấn đề bảo mật như DDos, Botnet, Local Attack.
- Dễ dàng sử dụng cho người mới bắt đầu
- Kiến thức về Code không cần nhiều (những biết thì vẫn tốt hơn)
- Dễ dàng đăng ký Google Adsense
- Tốc độ tải trang nhanh
Nhược Điểm Của Blogger/ Blogspot
- Phụ thuộc vào Google ( Nếu vi phạm chính sách và quy định của Google thì hiển nhiên blog của bạn sẽ bị khai tử một cách không thương tiếc.)
- Một số nhà mạng tại Việt Nam chặn Blogger/ Blogspot
- 1 tên miền chỉ được sử dụng cho 1 blog(WordPress có Multi Domain)
- Khả năng phân loại bài viết chưa thực sự tốt
- Hỗ trợ SEO kém hơn WordPress
Tìm Hiểu Về WordPress
Ở đây chúng ta sẽ đề cập đến WordPress.Org chứ không phân tích WordPress.com
Mình biết đến và sử dụng WordPress từ thời phiên bản khoảng 2.0.x. Lúc đó WordPress không được phổ biến và sử dụng rộng rãi với nhiều mục đích như bây giờ bởi vì các plugin còn hạn chế, lúc đó Joomla & NukeViet đang phát triển tại Việt Nam. Nhưng càng về sau WordPress càng trở nên mạnh mẽ và nó đi từ một Blog Platform lên thành một trong những phần mềm mà nguồn mở CMS đình đám nhất trên thế giới. Với kinh nghiệm cá nhân khi sử dụng WordPress, mình sẽ tổng hợp ra được mấy điểm mạnh của WordPress cho bạn tham khảo và quyết định có nên sử dụng nó thay vì Blogger hay không.
Điểm Mạnh Của WordPress
- Hoàn toàn miễn phí (Ở đây miễn phí là thực sự miễn phí. Có nghĩa là bạn có toàn quyền sử dụng, chia sẻ, chỉnh sửa, chọc ngoáy v.v.. Bạn không phải trả bất cứ một đồng nào dưới bất cứ hình thức nào)
- Độ tùy biến cao (WordPress được biết đến từ một mà nguồn để làm blog, những hiện nay có thể thấy WordPress có thể tùy biến thành một Magazine, 1 Forum, 1 mạng xã hội…
- Dễ sử dụng (Với WordPress thì việc cài đặt theme, plugin hay viết giao diện. Đặc biệt với giao diện WP-Admin cực kỳ chuyên nghiệp và thân thiện.)
- Giao diện chuyên nghiệp (WordPress có hàng trăm ngàn giao diện được xuất bàn trên thế giới cả miễn phí lẫn trả phí. Nếu bạn muốn mua Theme WordPress thì ThemeForest là sự lựa chọn số 1)
- Nhiều Theme và Plugin miễn phí nhưng cực kỳ mạnh mẽ ( Một số plugin cơ bản nên cài đó chính là WordPress SEO by Yoast, WP-Pagenavi…)
- SEO Tốt &Thân Thiện (Nếu so sánh về điểm SEO của WordPress và Blogger thì Blogger nên gọi WordPress bặng cụ)
- Dễ dàng tự thiết kế Theme với phong cách chính mình.
- Làm website vệ tinh cực kỳ đơn giản.
- Tài nguyên dồi dào (Có nhiều thứ khi cho đi miễn phí thì đừng mong được hỗ trợ. Nhưng WordPress có một cộng đồng sử dụng rộng lớn và có thể trả lời hầu hết tất cả những câu hỏi mà bạn có. Hơn nữa bạn có thể tìm thấy rất nhiêu ebook hướng dẫn sử dụng WordPress, nhiều video, nhiều tài liệu liên quan đến WordPress.)
Nhược Điểm Của WordPress
- Chi phí cao, những nếu kiếm ra tiền từ blog thì cũng chả đáng bao nhiêu.
- Cần phải cài đặt, tạo database ban đầu ( cần có kiến thức IT).
- Cần phải có kỹ năng lập trình để có thể chỉnh sửa template.
- Dễ bị tấn công bởi Hacker
THỦ THUẬT HỌC ASP.NET
Trong bài viết này tôi sẽ tìm lại và tổng hợp các thủ thuật khi học lập trình với asp.net. Có thể nó sẽ giảm bớt công sức khi bạn lập trình. Tôi sẽ chia làm nhiều phần, mỗi phần tôi sẽ post 10 thủ thuật hy vong sẽ giúp ích cho các bạn thủ thuật, lập trình, thủ thuật lập trình, asp.net phần 3
21: Hiển thị chính xác nội dung văn bản TextArea
Khi bạn nhập nội dung văn bản trong TextArea thường mất các ký tự khoảng trắng hoặc ký tự xuống dòng. Nếu bạn muốn giữ đúng định dạng đã nhập trong TextArea bạn thực hiện thay thế các ký tự đó như ví dụ
1
| Label1.Text = TextBox1.Text.Replace("\n", "<br />").Replace(" ", " "); |
22. Sử dụng ViewState đúng chỗ
Khi lập trình web với asp.net sử dụng các control, khi bạn view source sẽ thấy như minh họa
1
2
| <input type="hidden" name="__EVENTVALIDATION"id="__EVENTVALIDATION" value="/wEWAgKK7LjKBwKM54rGBgzCWqbCIzq33uVXHF19FzfdGPsJ" /> |
Nếu bạn sử dụng càng nhiều control thì value càng lớn. điều này sẽ làm ảnh hưởng đến tốc độ, băng thông cũng như các cỗ máy tìm kiếm (Các máy tìm kiếm tìm kiếm tốt nhất cho khoảng 20KB source đầu tiên trên trang của bạn, quá số này thường sẽ bị bỏ qua - Tham khảo ASP.NET SEO around VIEWSTATE). Vì vậy nếu là lập trình website bạn nên bỏ ViewState bằng cách
Trong web.config
1
| <pages enableViewStateMac='false'/> |
Hoặc trong từng trang:
1
| <%@ Master Language="C#" EnableViewState ="false" |
Hoặc với từng control bạn cũng có thể bỏ ViewState
1
| <asp:Button ID="BT1" EnableViewState="false" runat="server" /> |
Nhưng bạn chú ý 1 điều là khi bạn bỏ ViewState thì các sự kiện postback sẽ không có đúng hiệu lực của nó, chính vì vậy bạn cân nhắc ở trang nào nên dùng ViewState, trang nào không nên dùng ViewState.
23. Cách dùng khác của mệnh đề if ... else
Thông thường hoặc theo thói quen bạn hay dùng mệnh đề if ... else như sau:
1
2
3
4
5
6
7
8
9
10
11
12
13
| private string abc(int gio){ string str = ""; if (gio < 12) { str = "Chào buổi sáng"; } else { str = "Chào buổi chiều"; } return str;} |
Với dạng if ... else đơn giản bạn có thể dùng theo cấu trúc khác như sau (dễ và gọn hơn nhiều)
1
2
3
4
5
6
| private string abc(int gio){ string str = ""; str = (gio < 12) ? "Chào buổi sáng" : "Chào buổi chiều"; return str;} |
24. Xóa hết các thẻ html của nội dung
Khi trình bày dữ liệu nhất là khi bạn copy dữ liệu từ trang khác, thường là sẽ có các style sheet của trang bạn copy về. Khi trình bày dữ liệu nhất là sử dụng Tooltip bạn sẽ bị lỗi không hiển thị được (Đây cũng là vấn đề nhiều bạn hỏi khi thực hiện theo bài Hướng dần thực hiện tooltip).
Để xóa hết html của một chuỗi bạn dùng hàm sau:
Để xóa hết html của một chuỗi bạn dùng hàm sau:
1
2
3
4
5
6
7
| private string RemoveHTMLTag(string HTML){ // Xóa các thẻ html System.Text.RegularExpressions.Regex objRegEx = new System.Text.RegularExpressions.Regex("<[^>]*>"); return objRegEx.Replace(HTML, "");} |
25. Dùng hàm Split với tham số là một chuỗi:
Bình thường bạn sử dụng hàm Split để chuyển chuỗi thành mảng với 1 ký tự xuất hiện trong chuỗi, với hàm Split tham số truyền vào là char nên bạn chỉ chuyên được 1 lý tự. Nếu bạn dùng hàm Split với tham số là 1 chuỗi bạn dùng như ví dụ sau:
1
2
| string strHTML = "<p>Bài 1</p><p>Bài 2</p><p>Bài 3</p><p>Bài 4</p>";string[] strSplit = Regex.Split(strHTML, "</p>"); |
Ở ví dụ này ta dung Regex.Split của lớp System.Text.RegularExpressions - tôi tạo ra mảng strSplit để lấy các phần tử là các thẻ <p> và nội dung của nó. Điều này khi bạn không sử dụng Regex.Split sẽ không thực hiện được
26. Lấy nội dung của một thẻ html
Giả sử bạn có một chuỗi gồm nhiều đoạn được đặt trong các thẻ html (thẻ <p> chẳng hạn), bạn muốn lấy nội dung của một thẻ <p> trong chuỗi đó. bạn dùng hàm như cí dụ sau:
1
2
3
4
5
6
7
8
9
10
11
12
| static string GetParagraphOfHTMLTag(string strHTML){ Match m = Regex.Match(strHTML, @"<p> \s*(.+?)\s*</p>"); if (m.Success) { return m.Groups[1].Value; } else { return ""; }} |
Trong hàm trên bạn thay chỉ số 1 bằng chỉ số thứ tự thẻ html bạn muốn lấy
1
2
| string strHTML = "<p>Bài 1</p><p>Bài 2</p><p>Bài 3</p><p>Bài 4</p>";string s1 = GetParagraphOfHTMLTag(strHTML); |
Khi đó s1 của bạn sẽ là Bài 1
27. Khắc phụ lỗi font khi viewsource khi dùng FCKEditor
Nếu bạn không để ý config cho FCKEditor thì khi lưu lại dữ liệu trong CSDL sẽ lưu tiếng Việt dưới dạng Encode, trong text sẽ có các ký tự như sau:
< ="Microsoft FrontPage 5.0" name=GENERATOR> < =FrontPage.Editor. name=ProgId> Không cần chạy đôn chạy đáo khắp
các trung tâm để mong tìm được một công
việc làm thêm tăng thu nhập, chẳng cần phải gật
đầu với những công việc nằm ngoài vùng
< ="Microsoft FrontPage 5.0" name=GENERATOR> < =FrontPage.Editor. name=ProgId> Không cần chạy đôn chạy đáo khắp
các trung tâm để mong tìm được một công
việc làm thêm tăng thu nhập, chẳng cần phải gật
đầu với những công việc nằm ngoài vùng
Mặc dù đoạn text này vẫn được trình duyệt hiển thị đúng nhưng trong html code bị như thế, nhìn không thích một chút nào cả hơn nữa có thể gây ra dư thừa dữ liệu hoặc tìm kiếm tiếng Việt không chính xác. Để khắc phục hiện tượng này bạn thêm vào file config dòng sau (vào file fckconfig.js):
FCKConfig.ProcessHTMLEntities = false ;
Xem thêm Cấu hình và sử dụng bộ soạn thảo FCKEditor
FCKConfig.ProcessHTMLEntities = false ;
Xem thêm Cấu hình và sử dụng bộ soạn thảo FCKEditor
28. Sử dụng ImageGallery của FreeTextbox để quản lý và chèn ảnh vào bài viết
Khi sử dụng FreeTextbox . Nếu không config thì bạn không có trình quản lý Image với chức năng upload và chèn ảnh vào nội dung bài viết. Với FreeTextBox cũng đã hỗ trợ bạn đủ công cụ để quản lý và chọn ảnh vào bài viết. Khi download thư viện này về tại http://freetextbox.com/download/ trong thư mục giải nén có file ftb.imagegallery.aspx và thư mục aspnet_client. Bạn hãy copy file và thư mục này vào thư mục web của bạn. Sau đó trong code bạn dùng như sau:
1
2
3
4
| <FTB:FreeTextBox ID="ftbContent" runat="server" Height="120px" ImageGalleryUrl="../ftb.imagegallery.aspx?rif=/imagespath/&cif=~/uploads/image/" Width="100%" ToolbarLayout=" ParagraphMenu,FontFacesMenu,FontSizesMenu,FontForeColorsMenu|Bold,Italic,Underline,Strikethrough;Superscript,Subscript,RemoveFormat|JustifyLeft,JustifyRight,JustifyCenter,JustifyFull;BulletedList,NumberedList,Indent,Outdent;CreateLink,Unlink,InsertImage,InsertRule|Cut,Copy,Paste;Undo,Redo,Print, InsertImageFromGallery,Preview,SelectAll,WordClean,NetSpell"></FTB:FreeTextBox> |
Với code ví dụ trên tất cả ảnh sẽ được quản lý và lưu vào thư mục uploads/image/ trong web của bạn. Khi viết bài bạn có thể tạo các thư mục con và hiển thị các hình ảnh dạng ImageGallery rất dễ quản lý và tiện không kém FCKEditor
Xem thêm Hướng dẫn sử dụng và cấu hình FreeTextbox
29: Viết comment cho các hàm
Khi sử dụng VS để viết code bạn thấy VS hỗ trợ viết code và list ra các hàm, phương thức tương ứng và khi bạn chọn một phương thức nào đó sẽ có comment về các tham số, kiểu dữ liệu, giá trị trả về, ...
Khi bạn viết hàm bạn cũng có thể tạo comment như vậy bằng cách bạn đưa con nháy lên phía trên của hàm đang viết và gõ 3 dấu /// khi đó VS sẽ tự tạo các commnet và bạn ghi các comment của bạn vào và khi dùng nó cũng sẽ hiển thị comment như trên.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| /// <summary>/// Xóa một file được chọn/// </summary>/// <param name="fileName">file cần xóa</param>public void DeleteFile(string fileName){ try { FileInfo fi; if (System.IO.File.Exists(fileName) == true) { fi = new FileInfo(fileName); fi.Delete(); } } catch (Exception ex) { ex.Message.ToString(); }} |
30. Đọc nôi dung của một trang web
Bạn cần đọc nội dung của một trang nào đó để bóc tách dữ liệu bạn dùng hàm sau để đọc nội dung.
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
| /// <summary>/// Đọc nội dung trang bất kỳ/// </summary>/// <param name="Address">Địa chỉ trang</param>/// <returns>string</returns>public string GetWebContent(string Address){ string txOutput = ""; try { if (Address != "") { System.Net.WebClient MyClient = new System.Net.WebClient(); System.IO.Stream MyStream = MyClient.OpenRead(Address); System.IO.StreamReader MyStreamReader = new System.IO.StreamReader(MyStream); string NewLine; while ((NewLine = MyStreamReader.ReadLine()) != null) { txOutput += NewLine + "\r\n"; } } } catch { } return txOutput;} |
Kết quả hàm này trả về là chuỗi html như khi bạn chọn viewsource của trang bạn muốn đọc
Đăng ký:
Nhận xét (Atom)