Hướng dẫn cài HTML5 Intellisense for Visual Studio 2010 dành cho các bạn làm web

So here’s how I got it to work.

1. Download this archive and extract the contents to your desktop.
2. Copy/Move html_5.xsd to D:\Program Files (x86)\Microsoft Visual Studio 10.0\Common7\Packages\schemas\html. The path may vary depending on where you installed VS 2010 or Visual Web Developer 2010.
3. From the extracted contents, run the appropriate registry file. In my case, it was VS-2010-x64.reg
4. Now fire up Visual Studio 2010 (or VWD) and navigate to Tools > Options > Text Editor HTML > Validation. On the right panel, select HTML 5 as the Target.
5. Now restart VS 2010 and you should be able to code valid HTML5. Enjoy!

Ebook hướng dẫn học thiết kế web với HTML 5 – Pro HTML5 Programming

Ebook này dành cho lập trình viên thiết kế website muốn sử dụng công nghệ HTML5 mới nhất, và những người muốn biết những tính năng của HTML5 được hỗ trợ trong các trình duyệt hiện nay.

 

Quyển giáo trình, tài liệu, ebook này được viết bằng Tiếng Anh, nội dung chính bao gồm:

■Chapter 1: Overview of HTML5 …………………………………………………………………………1
■Chapter 2: Using the HTML5 Canvas API ………………………………………………………….25
■Chapter 3: Working with HTML5 Audio and Video…………………………………………….65
■Chapter 4: Using the HTML5 Geolocation API …………………………………………………..87
■Chapter 5: Using the Communication APIs……………………………………………………..115
■Chapter 6: Using the HTML5 WebSocket API ………………………………………………….137
■Chapter 7: Using the HTML5 Forms API………………………………………………………….169
■Chapter 8: Using the HTML5 Web Workers API……………………………………………….193
■Chapter 9: Using the HTML5 Web Storage API………………………………………………..213
■Chapter 10: Creating HTML5 Offline Web Applications……………………………………..243
■Chapter 11: The Future of HTML5 ………………………………………………………………….259

Bạn có thể Download ebook hướng dẫn học thiết kế web với HTML 5 – Pro HTML5 Programming này tại đây:

 Ebook hướng dẫn học thiết kế web với HTML 5 – Pro HTML5 Programming (5.08 MB)

Thiết kế form dễ dàng hơn với HTML5

Thật sự hữu ích khi sử dụng HTML5 để thay thế windows form, mặc dù vậy, nhưng bạn vẫn phải tìm hiểu hết những tag mới trong HTML5 cũng như một số effect mà HTML5 mang lại.

1) Bạn phải tìm hiểu kỹ những Input type của HTML5, trong đó có rất nhiều control mà với HTML5 bạn không cần làm gì nữa. Ví nhụ như bạn muốn nhập Email và bắt buộc người dùng phải nhập đúng format, bạn chỉ cần tim hiểu type=”email” là gì.

Hay như nếu bạn muốn tạo 1 ô nhập ngày tháng và build 1 cái calendar mini để cho người dùng chọn ngày cho tiện, thì với HTML5 cũng chỉ 1 dòng lệnh khá đơn giản:

<input type=”date” id=”deliveryDate” />

là bạn có ngay 1 control

Ngoài việc tương tác với các control trong HTML5 theo cách thông thường của JavaScript 1.2 thì bạn có thể sử dụng JQuery để thao tác trên đó. Rất dễ dàng và tiện dụng.

2) New Input Content Attributes in HTML5: nghĩa là nếu trước đây bạn tự xử lý thì bây giờ HTML5 xử lý giùm bạn. Ví dụ: nếu bạn muốn tạo 1 ô nhập email, bạn có thể để giá trị sample vào, và khi người dùng click chuột vào ô đó, tự nhiên dòng hướng dẫn sẽ mất đi, và bạn nhập bình thường. Dĩ nhiên, giá trị hướng dẫn sẽ sáng hơn màu bình thường của ô nhập.

Một đoạn code ngắn có thể làm nên nhiều việc trong HTML5, xem ví dụ:

Mã:

Modernizr.load({
    test: Modernizr.input.placeholder,
    nope: "../js/html5placeholder.jquery.min.js",
    callback: function() {
      $('input[placeholder]').placeholder();
    }
  });

Ngoài ra, HTML còn cung cấp 1 thuộc tính mới cho tag đó là autofocus

<input type=”text” id=”orderName” autofocus />

thuộc tính này giúp cho control tự động focus khi trang vừa được load lên xong.

3) HTML5 Form Validation là thành phần cực kỳ quan trọng mà hầu như ai cũng phải làm nhất là khi xây dựng form nhập liệu có các ràng buộc. Ví dụ như email là bắt buộc, nhập số điện thoại phải theo chuẩn mặc định. Thì HTML5 chỉ cần cơ bản giải quyết vấn đề thông qua một số thuộc tính:

<input type=”text” id=”orderName” required />

Là yêu cầu nhập, nếu không thì: 

Và:

<input type=”tel” id=”orderTelephone” pattern=”\(\d\d\d\) \d\d\d\-\d\d\d\d” title=”(xxx) xxx-xxxx” />

Phải nhập số fone theo chuẩn, nếu không thì: 

4) HTML5 Forms and ASP.NET Web Forms

Rất may mắn là hầu hết các control trong HTML5 có thể tương tác hoàn toàn với ASP.NET control, tuy nhiên để làm việc được với HTML5 bạn cần phải cài Visual Studio SP1 và .NET 4.0

Download sample ở đây nhé: http://archive.msdn.microsoft.com/mag201111HTML5

HTML5 – tương lai Web

HTML5 cho phép tạo ra các trang web có thể hoạt động tốt trên nhiều trình duyệt khác nhau của bất kỳ thiết bị nào. Không những vậy, HTML5 còn đem đến cho người dùng những trải nghiệm về tốc độ truy cập web nhanh hơn, tốt hơn, tài nguyên phong phú hơn.

Hiện nay, công nghệ dành cho thiết bị di động ngày càng phát triển. Nếu như trước đây, bạn phải dùng chiếc máy tính để bàn (MTĐB) cồng kềnh cùng trình duyệt web IE (Internet Explorer) để lướt web, thì giờ đây với máy tính xách tay (MTXT), điện thoại thông minh (ĐTTM) cùng rất nhiều trình duyệt khác (Firefox, Opera…) bạn có thể dễ dàng lướt “net” ở bất kỳ đâu. Tuy nhiên với các thiết bị, trình duyệt web khác nhau, nội dung hiển thị trên màn hình sẽ khác nhau. Chẳng hạn, trên máy tính bạn xem trang web này rất tốt, nhưng trên ĐTTM thì giao diện và cấu trúc trang bị xáo trộn. Hay bạn có thể xem phim rất tốt với IE nhưng với Firefox thì không.

Vậy giải pháp nào để người dùng có thể sử dụng bất kỳ trình duyệt trên bất kỳ thiết bị nào cũng có thể xem được đầy đủ, trọn vẹn nội dung, thông tin trên internet.
HTML5 cho phép nhà phát triển, lập trình web tạo ra các trang web có thể hoạt động tốt trên nhiều trình duyệt khác nhau của bất kỳ thiết bị nào – từ MTĐB, MTXT cho đến ĐTTM. Không những vậy, HTML5 còn đem đến cho người dùng những trải nghiệm về tốc độ truy cập web nhanh hơn, tốt hơn, tài nguyên phong phú hơn.

Một số phần tử mới

HTML5 vẫn giữ lại các cấu trúc cơ bản như <HEADER>, <FOOTER>, nhưng được bổ sung các phần tử mới, chẳng hạn <CANVAS>, <AUDIO>.

Các phần tử trong cấu trúc mới

• <HEADER>: chứa thông tin giới thiệu của một phần hay một trang hoặc bất cứ thông tin gì của tiêu đề tài liệu hay tiêu đề nội dung của một bảng.

• <NAV>: chứa đường liên kết đến trang khác hoặc phần khác trên cùng trang, không nhất thiết chứa tất cả liên kết, chỉ cần đường chuyển hướng chính.

• <SECTION>: đại diện cho một phần tài liệu hay ứng dụng, cách thức hoạt động tương tự <DIV>.

• <ARTICLE>: đại diện một phần của trang, có thể đứng độc lập, chẳng hạn blog post, forum entry… hay bất kỳ thành phần nội dung đứng độc lập nào.

• <ASIDE>: đại diện cho nội dung có liên quan đến phần tài liệu chính hay các đoạn trích dẫn.

• <FOOTER>: đánh dấu không chỉ cuối trang hiện hành mà còn mỗi phần có trong trang. Vì vậy, <FOOTER> có thể dùng nhiều lần trong một trang.

Hình bên dưới sẽ giúp bạn thấy rõ hơn cấu trúc mới:

<HEADER>, <FOOTER> không chỉ đại diện cho phần đầu, phần cuối của trang hiện hành, mà còn là đại diện phần đầu, phần cuối của một phần tài liệu, hơn nữa, bạn có thể dùng <THEAD>, <TFOOT> trong các bảng dữ liệu. Việc sử dụng cấu trúc với các phần tử mới này giúp việc lập trình thuận tiện hơn.

Một số đặc điểm mới

Với sự đóng góp, cải tiến của các nhà phát triển trình duyệt như Google (trình duyệt Chrome), Apple (Safari), Mozilla (Firefox),…; HTML5 giờ đây đang dần hoàn thiện và có nhiều đặc tính khá tinh tế:

Lưu trữ ngoại tuyến (offline): cho phép lưu trữ dữ liệu liên tục hay từng phần mà không cần cài đặt tính năng bổ sung (plug-in), tương tự như Google Gears.

Miền vẽ (canvas drawing) cho phép tương tác trực tiếp với hình ảnh, biểu đồ, các đối tượng trong game (game component) thông qua các mã lập trình và tương tác người dùng – không cần Flash hay các plug-in.

Truyền nhận hình ảnh (video) và âm thanh (audio) trung thực: hiện đang trong quá trình hoàn thiện và thống nhất các chuẩn định dạng. Đến một ngày nào đó, YouTube và Pandora có thể sẽ không cần đến Flash nhưng vẫn đem đến cho bạn những đoạn video, âm thanh hấp dẫn.

Định vị người dùng (geolocation): HTML5 có thể giúp xác định vị trí của bạn và dùng nó để thực hiện cho một công việc nào đó, chẳng hạn phục vụ cho các kết quả tìm kiếm, cập nhật Twitter hay dùng cho các thiết bị định vị. HTML5 không giới hạn API của nhà cung cấp hay công cụ trình duyệt nào.

Mẫu nhập thông minh (smarter form): hộp tìm kiếm, dòng nhập thông tin, vùng thông tin hợp lệ… sẽ được kiểm soát tốt hơn, ít gây phiền toái cho người dùng khi họ điền thông tin, dữ liệu.

Tiếp cận các ứng dụng web dễ dàng (web application focus): chẳng hạn như việc xây dựng các trang wiki, công cụ kéo thả, bảng thảo luận, chat thời gian thực. Việc thực hiện các ứng dụng này sẽ nhanh chóng hơn và chúng có thể làm việc như nhau trên các trình duyệt.

Lợi ích mà HTML5 đem lại

Lợi ích to lớn nhất mà HTML5 đem lại là khả năng hỗ trợ API (Application Programming Interface – giao diện lập trình ứng dụng) và DOM (Document Object Model – mô hình đối tượng tài liệu hay cây cấu trúc dữ liệu).

HTML5 cho phép mở rộng dễ dàng với API. Điều này sẽ giúp các nhà phát triển tự do hơn trong việc sáng tạo các ứng dụng thân thiện hơn với người dùng khi mà họ còn lệ thuộc vào nền tảng Flash – lưu trữ dữ liệu và trình diễn ảnh động. Cùng với việc hỗ trợ bộ nhớ ứng dụng (application cache) và khả năng offline, HTML5 sẽ mở ra nhiều cơ hội tương lai cho các ứng dụng web. Khả năng offline có thể hình dung như việc Thunderbird, Outlook cho phép bạn kiểm tra email ngay cả khi bạn làm việc offline nhưng với HTML5 bạn sẽ thực hiện điều này qua trình duyệt. Đây là cầu nối quan trọng để mối “lương duyên” giữa máy tính cá nhân và môi trường web sớm hiện thực hơn. Google Gears cho chúng ta khả năng lưu trữ dữ liệu offline, Flash đem đến cho người dùng những trải nghiệm về sức mạnh của bộ nhớ ứng dụng (Pandora dùng nó để lưu trữ thông tin người dùng). Với HTML5, những khả năng này hiện đã sẵn sàng và có thể dễ dàng mở rộng với JavaScript.

Một lợi ích nữa, với HTML5, nhà phát triển chỉ cần lập trình một lần là có thể dùng được trên nhiều hệ thống, không như Flash hay các plug-in khác luôn cần có nhiều phiên bản khác nhau dành cho mỗi nền tảng.

Mặc dù Flash, SilverLight… vẫn là các plug-in đang hoạt động tốt, nhưng các nhà phát triển vẫn ra sức ủng hộ HTML5. Đơn giản vì: thứ nhất, tuy Flash hoạt động tốt nhưng đôi khi nó gây ra hiện tượng rò bộ nhớ (memory leak) hay làm nghẽn hệ thống (crash); thứ hai, HTML5 giúp tập trung, quản lý các phần tử tương tác trên trang web một cách tự nhiên, dựa vào các đoạn mã; thứ 3, HTML5 giúp JavaScipt hiện thực dễ dàng hơn. Một điểm nữa cho HTML5 là khả năng hỗ trợ nhà lập trình chuyển đổi từ XHTML.

Một khi có nhiều trình duyệt và nhiều nhà phát triển hỗ trợ các chuẩn tương tác video, audio của HTML5, thì ý tưởng về một cửa hàng cung cấp ứng dụng dùng được trên nhiều thiết bị, nền tảng – ĐTTM, MTĐB, MTXT, Windows, Mac, Linux – sẽ trở thành hiện thực.

Ứng dụng

HTML5 hiện đang được sử dụng trên một số điện thoại có trình duyệt nền tảng Webkit như Palm Pre, iPhone 3Gs, Google Android. Gần đây, Google cũng đã tích hợp sẵn HTML5 vào Wave nhằm xây dựng ứng dụng tất cả trong một từ blog, wiki, IM (instant messaging), e-mail cho đến giao tiếp đồng bộ. Trình duyệt Firefox 3.5 cũng đã hỗ trợHTML5 với các thẻ <VIDEO> và <AUDIO>, theo định dạng .ogg.

HTML5 vẫn đang còn là bản dự thảo, nhưng với sự hỗ trợ mạnh mẽ từ các nhà phát triển trình duyệt Google, Apple, Mozilla… thì nó có khả năng “khuynh đảo” thị trường ứng dụng web, và sớm trở thành chuẩn web chính thức. Một số trình duyệt có hỗ trợ HTML5 (tùy mức độ): Firefox, Chrome, Safari, Opera.

Ebook hướng dẫn học thiết kế Web với HTML5 – HTML5 Up and Running

Quyển ebook, tài liệu này sẽ hướng dẫn bạn học thiết kế Web với công nghệ HTML5 mới nhất. Nếu bạn không biết về những tính năng mới trong HTML5, bây giờ chính là thời điểm để bạn bắt đầu. Quyển sách này cung cấp những thông tin cụ thể để làm thế nào và tại sao phiên bản HTML5 mới nhất sẽ thay đổi cách phát triển ứng dụng  Web.

HTML5: Up & Running hướng dẫn một cách chi tiết thông qua các thay đổi quan trọng trong phiên bản này với một vài ví dụ mẫu, bao gồm CSS, đồ họa và ảnh chụp màn hình. Bạn sẽ học làm thế nào để sử dụng  HTML5 để thêm Video, khả năng sử dụng offline, và nhiều thứ khác – và bạn có thể cài đặt trực tiếp nó.Sách được viết bằng Tiếng  Anh, nội dung chính của nó như sau:

Chapter 1: How Did We Get Here?
Chapter 2: Detecting HTML5 Features
Chapter 3: What Does It All Mean?
Chapter 4: Let’s Call It a Draw(ing Surface)
Chapter 5: Video on the Web
Chapter 6: You Are Here (And So Is Everybody Else)
Chapter 7: The Past, Present, and Future of Local Storage for Web Applications
Chapter 8: Let’s Take This Offline
Chapter 9: A Form of Madness
Chapter 10: “Distributed,” “Extensibility,” and Other Fancy Words

Trước khi tìm hiểu, bạn có thể tham khảo HTML5 là gì:

http://www.sotayweb.com/component/k2/item/81-html5-tuong-lai-web.html

Link download:

 HTML5: Up & Running (4.6 MB)

HTML 5: Đơn Giản Và Nhanh Chóng Với jCanvas

Web ngày nay càng lúc càng nhanh và mạnh hơn trước kia. Thêm vào đó, HTML 5 ra đời đã mang đến nhiều khả năng phát triển các web application mang tính tương tác cao hơn mà không dùng flash. Thay vào đó, tất cả người dùng cần để chạy tốt chỉ là trình duyệt, và họ sẽ có thể thưởng thức những gì tốt nhất mà website mang đến.

Tuy nhiên, việc tạo ra một nội dung mang tính tương tác không bao giờ đơn giản, và nó cũng không ngoại trừ yếu tố chính làm nên HTML 5: canvas. Nếu bạn đã thực hiện những gì trình duyệt khuyến khích, bạn sẽ cảm nhận được sự tăng tốc của GPU và cảm giác canvas chạy tốt hơn. Có vài framework có khả năng tạo canvas dễ hơn phát triển nó, đặc biệt là jQuery. Nhưng jQuery lại yêu cầu code khá nhiều. Đây là bài viết cải thiện điều đó.

Về jCanvas

 

jCanvas là một plugin jQuery được viết bằng JavaScript để làm việc với jQuery, và nó có nghĩa là nó sẽ dễ dùng hơn rất nhiều trong HTML5. Những nhà lập trình web sẽ cảm nhận được lợi ích từ việc sử dụng jCanvas. Bằng việc sử dụng jCanvas, bạn sẽ ít phải code hơn, vì plugin này sẽ làm việc và dịch tất cả các code cần để jQuery chạy.

Ví dụ

jCanvas có thể vẽ một số lớn các object. Ví dụ, bạn có thể thấy một vòng eclipse được đổ màu. Có nhiều parameter mà bạn có thể set và giữ code nguyên bản ít nhất có thể. Trong ví dụ này, các parametter gradient được set đầu tiên (distances, colors,…) cùng với việc vẽ hình eclipse. Đối với các lập trình viên, việc này sẽ giúp ích rất nhiều để viết code mà không cần khai báo cú pháp.

Trong ví dụ này, một hình jpg thông thường được đảo một nữa. Trong hàm đầu tiên (hoặc tập hợp một instruction) thiết lập việc đảo hình, trong khi đó hàm thứ hai vẽ hình và load hàm đảo vào. Khi code chạy, bạn sẽ có một nửa hình được đảo.

Trong ví dụ cuối cùng, những hình vẽ khác nhau được vẽ bởi những hàm khác nhau được cung cấp bởi jCanvas. Màu xanh, với hình chữ nhật chưa được đổ màu bởi một hàm đơn giản. Bạn luôn có thể tuỳ chỉnh hình chữ nhật của bạn, ngay cả với parameter để chọn width của stroke và radius của góc. Hình năm cạnh được vẽ ỏởi nhiều hàm generic mà được chọn để vẽ các đường gấp khúc thông thường. Bạn cũng có thể chọn những parameter giống nhau để thưc hiện những hàm khác nhau.

Sự khác biệt rất quan trọng vì bạn có thể vẽ một mặt tròn bằng cả các hàm hình chữ nhật và đường gấp khúc, nhưng bạn có thể chỉ vẽ hình chữ nhất với hàm hình chữ nhật. (Mặt phẳng có thể là hình chữ nhật, nhưng hình chữ nhật chưa chắc là mặt phẳng !)

Thông tin khác

Có rất nhiều thứ bạn có thể làm với mỗi hàm, thêm vào đó là có rất nhiều hàm để bạn sử dụng! Bạn có thể download jCanvas tại đây (http://calebevans.me/projects/jcanvas/download.html). Nếu bạn cần giúp đỡ, bạn có thể xem tài liệu tại đây (http://calebevans.me/projects/jcanvas/docs.html#syntax). Nếu vẫn không giúp ích, bạn có thể liên lạc với các lập trình viên jCanvas ở đây(http://calebevans.me/projects/jcanvas/support.html). Nếu bạn muốn thử jCanvas trước khi đưa vào dùng, các lập trình viên đã tạo một trang rất tuyệt là Sandbox để bạn có thể thử trước khi quyết định dùng.

Cuối cùng, nếu bạn muốn giúp đóng góp với mã nguồn mở, bạn sẽ được chào đón tại đây(https://github.com/caleb531/jcanvas). jCanvas luôn luôn được cải tiến và phiên bản mới sẽ được cập nhật vào vài tuần tới.

Lời kết

jCanvas là một công cụ tuyệt vời giúp đơn giản hơn trong việc lập trình, đặc biệt là nếu bạn có rất nhiều canvas cần dùng. Một lần nữa, vài tính năng chính là:

– Vẽ hình, đường thẳng, hình ảnh, và text.

– Chỉnh sửa màu sắc, gradients, patterns, và shadows.

– Tính toán các canvas (rotate, scale….)

– Một lượng lớn các option bạn có thể cần

Nguồn: makeuseof.com