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 TIEU LUAN MOI download : skknchat@gmail.com 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 TIEU LUAN MOI download : skknchat@gmail.com 1 • • • • 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 TIEU LUAN MOI download : skknchat@gmail.com 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 TIEU LUAN MOI download : skknchat@gmail.com 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 TIEU LUAN MOI download : skknchat@gmail.com CÁC PHIÊN BẢN BOOSTRAP • Các phiên TIEU LUAN MOI download : skknchat@gmail.com 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/ TIEU LUAN MOI download : skknchat@gmail.com Đ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 TIEU LUAN MOI download : skknchat@gmail.com Đ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 TIEU LUAN MOI download : skknchat@gmail.com Đ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 TIEU LUAN MOI download : skknchat@gmail.com 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 TIEU LUAN MOI download : skknchat@gmail.com LƯỚI TRONG BOOTSTRAP • Hệ thống lưới Grid System Bootstrap TIEU LUAN MOI download : skknchat@gmail.com CHIA CỘT TRONG BOOTSTRAP • Cách chia cột Bootstrap class="col-x-y" X y xs • • sm Số cột mà thành phần chiếm Giá trị từ đến 12 md lg xl class="col-y" class=“col" TIEU LUAN MOI download : skknchat@gmail.com 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 TIEU LUAN MOI download : skknchat@gmail.com 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 TIEU LUAN MOI download : skknchat@gmail.com 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) TIEU LUAN MOI download : skknchat@gmail.com 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 TIEU LUAN MOI download : skknchat@gmail.com 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ử TIEU LUAN MOI download : skknchat@gmail.com 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 * TIEU LUAN MOI download : skknchat@gmail.com Font Awesome Cách sử dụng: • Truy cập https://fontawesome.com/ • Đăng ký đăng nhập • Chọn Start tạo Kit TIEU LUAN MOI download : skknchat@gmail.com 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 TIEU LUAN MOI download : skknchat@gmail.com 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/ TIEU LUAN MOI download : skknchat@gmail.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 • TIEU LUAN MOI download : skknchat@gmail.com Demo giải thích Website TIEU LUAN MOI download : skknchat@gmail.com Em xin chân thành cảm ơn Thầy bạn lắng nghe Q&A TIEU LUAN MOI download : skknchat@gmail.com ... 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