Trường hợp cho HTML5: Năm ví dụ

Nếu bạn đã theo dõi blog này trong nhiều năm qua thì bạn đã biết tôi cảm thấy thế nào về HTML5 và CSS3 liên kết của nó, với cả hai đều là những cập nhật mới nhất về ngôn ngữ, kiểu dáng và công nghệ mã hóa trang web. Khi tiến trình tiếp tục với việc áp dụng HTML5 trong trình duyệt máy tính để bàn và máy tính bảng, các khả năng vẫn tồn tại trong khả năng mang lại trải nghiệm tiên tiến và tương tác người dùng. Nếu bạn chưa được bán với ý tưởng biến HTML5 thành một phần của tiêu chuẩn phát triển web của mình, thì có thể những ví dụ đầy cảm hứng này sẽ khiến bạn tạm dừng và thay đổi suy nghĩ.

Các mẫu tiểu thuyết về trải nghiệm tương tác người dùng làm nổi bật tiềm năng mạnh mẽ của những gì HTML5 cung cấp và các ví dụ tôi đang cung cấp trong phần này gợi ý nhiều hơn là cảm hứng. Đúng vậy mọi người; HTML5 không phải là HTML của cha bạn.

Dự kiến ​​sẽ dành ít nhất một vài phút để truy cập cả hai ví dụ đầu tiên, vì mỗi ví dụ cung cấp trải nghiệm thú vị từ quan điểm thiết kế web thẩm mỹ thuần túy, bên cạnh những câu chuyện tuyệt vời mà họ kể. Bạn có thể thấy mình chi tiêu nhiều hơn một vài phút nếu bạn thích một câu chuyện hay, như tôi đã làm.

Ví dụ 1: Thời báo New York "Tuyết rơi"

Trước tiên, chúng tôi có một ví dụ tuyệt vời sử dụng một số trường hợp của yếu tố video bên cạnh việc sử dụng sáng tạo hiệu ứng cuộn thị sai. HTML5 bao gồm các yếu tố mang tính trình bày và tổ chức như bài viết, sang một bên, chi tiết, nghĩa bóng, hình, chân trang, tiêu đề, nhóm, điều hướng, phần và tóm tắt. Ngoài ra, bạn sẽ tìm thấy các yếu tố đa phương tiện như canvas và video. Trải nghiệm trực tuyến "Tuyết rơi" của Thời báo New York kể câu chuyện trong sáu trang được tạo ra đẹp mắt, có sự tương tác với các sự kiện dẫn đến một trong những trận tuyết lở nổi tiếng và bi thảm nhất ở Mỹ, cũng như hậu quả của nó . Trận tuyết lở đã cướp đi ba mạng sống vào ngày định mệnh ngày 19 tháng 2 năm 2012; địa điểm này chỉ cách hai mươi phút đi bộ bên ngoài ranh giới của khu trượt tuyết Stevens được gọi là đường trượt tuyết Tunnel Creek gần đèo Stevens ở dãy núi Cascade của Washington, Hoa Kỳ.

Ví dụ 2: Tạp chí sân cỏ

Tiếp theo là câu chuyện bìa của Pitchfork "Long lanh trong bóng tối", có sự góp mặt của ca sĩ / nhạc sĩ người Anh khó hiểu Bat for Lashes, còn được gọi là Natasha Khan. Trang web chứa rất nhiều HTML5, bao gồm các hiệu ứng cuộn thị sai bằng cách sử dụng thang đo dữ liệu, độ rộng dữ liệu, khung dữ liệu, yếu tố dữ liệu và vector dữ liệu, cũng như trình phát âm thanh. CSS3 bao gồm dễ dàng, dễ dàng, chuyển tiếp, độ mờ, bộ lọc alpha và một số lớp xen kẽ và các lớp khu vực. Cũng được sử dụng là một số jQuery và JavaScript và một số lệnh gọi đến các tệp js và CSS tại Amazon Web Services. Các điểm nổi bật khác bao gồm nhiều hình ảnh, danh sách phát các bài hát nổi bật trong album, tùy chọn toàn màn hình và tùy chọn cho chế độ xem trang tiêu chuẩn so với động. Câu chuyện trang bìa làm nổi bật Bat for Lashes 'và tác phẩm / album mới nhất của cô "The Haunted Man".

Ví dụ 3: Form Follows Chức năng trang web

Từ quan điểm phát triển thuần túy, nhà thiết kế và phát triển tương tác Jongmin Kim đã đưa lên trang web Form Follows Function của mình, một bộ sưu tập các thiết kế và chức năng độc đáo bằng HTML5 và hiện liệt kê mười ba trải nghiệm tương tác khi viết bài này sắp ra mắt. Các trải nghiệm hiện tại bao gồm Bokeh sử dụng yếu tố canvas, Flip Clock được hiển thị trong Hình C ở trên và Soup 3D của Campbell, sử dụng một hộp súp hình trụ ( Hình D ) bên dưới; cả hai kinh nghiệm này đều tận dụng hiệu ứng biến đổi CSS.

Ví dụ 4: Numéro10

Tiếp theo, chúng tôi có một ví dụ về một trang web kinh doanh của công ty cho công ty quảng cáo numéro10 từ Thụy Sĩ, được ra mắt để giới thiệu phương pháp sản phẩm mới của đại lý được gọi là SyncBig. Trang web sử dụng cuộn parallax và HTML5 cùng với hình minh họa, thiết kế đồ họa trong một trang web duy nhất và hiện đang được đề cử cho AWWWARD.

Ví dụ 5: Ứng dụng Cool

Một ứng cử viên AWWWARD khác là CoolApps (e), trang web dành cho nhóm chuyên về truyền thông, tiếp thị, thiết kế đồ họa và kỹ thuật phần mềm, tạo giao diện tùy chỉnh và lập trình thủ công các trang web và ứng dụng di động. Sử dụng các yếu tố HTML5 như phần và tiêu đề, nó cũng sử dụng các kiểu CSS3 bình thường hóa để cấu hình và đặt lại, truy vấn phương tiện phản hồi, chuyển đổi, biến đổi tỷ lệ, chuyển đổi xoay, dịch, dịchX, thời lượng hoạt hình, chế độ lấp đầy hoạt hình, webkit- biến đổi và webkit-keyframes.

Nếu bây giờ bạn không bị thuyết phục rằng HTML5 có tiềm năng lớn cho tương lai phát triển web, thì không có hy vọng nào cho bạn. Nhưng điều đó là ổn, bởi vì vẫn còn thời gian để thực hiện bước nhảy; thực tế là bạn còn vài năm nữa trước khi thiết kế web đáp ứng, đó là tất cả những gì về HTML5, trở thành công nghệ chính thống khi máy tính bảng và thiết bị di động vượt qua trình duyệt máy tính để bàn về lượt xem trang và tương tác của người dùng.

© Copyright 2020 | mobilegn.com