Công cụ dành cho nhà phát triển · HTML WYSIWYG trình chỉnh sửa
Chi phí tiềm ẩn của việc đánh dấu lộn xộn: Khả năng truy cập, trọng lượng trang và thiết kế lại
· Tại sao nó quan trọng
html khả năng tiếp cận text-cleanup
Lập luận rằng các nhịp lồng nhau, phông chữ nội tuyến và các đoạn trống không mang tính thẩm mỹ: chúng phá vỡ công nghệ hỗ trợ, làm các trang cồng kềnh và khiến mọi việc thiết kế lại trở nên khó khăn hơn.
Thiết kế lại không thành công trên các bài viết cũ - mở ra bằng biểu định kiểu mới không thể ghi đè hàng nghìn kiểu nội tuyến
Một thiết kế lại có thể thay đổi mọi quy tắc tiêu đề đã được phê duyệt và vẫn khiến các bài viết cũ không nhất quán về mặt hình ảnh khi những bài viết đó chứa các kiểu cục bộ và các phần bao bọc ngẫu hứng. Toàn cầu CSS không thể dễ dàng quản lý bản trình bày được nhúng trong toàn bộ nội dung. ToolAcre xóa các thuộc tính kiểu và lớp, hiển thị mức độ phân đoạn phụ thuộc vào chúng.
Sự thay đổi trực quan mang lại là bằng chứng chứ không phải là kế hoạch di chuyển tự động. Một lớp bị loại bỏ có thể đã cung cấp ý nghĩa cần thiết thông qua một thành phần ứng dụng, trong khi một khai báo phông chữ nội tuyến có thể chỉ là vật trang trí dùng một lần. Cùng nhau xem lại nguồn và đích trước khi áp dụng tính năng dọn dẹp trên toàn bộ kho lưu trữ.
'Lộn xộn' thực sự có nghĩa là gì - định nghĩa nó một cách cụ thể: trình bao bọc dư thừa, trình bày nội tuyến, thẻ phi ngữ nghĩa và khoảng cách
Đánh dấu lộn xộn là cụ thể: các nhịp lồng nhau không có công việc ngữ nghĩa, trình bao bọc div chỉ được sử dụng cho khoảng cách, thẻ b và i kế thừa, kiểu nội tuyến, đoạn văn trống, thuộc tính sự kiện và các đoạn trình bày lặp lại. Chỉ số byte không phải là định nghĩa; cấu trúc không cần thiết hoặc sai lệch là vấn đề bảo trì.
ToolAcre mở các vùng chứa thông thường không được hỗ trợ, ánh xạ một số thẻ nội tuyến cũ sang các thẻ có ngữ nghĩa tương đương, xóa các thuộc tính bên ngoài danh sách từng phần tử và cân bằng cách lồng nhau được chấp nhận. Nó không phát hiện mọi phần tử được phép dư thừa. Hai phần tử mạnh lồng nhau có thể tồn tại vì cả hai đều là thành viên hợp lệ của từ vựng hẹp.
Khả năng truy cập: những gì người đọc màn hình nghe thấy - giải thích việc thiếu cấu trúc và tiêu đề giả ảnh hưởng đến việc điều hướng như thế nào
Khả năng truy cập bắt đầu bằng cấu trúc thực mà tác nhân người dùng và công cụ hỗ trợ có thể hiển thị. Đoạn in đậm vẫn là một đoạn văn, trong khi phần tử tiêu đề đi vào cấu trúc tiêu đề của tài liệu. Một chuỗi các dấu gạch ngang được gõ là văn bản; ul và li cung cấp các mối quan hệ danh sách mà máy có thể đọc được.
Đừng phóng đại những thông báo chính xác. Công nghệ hỗ trợ và cài đặt người dùng khác nhau và kho lưu trữ này không chứa ma trận kiểm tra trình đọc chéo. Đề xuất có thể bảo vệ là mã hóa ý nghĩa bằng các yếu tố thích hợp, giữ nguyên thứ tự tiêu đề hợp lý và kiểm tra đầu ra đại diện bằng cách sử dụng các công cụ trợ năng thực tế mà khán giả của bạn dựa vào.
Trọng lượng trang và hiển thị - mô tả cách đánh dấu cồng kềnh thêm byte và làm phức tạp bố cục
Đánh dấu bổ sung thêm các ký tự được truyền và phân tích cú pháp, nhưng bài viết này không cung cấp ngưỡng hiệu suất hoặc hình phạt hiển thị chung. Chi phí trực tiếp hơn chính là sự phức tạp: việc gỡ lỗi các bộ chọn và di chuyển trở nên khó khăn hơn khi các bài viết tương đương thể hiện cùng một ý tưởng thông qua các trình bao bọc không liên quan và các khai báo cục bộ.
ToolAcre đếm HTML ký tự đã được lọc sạch, có thể cho biết mức giảm sau khi lọc nhưng bộ đếm đó không phải là điểm chuẩn hiệu suất. Tốc độ trang phụ thuộc vào tài liệu, kiểu, tập lệnh, phương tiện, bộ nhớ đệm và thiết bị. Hãy coi nguồn nhỏ hơn là tín hiệu về khả năng bảo trì, sau đó đo lường trang thực trước khi đưa ra tuyên bố về hiệu suất.
Thiết kế lại và di chuyển - giải thích tại sao kiểu nội tuyến và đánh dấu một lần chống lại những thay đổi toàn cầu
Thiết kế lại biểu định kiểu hoạt động tốt nhất khi nội dung lặp lại sử dụng ngữ nghĩa ổn định và cách trình bày tập trung. Kiểu nội tuyến chống lại sự thay đổi màu sắc, khoảng cách và kiểu chữ tổng thể. Tên lớp không xác định có thể liên kết nội dung với một chủ đề đã ngừng hoạt động. Các khối trống và dấu ngắt thủ công sẽ duy trì các giả định về bố cục cũ trong thời gian dài sau khi mẫu xung quanh thay đổi.
Do đó, việc di chuyển nên tách biệt ý nghĩa khỏi cách trình bày. Giữ các cấp độ tiêu đề, đoạn văn, danh sách, trích dẫn, mã và các liên kết có chủ ý; di chuyển giao diện đã được phê duyệt vào các kiểu đích. Trình chỉnh sửa giúp kiểm tra từng đoạn nhưng không thể suy ra mô hình thành phần trên toàn trang web hoặc cập nhật hàng loạt các bản ghi được lưu trữ.
Ví dụ hoạt động: dọn dẹp một bài viết — lấy một bài viết đã dán, kiểm tra phần đánh dấu của nó và hiển thị một phiên bản sạch hơn với cùng giao diện
Lấy một bài viết được sao chép với một div được tạo kiểu, một tiêu đề in đậm giả, hai đoạn văn và các mục gạch ngang được đánh máy bằng tay. Quá trình lọc sẽ loại bỏ div, style và class nhưng không thể biết rằng dòng in đậm sẽ trở thành h2 hay dấu gạch ngang sẽ trở thành li. Một người phải xây dựng lại những lựa chọn ngữ nghĩa đó.
So sánh kết quả hình ảnh và nguồn sau mỗi lần chỉnh sửa. Thay thế tiêu đề giả bằng cấp độ tiêu đề đã chọn và dấu gạch ngang bằng danh sách thực tế, sau đó xác minh sơ đồ liên kết và ranh giới đoạn văn. Phiên bản sạch hơn có thể trông đơn giản hơn trong hộp cát vì đích CSS chưa được áp dụng.
Điều này không bao gồm — dọn dẹp hàng loạt tự động, kiến trúc CSS hoặc đo lường hiệu suất
Bài viết này không quy định thuật toán dọn dẹp hàng loạt, kiến trúc CSS hoặc ngân sách hiệu suất. Nó cũng không khẳng định chỉ riêng việc vệ sinh đã tạo ra nội dung có thể truy cập được. Văn bản thay thế, ngôn ngữ, mục đích liên kết, phân cấp tiêu đề và tính rõ ràng của biên tập yêu cầu thông tin nằm ngoài danh sách cho phép thẻ.
Các kho lưu trữ không đáng tin cậy cũng không được xuất bản chỉ vì ToolAcre đã chấp nhận các đoạn của chúng. Trình mã thông báo viết tay cảnh báo về sự khác biệt của trình phân tích cú pháp trình duyệt. Sử dụng trình khử trùng phía máy chủ được bảo trì theo chính sách của hệ thống tiếp nhận và kiểm tra kết quả được hiển thị riêng biệt với bản soạn thảo cục bộ.
Bài học rút ra: đánh dấu sạch sẽ rẻ hơn mỗi năm sau đó - tóm tắt trường hợp và cách kiểm tra đầu ra trong trình soạn thảo HTML WYSIWYG của ToolAcre ngăn chặn sự lộn xộn ở nguồn
Đánh dấu sạch sẽ dễ hiểu hơn mỗi năm sau khi xuất bản vì các biên tập viên trong tương lai có thể xác định cấu trúc mà không cần sử dụng kỹ thuật đảo ngược bản trình bày. Lợi ích sẽ tăng lên thông qua việc thiết kế lại, xuất và di chuyển ngay cả khi mức giảm byte ngay lập tức ở mức khiêm tốn.
Ngăn chặn tình trạng lộn xộn tại nguồn bằng cách kiểm tra đầu ra đại diện trước khi nó đi vào CMS. Sử dụng ToolAcre để hiển thị và lọc nội dung, sau đó cung cấp ngữ nghĩa còn thiếu một cách có chủ ý và tạo kiểu tại điểm đến. Xem lại sâu một bài viết trước khi nhân rộng bất kỳ chuyển đổi nào lên hàng nghìn.