Blog của JAVA Việt: 18 thg 11, 2010

Thứ Năm, 18 tháng 11, 2010

Tổng hợp mbook của ĐHKHTN

Trong phiên bản mới của Chrome hay Firefox, chúng ta thường thấy tính năng nổi trội của nó là hỗ trợ HTML5. Vậy HTML5 là gì và nó “có gì hót” ? Bạn sẽ không khó để tìm được khái niệm HTML5 trên mạng, đơn giản nó là “hậu duệ” của chuẩn HTML4 tồn tại từ lâu lắm rồi. Phiên bản mới của nó hỗ trợ nhiều thứ hơn, nhiều thẻ mới, mở rộng các thuộc tính cho thẻ cũ…v…v…Ví dụ trong HTML5 có một thẻ mới là “video” và “audio”, điều này có nghĩa là bạn có thể chèn thẳng một đoạn phim hoặc một bản nhạc vào web mà không cần sự trợ giúp của flash. Với chuẩn cũ, hay nói chung là khi bạn muốn nghe nhạc hay xem phim trên mạng, buộc bạn phải cài thêm FlashPlayer, nếu không trình duyệt sẽ thông báo là bạn phải cài đặt Flash thì mới xem được.

Một số trang web chia sẽ video như Youtube cũng đã hỗ trợ HTML5 và cung cấp địa chỉ riêng để truy cập làhttp://www.youtube.com/html5
Sau đây là đoạn code ví dụ và trang demo việc xem phim trên HTML5 mà không cần dùng Flash.

[Tôi tốn cả buổi nhưng không làm hiện đoạn code này này, cuối cùng phải chèn vào đó cái hình, hic, HTML5]
Bạn có thể truy cập vào trang : http://jilion.com/sublime/video để xem demo.
Nếu bạn sử dụng IE6 trong WinXP hoặc IE8 để truy cập thì sẽ thấy chẳng có gì hết, toàn là chữ. Nhưng nếu bạn dùng trình duyệt hỗ trợ HTML5 như GoogleChrome4, Firefox 3.6, Safari 4 thì bạn sẽ thấy một đoạn video.
Và điểm tuyệt vời khi xem phim trên chuẩn HTML5 là :
- Không cần phải đợi buffer hết thì mới xem được, bạn có thể chọn xem bất kỳ đoạn nào trong phim !
- Có thể xem phim ở chế độ toàn màn hình.
- Băng thông được tối ưu hóa để không phải xem một bộ phim “giựt giựt” khó chịu.
Năm mới rồi, chào HTML5, “chào” Flash !

10 lý do để học CSS ,DIV thay cho Table

1. Xây dựng một nền tảng để thay thế các phương thức cổ điển của Web. Tổ chức World Wide Web Consortium (W3C) tạo ra CSS để thay thế các bảng (table), các thẻ font, frame và các dạng "hack" thẻ HTML để tạo hiệu quả cho website Với tôi, CSS mang lại hiệu quả công việc cao hơn. Nhìn cái tag font rối rắm là tôi thấy nản. Coder muốn sửa chữa gì cũng mệt vì sự rối rắm của nó. Trong trường hợp muốn thay đổi về thiết kế của code, bạn lại đụng tới khá nhiều mảng của coder. Còn nếu sử dụng css, việc chỉnh sửa rất đơn giản, không phụ thuộc vào coder.

2. Tăng tốc độ website. Thời gian load một website sẽ nhanh hơn. Dung lượng của một trang web sẽ nhẹ hơn 50% so với cách làm cổ điển.
Theo cơ sở của DOM thì:
- Table: web browser phải load cả <table>...</table> thì mới có thể dựng thành DOM tree và hiển thị ra màn hình.
- Div: chỉ cần load <div>..</div> là đã có thể dựng được DOM tree và hiển thị.
Như vậy, quá trình hiển thị 1 trang table-less sẽ nhanh hơn 1 trang table. Hơn nữa, cùng 1 cấu trúc nhưng DOM tree của table sẽ lớn và phức tạp hơn của div rất nhiều, điều này cũng ảnh hưởng đến bộ nhớ và tốc độ xử lý của browser.
Chưa kể, cùng 1 trang nhưng nếu dùng table thì code HTML sẽ lớn hơn dùng div. Code CSS có dùng div có thể sẽ lớn hơn, nhưng CSS được load 1 lần, sau đó được cache trên client.

3.Thời gian phát triển website nhanh hơnThông qua một thao tác về thiết kế: thay đổi CSS, thì hàng ngàn trang web sẽ được thay đổi theo.

4. Typography thể hiện ngầu hơnCSS có khả năng kiểm soát mạnh mẽ hơn tag FONT rất nhiều. Chúng ta có thể kiểm soát chiều cao giữa các dòng, thay màu font, các font theo họ - tức là không có font này, sẽ tự chọn font tiếp theo trong danh sách, và nhiều nhiều hơn thế.

5. Dễ viếtBạn có thể tạo và thay đổi CSS dễ dàng như khả năng làm code HTML thủ công.

6.Khả năng phát triển. Sử dụng CSS hiệu quả sẽ tương tự như sử dụng cấu trúc nội dung với HTML. Với cấu trúc HTML, chúng ta chỉ giữ lại các tag cho đoạn văn, các tag tiêu đề (H1 -> H6), bảng dành cho một số ít bảng biểu đặc biệt, bạn sẽ tăng khả năng đáp ứng lượng khách viếng thăm mà không cần xây dựng một phiên bản độc lập để giảm tải.

7. Thiết kế dành cho in ấn cũng đẹp như dành cho web. CSS hỗ trợ tốt cho một khi bạn cần in ra, chẳng hạn in ấn, hay PowerPoint

8. Dễ kiểm soát thông qua vị trí các thành phần trên web. Việc đánh ID trên từng thẻ DIV, sẽ dễ dàng hơn cho bạn khi cần kiểm soát và hỗ trợ tốt cho Ajax.

9. Các trang web tách biệt phần thiết kế và nội dung. Giữ lại thiết kế trong một file liên kết, bạn có thể tiết kiệm nhiều thời gian khi cần thêm bớt các thành phần của một trang web.

10. Cải thiện vị trí trong các website tìm kiếm. Với cách sử dụng HTML cho phần nội dung mà thôi, bạn đã loại bỏ các tag định dạng phức tạp cho thiết kế. Điều này là cho các website tìm kiếm index (tạo chỉ mục) website của bạn tốt hơn, và sẽ là tăng thứ hạng của website.

Phần 3 chúng ta sẽ đưa các thành phần cơ bản của website như Header, Main Navigation... vào file index.html ở dạng thẻ Div.

03 Chèn thẻ Div vào giữa body và đặt cho nó id="page-container" . Nội dung thẻ Div là dòng chữ "Hello World"

<body>

  <div id="page-container">
   Hello world.
  </div>

 </body>

Tạo một file mới, đặt tên master.css và save trong thư mục css. Trong file này ta bắt đầu gán cho thẻ Div id="page-container"định dạng CSS. Lưu ý khi ta dùng ID, có nghĩa là duy nhất cái div đấy tồn tại và có định dạng CSS cho div ID thì phải bắt đầu bằng dấu "#". Còn trong trường hợp đặt thẻ div thuộc 1 class thì trong css sẽ bắt đầu bằng dấu "." ví dụ: .page-container {}

#page-container {

 }

Bây giờ ta bắt đầu dùng các thuộc tính của CSS để style cho thẻ div

#page-container {
    background: red;
    width: 760px;
    margin: 0;
 }

Với những thuộc tính trên, ta có thể thấy dễ dàng thẻ div được CSS quy định background màu đỏ. rộng 760px và khoảng cách của cái div đấy tới các div thành phần khác = 0px. Bây giờ bạn có thể thấy trên web browser dòng chữ Hello World trên nền màu đỏ rộng 760px. Tuy nhiên nó sẽ bị cách mép trên cùng của trình duyệt một khoảng 8px. Vì vậy ta phải quy định cho thẻ body thuộc tính margin: 0 cho thẻ body.

html, body {
    margin: 0;
    padding: 0;
 }

Giờ nó đã trở về gốc tọc độ 0:0 tính theo góc trên cùng bên trái trình duyệt. Tương tự như vậy ta bắt đầu thêm các div khác chứa nội dung của các thành phần còn lại. Bỏ dòng chữ "Hello World" đi và thay vào

<div id="page-container">

  <div id="main-nav">Main Nav</div>
 
  <div id="header">Header</div>
 
  <div id="sidebar-a">Sidebar A</div>
 
  <div id="content">Content</div>
 
  <div id="footer">Footer</div>

  </div>

Bây giờ sản phẩm của chúng ta sẽ có kết quả như thế này. Phần tiếp
theo ta sẽ đặt thuộc tính CSS cho từng cái Div để chúng nằm đúng vị trí
như thiết kế ban đầu. Tất nhiên là ta sẽ cho nằm đúng vị trí chính xác
100% theo như thiết kế. {mosimage}

Thứ Năm, 18 tháng 11, 2010

Tổng hợp mbook của ĐHKHTN

Html5 , css3 là gì ?

10 lý do để học CSS ,DIV thay cho Table