Home-theater-designers
Mục lục
§5 – CSS3 Biến đổi và Hoạt ảnh
1. Giới thiệu
Bạn đã nghe nói về nó: HTML5. Mọi người đều đang sử dụng nó. Nó được coi là vị cứu tinh của Internet, cho phép mọi người tạo các trang web phong phú, hấp dẫn mà không cần sử dụng Flash và Shockwave.
Nhưng nó thực sự là gì?
Đó không phải là một câu hỏi dễ trả lời. Trong hướng dẫn HTML5 này, chúng tôi sẽ cố gắng cung cấp một số câu trả lời. HTML5 được sử dụng để mô tả một nhóm thực sự đa dạng. Đó là một tiêu chuẩn để viết các trang web. Đó là một tập hợp các API. Đó là một cách mới để thêm tương tác vào các trang web.
HTML5 là tất cả những điều đó và hơn thế nữa. Vậy cuốn sách này nói về điều gì?
Trong hướng dẫn HTML5 này, tôi sẽ giả định rằng bạn đã từng chạm vào HTML và CSS. Có lẽ bạn đã tạo chủ đề Wordpress của riêng mình hoặc chỉnh sửa bố cục MySpace trong ngày hôm đó. Có lẽ bạn đã đọc hướng dẫn XHTML rất riêng của MakeUseOf. Vấn đề là, tôi giả định rằng bạn biết cách của bạn xung quanh một trang web và những gì chúng tôi thảo luận trong hướng dẫn này sẽ không quá xa lạ với bạn.
Mục đích của hướng dẫn này không phải là để dạy bạn toàn bộ về HTML5. Điều đó hoàn toàn nằm ngoài phạm vi của cuốn sách này. Mục đích là cung cấp một giới thiệu nhẹ nhàng về những công nghệ web mới tuyệt vời này và chỉ cho bạn một số cách hay ho để kết hợp chúng vào các trang web của bạn.
Tại sao bạn muốn học HTML5?
Đó là một câu hỏi công bằng. Trong thế giới của điện thoại thông minh và ứng dụng, việc học cách lập trình các trang web có thực sự quan trọng không?
Dù bạn có tin hay không thì việc viết các ứng dụng điện thoại thông minh bằng công nghệ HTML5 thực sự rất phổ biến. Cho đến gần đây, ứng dụng Facebook dành cho Android được viết bằng HTML5, CSS và Javascript.
Blackberry là một công ty lớn khác cực kỳ quan tâm đến HTML5. Điều này là hiển nhiên trong phiên bản mới nhất của hệ điều hành di động của họ, Blackberry OS 10, nơi họ đang tích cực khuyến khích các nhà phát triển phát triển các ứng dụng cho điện thoại của họ bằng công nghệ web.
Điện thoại thông minh Firefox OS mới cũng chạy hoàn toàn trên các ứng dụng HTML5. Kiến thức làm việc về HTML5 là điều cần thiết trong môi trường điện thoại thông minh ngày nay.
Ngoài ra, học HTML5 rất tốt cho sự nghiệp của bạn. Không tin tôi? Theo Indeed.com , mức lương trung bình hàng năm cho một nhà phát triển HTML5 là 89.000 đô la. Với việc ngày càng nhiều công ty thay đổi trang web của họ để sử dụng công nghệ HTML5, các nhà phát triển hiểu biết về ngăn xếp HTML5 đang được săn đón - giờ đây hơn bao giờ hết.
1.1 Điều kiện tiên quyết
Hướng dẫn HTML5 này giả định một số điều. Thứ nhất, nó giả định rằng bạn biết cách web hoạt động và bạn biết cách tạo một trang web cơ bản. Bạn sẽ có thể kết hợp một số phần tử HTML với nhau và có thể trình bày một số thông tin trong trình duyệt web. Nhìn thấy và
thẻ không quá khó khăn và bạn không sợ làm bẩn một số mã nguồn.
Thứ hai, hướng dẫn này giả định rằng bạn biết CSS là gì và nó hoạt động như thế nào. Chúng tôi không mong đợi bạn trở thành thiên tài thiết kế, cũng như bạn không mong đợi bạn biết toàn bộ thông số kỹ thuật CSS. Tuy nhiên, bạn sẽ có thể áp dụng kiểu cho một phần tử trên trang web, có thể liên kết đến tệp CSS và biết sự khác nhau giữa ID và lớp cũng như cách áp dụng kiểu cho từng phần tử đó.
Nếu bạn đang vò đầu bứt tai với những điều trên, đừng lo lắng. Một trong những điều tốt nhất về HTML và CSS là nó thực sự, thực sự dễ dàng. Trên thực tế, MakeUseOf có một hướng dẫn XHTML đáng kinh ngạc sẽ giúp bạn tăng tốc rất nhanh.
Sau khi đọc hướng dẫn đó, bạn cũng có thể muốn xem các bài viết sau:
- 8 trang web có ví dụ về mã hóa chất lượng
- 6 blog để theo dõi các nhà thiết kế web vĩ đại
Bạn cũng sẽ cần một trình duyệt và trình soạn thảo văn bản hiện đại. Bất kỳ phiên bản Internet Explorer nào cũ hơn IE 9 và một số phiên bản Safari, Chrome và Firefox cũ hơn sẽ gặp khó khăn với nhiều tính năng là một phần của HTML5 và có thể ngăn bạn làm theo hướng dẫn này.
Do đó, bạn được khuyến khích tải xuống một trình duyệt hiện đại. Tôi khuyên bạn nên sử dụng Google Chrome và tôi sẽ sử dụng nó trong từng ví dụ.
Ngoài ra, tất cả những gì bạn cần là sự sẵn sàng học hỏi. Ồ, và một trình soạn thảo văn bản.
1.2 Trình chỉnh sửa văn bản để phát triển web
Trình soạn thảo văn bản của bạn là những gì bạn sẽ sử dụng để viết mã của mình. Bạn có thể tự hỏi một trình soạn thảo văn bản là gì.
Vâng, trước hết nó không phải là một trình xử lý văn bản. Các chương trình như Microsoft Word và Apple Pages hoàn toàn không phù hợp để phát triển web. Đó là vì chúng đính kèm thông tin bổ sung vào các tệp HTML, CSS và Javascript của bạn khiến trình duyệt web của bạn khó đọc.
Một trình soạn thảo văn bản bắn các ký tự vào một tệp văn bản, chứ không phải nhiều ký tự khác. Điều này cho phép bạn tạo các tệp không có định dạng bổ sung và có thể được lưu bằng bất kỳ phần mở rộng nào bạn chọn.
Máy tính của bạn đã đi kèm với một cái. Nếu bạn đang sử dụng PC Windows, thì Notepad là trình soạn thảo văn bản mà bạn có thể đã cài đặt.
Trên máy Mac, tình hình hơi khác một chút. OS X đi kèm với bốn trình soạn thảo văn bản khác nhau. Chúng được gọi là Vim, Emacs, Pico và Nano. Tuy nhiên, không giống như Notepad, tất cả chúng đều hoạt động trong thiết bị đầu cuối.
Điều này hơi đáng sợ đối với những người mới phát triển web và không nên được sử dụng bởi những người mới phát triển phần mềm. Chúng tôi sẽ không sử dụng chúng trong hướng dẫn này. Tuy nhiên, khi bạn tự tin hơn một chút với việc phát triển phần mềm và web, chắc chắn bạn nên xem qua Vim và Emacs. Cả hai đều là những trình soạn thảo văn bản mạnh mẽ và khi thành thạo có thể giúp bạn tiết kiệm rất nhiều thời gian.
Trên Linux, trình soạn thảo văn bản mặc định khác nhau giữa các bản phân phối. Trên Ubuntu, có khả năng là Gedit, đây là một trình soạn thảo văn bản khá dễ chịu, không quá khác biệt so với Notepad.
Tuy nhiên, trong khóa học này, chúng ta sẽ viết mã của mình bằng ba công cụ khác nhau.
Đầu tiên là Sublime Text 2. Tôi thành thật không thể giới thiệu điều này đủ cao. Nó đi kèm với tất cả những thứ giúp cuộc sống của một nhà phát triển mới bắt đầu trở nên dễ dàng hơn. Thứ nhất, nó sẽ làm cho mã của bạn dễ đọc hơn bằng cách tô màu các phần nhất định. Thứ hai, nó cho phép bạn chuyển đổi giữa các tệp một cách dễ dàng và quản lý toàn bộ các dự án của tệp. Điều này lý tưởng để chuyển đổi giữa các tệp và chỉnh sửa nhiều bit mã một cách nhanh chóng.
Thứ ba là bảng điều khiển Javascript được tích hợp sẵn trong Google Chrome. Điều này cho phép chúng ta viết Javascript và thấy nó được chạy ngay lập tức và sẽ được sử dụng để giải thích các khái niệm lập trình cơ bản.
Thứ hai là một trang web có tên Codepen.io. Trang web đáng chú ý này sẽ cho phép bạn viết mã HTML, CSS và Javascript trong trình duyệt và sử dụng miễn phí. Nó cũng sẽ cho phép bạn xem các thay đổi của mình ngay lập tức.
2. Đánh dấu ngữ nghĩa
Trong chương này, bạn sẽ tìm hiểu về Đánh dấu ngữ nghĩa và cách tổ chức mã của bạn dựa trên nội dung của nó.
Cho đến gần đây, mã HTML thường được tổ chức với các thẻ. Điều này cho phép bạn tạo một nhóm các phần tử và sau đó áp dụng kiểu cho các phần tử đó.
Điều này đã hiệu quả, nhưng vẫn còn chỗ để cải thiện. Vấn đề với các thẻ là nó không có ngữ nghĩa. Div thực sự không có nghĩa gì cả.
Đánh dấu ngữ nghĩa là một tính năng mới trong HTML5. Nó mang lại các thẻ mới, hoạt động theo cách tương tự như thẻ 'div', nhưng dùng để gắn thẻ các phần chung của trang.
Vậy, chúng hoạt động như thế nào? Hãy xem xét đoạn mã sau.
Trong đoạn mã này, chúng ta có một thanh điều hướng, một tiêu đề và một danh sách. Điều này không quá khác với hầu hết các trang web mà bạn có thể đã từng truy cập khi bạn nghĩ về nó.
bàn phím và chuột chơi game cho ps4
Hãy xem một bài báo trên MakeUseOf. Bạn sẽ nhận thấy rằng có một phần của trang được dành hoàn toàn để điều hướng đến các bài viết khác. Bạn cũng sẽ nhận thấy rằng có một phần khác của trang chứa các từ cấu thành một bài báo. Ở đầu trang, bạn sẽ thấy tiêu đề chứa biểu trưng MakeUseOf và một số liên kết khác.
Khi bạn nghĩ về nó, rất nhiều trang web tuân theo các quy ước này. Hầu hết các trang web có một phần được dành riêng cho điều hướng. Chúng thường có một phần nội dung. Họ có nhiều khả năng có một tiêu đề.
Thẻ ngữ nghĩa là thẻ cho phép bạn xác định các phần của trang web thường được tìm thấy trên hầu hết các trang web. Họ không thêm bất kỳ thứ gì vào trang, nhưng cho phép bạn nhóm các thẻ dựa trên nội dung của chúng và áp dụng kiểu cho các nhóm đó.
Vì vậy, hãy nhớ rằng mã chúng ta đã có trước đây? Hãy xem nó với một số đánh dấu Ngữ nghĩa được thêm vào.
Như bạn có thể thấy, mã dễ đọc hơn nhiều. Bạn biết đó là những phần nào và không có sự mơ hồ. Điều này rất quan trọng, vì nó giúp bạn viết mã tốt và sạch sẽ dễ dàng hơn. Nếu bạn quyết định trở thành một nhà thiết kế web chuyên nghiệp, điều này trở nên tối quan trọng - bạn không bao giờ biết ai sẽ đọc tác phẩm mà bạn sản xuất.
Vì vậy, chúng ta hãy xem xét thêm một số thẻ đánh dấu ngữ nghĩa.
2.1 Phần
Phần là một thẻ thực sự hữu ích. Nó được sử dụng để thu thập một lượng lớn thông tin và nội dung được đánh dấu bằng tiêu đề hoặc tiêu đề. Hãy nghĩ về điều này giống như một chương trong một cuốn sách. Một chương có tiêu đề và cũng có thể chứa hình ảnh, sơ đồ, đồ thị và từ ngữ. Một thẻ phần sẽ được sử dụng để chứa tất cả những thứ đó.
2.2 Bài báo
Thẻ bài viết được sử dụng cho những gì nó nghe như thế nào; Chứa nội dung như một bài đăng trên blog hoặc một câu chuyện tin tức. Nội dung này có thể tách rời khỏi phần còn lại của blog mà vẫn có ý nghĩa mạch lạc.
2.3 Bên cạnh
Thẻ này được dành riêng cho nội dung có liên quan đến, nhưng không phải là một phần không thể thiếu của trang web. Đây có thể là một loạt các dữ kiện liên quan đến một câu chuyện tin tức hoặc tiểu sử của một người dùng trên blog.
2.4 Tiêu đề
Rất nhiều trang web có một thanh trên đầu trang chứa biểu tượng, một số thông tin liên quan đến trang web và có lẽ một số liên kết. Trong đánh dấu Ngữ nghĩa, bạn sẽ sử dụng thẻ Header để chứa tất cả những thứ này.
2,5 Nav
Phần tử này được dành riêng cho phần điều hướng của trang web của bạn. Điều này sẽ chứa các liên kết đến các trang web khác hoặc đến các trang khác trên trang web. Trong ngữ cảnh của MakeUseOf, đây có thể là một phần của trang nằm bên dưới tiêu đề.
2.6 Chân trang
Thẻ này được dành riêng cho phần dưới cùng của trang. Tại đây, bạn có thể đặt một số chi tiết liên hệ, thông tin bản quyền, bản đồ hoặc một số liên kết đến trang 'giới thiệu về tôi' của bạn.
2.7 Tự kiểm tra
- Đánh dấu ngữ nghĩa là gì và nó được sử dụng để làm gì?
- Tôi đang tạo một trang web và tôi muốn sử dụng một thẻ ngữ nghĩa để chứa tiểu sử về tôi. Tôi sử dụng cái nào?
3. Hình thức
Nếu bạn đã từng thực hiện một chút thiết kế web, bạn có thể biết cách tạo một biểu mẫu đơn giản trong HTML. Nếu bạn thực sự thông minh, bạn có thể biết cách lấy thông tin bạn nhận được từ biểu mẫu của mình và cách làm điều gì đó với nó, chẳng hạn như đưa nó vào cơ sở dữ liệu.
Hình thức rất quan trọng. Chúng là cơ sở của hầu hết những thứ chúng ta làm trên Internet. Mỗi khi bạn tạo cập nhật trạng thái trên mạng xã hội yêu thích của mình, mua thứ gì đó từ Amazon hoặc gửi email, có thể bạn đã sử dụng biểu mẫu HTML.
Điều bạn có thể không biết là cách chúng tôi tạo biểu mẫu đã thay đổi hoàn toàn trong HTML5. Nó cũng tốt hơn đáng kể. Trong chương này, chúng ta sẽ xem xét một số điều thú vị mà bạn có thể làm bây giờ, chỉ với đánh dấu cũ đơn giản.
Vậy, có gì hay ho về cách mới mà chúng ta có thể viết biểu mẫu trong HTML5? Thứ nhất, bạn có thể đảm bảo rằng một số trường phải được điền để gửi, chỉ bằng cách thay đổi đánh dấu của chính biểu mẫu. Ngoài ra, bạn không còn phải viết hàng núi JavaScript hoặc PHP để làm điều này. Nó dễ dàng một cách tầm thường.
Thứ hai, bạn có thể đảm bảo rằng người dùng của bạn chỉ có thể gửi một số loại thông tin nhất định vào biểu mẫu của bạn. Vì vậy, giả sử bạn có một trang web cho danh sách gửi thư của mình và bạn chỉ muốn mọi người có thể gửi địa chỉ email thực? Bạn có thể làm điều đó, chỉ bằng cách sử dụng HTML5. Nó thực sự là vô cùng mạnh mẽ.
Thứ ba, bạn có thể làm cho biểu mẫu của mình trông đẹp hơn bằng cách đặt chỗ dành sẵn cho các trường nhất định. Điều này sẽ làm cho chúng trực quan hơn đáng kể, vì bạn có thể hiển thị cho người dùng của mình một ví dụ về những gì bạn đang mong đợi cho một biểu mẫu.
3.1 Cải tiến biểu mẫu
Vì vậy, chúng ta hãy xem xét một biểu mẫu và xem chúng ta có thể làm cho nó tốt hơn như thế nào.
Hình thức này khá cơ bản. Nó cần có tên, email và màu sắc yêu thích, sau đó cho phép người dùng gửi điều đó. Nó không có xác thực về những thông tin được đưa vào nó và không có gì ngăn cản người dùng gửi biểu mẫu này với một số trường trống. Hãy thay đổi tất cả những điều đó.
Vì vậy, điều đầu tiên chúng tôi muốn làm là đảm bảo rằng trường email chỉ nhận một email. Đây thực sự là một nhiệm vụ khá khó khăn, vì bạn phải tạo đủ loại mã Regex phức tạp. Không còn nữa. Bạn chỉ cần thay đổi loại đầu vào từ 'văn bản' thành 'email'. Khi bạn cố gắng gửi biểu mẫu đó bằng những thứ vô nghĩa, nó sẽ phàn nàn và yêu cầu bạn gửi email.
3.2 Các kiểu và mẫu đầu vào
Có các loại đầu vào khác mà bạn có thể yêu cầu. Chúng bao gồm số điện thoại, địa chỉ web, biểu mẫu tìm kiếm và thậm chí cả bảng chọn màu! Vì HTML5 không ngừng phát triển, có lý do là chúng ta sẽ sớm có thể chỉ định nhiều kiểu đầu vào hơn trong tương lai gần.
Hơn nữa, đối với những thứ như số điện thoại thay đổi tùy theo địa phương, bạn có thể chỉ định các mẫu cho đầu vào. Chúng được tạo ra bằng cách sử dụng một thứ gọi là 'Biểu thức chính quy' và khá phức tạp, nhưng mạnh mẽ vô cùng.
Chúng tôi cũng sẽ muốn cung cấp một ví dụ về email trong lĩnh vực của chúng tôi, vì vậy người dùng không có sự mơ hồ về những gì họ phải gửi. Điều đó thực sự dễ dàng để làm. Chỉ cần tạo một thuộc tính mới của 'trình giữ chỗ' với một địa chỉ email mẫu.
Chúng tôi sẽ đảm bảo rằng trường 'Màu ưa thích' của chúng tôi là bắt buộc. Trong dấu ngoặc nhọn cuối cùng (>) trong thẻ nhập Email, chỉ cần viết 'bắt buộc'. Đó là nó. Bây giờ, khi bạn cố gắng gửi biểu mẫu của mình mà không có giá trị, nó sẽ tạo ra một thông báo lỗi.
Điều thực sự đáng kinh ngạc về những thông báo lỗi này là người dùng không phải viết chúng hoặc viết bất kỳ mã nào để tạo chúng. Bạn chỉ cần thay đổi một trường để làm cho nó bắt buộc và nó sẽ hoạt động. Với điều đó đã nói, bạn có thể tùy chỉnh chúng, nếu bạn muốn.
Đó là phần giới thiệu ngắn gọn đáng kinh ngạc về sức mạnh của các biểu mẫu trong HTML5. Nếu bạn muốn đọc thêm, tôi khuyên bạn nên truy cập các liên kết này.
Đọc thêm:
- Thủ thuật CSS - Hãy viết đánh dấu ngữ nghĩa
- Tiến sĩ HTML5 - Hãy nói về ngữ nghĩa
3.3 Tự kiểm tra
Tuần sau là sinh nhật của bạn và bạn muốn tạo một biểu mẫu đăng ký để biết mình cần tạo bao nhiêu chiếc bánh. Mở trình soạn thảo văn bản của bạn và tạo biểu mẫu với các trường sau.
- Tên
- Địa chỉ email
- Số điện thoại
- Dị ứng
Đảm bảo rằng các trường tên, email và số điện thoại là bắt buộc, đồng thời các trường Email và Số điện thoại được đặt với kiểu nhập 'email' và 'điện thoại'. Tạo trình giữ chỗ cho trường dị ứng với giá trị 'phấn hoa, trứng, bánh quiche'.
Chơi xung quanh với biểu mẫu. Hãy thử gửi các trường bắt buộc dưới dạng trống và thử chèn các ký tự không phải số vào trường số điện thoại. Trong trường email, hãy chèn một cái gì đó không phải là địa chỉ email. Điều gì xảy ra?
4. Trung bình
Đã từng có thời gian cách duy nhất để bạn có thể chèn một số video hoặc âm thanh vào trang web là sử dụng một thứ gì đó như Flash, Shockwave hoặc SilverLight.
Điều này không lý tưởng. Thứ nhất, không có khung nào trong số này hoạt động tốt trên các thiết bị di động. Chúng chỉ không được trang bị cho thế giới điện thoại thông minh và máy tính bảng hiện đại.
thẻ microsd hỗ trợ wi-fi là một ví dụ về loại thiết bị nào?
Ngoài ra, chúng là các định dạng độc quyền. Do đó, người dùng Linux và OS X có thể có được trải nghiệm hạng hai khá tốt hoặc thậm chí bị ngăn chặn việc sử dụng các dịch vụ đa phương tiện, vì nó không có sẵn cho nền tảng của họ.
Cuối cùng, họ có khuynh hướng chậm chạp. Nếu bạn đang sử dụng một máy tính kém hiệu quả hoặc cũ hơn, bạn sẽ không có trải nghiệm tốt khi xem video bằng các khung này. Flash đặc biệt nổi tiếng về điều này.
4.1 Cách HTML5 tạo ra video và âm thanh tuyệt vời
HTML5 đã thay đổi điều này bằng cách cho phép các nhà phát triển web đưa video và âm thanh vào các trang web của họ chỉ với một vài dòng mã. Nó hoạt động tốt trên thiết bị di động và hoạt động trên mọi trình duyệt web hiện đại.
Kết quả là, các công ty lớn như YouTube, Vimeo và Netflix đang tận dụng lợi thế của cuộc cách mạng HTML5. Tại sao bạn không tham gia cùng họ?
4.2 Giới thiệu về Codec
Trong chương này, bạn sẽ học cách sử dụng sức mạnh của HTML5 để đưa âm thanh và video vào các trang web của mình.
Đầu tiên, tôi sẽ phải bắt đầu với một lời cảnh báo. Mặc dù bạn có thể sử dụng video HTML5 trong mọi trình duyệt web hiện đại, nhưng nó không hoạt động giống nhau trên mỗi trình duyệt web. Các codec được sử dụng bởi mỗi trình duyệt khác nhau. Trong Internet Explorer, bạn bị hạn chế sử dụng video MP4. Chrome rộng rãi hơn một chút và cho phép bạn sử dụng video WebM, MP4 và Ogg Theora. Opera hạn chế hơn một chút và chỉ cho phép bạn sử dụng Theora và video WebM.
Do đó, bạn phải thông minh một chút với cách chèn video vào trang web của mình. Vì vậy, chúng ta hãy xem nó hoạt động như thế nào.
4.3 Bắt đầu với Video
Để bắt đầu, bạn sẽ cần tạo một số thẻ mở và thẻ đóng. Tại đây, bạn sẽ liên kết đến các tệp video của mình. Nhưng trước tiên, bạn sẽ muốn đặt một áp phích. Điều đó nghĩa là gì?
Chà, khi bạn đang chờ tải video của mình, người truy cập trang web của bạn có thể thấy hình ảnh liên quan đến video đó. Để làm điều đó, chỉ cần cung cấp cho thẻ video của bạn thuộc tính 'áp phích' với giá trị của hình ảnh mà bạn muốn liên kết đến. Nó sẽ giống như thế này.
Điều tiếp theo chúng tôi sẽ muốn làm là tạo một dự phòng. Điều đó có nghĩa là gì? Vì vậy, giả sử bạn đang sử dụng một trong những trình duyệt cũ hơn, kém tuyệt vời hơn trên mạng. Rất nhiều trình duyệt cũ này không hỗ trợ video HTML5 và do đó không thể phát video HTML5. Bạn sẽ muốn để lại cho họ một tin nhắn thông báo rằng họ sẽ muốn nâng cấp trình duyệt của mình và cho đến khi họ làm như vậy, họ sẽ không thể xem video của bạn.
Để làm điều đó, bạn chỉ cần viết thông điệp của mình vào bên trong các thẻ video. Không có gì khác được yêu cầu. Khi bạn đã hoàn thành việc đó, bạn sẽ còn lại một số mã trông giống như thế này.
Bây giờ, hãy thêm một số video. Tôi sẽ kiểm tra điều này trên Google Chrome, vì vậy tôi sẽ liên kết đến một bộ phim MP4. Để làm điều đó, tôi tạo thẻ Nguồn và cung cấp cho nó một thuộc tính src có giá trị video mà tôi muốn đưa vào.
Trang của tôi hiện đã sẵn sàng để mở trong trình duyệt web của tôi. Tôi đã liên kết với một bộ phim thực sự rất lớn và kết quả là khi mở ra, người ta chỉ có thể nhìn thấy áp phích.
4.4 Thêm âm thanh
Âm thanh có thể được chèn vào trang web của bạn theo cách rất gợi nhớ đến cách chúng tôi chèn video vào trang của mình.
Đầu tiên, người ta tạo một số thẻ âm thanh. Các thẻ âm thanh này chứa thuộc tính 'điều khiển'. Điều này cung cấp cho người dùng truy cập trang khả năng tạm dừng, phát tua lại và tua đi nhanh âm thanh đang được phát.
Sau đó, bạn đưa thẻ nguồn vào tệp MP3 mà bạn muốn liên kết đến. Bạn không thực sự phải lo lắng nhiều về khả năng tương thích codec. Hầu hết các trình duyệt web gần đây đều có khả năng phát âm thanh MP3, mặc dù thực tế tốt là bạn cũng nên bao gồm tệp '.ogg' và '.wav' - đề phòng trường hợp này.
Cuối cùng, bạn có thể tạo dự phòng cho các trình duyệt cũ hơn. Điều này được thực hiện theo cùng một cách mà bạn đã tạo dự phòng cho video của mình.
Kết quả cuối cùng trông giống như thế này.
Khi bạn mở nó trong trình duyệt web của mình, nó sẽ trông giống như thế này.
4.5 Tự kiểm tra
- Mục đích của việc có áp phích trong thẻ video của bạn là gì?
- Bạn không thể sử dụng codec nào trong Internet Explorer?
- Nếu tôi muốn có khả năng tạm dừng một số âm thanh, bạn sẽ thêm thuộc tính nào vào thẻ 'âm thanh' của mình?
Đọc thêm:
5. Chuyển đổi và hoạt ảnh CSS3
CSS theo truyền thống được sử dụng để xử lý bố cục và thiết kế của một trang web. Điều này vẫn đúng, nhưng trong lần lặp lại mới nhất, nó đã có được khả năng xử lý các hoạt ảnh và biến đổi của các yếu tố và hình ảnh.
Mọi người đã làm được một số điều đáng kinh ngạc với CSS3, từ tạo đồng hồ kỹ thuật số đến viết một trò chơi Pong đầy đủ. Ai đó thậm chí còn sử dụng nó để tạo lại các phần giới thiệu cho Mad Men. Đó là một công nghệ thực sự mạnh mẽ và khi thành thạo nó có thể được sử dụng để thêm một cấp độ chức năng tuyệt vời vào trang web của bạn.
Trong chương này, tôi sẽ giới thiệu sơ qua về CSS3 và hướng dẫn bạn cách thêm một số hiệu ứng tuyệt vời vào trang của bạn.
Đầu tiên, điều hướng đến codepen.io và tạo một cây bút mới. Chúng tôi sẽ sử dụng điều này làm không gian làm việc của mình trong suốt chương này.
Chúng ta sẽ bắt đầu đơn giản và tạo một phép biến đổi hình ảnh đơn giản có thể xoay hình ảnh 3 độ khi di chuột. Trước hết, hãy tạo một thẻ div và cung cấp cho nó một ID. Trong ví dụ dưới đây, tôi đã cấp cho nó một ID là 'muo'.
5.1 Hiệu ứng di chuột CSS
Trong div đó, hãy bao gồm một hình ảnh mà bạn chọn. Tôi đã gửi kèm một bản sao của logo cho MakeUseOf.
Sau đó, bạn sẽ cần viết một số quy tắc biểu định kiểu. Trong ví dụ dưới đây, tôi đã tạo lề trên và lề trái để tạo cho hình ảnh một khoảng trống. Tôi cũng đã bao gồm một quy tắc biểu định kiểu trông tò mò bắt đầu bằng '#muo: hover'. Đó là gì?
Khi bạn đính kèm ': hover' vào quy tắc biểu định kiểu, có thể là với một phần tử, một ID hoặc một lớp, bạn đang yêu cầu trình duyệt áp dụng kiểu này một cách hiệu quả khi con chuột của bạn điều chỉnh phần tử đó. Khá tuyệt, phải không?
Bên trong quy tắc '#muo: hover', chúng tôi có một dòng có nội dung '-webkit-biến đổi: xoay (3deg)'. Như tôi chắc chắn bạn đã đoán, điều này đang yêu cầu trình duyệt xoay phần tử div đó ba độ.
Tuy nhiên, cần lưu ý rằng thẻ này chỉ hoạt động trong Chrome và Safari. Nếu bạn muốn mã của mình hoạt động trong Firefox hoặc Internet Explorer 9 trở lên, bạn sẽ muốn thay đổi tệp CSS của mình để bao gồm các dòng sau.
Bây giờ, khi bạn di chuột qua hình ảnh, nó sẽ giống như sau:
5.2 Sử dụng CSS3 để thay đổi kích thước hình ảnh
Vì vậy, tại sao dừng lại ở đó? Bạn có biết rằng bạn cũng có thể sử dụng phương pháp 'biến đổi' để phóng to hoặc thu nhỏ hình ảnh. Hãy thay đổi tệp CSS của chúng tôi để bao gồm các dòng sau.
Như bạn có thể thấy, chúng tôi hiện đã đưa vào một quy tắc chuyển đổi mới, nhưng lần này chúng tôi yêu cầu nó thực hiện một thứ gọi là 'quy mô'. Đây là một cách thực sự đẹp để tăng kích thước của hình ảnh. Nó có hai tham số (những con số bạn nhìn thấy ở giữa các dấu ngoặc đơn đó) và chúng đại diện cho số lượng mà bạn tăng chiều cao và chiều rộng của phần tử.
Như bạn có thể thấy từ mã, tôi sẽ tăng kích thước của biểu tượng div MakeUseOf lên 50%. Bạn có thể kiểm tra hoạt động này bằng cách di chuột qua nó. Bạn sẽ thấy rằng bây giờ logo 'MakeUseOf' đã được kéo dài hơn đáng kể.
Đây là một giới thiệu rất nhẹ nhàng về các phép biến đổi CSS3. Mặc dù CSS3 thực sự rất mới, nhưng bây giờ bạn có thể thấy rằng bạn có thể thực hiện nhiều thao tác rất thú vị với nó.
5.3 Tự kiểm tra
- Làm cách nào để chúng tôi áp dụng kiểu cho một phần tử khi di chuột?
- Làm cách nào để bạn xoay một hình ảnh bằng CSS3?
- Làm cách nào để bạn chia tỷ lệ hình ảnh bằng CSS3?
- Điều gì xảy ra nếu bạn chuyển phương thức chuyển đổi 'translate (50px, 50px)'?
Đọc thêm:
6. Javascript vừa đủ
Nếu bạn muốn sử dụng script trong trình duyệt web của mình, bạn phải sử dụng Javascript. Không có hai cách về nó, thật đáng buồn. Đó là một ngôn ngữ có nhiều người hâm mộ và cũng có nhiều người gièm pha. Khi ngôn ngữ đi, nó có nhiều mụn cóc. Có một lý do khiến cuốn sách đáng chú ý nhất về ngôn ngữ này được gọi là 'Javascript: The Good Parts'.
Sẽ không thể dạy bạn cách sử dụng Javascript trong một chương duy nhất. Đó không phải là mục đích ở đây. Mục đích là dạy cho bạn đủ Javascript để bạn có thể hiểu chương tiếp theo, đó là về việc sử dụng một công nghệ gọi là Canvas để tạo các bản vẽ và hoạt ảnh.
6.1 Truy cập Bảng điều khiển
Để làm điều này, chúng tôi sẽ sử dụng bảng điều khiển Javascript được tích hợp trong mọi bản sao của Google Chrome. Để truy cập vào phần này, bạn có thể nhấp chuột phải vào bất kỳ trang web nào và sau đó nhấn 'Kiểm tra phần tử'. Sau đó nhấp vào 'Bảng điều khiển'. Bạn nên xem thứ này.
Theo truyền thống, chương trình đầu tiên mà bất kỳ nhà phát triển mới bắt đầu nào từng viết là chương trình 'Hello World'. Đây là một chương trình đơn giản có in cụm từ 'Hello World' và không có nhiều thứ khác. Trong bảng điều khiển của bạn, nhập 'console.log (' Hello world! ') ;.
6.2 Chương trình đầu tiên của bạn
Vậy, chính xác thì chúng ta đã làm gì? Đầu tiên, chúng tôi gọi một thứ gọi là 'console.log'. Đây là một đoạn mã được tích hợp sẵn trong máy tính, chỉ đơn giản là in ra bất cứ thứ gì bạn yêu cầu. Sau đó, chúng tôi đính kèm một số dấu ngoặc đơn vào nó và đưa vào dấu ngoặc kép 'Hello World'. Điều này được gọi là 'truyền đối số' và loại đối số mà chúng ta đã truyền được gọi là chuỗi. Bất cứ khi nào bạn muốn làm điều gì đó liên quan đến chữ cái và các ký tự đặc biệt, bạn chỉ cần sử dụng dấu ngoặc kép. Tuy nhiên, nếu bạn muốn làm bất cứ điều gì bằng cách sử dụng số, bạn thường không cần sử dụng dấu ngoặc kép, như hình dưới đây.
6.3 Các biến trong JavaScript
Bạn cũng có thể chuyển các biến vào 'console.log'. Các biến nghe có vẻ phức tạp, nhưng tất cả những gì chúng thực sự là không gian để chứa các khối thông tin. Đây thường là số hoặc chữ cái. Để làm điều đó, bạn khai báo một biến bằng cách sử dụng từ khóa 'var', đặt tên cho nó và sau đó với dấu bằng, bạn cung cấp cho nó một giá trị. Vì vậy, tôi sẽ tạo một biến có tên là 'hello' và sau đó đặt cho nó một giá trị là 'Hello World!'. Sau đó, tôi sẽ chuyển nó sang console.log.
Lưu ý rằng tôi đã không chuyển 'hello' vào console.log bằng cách sử dụng dấu ngoặc kép. Đó là bởi vì tôi muốn in ra bảng điều khiển nội dung của 'hello' chứ không phải 'hello'.
6.4 Chức năng làm gì
Có thể hơi tẻ nhạt khi viết đi viết lại cùng một đoạn mã, vì vậy đó là lý do chúng tôi viết các hàm. Các chức năng dễ dàng hơn bạn nghĩ. Tất cả chúng là những đoạn mã mà chúng ta có thể sử dụng lại mà không cần viết lại cùng một đoạn mã. Dưới đây, chúng tôi đã tạo một hàm có tên là 'sup' và đang chuyển cho nó một đối số bằng cách sử dụng dấu ngoặc đơn sau đó được ghi vào màn hình. Chúng tôi gọi 'sup' bằng cách gửi đến bảng điều khiển 'sup (' Hello world! ');'.
6.5 Lặp lại một hành động với một vòng lặp 'For'
Giả sử bạn muốn thực hiện cùng một hành động trong một số lần nhất định. Đó là lý do tại sao chúng tôi sử dụng vòng lặp 'for'. Thoạt nhìn chúng có vẻ đáng sợ, nhưng rất dễ thực hiện khi bạn hiểu chúng. Bạn bắt đầu bằng cách viết 'for ()'.
Trong dấu ngoặc đơn đó, chúng ta sẽ muốn tạo một biến đếm số lần chúng ta đã thực hiện một hành động. Vì vậy, chúng tôi nhận được một cái gì đó trông giống như sau 'for (var i = 0;)'.
Sau đó, chúng tôi muốn kiểm tra xem tôi đã không đáp ứng một điều kiện nào chưa. Vì vậy, trong trường hợp này, chúng tôi muốn thấy rằng nó nhỏ hơn 10. Vì vậy, sau dấu chấm phẩy, chúng tôi viết 'i<10'. Our loop now looks like this: 'for(var i = 0; i < 10;).
Nếu tôi nhỏ hơn 10, chúng tôi muốn thêm nó từng cái một và sau đó làm điều gì đó. Vì vậy, chúng tôi đặt 'i = i + 1'. Vòng lặp của chúng ta gần như đã hoàn thành: 'for (var i = 0; i<10; i = i + 1)'. Note how the last part does not have a semicolon.
Sau đó, chúng tôi sẽ muốn thực hiện một hành động. Vì vậy, sau dấu ngoặc đơn cuối cùng, chúng ta viết một số dấu ngoặc nhọn và ở giữa chúng, chúng ta sẽ console.log giá trị của i. Điều này sẽ tạo ra một bộ đếm có số đếm lên đến chín.
Hai cấu trúc lập trình cuối cùng mà chúng ta sẽ xem xét là câu lệnh 'if' và vòng lặp 'while'.
6.6 Câu lệnh If
Câu lệnh 'if' thực hiện một hành động nếu một số tiêu chí nhất định được đáp ứng. Chúng tương tự như các vòng lặp 'for' trong xây dựng và hoạt động như sau. Giả sử bạn có một biến gọi là 'bánh mì kẹp thịt phô mai' và bạn muốn xem liệu nó có giá trị là 'ngon' hay không. Nếu có, bạn muốn đăng nhập 'yum, cheeseburgers' vào màn hình. Để làm điều đó, bạn sẽ viết một cái gì đó như thế này.
Lưu ý cách tôi đã viết 'if (cheeseburgers ==' ngon ')'. Bạn sử dụng các dấu bằng kép hoặc gấp ba để kiểm tra sự bằng nhau và các dấu bằng đơn để chỉ định một giá trị.
6.7 Vòng lặp trong khi
Cuối cùng, vòng lặp 'while' thực hiện một hành động trong khi một tiêu chí được đáp ứng. Vì vậy, hãy tưởng tượng bạn muốn ghi 'yum, bánh mì kẹp thịt phô mai' trong khi bánh mì kẹp thịt phô mai ngon như nhau. Để làm điều đó, bạn sẽ viết như sau.
Cần lưu ý rằng điều này sẽ đi vào một vòng lặp vô hạn và bạn nên tránh thực hiện một hành động trên một giá trị không có khả năng thay đổi. Điều này có thể khiến trình duyệt của bạn bị khóa hoặc mã của bạn không hoạt động.
Như tôi đã đề cập trước đây, đây là một giới thiệu rất ngắn gọn về các cấu trúc lập trình trong Javascript. Bạn được khuyến khích đọc thêm về chủ đề hấp dẫn, mặc dù rất lớn này.
6.8 Tự kiểm tra
- Tôi muốn đếm ngược từ 30. Viết một vòng lặp 'for' để làm điều đó.
- Tôi muốn tạo một biến có tên là 'makeuseof' và đặt cho nó một giá trị là 'awesome'. Điều đó được thực hiện như thế nào?
- Tôi muốn tạo một hàm in 'MakeUseOf Is Awesome' khi được gọi. Viết hàm đó.
Đọc thêm:
- Javascript: Những phần hay bởi Douglas Crockford
- Hướng dẫn Javascript MDN
7. Canvas sáng tạo
Canvas là một công nghệ thú vị cho phép bạn vẽ hình ảnh và tạo hoạt ảnh mà không cần phải sử dụng Flash hoặc Silverlight. Mọi người đã sử dụng nó để tạo ra những thứ kỳ lạ và tuyệt vời, bao gồm một máy mô phỏng máy sấy tóc và các trò chơi điện tử khác nhau. Đó là một phần công nghệ lớn tuyệt vời và không thể tin được, trong hướng dẫn này, tôi sẽ giới thiệu ngắn gọn cho bạn về nó.
Cần lưu ý rằng Canvas chỉ hoạt động trên các trình duyệt web hiện đại. Nếu bạn đang sử dụng phiên bản cũ của IE, Chrome hoặc Firefox, bạn có thể không theo dõi được chương này. Nếu đúng như vậy, bạn nên xem xét tải xuống phiên bản Google Chrome mới nhất, đây là trình duyệt web mà tôi đã tạo hướng dẫn này.
7.1 Bắt đầu với Canvas
Trước hết, bạn sẽ cần mở trình duyệt web của mình và điều hướng đến codepen.io. Tạo một cây bút mới.
Bây giờ, chúng ta sẽ phải khai báo một phần tử canvas. Tạo hai thẻ Canvas mở và đóng. Trong chúng, bạn nên chuyển cho nó ba thuộc tính. Đây là chiều rộng và chiều cao của phần tử Canvas, cùng với ID bạn đang cung cấp cho nó. Giống như trước đây khi bạn chèn một số video, bạn nên bao gồm một thông báo dự phòng.
Bây giờ, chúng ta sẽ muốn viết một số mã Javascript để vẽ một cái gì đó ra màn hình. Chúng ta sẽ bắt đầu cơ bản và tạo một hình vuông màu đỏ đơn giản.
Chúng ta sẽ tạo một biến (tôi gọi nó là 'demo'), sau đó chọn phần tử canvas và gán nó cho biến đó. Để làm điều đó, bạn sử dụng document.getElementByID () và nhập ID của phần tử bạn muốn chọn.
Dòng thứ hai trong tập lệnh của chúng tôi tạo một biến khác có tên là 'context' và sau đó gọi 'demo.getContext (' 2d ')' trên đó. Điều này cho trình duyệt biết rằng chúng tôi sẽ làm việc trên hình ảnh 2d, sau đó chuyển các chức năng cần thiết mà chúng tôi cần để vẽ lên màn hình.
Dòng thứ ba và thứ tư là những dòng thực sự vẽ ra màn hình. Dòng thứ ba tô một hình chữ nhật với màu đỏ, trong khi dòng thứ tư gọi fillRect, vị trí của nó và xác định chiều dài và chiều rộng của nó.
Đó không phải là ấn tượng mặc dù. Hãy làm điều gì đó nâng cao hơn một chút và sử dụng sự kỳ diệu của Javascript và Canvas để tạo MakeUseOf một logo hoàn toàn mới.
7.2 Hình dạng và Văn bản
Hãy xóa dòng thứ tư của chúng ta và thay thế nó bằng một dòng đặt hình chữ nhật của chúng ta ở góc trên cùng bên trái và kéo dài nó ra theo chiều dài của canvas.
Hai đối số đầu tiên xác định vị trí mà chúng ta muốn đặt trục x và y của hình dạng. Bây giờ chúng ta hãy đặt hai cái này thành '0'. Đối số thứ ba đề cập đến chiều rộng của hình dạng. Hãy đặt điều đó thành '200', và sau đó để đối số thứ tư thành '50'. Bây giờ bạn sẽ có một cái gì đó trông giống như thế này.
Đây là một khởi đầu tuyệt vời, nhưng nó hoàn toàn không đề cập đến MakeUseOf. Vì vậy, chúng tôi sẽ thêm một số văn bản. Hãy tạo một biến có chứa 'makeuseof' và chúng ta sẽ gọi biến đó là 'MakeUseOf'.
Sau đó, chúng tôi sẽ muốn tạo một biến ngữ cảnh khác. Gọi cái này là 'context2' và đảm bảo rằng nó là 2d. Đó là điều mà chúng tôi sẽ sử dụng để viết văn bản của chúng tôi.
Chúng ta sẽ muốn văn bản của chúng ta có màu xanh lam và phủ lên hình vuông màu đỏ của chúng ta. Vì vậy, giống như trước đây, chúng tôi sẽ muốn cung cấp cho nó một FillStyle là 'xanh lam'. Bây giờ, chúng ta sẽ chọn các đặc điểm của văn bản của chúng ta. Chúng tôi muốn nó có kích thước lớn 20px, được định dạng đậm và sử dụng phông chữ Arial. Chúng tôi gọi phông chữ trên context2 và gán cho nó giá trị 'đậm 20px arial'.
Bởi vì chúng tôi muốn văn bản này phủ lên hộp màu đỏ trước đó của chúng tôi, chúng tôi cần gọi 'textBaseLine' trên context2 và đặt cho nó một giá trị ở trên cùng. Sau khi hoàn tất, chúng tôi gọi 'fillText' trên context2 và chuyển nó vào biến chứa văn bản của chúng tôi và tọa độ x và y mà chúng tôi dự định đặt văn bản của mình. Kết quả cuối cùng của mã của chúng tôi là một cái gì đó như thế này.
Hình ảnh được tạo ra bởi mã trông như thế này.
7.3 Một Từ Trên Canvas
Mặc dù đây là phần giới thiệu cực kỳ cơ bản về Canvas, nhưng bạn nên hiểu rằng nó cũng là một công nghệ cực kỳ lớn và là một công nghệ cực kỳ mạnh mẽ để khởi động. Hướng dẫn này chỉ đơn giản là phần giới thiệu về cách tạo đồ họa bằng công nghệ mới này.
cách chơi với bạn bè trên minecraft java
7.4 Tự kiểm tra
- Thêm khẩu hiệu sau vào hình ảnh bạn đã tạo: 'Trang web công nghệ tốt nhất từ trước đến nay!'
- Tạo một vòng lặp 'for' chạy trong mười lần lặp. Xem liệu bạn có thể di chuyển bản vẽ của mình xuống canvas, một pixel tại một thời điểm.
- Kết hợp bản vẽ của bạn trong một hàm. Điều gì xảy ra nếu bạn không gọi nó?
Đọc thêm:
8. Tiếp theo ở đâu?
Cảm ơn bạn đã đọc hướng dẫn cực kỳ ngắn gọn của tôi về các công nghệ mới được tìm thấy trong HTML5. Không thể phủ nhận rằng HTML5 là công nghệ của tương lai. Nó đang được hầu hết công nghệ áp dụng, vì nó dễ viết và mạnh mẽ vượt trội. Mọi người đang làm những điều đáng kinh ngạc với nó mọi lúc, và tôi không nghi ngờ gì rằng trong tương lai, bạn sẽ là một trong những người đó. Tôi rất vinh dự khi được tham gia vào cuộc hành trình của bạn vào thế giới hoang dã và tuyệt vời của HTML5.
Tôi cầu xin bạn tiếp tục học hỏi. Tiếp tục viết mã. Tiếp tục nâng cấp và cải thiện, và bạn sẽ nhanh chóng sử dụng các công nghệ đã được giới thiệu trong hướng dẫn ngắn này để tạo ra các sản phẩm tuyệt vời.
Đăng lại Đăng lại tiếng riu ríu E-mail Nâng cấp lên Windows 11 có đáng không?Windows đã được thiết kế lại. Nhưng điều đó có đủ thuyết phục bạn chuyển từ Windows 10 sang Windows 11?
Đọc tiếp Chủ đề liên quan- Wordpress & Phát triển Web
- HTML5
- Longform
- Hướng dẫn Longform
Matthew Hughes là nhà phát triển và nhà văn phần mềm đến từ Liverpool, Anh. Anh ấy hiếm khi được tìm thấy nếu không có một tách cà phê đen đậm đà trên tay và hoàn toàn yêu thích Macbook Pro và máy ảnh của anh ấy. Bạn có thể đọc blog của anh ấy tại http://www.matthewhughes.co.uk và theo dõi anh ấy trên twitter tại @matthewhughes.
Xem thêm từ Matthew HughesTheo dõi bản tin của chúng tôi
Tham gia bản tin của chúng tôi để biết các mẹo công nghệ, đánh giá, sách điện tử miễn phí và các ưu đãi độc quyền!
Bấm vào đây để đăng ký