(TIỂU LUẬN) lập TRÌNH KỊCH bản với JAVASCRIPT NHÓM 3 xây DỰNG TRANG WEBSITE đơn GIẢN

VIỆN CƠNG NGHỆ THƠNG TIN VÀ TRUYỀN THƠNG LẬP TRÌNH KỊCH BẢN VỚI JAVASCRIPT NHÓM XÂY DỰNG TRANG WEBSITE ĐƠN GIẢN GIÁO VIÊN HƯỚNG DẪN: SINH VIÊN: TS BAN HÀ BẰNG TRẦN THANH TÚ HOÀNG MẠNH HIỆP TRẦN XUÂN LƯƠNG LÊ VĂN ĐỈNH Hà Nội, tháng 10/2019 NỘI DUNG Trình bày Web tiểu sử nhân vật Trình bày Web hồ sơ cơng ty Web tiểu sử nhân vật • • • • Cơng cụ sử dụng HTML CSS Bootstrap Sublime text Trình bày chi tiết bước làm BOOTSTRAP Đặt vấn đề • Một Website gọi "Reponsive" (Có tính đáp ứng), tương thích với thiết bị có độ lớn hình khác máy tính, máy tính bảng (Tablet), điện thoại di động (Mobile) • Trước năm 2013, website muốn tương thích với máy tính điện thoại di động, lập trình viên phải viết project khác • Năm 2013 coi năm thiết kế "Responsive", người dùng ngày ưu chuộng thiết bị cầm tay nhỏ máy tính bảng điện thoại thông minh Hành vi đa số người dùng thay đổi, họ chuyển dần sang đọc tin tức họ thông qua thiết bị di động BOOTSTRAP Bootstrap • Bootstrap tảng (framework) miễn phí, mã nguồn mở, dựa HTML, CSS & Javascript, tạo để xây dựng giao diện Website tương thích với tất thiết bị có kích thước hình khác • Bootstrap bao gồm có sẵn như: typography, forms, buttons, tables, navigation, modals, image carousels nhiều thứ khác Nó có nhiều Component, Javascript hỗ trợ cho việc thiết kế Reponsive bạn dễ dàng, thuận tiện nhanh chóng • Phát triển responsive web mobile • Thiết kế website reponsive nhanh dễ dàng • Phát triển Mark Otto Jacob Thornton Twitter • Mã nguồn mở vào tháng năm 2011 GitHub CÁC PHIÊN BẢN BOOSTRAP • Các phiên CÀI ĐẶT BOOSTRAP Tải xuống từ: https://getbootstrap.com / sau thêm thẻ link, đường dẫn đến file bootstrap.css bootstrap.min.css Thêm thẻ script vào cuối thẻ body Thêm Bootstrap từ CDN https://getbootstrap.com/docs/4.3/gettingstarted/introducti on/ ĐIỂM MẠNH CỦA BOOTSTRAP (1) • Gọn nhẹ với 88KB • Bootstrap hồn thành xuất sắc q trình cải tiến cho phiên phiên tiền nhiệm trước • So sánh với phiên ổn định gần Bootstrap 3.3.7 ta thấy dung lượng file Bootstrap.min.css giảm đáng kể, từ 121KB phiên cũ, 88KB phiên Beta • Dễ sử dụng • Tính Responsive • Tương thích với trình duyệt ĐIỂM MẠNH CỦA BOOTSTRAP (2) Sử dụng Sass thay LESS • Nếu phiên Bootstrap sử dụng LESS làm engine để tiền xử lý cho CSS đến phiên này, Bootstrap có bước thay đổi đáng kể, chuyển từ LESS sang SASS • SO với LESS SASS dễ sử dụng đồng thời cung cấp nhiều khả tùy biến Mặt khác Libsass Sass Compiler viết ngơn ngữ C/C++ mà bootstrap biên soạn (Compile) nhanh trước nhiều ĐIỂM MẠNH CỦA BOOTSTRAP (3) Điểm Bootstrap card • Khi sử dụng Bootstrap 3, dùng tới Components Wells, Thumbnails hay Panel sáng đến Bootstrap 4, components loại bỏ thay Component hồn tồn cards • Bootstrap Cards tạo với nhiều lựa chọn đa dạng phục vụ cho nhiều mục đích sử dụng người dùng điểm hữu ích đến từ Bootstrap HỌC VÀ SỬ DỤNG BOOTSTRAP Học boostrap 4: https://www.w3schools.com/bootstrap4/default.asp • Cách sử dụng: Viết thuộc tính class cho thẻ HTML • LƯỚI TRONG BOOTSTRAP • Hệ thống lưới Grid System Bootstrap CHIA CỘT TRONG BOOTSTRAP • Cách chia cột Bootstrap class="col-x-y" X xs sm md lg xl class="col-y" class=“col" y • Số cột mà thành phần chiếm • Giá trị từ đến 12 THIẾT KẾ WEB TIỂU SỬ NHÂN VẬT Tạo file index.html import Bootstrap css, Js, Jquery, fontawesome (hiển thị icon) Tạo file style.css Import file style.css THIẾT KẾ WEB TIỂU SỬ NHÂN VẬT Tạo điều hướng với class Navbar • Navigation Bar (Thanh điều hướng) phần giao diện giao diện người dùng, giúp cho người dùng tới trang (page) khác website • Bootstrap cung cấp cho bạn lớp CSS liên quan, giúp bạn dễ dàng tạo Navigation Bar tương thích với tất thiết bị có độ lớn hình khác THIẾT KẾ WEB TIỂU SỬ NHÂN VẬT • Để tương thích với thiết bị có độ rộng hình khác Thanh cơng cụ Bootstrap mở rộng (expand) thu nhỏ (collapse) tùy thuộc vào kích thước hình Hành vi đơn giản biến đổi từ cơng cụ nằm ngang thành thẳng đứng độ rộng hình nhỏ • Các công cụ tiêu chuẩn tạo với lớp navbar, lớp navbar-expand-xl|lg|md|sm để rõ với độ rộng hình cơng cụ mở rộng (expand), ngược lại thu gọn (collapse) THIẾT KẾ WEB TIỂU SỬ NHÂN VẬT Tạo Carousel • Carousel plugin jQuery giúp chuyển đổi phần tử HTML thành dạng lặp quay vịng Trong bootstrap plugin tích hợp sẵn file bootstrap.js THIẾT KẾ WEB TIỂU SỬ NHÂN VẬT Tạo phần nội dung • Sử dụng Bootstrap Container • Trong HTML, container phần tử chứa phần tử khác, chẳng hạn , , • Lớp container container-fluid sử dụng cho phần tử WEB HỒ SƠ CƠNG TY Cơng cụ sử dụng: • HTML5 • CSS • Framework Bootstrap * • Jquery • Resume & jquery-easing * • Font Awesome * • Google fonts * • Visual Studio Code * Font Awesome Cách sử dụng: • Truy cập https://fontawesome.com/ • Đăng ký đăng nhập • Chọn Start tạo Kit Resume & jquery-easing Resume • Là thư viện Javascript tìm thấy teamplate Resume • https://startbootstrap.com/themes/resume/ Jquery-easing • jquery-easing https://cdnjs.com/libraries/jquery-easing • Chi tiết: http://gsgd.co.uk/sandbox/jquery/easing/ • A jQuery plugin from GSGD to give advanced easing options Tạo hiệu ứng trang web Google Fonts • Cung cấp phơng chữ đẹp hỗ trợ tốt Tiếng Việt • Trực tuyến • Miễn phí • Website: https://fonts.google.com/ Visual Studio Code • Là trình biên tập mã phát triển Microsoft dành cho Windows, Linux macOS • Miễn phí, mã nguồn mở • Trang chủ: https://code.visualstudio.com/ • Phổ biến • Chức năng: • • • Syntax highlighting Tự động hồn thành mã thơng minh Debugging • Thơng tin thêm: https://vi.wikipedia.org/wiki/Visual_Studio_Code Demo giải thích Website Em xin chân thành cảm ơn Thầy bạn lắng nghe Q&A ... vấn đề • Một Website gọi "Reponsive" (Có tính đáp ứng), tương thích với thiết bị có độ lớn hình khác máy tính, máy tính bảng (Tablet), điện thoại di động (Mobile) • Trước năm 20 13, website muốn... tương thích với máy tính điện thoại di động, lập trình viên phải viết project khác • Năm 20 13 coi năm thiết kế "Responsive", người dùng ngày ưu chuộng thiết bị cầm tay nhỏ máy tính bảng điện thoại... Bootstrap tảng (framework) miễn phí, mã nguồn mở, dựa HTML, CSS & Javascript, tạo để xây dựng giao diện Website tương thích với tất thiết bị có kích thước hình khác • Bootstrap bao gồm có sẵn