Wednesday, January 8, 2014

HTML5 - Quy tắc cú pháp

Ngôn ngữ HTML 5 có một "tùy chỉnh" cú pháp HTML tương thích với HTML 4 và các văn bản XHTML1 đã được xuất bản lên web, tuy nhiên nó lại không tương thích với các tính năng SGML chỉ có trên HTML 4.

HTML 5 không có các quy tắc cú pháp tương tự như XHTML như là cần phải có tên thẻ, trích dẫn thuộc tính, một thuộc tính phải có giá trị và luôn cần có thẻ đóng.

HTML5 đang trở lên rất nhiều tính linh hoạt và sẽ hỗ trợ các nội dung sau:

  • Tên thẻ chữ hoa.
  • Dấu ngoặc kép là tùy chọn cho các thuộc tính.
  • Giá trị thuộc tính là không bắt buộc.
  • Thẻ đóng là không bắt buộc.

DOCTYPE:

Doctypes trong phiên bản cũ của HTML là vì ngôn ngữ HTML dựa trên SGML do đó nó cần yêu cầu một tham chiếu đến một DTD. HTML 5 sẽ chỉ cần sử dụng cú pháp đơn giản để xác định DOCTYPE như sau:
<!DOCTYPE html>

Mã hoá Ký tự:

Lập trình viên HTML 5 có thể sử dụng cú pháp đơn giản để xác định mã hoá ký tự như sau:
<meta charset="UTF-8">

Thẻ <script>:

Đây là cách để thêm thuộc tính với giá trị "text/javascript", cú pháp như sau:
<script type="text/javascript" src="scriptfile.js"></script>
HTML5 đã bỏ đi các thông tin rườm rà và bạn chỉ cần viết ngắn gọn như sau:
<script src="scriptfile.js"></script>
================================

Thẻ <link>:

Khai báo thẻ <link> thông thường được viết như sau:
<link rel="stylesheet" type="text/css" href="stylefile.css">
HTML 5 loại bỏ các thông tin bổ sung cần thiết và bạn có thể sử dụng cú pháp đơn giản sau đây:
<link rel="stylesheet" href="stylefile.css">

Phân đoạn:

Phân đoạn trong HTML5 được đánh dấu bằng cách sử dụng các thẻ bắt đầu và thẻ kết thúc. Thẻ được giới hạn sử dụng dấu ngoặc góc với tên thẻ ở giữa. Sự khác biệt giữa các thẻ bắt đầu và thẻ kết thúc là một dấu gạch chéo trước tên thẻ.
<p> ... </ p>

Tên thẻ HTML5 là trường hợp nhạy cảm và có thể được viết trong tất cả các trường hợp chữ hoa hoặc hỗn hợp, mặc dù quy ước phổ biến nhất là gắn bó với chữ thường.

Hầu hết các phân đoạn có chứa một số nội dung như <p> ... </ p> chứa một đoạn văn. Một số phân đoạn không chứa nội dung ví dụ như là br , hr , link và meta ...v.v.

Thuộc tính HTML5:

Các phần tử có thể chứa các thuộc tính được sử dụng để thiết lập các thuộc tính khác nhau.

Một số thuộc tính được định nghĩa toàn cục và có thể được sử dụng trên bất kỳ phần tử nào, trong khi những phần tử khác được quy định chỉ với các thuộc tính cụ thể. Tất cả các thuộc tính có một tên và một giá trị và trông giống như như hình dưới đây trong ví dụ.

Sau đây là ví dụ về một thuộc tính HTML5 minh họa làm thế nào để đánh dấu một phần tử div với một thuộc tính tên là lớp học sử dụng một giá trị của " dụ " :

<div class="example"> ... </ div>
Thuộc tính chỉ có thể được xác định trong thẻ bắt đầu và không bao giờ được sử dụng trong các thẻ kết thúc .

Thuộc tính HTML5 là trường hợp nhạy cảm và có thể được viết trong tất cả các trường hợp chữ hoa hoặc hỗn hợp, mặc dù quy ước phổ biến nhất là gắn bó với chữ thường.

Đây là một danh sách đầy đủ của HTML5 thuộc tính.

HTML 5 - Tổng quan

HTML5 là phiên bản mới nhất và nâng cao nhất của HTML. Về mặt kỹ thuật, HTML không phải là một ngôn ngữ lập trình, mà là một ngôn ngữ đánh dấu. Bài viết trên blog này cung cấp cho các bạn những khái niệm căn bản về HTML5.

HTML5 là phiên bản lớn tiếp theo của HTML tiêu chuẩn thay thế cho HTML 4.01, XHTML 1.0, XHTML và 1.1. HTML5 là một tiêu chuẩn cho cấu trúc và trình bày nội dung trên World Wide Web. HTML5 là một hợp tác giữa World Wide Web Consortium (W3C) và Web Hypertext Application Technology Working Group (WHATWG).

HTML5 có các tiêu chuẩn mới kết hợp các tính năng như xem video và kéo-và-thả mà trước đây còn phải phụ thuộc vào plug-in trên trình duyệt của bên thứ ba  như Adobe Flash, Microsoft Silverlight, và Google Gears.

Phiên bản mới nhất của Apple Safari, Google Chrome, Mozilla Firefox và Opera cũng hỗ trợ nhiều tính năng HTML5 và Internet Explorer 9.0 cũng sẽ có hỗ trợ cho một số chức năng HTML5. Các trình duyệt web di động được cài đặt trên iPhone, iPad và điện thoại Android đều có hỗ trợ tuyệt vời cho HTML5.

HTML5 giới thiệu một số yếu tố mới và các thuộc tính giúp trong việc xây dựng một trang web hiện đại . Sau đây là những tính năng tuyệt vời được giới thiệu trong HTML5:

  • Các thẻ mới: ví dụ như <header>, <footer>, <section>....
  • Forms 2.0: Cải tiến các biểu mẫu web HTML với các thuộc tính mới đã được giới thiệu cho thẻ <input>.
  • Persistent Local Storage: Để đạt được mà không cần đến plugin của bên thứ ba.
  • WebSocket: Một thế hệ tiếp theo công nghệ truyền thông hai chiều cho các ứng dụng web.
  • Server-Sent Events - One Way Messaging: sự kiện server-sent có nghĩa là một trang web sẽ được tự động cập nhật từ máy chủ. Nếu có bản cập nhật mới, dữ liệu sẽ được máy chủ gửi tới trang web.
  • Canvas: Hỗ trợ 2D, bạn có thể vẽ giao diện với JavaScript.
  • Audio & Video: Bạn có thể nhúng âm thanh hoặc video trên các trang web của bạn mà không cần đến plugin của bên thứ ba.
  • Geolocation - Định vị: Bây giờ người dùng có thể chọn chia sẻ vị trí địa lý của họ với các ứng dụng web của bạn.
  • Microdata - Dữ liệu vi mô: Điều này cho phép bạn tạo ra các từ vựng của riêng bạn vượt HTML5 và mở rộng trang web của bạn với ngữ nghĩa tùy chỉnh.
  • Drag and drop - Kéo và thả: kéo và thả các mục từ một vị trí khác vị trí trên cùng một trang web.

HTML5 có khả năng tương thích ngược. HTML5 được thiết kế để có tương thích ngược với các trình duyệt web hiện tại. Tính năng mới này xây dựng trên tính năng hiện có và cho phép bạn cung cấp nội dung dự phòng cho trình duyệt cũ hơn. Đó là đề nghị để phát hiện hỗ trợ cho các tính năng HTML5 cá nhân sử dụng một vài dòng lệnh Javascript.


Sunday, January 5, 2014

Giới thiệu Design Patterns

Khái niệm

Design Patterns được hiểu là dạng mẫu thiết kế được sử dụng trong phát triển các dự án phần mềm. Các mẫu thiết kế này chính là giải pháp cho những vấn đề chung mà các nhà phát triển thường gặp phải trong quá trình phát triển phần mềm. Design Patterns được đúc rút bằng cách thử và sai từ các nhà phát triển trong một thời gian dài.

Các bài viết về Design Patterns trong blog này sẽ hướng dẫn các bạn tiếp cận bằng các ví dụ sử dụng ngôn ngữ Java.

Ai nên đọc?

Nếu bạn là một sinh viên hay là lập trình viên mới vào nghề thì những bài viết này sẽ rất có ích giúp bạn định hướng kỹ thuật viết code. Nếu bạn là một lập trình viên có kinh nghiệm thì tôi cũng hy vọng giúp bạn hệ thống lại kiến thức để phát triển nhiều ứng dụng chất lượng hơn cho cộng đồng.

Bạn cần có?

Để có thể thuận lợi theo dõi các bài viết này, bạn cần nắm cơ bản kiến thức về ngôn ngữ Java. Nếu không chắc chắn lắm, tôi đề nghị bạn tham khảo qua trước loạt bài viết về Java căn bản trước khi tiếp cận hướng dẫn Design Patterns này.

Giới thiệu Android

Android ™ cung cấp một bộ đầy đủ các phần mềm cho các thiết bị di động: Android là một hệ thống điều hành, middleware và các ứng dụng di động chủ chốt. Để phát triển ứng dụng Android bạn cần có Android Software Development Kit (SDK).

Android là hệ điều hành trên điện thoại di động (và hiện nay là cả trên một số đầu phát HD, HD Player, TV) phát triển bởi Google và dựa trên nền tảng Linux. Trước đây, Android được phát triển bởi công ty liên hợp Android ( sau đó được Google mua lại vào năm 2005).

Các nhà phát triển viết ứng dụng cho Android dựa trên ngôn ngữ Java. Sự ra mắt của Android vào ngày 5 tháng 11 năm 2007 gắn với sự thành lập của liên minh thiết bị cầm tay mã nguồn mở, bao gồm 78 công ty phần cứng, phần mềm và viễn thông nhằm mục đính tạo nên một chuẩn mở cho điện thoại di động trong tương lai.

Các phiên bản Android

Một điều hài hước là phiên bản đầu tiên của Android xuất xưởng mà chẳng có một thiết bị thực tế nào trên thị trường. Từ lúc ra mắt phiên bản đầu tiên cho tới nay, Android đã có rất nhiều bản nâng cấp. Đa số đều tập trung vào việc vá lỗi và thêm những tính năng mới. Mỗi bản nâng cấp đều được đặt với những mã tên riêng dựa theo các món ăn tráng miệng. Hiện tại các phiên bản chính của Android bao gồm:

2.0/2.1 (Eclair): 
Đầu tháng 9 năm 2009, một năm sau khi G1 chào đời, Android 2.0 đã được ra mắt. Thật sự không ngoa khi mô tả Android 2.1 bằng một chữ "lớn". Một cơ hội lớn cho những nhà phát triển, một tiềm năng lớn cho Android về sau, những chiếc điện thoại "lớn" được ra mắt và phân phối bởi các nhà mạng lớn. Eclair, tên gọi của Android 2.0, lúc mới ra mắt chỉ được dùng độc nhất cho chiếc Motorola Droid của nhà mạng Verizon, một trong những chiếc điện thoại đã kích hoạt cho một kỉ nguyên Android lớn mạnh như ngày hôm nay. Motorola Droid còn được biết đến với tên gọi Motorola Milestone khi nó xuất hiện ở Việt Nam. Đây là một sản phẩm rất thành công của Motorola và cả Google khi mang đến cho người dùng những trải nghiệm cực kì tốt với Android. Phiên bản này tân trang lại giao diện người dùng, giới thiệu HTML5, hỗ trợ Exchange ActiveSync 2.5.

2.2 (Froyo): 
Android 2.2 được ra mắt trong năm 2010 và mục tiêu của chương trình Nexus đã xuất hiện rõ hơn bao giờ hết: Nexus One là chiếc điện thoại đầu tiên được nâng cấp lên Android 2.2, sớm hơn nhiều so với tất cả các hãng khác. Giao diện màn hình chính đã được thay đổi, từ 3 màn hình chính tăng lên thành 5 màn hình. Dãy nút kích hoạt nhanh chế độ gọi điện, web và App Drawer cũng đã xuất hiện. Những chấm nhỏ ở góc trái, phải bên dưới của màn hình giúp người dùng biết mình đang xem đến màn hình nào. Google đã có nhiều cố gắng để giao diện Android được vui và đẹp hơn, dễ dùng hơn, bắt kịp phần nào với giao diện của bên thứ ba như HTC Sense chẳng hạn. Phiên bản này nâng cấp tốc độ xử lí, giới thiệu engine Chrome V8 JavaScript, hỗ trợ Adobe Flash, thêm tính năng tạo điểm truy cập Wi-Fi.

2.3 (Gingerbread): 
Khoảng nửa năm sau khi FroYo xuất hiện, Google đã trở lại với bản Android 2.3. Google giới thiệu nó với nhiều tính năng mới, tập trung vào việc phát triển game, đa phương tiện và phương thức truyền thông mới. Android 2.3 có tên mã là Gingerbread, hiện bộ SDK Android 2.3 dành cho các nhà phát triển cũng đã được Google phát hành. Bên cạnh đó, chiếc Nexus S do Samsung sản xuất cũng xuất hiện với vai trò là người kế nhiệm cho Nexus One. Nexus S có vài thay đổi nhỏ so với người anh em Galaxy S. Phiên bản này sửa lại giao diện người dùng, cải thiện bàn phím ảo, thêm tính năng copy/paste, hỗ trợ công nghệ giao tiếp tầm sóng ngắn NFC.

3.0 (Honeycomb): 
Hệ điều hành dành riêng cho máy tính bảng tablet, giao diện mới, hỗ trợ bộ xử lí đa nhân và xử lý đồ họa. Sản phẩm đầu tiên dùng hệ điều hành này là Motorola Xoom. Xoom mang trong mình một giao diện thuần Android 3.0 và không bị chỉnh sửa gì. Mặc dù Android 3.0 không có nhiều dấu ấn đặc biệt trên thị trường nhưng nó là nền tảng cho Android 4.0 sau này.

4.0 (Ice-cream sandwich): 

Hệ điều hành là sự kết hợp giữa Gingerbread và Honeycomb. Cuối năm 2011, Google chính thức giới thiệu điện thoại Galaxy Nexus, thiết bị đầu tiên trên thị trường sử dụng Android 4.0 Ice Cream Sandwich. Có thể nói Android 4.0 là sự thay đổi lớn nhất trong lịch sử phát triển của Android tính đến ngày viết bài này. Android 4.0 hỗ trợ một bộ font mới tên là Roboto được cho là tối ưu hóa để dùng trên các màn hình độ phân giải càng ngày càng cao hơn, đồng thời để hiển thị được nhiều thông tin hơn trên màn hình. Hệ thống thông báo (Notification) già nua của Android đã được làm mới hoàn toàn, đẹp hơn, tiện dụng hơn, nhất là tính năng trượt ngang để xóa từng thông báo riêng lẻ. Tương tự như vậy cho tính năng Recent Apps và cả trình duyệt của máy. Bàn phím cũng được làm mới với khả năng tự động sửa lỗi cao hơn, việc sao chép, cắt dán chữ và nội dung cũng tốt hơn bao giờ hết.

4.1 (Jelly Bean): 

Được giới thiệu tại hội nghịGoogle I/O với nhiều cải tiến đáng giá và rất được mong đợi. Đây cũng là lúc chiếc Nexus 7 được chính thức ra mắt với sự hợp tác giữa Google với Asus. Về giao diện, không có nhiều thay đổi so với Android 4.0, vẫn là màn hình chính với thanh dock bên dưới quen thuộc. Giao diện kiểu này rất đơn giản nhưng lại đẹp và gọn gàng, giúp chúng ta dễ dàng theo dõi những thông tin xuất hiện trên màn hình, đặc biệt là khi điều khiển các ứng dụng.


Phiên bản
Tên mã
Ngày phát hành
Cấp API
Thị phần
tháng 10 năm 2013
 ???
 ???
25 tháng 7 năm 2013
 ???
 ???
13 tháng 11 năm 2012
17
1,6%
9 tháng 7 năm 2012
16
14,9%
16 tháng 12 năm 2011
15
28,6%
15 tháng 7 năm 2011
13
0,9%
10 tháng 5 năm 2011
12
0,3%
9 tháng 2 năm 2011
10
44%
6 tháng 12 năm 2010
9
0,2%
20 tháng 5 năm 2010
8
7,6%
26 tháng 10 năm 2009
7
1,9%
15 tháng 9 năm 2009
4
0,2%

Thursday, January 2, 2014

Hướng dẫn tích hợp quảng cáo Admob lên ứng dụng Android (step by step)

Sau một thời gian phát triển ứng dụng và triển khai thành công lên chợ Google Play, chắc chắn bạn rất muốn có thêm thu nhập từ ứng dụng và có thêm kinh phí phát triển các ứng dụng khác. Hiện tại cũng có rất nhiều nhà quảng cáo có lợi nhuận tốt ngoài Admob ra như StartApp, Inmobi..v..v...việc tích hợp cũng ko quá khó khăn, mỗi nhà quảng cáo có một số điều khoản, điều kiện mà các bạn cần tuyệt đối tuân thủ để tránh bị khóa tài khoản, thậm chí ko trả tiền. Bài viết này sẽ hướng dẫn các bạn từng bước tích hợp quảng cáo của Admob lên ứng dụng Android. 

1. Tạo tài khoản Admob

Truy cập tới trang chủ của admob để đăng ký hoặc đăng nhập tài khoản, nếu có tài khoản gmail có thể đăng nhập bằng chính tài khoản đó.

2. Khai báo thông tin thanh toán

Khai báo các thông tin cần thiết
Nhấn "Add your first app" để tiếp tục

3. Thêm ứng dụng muốn đặt quảng cáo

Lần đầu tiên khởi tạo tài khoản nên bạn buộc phải nhập các thông tin thanh toán. Admob chấp nhận thanh toán cho tài khoản Paypal và chuyển khoản, cá nhân tôi thấy lúc rút tiền từ Paypal về bị trừ rất nhiều khoản phí nên chọn chuyển khoản. Tuy nhiên thì nếu chọn thanh toán bằng Paypal thì chỉ cần số tiền bạn kiếm được đạt tối thiểu 25$ là dc thanh toán còn chuyển khoản là tối thiểu 100$. Bạn cần chú ý là nếu tháng 1 bạn đủ điều kiện thanh toán (ví dụ đủ 100$) nhưng tận tháng 3 Admob mới chuyển tiền về, thông thường sẽ có mail báo thanh toán gửi vào khoảng mùng 2 hoặc mùng 3 hàng tháng, tiền sẽ về vào khoảng ngày 17 đến 19. 
Đối với lựa chọn chuyển khoản, gợi ý là các bạn lập tài khoản thẻ Vise Debit của ngân hàng Á Châu ACB, thời gian làm thẻ rất nhanh (khoảng 30 phút). Khai báo thông tin tài khoản ngân hàng của bạn để admob chuyển tiền ở mục tab Account:
Thông tin chung
Thông tin tài khoản ngân hàng
Ở tab Sites&Apps bấm vào nút "Add Site/App" để thêm ứng dụng
Chọn loại ứng dụng là Android
Đặt tên và mô tả về ứng dụng. Mục <Android package URL> cần khai báo chính xác package ứng dụng của bạn.
Sau khi khai báo đầy đủ thông tin thì quản lý quảng cáo cho một ứng dụng của bạn sẽ trông như thế này. Chú ý "Publisher ID" chính là mã bạn sẽ đính lên ứng dụng.

4. Tải xuống thư viện Admob SDK và add và project

Từ phần quản trị quảng cáo cho ứng dụng ở trên bạn bấm vào link " Get Publisher Code".
Bấm vào nút "Download Admob Android SDK" để tải về file nén của bộ SDK. Sau khi giải nén bạn copy file *.jar (cụ thể phiên bản SDK hiện tại có tên file là GoogleAdMobAdsSdk-6.4.1.jar) vào thư mục libs của project Android.
Copy file GoogleAdMobAdsSdk-6.4.1.jar vào thư mục libs
Để vào chi tiết quản lý quảng cáo của từng ứng dụng bạn rê chuột lên danh sách ứng dụng và bấm chọn nút Manage Settings, để xem báo cáo bấm vào nút Reporting.
Rê chuột lên tên ứng dụng.

5. Khai báo thông số cần thiết trên file AndroidManifest.xml

Vậy là xong phần đăng ký ứng dụng quảng cáo trên trang Admob. Tiếp theo, chúng ta cần khai báo trên file AndroidManifest.xml.

  • Xin quyền truy cập internet

    
  • Khai báo thẻ meta-data

  • Khai báo Activity

6. Chèn widget quảng cáo lên layout và trên Activity

  • Khai báo trên file layout


        
    
Chú ý "ads:adUnitId" bạn nhập mã Publish ID mà Admob cung cấp như nói ở trên. "TEST_DEVICE_ID" bạn nhập mã điện thoại hoặc tablet của bạn mà khi deploy, admob sdk sẽ có thông báo ở trong Logcat dạng như hình bên dưới:
Khai báo biến trên Activity
private AdView adView;
Trong hàm onCreate:
 // Look up the AdView as a resource and load a request.
    adView = (AdView)this.findViewById(R.id.adView);
    adView.loadAd(new AdRequest());
Trong hàm onDestroy:
@Override
  public void onDestroy() {
    if (adView != null) {
      adView.destroy();
    }
    super.onDestroy();
  }
Kết quả khi build app lên thiết bị sẽ giống như hình dưới:

Các bạn có thể tải demo tại đây.

P/s: Hiện tại thì Admob đã có sự thay đổi về giao diện trang chủ, cách thức đính quảng cáo kèm Admob SDK đã trở lên lỗi thời và Google khuyến cáo các nhà phát triển sử dụng phương thức tích hợp Admob kiểu mới sử dụng Google Play Service. Từ giờ cho tới 01/8/2014 thì phương thức cũ vẫn có thể sử dụng, blog sẽ cố gắng có bài viết hướng dẫn tích hợp quảng cáo Admob kiểu mới trong thời gian sớm nhất.

Cảm ơn bạn đọc đã quan tâm, mọi đóng góp vui lòng để lại comment bên dưới hoặc gửi email.