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: TS BAN HÀ BẰNG SINH VIÊN: 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 được gọi là "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, một 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 là tảng (framework) miễn phí, mã nguồn mở, dựa trên 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 và nhiều thứ khác Nó có nhiều Component, Javascript hỗ trợ cho việc thiết kế Reponsive của 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 hoặc bootstrap.min.css​ Thêm thẻ script vào cuối thẻ body Thêm Bootstrap từ CDN https://getbootstrap.com/docs/4.3/getting-started/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 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 4  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 y xs • • sm md lg xl class="col-y" class=“col" 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 trong website • Bootstrap cung cấp cho bạn lớp CSS liên quan, giúp bạn dễ dàng tạo một Navigation Bar và 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ụ của Bootstrap có thể 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 là 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, một container là phần tử chứa phần tử khác, chẳng hạn như , , • Lớp .container hoặc .container-fluid có thể 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 ... • Một? ?Website? ?được gọi là "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, một? ?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 là tảng (framework) miễn phí, mã nguồn mở, dựa trên 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