Làm cách nào để bắt đầu với HTML5? [đóng cửa]

Quy trình làm việc được đề xuất để tìm hiểu HTML5 là gì? Tôi nên cài đặt công cụ nào? SDK gì? Bắt đầu từ đâu? Làm thế nào để kiểm tra? Làm thế nào để gỡ lỗi? Tôi đọc gì?

Tôi hiểu rằng những gì thường được gắn nhãn là "phát triển HTML5" trên thực tế là hỗn hợp của HTML, CSS, JS và hơn thế nữa, tuy nhiên tôi không tin rằng các dự án lớn hơn được phát triển trong Notepad. Đó là lý do tại sao tôi yêu cầu bạn tiết lộ các mẹo và thủ thuật về quy trình làm việc của bạn.

Nếu tôi bắt đầu một dự án HTML5 mới từ đầu ngay bây giờ thì có lẽ tôi sẽ làm một cái gì đó như thế này:

Tải xuống và sử dụng Trình tạo nồi hơi HTML5 . Điều này sẽ cung cấp cho bạn một trang mới với hầu hết những điều quan trọng được khởi tạo và sẵn sàng để thử nghiệm. Cũng bao gồm một số tính năng gỡ lỗi đẹp mà bạn nên sử dụng cùng với fireorms

Nhìn qua Lặn vào HTML5 để xem lịch sử và cách sử dụng mã.

Trên máy mac của tôi, tôi sử dụng Coda và tại nơi làm việc, tôi sử dụng Dreamweaver trong chế độ xem Code. Họ sẽ không xây dựng trang cho bạn, nhưng hoàn thành mã, gợi ý và mã màu hoạt động tốt. Tôi chắc chắn Aptana và những thứ tương tự cung cấp các tính năng tuyệt vời, nhưng tôi luôn thấy đơn giản hơn để tốt hơn khi nói đến html.

Chắc chắn chọn các cuốn sách HTML5 và CSS3 từ "A Book Apart" (CSS3 sẽ ra mắt vào cuối tháng này)

Và cuối cùng - để thử và tìm ra toàn bộ điều này, hãy kiểm tra:

Mạng lưới nhà phát triển Opera - http://dev.opera.com/articles/view/html-5-canvas-the-basics/

Canvas Cheat Sheet - http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html

Cách vẽ bằng HTML5 Canvas http: // thev vitamin.com/code/how-to-draw-with-html-5-canvas/

HTML5 không phải là một thứ tích hợp duy nhất. Đó là một bộ sưu tập các phần mở rộng cho HTML, một số trong số đó được triển khai rộng rãi và có thể được sử dụng một cách an toàn, một số trong đó chưa có ai thực hiện và rất nhiều thứ ở giữa. Nếu bạn cố gắng coi HTML5 là một nền tảng phát triển duy nhất mạch lạc và 'tìm hiểu tất cả', bạn sẽ có một khoảng thời gian thực sự khó khăn.

Thay vào đó, những gì bạn cần tìm hiểu là toàn bộ web: HTML cơ bản, CSS, JavaScript, Core DOM, DOM DOM, Mô hình đối tượng trình duyệt cơ bản. Sau đó, bạn có thể thêm các tính năng của Web mới và nơi bạn cần chúng, và hỗ trợ trình duyệt cho phép: tiện ích mở rộng HTML5, thuộc tính CSS3, bản vẽ canvas, ổ cắm web, các tiện ích mở rộng DOM và BOM khác xuất hiện từ công việc HTML5 ...

Bộ tính năng của web liên tục phát triển và không có một điểm tham chiếu nào. W3Schools ( không liên quan gì đến W3C), nhưng nó có rất nhiều lỗi. Đừng tin những gì nó nói là phúc âm.

Bạn có thể cần tham khảo HTML4 , CSS2 dứt khoát . Thông số kỹ thuật DOM Core và DOM HTML để đảm bảo. Bạn cũng có thể muốn xem tham chiếu DOM của MDC và tham chiếu DOM của MSDN để biết Firefox và IE hỗ trợ gì. Đặc tả HTML5 cũng chứa rất nhiều công cụ DOM cập nhật hơn, cũng như các phần mở rộng HTML mới, nhưng nó là một tài liệu dài và khó sử dụng, khá khó sử dụng ngay cả theo tiêu chuẩn của các tài liệu tiêu chuẩn. Mặc dù gần như không tệ như thông số ECMAScript không thể xuyên thủng . (Rất may, có lẽ bạn sẽ quen với rất nhiều điều đó nếu bạn đã từng làm việc với ActionScript.)

Bạn không cần SDK hoặc IDE để phát triển HTML / CSS / JS. Bạn có thể sử dụng IDE nếu bạn thích, nhưng tôi khá vui khi làm mọi thứ trong trình soạn thảo văn bản yêu thích của mình. Không có các bước xây dựng / biên dịch để lo lắng, bạn chỉ cần lưu tệp của mình và nhấn tải lại, công việc đã hoàn tất. Hầu hết các trình duyệt web hiện đại đều có trình gỡ lỗi và các công cụ phát triển khác được tích hợp sẵn (ví dụ IE8) hoặc có sẵn dưới dạng các tiện ích mở rộng (ví dụ: Fireorms ).

Tôi đánh giá cao WebStorm , từ JetBrains (hoặc bất kỳ sản phẩm dựa trên IntelliJ nào của họ , như PHPStorm, RubyMine, PyCharm vì tất cả đều hỗ trợ HTML). Bạn nhận được CSS, HTML hoàn thành tự động và kiểm tra tính chính xác (trong khi bạn nhập). Tái cấu trúc hỗ trợ cho Javascript (thứ mà tôi chưa từng thấy ở bất kỳ nơi nào khác) và thậm chí khả năng gỡ lỗi Javascript trong IDE (nếu công cụ Firebird hoặc Chrome Developer thiếu cho bạn). Nó có hỗ trợ dự án cũng như hỗ trợ SVN, Git, Perforce và CVS. Và rất nhiều tính năng khác, rất được khuyến khích ...

Một số công cụ vô giá

• FireBug - plugin dành cho nhà phát triển cho Firefox. Cho phép gỡ lỗi JS, HTML, Styles.
• Thanh công cụ IE Developer cho các phiên bản IE cũ hơn (6,7). Không có nhiều HTML5 ở đó. IE mới có công cụ F12.
• Chrome có các công cụ dành cho nhà phát triển

Những công cụ này chủ yếu để gỡ lỗi Javascript và để tìm hiểu mọi thứ liên quan đến định vị các yếu tố và các kiểu CSS được áp dụng.

Nếu bạn đang tìm kiếm một đề xuất IDE, Eclipse là khá tốt. Nếu bạn đang tìm kiếm các công cụ Javascript, Fireorms rất tốt để gỡ lỗi.

Tuy nhiên, bạn thực sự không cần bất kỳ "công cụ" nào. Tôi nghĩ rằng "các dự án lớn hơn không thể / không được phát triển trong Notepad", hoàn toàn đơn giản là sai. Tôi sử dụng Notepad ++ để viết tất cả HTML / CSS / Javascript của mình và tôi nghĩ rằng đây là một cách tiếp cận rất phổ biến - ngay cả đối với các nhà thiết kế web chuyên nghiệp. Notepad ++ có tô sáng cú pháp cho HTML, CSS và Javascript, cũng như tự động hoàn thành. Nếu bạn muốn phần mềm cung cấp nhiều hơn thế, vui lòng cụ thể trong đó các tính năng quan trọng đối với bạn. (BTW, nếu bạn là người dùng mac, hãy thử BBEdit).

Các trang web lớn hơn thường được viết bằng các khung như Django hoặc Ruby on Rails, nhưng điều đó thực sự không liên quan gì đến việc sử dụng hoặc học HTML5.

Tôi tin rằng Adobe (người tạo ra Flash) thực sự đang trong quá trình phát hành công cụ chuyển đổi Flash sang HTML5, có thể đáng để bạn tìm hiểu.

http://news.softpedia.com/news/Adobe-Showcase-Flash-to-HTML5-Converter-163709.shtml

Sau đó, Flash trở thành một công cụ để phát triển HTML5.

Và kể từ tuần này, Microsoft đã thông báo rằng họ đang đi theo một hướng tương tự với Silverlight, vì vậy có vẻ như mọi thứ đang diễn ra HTML5 ngay bây giờ.

Một câu hỏi tôi có là mã HTML5 được tạo bởi hai công cụ này sẽ tốt như thế nào? Chúng tôi sẽ không biết câu trả lời cho đến khi chúng thực sự được phát hành, nhưng tôi chưa bao giờ thấy mã được tạo ra có chất lượng đặc biệt tốt. Hy vọng rằng chúng tôi sẽ không kết thúc với tương đương hiện đại của MS Front Page.

Tôi đặc biệt khuyên bạn nên thiết lập một hệ thống xây dựng cho mã Javascript của bạn và để nó kiểm tra đối với JSLint mỗi bản dựng. Tôi đã phát hiện ra điều này sớm nhận ra rất nhiều lỗi và thúc đẩy mã hóa tốt (chơi với các tùy chọn nếu nó quá nghiêm ngặt). Hãy xem hệ thống xây dựng của jQuery trên GitHub để biết ví dụ hay.

Ngoài việc chỉnh sửa, tôi là một fan hâm mộ lớn của Notepad ++ vì tôi vẫn chưa tìm thấy một IDE cung cấp các tính năng hữu ích mà không phải tải toàn bộ thủ thuật GUI và thủ thuật.

Bạn có thể nhìn vào Dreamweaver mới nhất, trình chỉnh sửa mã không tệ và họ có một thư viện widget với một số widget HTML5 mà bạn có thể thả vào.

Tôi không tin rằng các dự án lớn hơn có thể / được phát triển trong Notepad

Bạn đã sai ở đó. Tôi là người dùng Notepad lâu năm và tôi nghĩ đó là cách tốt nhất để đi. Để gỡ lỗi, tôi sử dụng Công cụ dành cho nhà phát triển của IE, FireBug của Firefox và Trình kiểm tra của Chrome.

Theo như HTML5, về cơ bản, nó chỉ là HTML thông thường với một vài đồ chơi bổ sung. Ngoài ra, không có gì ngăn bạn khai báo một tài liệu HTML5, sau đó chỉ sử dụng những thứ có trong các phiên bản HTML cũ hơn.

Một điều tôi khuyên bạn nên tránh bằng mọi giá là các chương trình như Dreamweaver. Chúng làm cho mọi thứ trở nên dễ dàng với các công cụ thiết kế đồ họa, nhưng khi bạn muốn làm công cụ của riêng mình, nó sẽ rất khó khăn. (Tôi đang nhìn các sinh viên khác trong khóa học tôi đang làm khi tôi nói điều này)