Vào cuối những năm 90, Internet Explorer và Netscape đã chiến đấu để giành được vị trí tối cao của Web trong thời kỳ được gọi là “cuộc chiến trình duyệt”. Đây là một thời gian tồi tệ, vì những đối thủ này đang cố gắng thu phục người dùng bằng cách giới thiệu vô số tính năng mới không tương thích trên các trình duyệt. Kết quả là các trang web chỉ hoạt động trong một trình duyệt hoặc có hai các phiên bản khác nhau để hỗ trợ cả những người chơi chính. Đây là một cơn ác mộng đối với các nhà phát triển web và nó gây tổn hại những người dùng.
Được thành lập vào năm 1998, WaSP đã vận động để triển khai tiêu chuẩn trên các trình duyệt khác nhau và cách tiếp cận dựa trên tiêu chuẩn để thiết kế web. Mục đích là giảm chi phí và độ phức tạp của web phát triển và tăng khả năng truy cập của các trang web bằng cách làm cho nội dung web nhất quán hơn và tương thích hơn trên các thiết bị và công nghệ hỗ trợ. Họ đã vận động các nhà cung cấp trình duyệt và công cụ để cải thiện hỗ trợ cho các web standard do World Wide Web Consortium (W3C) đề xuất, chẳng hạn như HTML và CSS.
Lưu ý: World Wide Web Consortium, hoặc W3C, là một cộng đồng quốc tế phát triển các tiêu chuẩn để đảm bảo sự phát triển lâu dài của Web. Nói theo cách riêng của nó, “Nhiệm vụ của W3C là dẫn dắt World Wide Web phát huy hết tiềm năng của nó bằng cách phát triển các giao thức và các nguyên tắc đảm bảo sự phát triển lâu dài của Web. ”
Và họ đã gặt hái được nhiều thành công. Chuyển tiếp sang thời hiện đại và các web standard nhất quán được triển khai trên tất cả các trình duyệt chính. Mặc dù đôi khi bạn vẫn nhận được trình duyệt có chút kỳ lạ hành vi, nó tốt hơn hàng dặm so với nó. Bây giờ chúng ta hãy cùng tìm hiểu sơ lược về các web standard thực sự là gì.
Các web standard là gì?
Chúng ta sử dụng các tiêu chuẩn hàng ngày mà không nhận ra nó. Ví dụ: khi chúng tôi mua một bóng đèn, chúng tôi biết rằng nếu chúng ta mua bóng đèn có đinh vít hoặc lưỡi lê, nó sẽ phù hợp với các phụ kiện ánh sáng của chúng ta khi chúng ta về nhà. Tiêu chuẩn đảm bảo rằng bóng đèn chúng tôi mua không quá lớn hoặc quá rộng một chút để vừa với thiết bị chiếu sáng của chúng tôi.
Các tiêu chuẩn đều có xung quanh chúng ta: nhìn vào phích cắm trong nhà của bạn, xếp hạng công suất của các thiết bị của bạn và các phép đo thời gian, khoảng cách và nhiệt độ được mọi thứ trong xã hội chúng ta sử dụng.
Các web standard lấy từ cùng một nguyên tắc. Như các nhà sản xuất trình duyệt và nhà phát triển web có tiến tới việc nắm bắt các tiêu chuẩn, nhu cầu viết đánh dấu dành riêng cho trình duyệt đã giảm bớt. Bằng cách sử dụng HTML có cấu trúc tốt để đánh dấu nội dung và CSS để kiểm soát bản trình bày, bây giờ chúng ta có thể thiết kế một trang web sẽ hiển thị nhất quán trên các trình duyệt tuân thủ tiêu chuẩn bất kể hệ điều hành (mặc dù thỉnh thoảng vẫn tồn tại tình trạng kỳ quặc).
Quan trọng không kém, khi cùng một đánh dấu được hiển thị bởi các trình duyệt kém khả năng hơn, không tuân thủ tiêu chuẩn — trong các trình duyệt dựa trên văn bản hoặc trên thiết bị di động cũ hơn— nội dung vẫn có thể truy cập được. Các web standard giúp chúng ta tiết kiệm thời gian với tư cách là nhà thiết kế và cho phép chúng ta ngủ vào ban đêm, an toàn khi biết rằng kiệt tác được chế tạo cẩn thận của chúng tôi có thể truy cập được bất kể ai là người xem nó trên trình duyệt nào và nền tảng nào.
Tại sao sử dụng các web standard?
Có lẽ một câu hỏi tốt hơn để hỏi là, “Tại sao lại bỏ qua các web standard?” Lợi ích của việc sử dụng web phương pháp tiếp cận tiêu chuẩn rất hấp dẫn, tại sao bạn không sử dụng chúng?
Những lợi ích của việc sử dụng các web standard bao gồm những điều sau:
- Cắt giảm thời gian phát triển: Bạn có thể xây dựng một trang web duy nhất sẽ hoạt động trên tất cả các nền tảng, trình duyệt, thiết bị, v.v. Nếu không có tiêu chuẩn, bạn có thể phải phát triển một trang web khác cho mỗi trình duyệt, v.v.
- Tạo các trang web dễ cập nhật và bảo trì: Với các web standard và các phương pháp hay nhất. Ví dụ: có thể cập nhật một tệp CSS để thay đổi kiểu cho toàn bộ trang web gồm nhiều HTML các trang. Trước khi điều này là chuẩn mực, chúng tôi đã sử dụng để đưa thông tin tạo kiểu vào bên trong HTML, có nghĩa là thay đổi thông tin trên mọi trang. Điều này thực sự lặp đi lặp lại và bất tiện.
- Cải thiện thứ hạng của công cụ tìm kiếm: Nội dung bên trong HTML dựa trên văn bản và do đó có thể đọc được bởi các công cụ tìm kiếm. Ngoài ra, viết bản sao tốt và sử dụng HTML ngữ nghĩa (như tiêu đề) một cách thích hợp có thể cung cấp nhiều trọng lượng hơn cho các từ khóa thích hợp và gửi các trang của bạn lên Google.
- Cải thiện khả năng truy cập: HTML và CSS được viết tốt giúp các trang web đa dạng dễ truy cập hơn nhóm người dùng như người khuyết tật, người sử dụng thiết bị di động, người kém kết nối băng thông, v.v.
- Bây giờ chúng ta đã hiểu rõ hơn về những lợi ích chính của phương pháp tiếp cận web standard, hãy cùng xem hai nguyên tắc mà chúng ta sẽ xem xét sâu hơn trong cuốn sách này: tầm quan trọng của việc đánh dấu ngữ nghĩa.
Semantic markup
Chúng tôi tin tưởng vào tầm quan trọng của đánh dấu ngữ nghĩa (đôi khi được gọi là POSH cho HTML ngữ nghĩa cũ thuần túy).
Chúng tôi tin rằng HTML là một yếu tố thiết kế và điều đó, trước khi thêm một lớp trình bày (giúp tăng cường đánh dấu cơ bản), điều quan trọng là tập trung vào việc xây dựng nền tảng vững chắc cho nội dung có cấu trúc tốt.
Đánh dấu ngữ nghĩa là tự mô tả và sử dụng các phần tử HTML chính xác cho công việc chính xác. Ví dụ bạn có thể đánh dấu một tiêu đề như thế này:
<div id = "header" style = "font-size: 300%; padding: 10px;"> Tiêu đề của tôi </div>
Chuyện nhỏ trên web: tách các lớp đó ra Mọi người đều yêu thích một món ăn vặt, đặc biệt là vào dịp lễ Giáng sinh.
Kịch bản / hành vi thành các lớp riêng biệt.
Ngữ nghĩa HTML cung cấp cấu trúc dữ liệu, một tập hợp nội dung sạch sẽ, dễ truy cập. HTML5 cung cấp điều này độc đáo. Bạn nên làm cho dữ liệu này có thể truy cập và sử dụng được, không có bất kỳ kiểu dáng của các cải tiến về kịch bản.
CSS cung cấp thông tin về kiểu dáng, lấy dữ liệu của chúng tôi và cung cấp cho nó bản trình bày trực quan mà chúng tôi sự mong muốn. CSS3 cung cấp nhiều công cụ mạnh mẽ hơn so với người tiền nhiệm của nó, CSS2.
JavaScript (bao gồm ngôn ngữ cơ sở và các API tập lệnh được xác định bên trong HTML5 và các nơi khác) cung cấp lớp tập lệnh / lớp hành vi, lớp này bổ sung các cải tiến về khả năng sử dụng và chức năng phong phú hơn đến các trang web.
Chấp nhận sự không chắc chắn
Bối cảnh trình duyệt đang phát triển nhanh chóng. Tuy nhiên, không giống như những ngày miền Tây hoang dã của cuộc chiến trình duyệt, bối cảnh ngày nay đang phát triển và hội tụ theo các tiêu chuẩn. Firefox, Safari, Opera, Chrome và, của tất nhiên, người bạn cũ IE của chúng tôi đều — phải thừa nhận là ở các mức giá khác nhau — tiến tới hỗ trợ tất cả các tính năng tiêu chuẩn mới bên trong HTML5, CSS3, v.v. Nhiều nhà phát triển web cũng đang hướng tới web các tiêu chuẩn và các thực hành tốt nhất liên quan của chúng, mặc dù nhiều tiêu chuẩn đang bị bỏ lại phía sau.
Nhưng giờ đây chúng ta có một loại hình không chắc chắn mới cần phải lo lắng: chúng ta không còn chỉ có các trình duyệt trên máy tính để bàn để ủng hộ. Số người truy cập Web khi đang di chuyển tăng nhanh qua thiết bị di động, máy tính bảng, TV, bảng điều khiển trò chơi và hơn thế nữa. Sự bùng nổ của các thiết bị như iPhone và iPad của Apple, Google Android các thiết bị, Blackberry, Wii, DS và TV hỗ trợ web của Philips và Sony đã nhường chỗ cho một tăng số lượng người truy cập Web khi đang di chuyển, trong phòng khách và tránh xa bàn làm việc.
Opera, những người tạo ra Opera Mini (một trong những nền tảng duyệt di động phổ biến nhất thế giới), báo cáo tăng trưởng đáng kể hàng năm (và hàng tháng) về lượng người dùng duyệt Web khi đang tăng nhanh. Cái này có vẻ sẽ phát triển theo cấp số nhân với sự gia tăng không ngừng của điện thoại thông minh.
Với rất nhiều thiết bị khác nhau để sử dụng nội dung web, việc dự đoán chính xác trang web của bạn sẽ trông như thế nào trên tất cả các thiết bị của người dùng. Thay vì ám ảnh về có khả năng kiểm soát hoàn hảo đến từng pixel, chúng tôi cần nắm bắt các vị trí không chắc chắn và thiết kế các trang web linh hoạt thích ứng với bối cảnh duyệt web khác nhau.
Thiết kế cho Web (kích thước màn hình, sự khác biệt về độ phân giải, độ sâu màn hình, phông chữ được cài đặt, v.v.), Allsopp khuyến khích các nhà thiết kế web vào thời điểm chuyển giao thiên niên kỷ nắm lấy tính khó đoán vốn có của web thiết kế và thiết kế cho một trang Web thiếu sự kiểm soát chính xác của vật liệu in.
Khuyến khích các nhà thiết kế web nhìn qua “đầu bên kia của kính hiển vi”, anh ấy điều chỉnh lại “quyền kiểm soát” của thiết kế in ấn như một “giới hạn”, nêu rõ “thực tế là chúng tôi có thể kiểm soát một trang giấy thực sự là một hạn chế của điều đó.
Trung bình.” Đọc lại; đó là một điểm tinh tế nhưng quan trọng.
Tua đi nhanh đến ngày hôm nay và chế độ xem này không quá bất thường. Tính lưu động của Web được nhiều người ca tụng nhiều người hơn những ngày này. Bạn vẫn sẽ gặp nhiều nhà thiết kế và khách hàng bị ám ảnh về thiết kế in ấn sự hoàn hảo của pixel trên Web, nhưng dễ dàng thuyết phục họ rằng cách linh hoạt là đúng, đặc biệt là bây giờ thiết bị duyệt web đa dạng hơn bao giờ hết.
Trang web năm 2007 của Dan Cederholm, Các trang web có cần phải trông giống nhau trong mọi trình duyệt, câu trả lời câu hỏi rõ ràng với câu trả lời kiên quyết “Không!”
Khả năng tiếp cận
Khả năng tiếp cận, đôi khi được rút ngắn thành a11y (một từ viết tắt hoặc dựa trên số: “a, sau đó là 11 chữ cái, sau đó là y ”), nên là một cơ sở trong cách tiếp cận của chúng tôi. Nắm bắt Đạo của thiết kế web mang theo nó nhiều lợi ích bao gồm khả năng tiếp cận rộng rãi hơn với nhiều đối tượng rộng hơn, đa dạng hơn. Chìa khóa của vấn đề này là xem xét cách những người dùng khác nhau sử dụng Web. Một số người sử dụng nó giống như bạn. Một vài mọi người sử dụng các thiết bị khác nhau hoặc có kết nối web chậm hơn. Một số người chỉ sử dụng bàn phím. Một vài mọi người sử dụng trình đọc màn hình để đọc các trang web cho họ. Một số người không thể nghe nội dung âm thanh.
Dù bạn làm gì, hãy làm quen với lượng người dùng web đa dạng. Đừng chỉ cho rằng tất cả mọi người những người khác sử dụng Web giống hệt như bạn. Chúng tôi nghĩ rằng khả năng tiếp cận là AGoodThing ™, vì vậy đừng ngạc nhiên khi thấy chúng tôi nêu bật một số
lợi ích (và những cạm bẫy tiềm ẩn) mà HTML5 mang lại cho bên hỗ trợ tiếp cận.
