Thảo luận Thành viên:Mxn/Trang Chính 4

Các trình duyệt

Thiết kế này cần trình duyệt hỗ trợ các tính năng CSS sau:

• Hộp dẻo
• Gradien
• Bóng văn bản
• Truy vấn phương tiện
• Chuyển tiếp

Thiết kế đã được thử trong các trình duyệt sau. Lưu ý rằng Wikipedia nói chung có nhiều vấn đề trong Dictionary 2.1 (không cuộn đuọc), iCab 3 (cứ lật đổ), và NetSurf và Amaya (không hỗ trợ JavaScript). Ngoài ra, iCab 3 rất ít sử dụng (chủ yếu là những máy Mac cổ). Đối với các kết quả ở dưới, thiết kế này chỉ còn thiếu sót ở các phần C và D.

Máy kết xuất	Trident			EdgeHTML	Gecko		WebKit					iCab	WebKit	Presto		NetSurf	Amaya	Dòng lệnh
Trình duyệt	IE			Edge	Firefox		Chrome	Safari	MobileSafari	Dictionary		iCab		Opera				Lynx	w3m
Phiên bản	6–7	8–9	10–11	20	4–27	28	18–24	5.1	5.1	2.1	2.2.1	3.0	4.8–5.0	12.0	12.1	2.9	11.4	2.8	0.5
a. Các hình nền	Có	Có	Có	Có	Có	Có	Có	Có	Có	Có	Có	Không có gradien	Có	Có	Có	Không có gradien	Tràn ra khỏi các hộp	—	?
b. Các đầu đề	Có	Có	Có	Có	Có	Có	Có	Có	Có	Có	Có	Xấu	Có	Có	Có	Xấu; không viết hoa	Không	Có	Có
c. Xếp lại thành 1–3 cột tùy chiều rộng cửa sổ	Bừa bãi	Bừa bãi	Có	Có	Có	Có	Có	Có	—	Có	Không	Bừa bãi	Có	Có	Có	Bừa bãi	Không	—	—
d. Căn đều các hàng hộp	Không	Không	Có	Có	Tùy thuộc	Có	Có	Tùy thuộc	Có	Tùy thuộc	Có	Không	Tùy thuộc	Tùy thuộc	Có	Không	Không	—	—
e. Hiện/ẩn các nút sửa đổi	Có	Có	Có	Có	Có	Có	Có	Có	—	Có	Không	?	Có	Có	Có	Không	Không	Có	Có
f. Các mũi tên chỉ cách mở rộng hình ảnh	Có	Có	Có	Có	Có	Có	Có	Có	—	Có	Không	?	Có	Có	Có	Không	Không	—	—
g. Mở rộng hình ảnh trong cửa sổ	Có	Có	Có	Có	Có	Có	Có	Có	Có	Không	Không	?	Có	Có	Có	Không	Không	—	—
h. Bố trí các năm sự kiện	Có	Có	Có	Có	Có	Có	Có	Có	Có	Có	Có	Có	Có	Có	Có	Có	Có	Có	Có
i. Bố trí các hình tượng dự án liên quan	Có	Có	Có	Có	Có	Có	Có	Có	Có	Có	Có	Có	Có	Có	Có	Có	Có	—	—
j. Mẹo vặt trên các dự án liên quan	Có	Có	Có	Có	Có	Có	Có	Có	—	Không	Không	?	Có	Có	Có	Không	Không	—	—
k. Tránh thanh cuộn trái/phải	Có	Có	Có	Có	Có	Có	Có	Có	—	Có	Không	Có	Có	Có	Có	Không	Có	—	—
l. Thanh cuộn lên/xuống	Có	Có	Có	Có	Có	Có	Có	Có	Có	Không	Có	Có	Có	Có	Có	Có	Có	Có	Có

• ✓ IE 10, Edge 20, Firefox 4–18, Chrome 18–23, Safari 5.1, MobileSafari 5.1, Opera 12.1, Lynx 2.8, w3m 0.5
• ≈ IE 8–9, IE 6–7, Opera 12.0, iCab 4.8–5.0, iCab 3.0, Dictionary.app 2.1
• ✗ Amaya, NetSurf

Kế hoạch

Tôi dự định phát triển một thiết kế Trang Chính mới để sử dụng trong tương lai, lúc khi các trình duyệt phổ biến hỗ trợ các tính năng CSS cần thiết và thiết kế của Prenn đã được sử dụng một vài năm.

Tôi cảm thấy rằng phần nhiều trang đầu Wikipedia – nhất là các thiết kế do tôi xây dựng trước đây – nhìn có vẻ nhạt nhẽo, thiếu cảm hứng. Các thiết kế có các hộp màu nhạt với đường khung màu xám, hoặc các đầu hộp màu nhạt và hình mẫu bong bóng. Có thể lý do phần lớn là vì phần mềm không hỗ trợ những cách sử dụng hình ảnh nâng cao, hoặc các cộng đồng không đánh giá hình dung nhiều. Dù sao, tôi muốn cho Wikipedia tiếng Việt đi đầu mở đường cho các wiki khác với một thiết kế hoàn toàn mới.

Biểu trưng Wikipedia là một trò chơi lắp hình, nhưng hình dung đặc biệt của trò chơi này chưa bao giờ được dùng làm cột trụ của một thiết kế. Trong thiết kế của tôi, mỗi hộp thông tin là mảnh lắp hình: các "nút" sẽ nhô ra hoặc thụt vào bốn cạnh của mảnh. Để cho thiết kế dễ thay đổi hơn, các nút mảnh sẽ được xây bằng CSS 3, chứ không phải hình ảnh. Các quy tắc CSS chưa được nhiều trình duyệt hỗ trợ nên có thể phải chờ đợi một chút để sử dụng thiết kế này.

Các "mảnh lắp hình" sẽ được bố trí như sau:

Bài viết chọn lọc		Hình ảnh chọn lọc
Tin tức	Ngày này năm xưa	Bạn có biết
Collage các lĩnh vực
Wikipedia	Wikimedia và các dự án

• Hộp BVCL sẽ có hai tên mũi để chuyển qua lại các tuần.
• Thay vì chèn hình nhỏ vào bên phải các hộp, sẽ có hình nền ở các đầu hộp, các hình này sẽ mờ dần xuống. Để không bắt những người dùng phải tải các hình rất lớn, các đầu hộp sẽ sử dụng các hình cắt ngang. Tôi sẽ xây dựng một công cụ bên Toolserver để giúp cắt hình và tự động tải lên hình mới.
• Hình chọn lọc sẽ tràn tất cả hộp HACL, bao gồm các nút nhô ra "mảnh lắp hình". Hình sẽ bị cắt bớt; khi nhấn chuột vào hộp, một hộp lớn sẽ nổi lên với tất cả hình và lời ghi chú.
• Các hộp danh sách sẽ bên cạnh nhau để dễ căn đều hơn.
• Hộp lĩnh vực sẽ có một hình collage bao gồm vào khoảng 5 lĩnh vực lớn.
• Không có hộp phiên bản ngôn ngữ riêng. Sẽ có một liên kết "Danh sách đầy đủ..." ở cuối danh sách liên kết liên wiki ở thanh bên trái.
• Hộp Wikipedia sẽ sử dụng các liên kết hiện có trong các hộp Bài viết/Trợ giúp trong lời giới thiệu dự án ngắn gọn.

 – Nguyễn Xuân Minh (thảo luận, đóng góp) 19:09, ngày 2 tháng 10 năm 2012 (UTC)

Việc thiết kế đang tiến nhanh lẹ. Tôi đã quyết định không làm cho thiết kế phỏng theo trò chơi lắp hình, tại vì các nút lắp hình mất nhiều khoảng cách quá, và thiết kế đã có vẻ náo nhiệt do các gradien. Những việc cần làm:

• Chỉnh lại vài chi tiết trong IE 9 và thử thiết kế trong IE 6–8. Tôi muốn người ta vẫn có thể sử dụng thiết kế dễ dàng trong IE 6–8, nhưng có lẽ không thể làm cho nó phù hợp với các trình duyệt hiện đại hơn.
• Viết kịch bản để cho phép xem các BVCL cũ trong hộp và mở rộng hộp HACL.
• Nếu cộng đồng vẫn muốn giữ phần chủ đề, tôi sẽ xây dựng khái niệm collage ở trên (sẽ có các nút lắp hình).
• Để cho các hình ảnh trong thiết kế không quá lớn, chúng ta cần cắt các hình ảnh và tải lên như các tập tin mới. Tôi sẽ xây một công cụ bên Toolserver để hỗ trợ công việc này. Tôi hy vọng rằng công cụ có thể sử dụng TUSC để tải hình ảnh trực tiếp lên Commons. Hiện có Cropbot bên Commons và Toolserver.

Ngoài tính độc đáo và thú vị, thiết kế này sẽ có nhiều điểm lợi:

• Cuối cùng dành chỗ cho Ngày này năm xưa.
• Không phải lo căn đều các hộp danh sách với BVCL.
• Gọn gàng, có khả năng tự động xếp lại để vừa bất cứ kích thước cửa sổ, chẳng hạn 640×480 điểm ảnh (1 cột), 800×600 (2 cột), 1024×768 (3 cột), mà không có thanh cuộn ngang. Hãy so sánh với đề nghị của Prenn: cột bên phải dễ bị hẹp hơn cột bên trái; cửa sổ hẹp hơn 713 điểm ảnh thì có thanh cuộn ngang.
• Không có phần Ngôn ngữ Wikipedia riêng; danh sách liên kết liên wiki sẽ có liên kết đến danh sách đầy đủ.
• Tương thích với các trình đọc màn hình dành cho người mù mắt vì không sử dụng bảng.

 – Nguyễn Xuân Minh (thảo luận, đóng góp) 10:25, ngày 17 tháng 10 năm 2012 (UTC)

Hướng dẫn chuẩn bị hình ảnh

Nhiều khi các hình ảnh được sử dụng trên Trang Chính không có kích thước vừa thiết kế "Ánh sáng". Trong bản xem trước này, tôi đã đưa vào các hình gốc và sử dụng CSS để ẩn các phần dư. Tuy nhiên, trình duyệt vẫn phải tải về hình gốc (hình nền của phần BVCL là 800×542 điểm ảnh), điều này có thể tốn nhiều thì giờ trên một kết nối chậm. Để khắc phục vấn đề này, mỗi tuần một thành viên sẽ phải cắt các phần dư khỏi hình trong công cụ Cropbot:

1. Sao chép mã nguồn JavaScript tại đây vào kịch bản common.js của bạn tại Commons.
2. Mở trang miêu tả hình ảnh mà bạn muốn đưa vào Trang Chính, và nhấn chuột vào "Crop image" ở thanh bên.
3. Đăng ký qua hệ thống gWatch hoặc TUSC.
4. Nhập tên của tập tin.
5. Quan trọng: Ở trang cắt hình, tắt tùy chọn "overwrite actual file".
6. Kéo chuột để chọn vùng để giữ:
   • Bài viết chọn lọc: Hình phải có kích thước 800×200 trở lên và tỷ lệ vào khoảng 4:1 (chiều rộng gấp 4 lần chiều cao). Trong tên tập tin mới, thay "(cropped)" bằng "(viwiki BVCL)".
   • Hình ảnh chọn lọc: Hình phải có kích thước 400×300 trở lên và tỷ lệ vào khoảng 4:3. Trong tên tập tin mới, thay "(cropped)" bằng "(viwiki HACL)".
   • Các hộp kia: Hình phải có kích thước 400×200 trở lên và tỷ lệ vào khoảng 2:1. Trong tên tập tin mới, thay "(cropped)" bằng "(viwiki)".
7. Bấm nút "Ok - crop this file".

Tôi chưa xây dựng các bản mẫu thật dành cho thiết kế này, nhưng bước cuối cùng sẽ giống như:

8. Điền [bản mẫu này] với các tên hình được cắt gọn.

Lưu ý rằng công cụ này chỉ hỗ trợ các hình JPEG, chứ không phải các hình GIF, PNG, SVG.

 – Nguyễn Xuân Minh (thảo luận, đóng góp) 05:39, ngày 25 tháng 8 năm 2013 (UTC)