Trường đại học Kinh Tế - Luật Khoa Hệ Thống Thông Tin Đề tài thuyết trình: CSS FRAMEWORK Danh Sách Nhóm: 1. Lê Viết Tuấn K124061063 2. Hồ Tuấn Sáng K124061024 3. Võ Hoàng Gia Bảo K124062283 4. Nguyễn Thị Thu Trúc K124061059 5. Nguyễn Thị Bích Thủy K124061037 6. Trương Thị Thảo K124062311 I. CSS framework là gì? CSS framework có thể coi là một mã nguồn mở, bao gồm các đoạn mã CSS được viết sẵn giúp người sử dụng thiết kế trang web dễ dàng, nhanh chóng và ít bị lỗi. (http://theson.net/thietke/5-css-framework-thiet-ke-web-mobile/) - Mã nguồn CSS giúp tạo nên một mạng lưới cho phép các người thiết kế có thể định vị các thành phần khác nhau để thiết kế các trang web một cách đơn giản và linh hoạt - Định dạng các kiểu chữ cho các thành phần của HTML - Là giải pháp cho các trường hợp các trình duyệt không tương thích, giúp cho trang web hiển thị đúng trên tất cả các trình duyệt. - Các ưu điểm của framework CSS • Tăng năng suất và tránh các lỗi thông thường. Nếu bạn phát triển vài trang có bản chất tương tự, một đoạn trích code CSS có thể làm tăng năng suất của bạn một cách bất ngờ, giúp bạn tránh được các lỗi thông thường và đơn giản hoá việc xử lí code CSS. • Bình thường hoá cơ sở code/class. Bạn có một code CSS và (X)HTML-markup mặc định thông thường, vì vậy bạn luôn dùng cùng ID và class name trong các dự án khác nhau. Sự nhất quán code trong suốt nhiều dự án giúp bạn dễ dàng duy trì một trang web thay vì phải đào sâu nghiên cứu mã nguồn của mỗi dự án để hiểu bạn đã thực sự xây dựng một trang web như thế nào. • Tiến trình công việc trong một nhóm trôi chảy hơn. Nếu một framework CSS được lưu trữ cẩn thận, nó có thể được dùng trong nội bộ một nhóm như một điểm chung; do vậy, bạn có thể tránh các hiểu lầm và đảm bảo cho một tiến trình làm việc tối ưu. Nó giúp bạn tránh các lỗi, hoàn thành đúng kế hoạch mà vẫn đảm bảo chất lượng sản phẩm và không vượt quá kinh phí. • Đạt được tính tương tích trình duyệt tối ưu. Vì framework CSS của bạn là “bulletproof” nên bạn không cần phải lo lắng đến các vấn đề về tính tương thích trình duyệt và có thể bắt đầu mã hoá ngay lập tức. • Có một code hoàn chỉnh, cấu tạo tốt. CSS Framework cung cấp cho bạn một nền tảng xuyên suốt cho mọi trang web; nhờ đó bạn có cách tạo kiểu cơ bản cho mọi yếu tố html trong phần đầu của các dự án. Bạn đã từng quên code hay abbr? Đó chính là mấu chốt. - Nhược điểm của CSS Framework • Bạn cần có thời gian để hiểu đầy đủ về framework. “Thông thường đối với những người sử dụng, thời gian cần thiết để hiểu về cấu trúc của framework lớn hơn nhiều công việc mã hoá từ đầu. • Bạn cần có một hiểu biết cụ thể về cấu trúc code. Khi sử dụng framework CSS bên ngoài bạn vẫn cần một hiểu biết kĩ càng về code của mình. Bạn cần biết chính xác thực tế framework của bạn được tạo dựng như thế nào. “Bằng cách tạo dựng một trang từ đầu, bạn có thể tăng hiểu biết về cấu trúc trang, điều mà bạn không thể học được từ bất cứ tài liệu nào”. • Bạn có thể tiếp nối các lỗi của người khác. Nếu dùng framework CSS bên ngoài, có thể bạn sẽ gặp rắc rối trong việc phải tốn nhiều thời gian để sửa các lỗi của một ai đó, có khi còn mất thời gian hơn nhiều so với việc sửa lỗi của chính mình. • Bạn phát triển trang dựa trên một framework chứ không phải là một kiến thức vững chắc về CSS. “Một vấn đề lớn của framework là khi các nhà thiết kế gắn mình với một framework tương phản với code cơ bản. Hiểu biết đạt được trong trường hợp này bao quanh một framework cụ thể, điều này sẽ cực kì hạn chế các nhà thiết kế.” • Bạn nhận được một mã nguồn phồng lên. “Cho dù nó thuộc framework language phía máy chủ hay thư viện JavaScript, vẫn có một tỉ lệ lớn code không bao giờ được thực hiện. While not a major issue server side, this can greatly degrade the performance of a client side framework such as a JavaScript library.” • Không thể đóng khung CSS về mặt ngữ nghĩa. “CSS và (X)HTML có liên quan chặt chẽ với nhau. (X)HTML về bản chất là một ngôn ngữ không thể bao trong kiểu của một framework. Mỗi dự án có một đặc điểm riêng biệt trong cấu trúc tài liệu, các class và ID. Một framework CSS loại bỏ một cách tiêu cực phần lớn giá trị về mặt ngữ nghĩa khỏi markup của một tài liệu. Và theo ý kiến của tôi thì nên tránh điều này.” Grid Layout System: Grid System là cách thuật ngữ ý chỉ cách bố trí nội dung trên giấy, chúng ta thường gặp trên các tờ báo hoặc tạp chí. Điều này có ý nghĩa rằng layout của trang web chúng ta sẽ được chia ra làm các dòng (row) và cột (colum). Và thay vì ta xác định độ dài, rộng của một phần tử (element) bằng 10px, 20px, thì giờ ta chuyển sang xác định xem phần tử đó chiếm bao nhiêu cột. Do các c t trong Grid System u t l % v i nhau. Nên khi kích ộ đề ỉ ệ ớ th c màn hình thu nh . Ví d nh t 1366px trên desktop, sang ướ ỏ ụ ư ừ màn hình nh kho ng 320px trên chi c i n tho i. thì 320px ó v n ỏ ả ế đệ ạ đ ẫ c chia u ra thành 12 c t. Các element mà b n b trí trên grid đượ đề ộ ạ ố system v n s chi m s l ng c t nh ban u. V y nên t l c a ẫ ẽ ế ố ượ ộ ư đầ ậ ỉ ệ ủ layout luôn cân i.đố II. Một số CSS Framework có hỗ trợ Grid Layout: 1. Bootstrap: - Bootstrap là một CSS Framework phổ biến nhất hiện nay do Twitter phát triển. - Ưu điểm: • Hỗ trợ khả năng Responsive: tức là trang web sẽ tự động co giãn theo kích thước của cửa sổ trình duyệt. • Tương thích tốt với thiết bị cỡ nhỏ: với sự phổ biến của smartphone hiện nay, đây là một yếu tố quan trọng. Không cần phải design một bản riêng cho mobile, với bootstrap bạn chỉ cần thiết kế một lần cho mọi thiết bị. • Được tích hợp với thư viện jQuery và tương tác tốt với chuẩn HTML5 và CSS3. • Ngoài ra Bootstrap còn được cập nhật phiên bản thường xuyên, hệ thống tài liệu hướng dẫn chi tiết, thân thiện với các công cụ tìm kiếm, tương thích trên nhiều trình duyệt, nhiều theme khác nhau (lên Google và gõ “Bootstrap themes“),…. • Điều đặc biệt hơn, bootstrap rất thân thiết với google. Các bot + engine tìm kiếm của google rất ưu ái đối với những SEOer thiết kế website bằng bootstrap. - Nhược điểm: • Thêm quá nhiều class không cần thiết. • Dễ bị trùng phong cách, cũng do Bootstrap quá phổ biến nên giờ phần lớn nhìn rất chán vì nó na ná nhau. • Nặng hơn so với các framework khác. 2. Foudation Framework Foundation được thực hiện bởi Zurb và nó được phát hành vào năm 2011. - Ưu điểm: + Giống với Bootstrap, Foundation cũng gồm những thành phần cơ bản cần thiết nhất cho mỗi trang web: Grid System, Typography, Table, Form, Navigation, Label, và một số jQuery plugins. Bootstrap có vẻ đầy đủ hơn, bao gồm nhiều dạng form, figure, cũng như các jQuery plugin cho Dialog, Tab, Popup…, tuy nhiên với yêu cầu của một dự án web design thì những thành phần này rất ít khi cần dùng đến, và sự khác biệt là không nhiều. Sau đây là một số điểm khác biệt đáng chú ý của Foundation. - Foundation là một framework hoàn toàn hỗ trợ cho Reponsive (ngay từ phiên bản 2.0), giúp cho nhà phát triển và thiết kế tạo ra những website đẹp và toàn toàn reponsive với code ngữ nghĩa. Foundation sử dụng một cách thức tiếp cận di động hóa (Mobile First), giúp cho mọi người có thể thiết kế một trang web mà hoạt động tốt trên cả thiết bị máy tính thường và các thiết bị di động màn hình nhỏ hoặc lớn hơn. 3. YAML YAML ( Yet Another Giao diện multicolumn ) là một khuôn khổ CSS mô- đun cho các trang web thực sự linh hoạt , dễ tiếp cận và đáp ứng. Nó dựa trên Sass và có một khuôn khổ cốt lõi rất mỏng mà trọng lượng chỉ gần bằng 6kB.YAML là tập trung vào thiết bị thiết kế màn hình độc lập và cung cấp các mô-đun chống đạn bố trí linh hoạt. Đây là một điểm khởi đầu hoàn hảo và chìa khóa để thiết kế thật sự đáp ứng. - Ưu điểm: • Hệ thống lưới điện linh hoạt chống đạn • Hình thức linh hoạt công cụ với chủ đề hỗ trợ • Tập trung vào các tiêu chuẩn web và khả năng tiếp cận • Kiểu chữ tối ưu hóa cho tất cả các yếu tố tiêu chuẩn • Khối xây dựng phù hợp cho tạo mẫu nhanh • Cũng tương tác tốt cho HTML5 và CSS3 • Lõi khuôn khổ rất mỏng (5,9 MB ) • YAML được kiểm tra và hỗ trợ trong các trình duyệt hiện đại như Chrome, Firefox , Opera, Safari và Internet Explorer. 4. Skeleton Skeleton là một framework nhỏ gọn, thân thiện với nhà phát triển mobile, được xaay dựng dựa trên 960 grid. - Ưu điểm: • Skeleton giúp phát triển nhanh chóng, giúp thực hành CSS tốt, có một mạng lưới được cấu trúc tốt, tổ chức file một cách độc lập. • Đẹp, nhẹ, cách sử dụng dễ dàng, ngoài ra skeltton còn cung cấp một nền tảng độc lập nhưng vẫn giúp người sử dụng có thể thiết kế theo phong cách của mình 5. Gumby Gumby Framework dựa trên 960 grid, đáp ứng bao gồm nhiều loại lưới với các biến thể các cột khác nhau cho phép bạn linh hoạt trong suốt quá trình thực hiện dự án. Được xây dựng bởi Compass và Sass. Nền tảng của nó là một mạng lưới lai cho phép bạn tạo bố cục bằng cách xác định những gì lưới để sử dụng, bất cứ nơi nào bạn muốn trên trang web. Việc xây dựng trong giao diện người dùng bao trùm các xu hướng thiết kế mới nhất và cho phép bạn lựa chọn và kết hợp thiết kế phẳng với nhiều phong cách thiết kế. Sử dụng các dấu ấn,tích hợp biểu tượng Entypo trong dự án web bất kì- chúng có độ phân giải độc lập. Nhược điểm lơn nhất của gumby là chỉ hỗ trợ cho các trình duyệt chorme, Firefox, Opera, Internet Explorer 8-10. Name License Fixed, fluid or elastic Units ( px, em, %) Features # of colum ns Bootstra p MIT License (Apache License fixed, fluid, respo nsive px, % Layout, typography, forms, buttons, navigation, media queries + more, + .less files + js libraries 12 v2.0 prior to 3.1.0) Foundati on MIT License fluid px, % Responsive Layout, source ordering, typography, forms, buttons, navigation, media queries, js libraries Any YAML CC-BY 2.0 fixed, elasti c, fluid px, em, % Layout, grids, columns, forms, buttons, progressive linearization for responsive layouts, float handling, navigation, typography, accessibility, add-ons (accessible tabs, rtl-support, microformats) any Gumby Framewo rk MIT License fluid %, px responsive, media queries, hybrid grid PSD templates, UI kit, typography forms, buttons, navigation, js libraries, vertical alignment 12, 16 + any Skeleton MIT license respo nsive Responsive Grid Down To Mobile, Fast to Start, Style Agnostic. Base grid is a variation of the 960 grid system. 12 Chọn framework phù hợp với trang web là không hề đơn giản, vì nhiều lý do: 1. Mỗi trang web là khác nhau và đòi hỏi phải có đặc điểm khác nhau. Sử dụng một framework hoàn chỉnh cho một trang web đơn lẻ có thể đưa ra một kết quả đầy đủ, nhưng chắc chắn sẽ tốn nhiều tài nguyên. 2. Hiện nay không có nhiều khác biệt đáng kể giữa các framework: chúng đều rất đầy đủ và dễ sử dụng. Tuy nhiên, cần lưu ý khi lựa chọn một framework thích hợp: Tốc độ cài đặt: một số Framework rất đơn giản để cài đặt và sử dụng. Một số khác đòi hỏi nhiều thời gian để cấu hình. Dễ hiểu: một số framework thì khó hiểu, phức tạp. Lựa chọn: một số framework phức tạp hơn nhưng lại cung cấp nhiều tùy chọn cấu hình, widget và các tùy chọn giao diện. Tích hợp với các hệ thống khác. Hỗ trợ dài hạn tốt nhất: Một số dự án kỹ thuật số thiếu tính liên tục trong thời gian và dừng việc cập nhật framework và dịch vụ hỗ trợ. Tốt hơn nên lựa chọn các framework luôn được đảm bảo hỗ trợ đầy đủ, liên tục bởi các công ty cung câp sản phẩm chuyên nghiệp Ưu và nhược điểm của việc sử dụng các khuôn khổ Hết . chốt. - Nhược điểm của CSS Framework • Bạn cần có thời gian để hiểu đầy đủ về framework. “Thông thường đối với những người sử dụng, thời gian cần thiết để hiểu về cấu trúc của framework lớn hơn nhiều. đầu. • Bạn cần có một hiểu biết cụ thể về cấu trúc code. Khi sử dụng framework CSS bên ngoài bạn vẫn cần một hiểu biết kĩ càng về code của mình. Bạn cần biết chính xác thực tế framework của bạn. Trường đại học Kinh Tế - Luật Khoa Hệ Thống Thông Tin Đề tài thuyết trình: CSS FRAMEWORK Danh Sách Nhóm: 1. Lê Viết Tuấn K124061063 2. Hồ Tuấn