Giáo trình thiết kế web Công nghệ thông tin

ỦY BAN NHÂN DÂN TP HỒ CHÍ MINH TRƯỜNG CAO ĐẲNG CÔNG NGHỆ THỦ ĐỨC KHOA CÔNG NGHỆ THÔNG TIN GIÁO TRÌNH HỌC PHẦN: THIẾT KẾ WEB NGÀNH/NGHỀ: CƠNG NGHỆ THƠNG TIN TRÌNH ĐỘ: CAO ĐẲNG Ban hành kèm theo Quyết định số: /QĐ-… ngày tháng….năm của……………………………… TP Hồ Chí Minh, năm 2018 TUYÊN BỐ BẢN QUYỀN Tài liệu thuộc loại sách giáo trình nên nguồn thơng tin phép dùng ngun trích dùng cho mục đích đào tạo tham khảo Mọi mục đích khác mang tính lệch lạc sử dụng với mục đích kinh doanh thiếu lành mạnh bị nghiêm cấm LỜI GIỚI THIỆU Ngày nay, với bùng nổ Internet, web diện nơi đời sống đại Sự phát triển World Wide Web ảnh hưởng đến mặt sống Nếu trước đây, chương trình máy tính chủ yếu chạy máy tính đơn lẻ ngày nay, có nhiều ứng dụng web cung cấp đầy đủ chức tương tự chương trình máy tính Bên cạnh đó, với phát triển cơng nghệ điện tốn đám mây (Cloud Computing), web ngày trở nên mạnh mẽ hỗ trợ người mặt sống Trước xu đó, Khoa Cơng nghệ thơng tin – Trường Cao đẳng Công nghệ Thủ Đức chọn web bốn nhóm chuyên ngành để định hướng cho sinh viên phát triển nghiệp Sinh viên chọn học theo hướng web trải qua học phần web khác với mục tiêu cuối tạo ứng dụng web hoàn chỉnh, học phần Thiết kế web học phần đầu tiên, đặt tảng cho học phần web sau Giáo trình biên soạn dựa theo đề cương học phần “Thiêt kế web 1” Khoa Công nghệ thông tin – Trường Cao đẳng Công nghệ Thủ Đức Mặc dù nhóm biên soạn cố gắng, song chắn không tránh khỏi sai sót Vì vậy, nhóm mong nhận góp ý chân thành từ quý thầy cô bạn sinh viên để giáo trình ngày hồn thiện Tp.HCM, ngày 03 tháng 05 năm 2018 Tham gia biên soạn Chủ biên: Nguyễn Huy Hoàng Nguyễn Ngọc Cẩm Tú ii MỤC LỤC DANH MỤC CÁC HÌNH vii BÀI 1: TỔNG QUAN VỀ WEB 1.1 | TỔNG QUAN VỀ WEB 1.1.1 | Internet World Wide Web 1.1.2 | Client – Server 1.1.3 | Tên domain hosting 1.1.4 | Frontend – Backend 11 1.1.5 | Các ngơn ngữ lập trình web 13 1.2 | CÁC TIÊU CHUẨN CHO MỘT WEBSITE HIỆN ĐẠI 14 BÀI 2: TỔNG QUAN VỀ HTML VÀ CSS 16 2.1 | GIỚI THIỆU HTML 17 2.1.1 | Giới thiệu HTML 17 2.1.2 | Thẻ HTML 17 2.1.3 | Soạn thảo HTML 18 2.1.4 | Hiển thị trang web 19 2.1.5 | Phiên HTML 19 2.2 | CẤU TRÚC CƠ BẢN MỘT TRANG WEB HTML 20 2.3 | CÁC THẺ HTML CƠ BẢN 21 2.3.1 | HTML 21 2.3.2 | HTML định dạng 25 2.3.3 | Danh sách 28 2.3.4 | Liên kết 31 2.3.5 | Hình ảnh 34 2.3.6 | Audio/ Video 35 2.3.7 | Table 38 2.3.8 | Frame 41 2.3.9 | Meta info 42 2.3.10 | Form 43 2.3.11 | Cấu trúc 56 2.4 | GIỚI THIỆU CSS 61 2.4.1 | CSS gì? 61 2.4.2 | Tại phải sử dụng CSS? 61 2.4.3 | Cú pháp 61 2.5 | PHÂN LOẠI CSS 62 2.5.1 | External CSS: 62 2.5.2 | Internal CSS: 63 2.5.3 | Inline CSS: 63 2.6 | CSS SELECTORS 64 2.7 | CÁC CSS CƠ BẢN 65 2.7.1 | CSS Color 65 2.7.2 | CSS Background 66 2.7.3 | CSS Border 68 2.7.4 | CSS Margin 72 2.7.5 | CSS Padding 74 iii 2.7.6 | CSS Width/ Height 76 2.7.7 | CSS Box Model 77 2.7.8 | CSS Text 79 2.7.9 | CSS Font 81 2.7.10 | CSS List 84 2.7.11 | CSS Table 87 2.8 | CSS3 CƠ BẢN 89 2.8.1 | Selectors 90 2.8.2 | CSS3 Border 92 2.8.3 | CSS3 Backgroud 96 2.8.4 | CSS3 Color 101 2.8.5 | CSS3 Gradient 104 2.8.6 | CSS3 Shadow 109 2.8.7 | CSS3 Text 111 BÀI 3: RESPONSIVE WEB DESIGN VỚI HTML, CSS VÀ BOOTSTRAP 116 3.1 | WIREFRAMES, PROTOTYPES VÀ MOCKUPS 117 3.1.1 | Wireframes 117 3.1.2 | Mockups 118 3.1.3 | Prototypes 119 3.2 | CÁC THÀNH PHẦN CƠ BẢN TRÊN TRANG WEB 120 3.2.1 | Page header 121 3.2.2 | Navigation 121 3.2.3 | Page footer 122 3.3 | CÁC KỸ THUẬT XÂY DỰNG WEB LAYOUT HIỆN NAY 122 3.3.1 | Fixed Web design 122 3.3.2 | Fluid Web design 123 3.3.3 | Adaptive Web design 125 3.3.4 | Responsive Web Design 126 3.4 | XÂY DỰNG WEB LAYOUT VỚI HTML VÀ CSS 128 3.4.1 | Container 128 3.4.2 | Grid system 130 3.4.3 | Xây dựng grid system với HTML CSS float 131 3.4.4 | Kỹ thuật clearing float 134 3.5 | KỸ THUẬT CANH GIỮA THEO TRỤC NGANG 136 3.5.1 | CSS display 136 3.5.2 | Canh theo trục ngang với display 139 3.6 | RESPONSIVE WEB DESIGN 139 3.6.1 | Media queries 139 3.6.2 | Các bước để xây dựng website với kỹ thuật Responsive Web Design 146 3.7 | BOOTSTRAP 149 3.7.1 | Khái niệm Bootstrap 149 3.7.2 | Sử dụng Bootstrap 149 BÀI 4: TỔNG QUAN VỀ JAVASCRIPT 155 4.1 | GIỚI THIỆU JAVASCRIPT 156 4.1.1 | Giới thiệu JavaScript? 156 4.1.2 | JavaScript làm gì? 157 iv 4.1.3 | Các bước thực thi JavaScript 157 4.1.4 | Cách đặt mã lệnh JavaScript vào trang web 158 4.2 | CÚ PHÁP CƠ BẢN CỦA JAVASCRIPT 158 4.2.1 | Các quy ước viết code JavaScript 158 4.2.2 | Câu lệnh JavaScript 162 4.2.3 | Chú thích JavaScript 163 4.2.4 | Biến 164 4.2.5 | Kiểu liệu 166 4.2.6 | Toán tử 168 4.2.7 | Cấu trúc điều kiện 171 4.2.8 | Cấu trúc lặp 174 4.2.9 | Mảng 177 4.3 | ĐỐI TƯỢNG TRONG JAVASCRIPT 181 4.3.1 | Khái niệm đối tượng 182 4.3.2 | Tạo đối tượng 182 4.3.3 | Truy cập đối tượng 182 4.3.4 | Đối tượng String 183 4.3.5 | Đối tượng Math 186 4.3.6 | Đối tượng Date 188 4.4 | HÀM TRONG JAVASCRIPT 190 4.4.1 | Khái niệm hàm 190 4.4.2 | Cách gọi hàm 191 4.5 | HTML DOM 191 4.5.1 | DOM gì? 191 4.5.2 | HTML DOM nodes 192 4.5.3 | DOM Document 193 4.5.4 | Sự kiện JavaScript 195 4.6 | CÁC ĐỐI TƯỢNG TRANG WEB 197 4.6.1 | Thuộc tính đối tượng Window 197 4.6.2 | Phương thức đối tượng Window 198 4.6.3 | Phương thức thời gian 199 BÀI 5: CÁC THƯ VIỆN JAVASCRIPT PHỔ BIẾN 203 5.1 | JQUERY 204 5.1.1 | Giới thiệu jQuery 204 5.1.2 | Cú pháp jQuery 205 5.1.3 | jQuery selectors 206 5.1.4 | Sự kiện jQuery 207 5.1.5 | Các hàm xử lý HTML CSS jQuery 208 5.1.6 | Hiệu ứng chuyển động jQuery 212 5.1.7 | Form validation với jQuery 217 5.2 | ANGULARJS 220 5.2.1 | Giới thiệu AngularJS 220 5.2.2 | AngularJS Directives 222 5.2.3 | AngularJS Expressions 228 5.2.4 | AngularJS Filters 229 5.2.5 | AngularJS Modules 234 5.2.6 | AngularJS Controllers 237 5.2.7 | Ví dụ ứng dụng AngularJS 238 v TÀI LIỆU THAM KHẢO 243 vi DANH MỤC CÁC HÌNH Hình – Sơ đồ gửi nhận files qua Internet Hình – Web Browser Nexus Hình – Mơ hình Client – Server Hình – Cách thức hoạt động web browser 10 Hình – Frontend Backend 11 Hình – Một vài ngơn ngữ lập trình web frontend backend 13 Hình – Minh họa wireframe 118 Hình – Minh họa mockup 119 Hình – Minh họa prototype 120 Hình 10 - Cấu trúc trang web 120 Hình 11 – Ví dụ source code HTML navigation 121 Hình 12 - Điểm yếu điểm kỹ thuật Fixed Web design 123 Hình 13 – Kỹ thuật Fluid Web design 124 Hình 14 – Nhược điểm kỹ thuật Fluid Web design 124 Hình 15 – Kỹ thuật Adaptive Web design 125 Hình 16 – Nhược điểm kỹ thuật Adaptive Web design 126 Hình 17 – Microsoft OmniTouch 127 Hình 18 – Minh họa container 128 Hình 19 – Minh họa Grid System 130 Hình 20 – Minh họa row 133 Hình 21 – CSS Clear 134 Hình 22 – Vấn đề với CSS float 135 Hình 23 – Display block, inline inline-block 137 Hình 24 – Width Height block, inline inline-block 138 Hình 25 – Mobile first Desktop first 146 Hình 26 - Các bước để xây dựng website với kỹ thuật Responsive Web Design 146 Hình 27 – Website bị thu nhỏ xem thiết bị di động 147 Hình 28 – Website hiển thị kích thước thiết bị di động 147 Hình 29 – Navigation Bootstrap hiển thị browser 151 Hình 30 – Bootstrap navigation hiển thị desktop 152 vii Hình 31 - Bootstrap navigation hiển thị điện thoại 152 Hình 32 – Các class dành cho hình Bootstrap 153 viii GIÁO TRÌNH HỌC PHẦN Tên học phần: Thiết kế web Mã học phần: CNC107411 Vị trí, tính chất, ý nghĩa vai trò học phần: - Vị trí: Học phần giảng dạy vào học kỳ thứ hai dành cho sinh viên ngành Công nghệ thông tin - Tính chất: Là học phần bắt buộc sinh viên ngành Công nghệ thông tin - Ý nghĩa vai trò học phần: Đây học phần chuyên ngành Công nghệ thông tin, cung cấp cho sinh viên cách nhìn tổng quát lĩnh vực web kiến thức kỹ xây dựng giao diện website Sinh viên trình bày kiến thức HTML, CSS JavaScript Ngoài ra, sinh viên ứng dụng framework phổ biến xây dựng giao diện wesite Bên cạnh đó, học phần đặt tảng cho học phần web sau này, đặc biệt sở cho học phần Thiết kế web Mục tiêu học phần: - Về kiến thức: + Áp dụng xác kiến thức HTML CSS vào xây dựng giao diện website theo mẫu cung cấp; + Áp dụng xác kiến thức JavaScript vào giải yêu cầu tương tác giao diện; - Về kỹ năng: + Sử dụng framework thư viện hỗ trợ phổ biến để xây dựng giao diện website; + Xây dựng giao diện website hiển thị tốt nhiều thiết bị + Thực kiểm tra xác liệu người dùng nhập form; + Sử dụng thư viện JavaScript phổ biến vào giải yêu cầu tương tác người dùng; - Về lực tự chủ trách nhiệm: + Tuân theo quy định tiêu chuẩn ngành phát triển web; ix + Thường xuyên tham gia cách chủ động tích cực vào công việc giao x Sử dụng số expression: giống số Javascript Ví dụ: Sử dụng chuỗi expression: giống chuỗi Javascript Ví dụ: Sử dụng đối tượng expression: giống đối tượng Javascript Ví dụ: Sử dụng mảng expression: giống mảng Javascript Ví dụ: 5.2.4 | AngularJS Filters 229 Filter thêm vào AngularJS để định dạng liệu AngularJS cung cấp filter chuyển đổi liệu sau: Filter Mô tả currency Định dạng số thành tiền tệ date Định dạng ngày filter Lọc tập mảng json Định dạng đối tượng thành chuỗi JSON limitTo Giới hạn số phần tử/ số kí tự cho mảng/ chuỗi lowercase Định dạng chuỗi thành chữ thường number Định dạng số cho chuỗi orderBy Sắp xếp mảng theo biểu thức định uppercase Địng dạng chuỗi thành chữ hoa Thêm filter vào biểu thức directive Filter thêm vào biểu thức cách đặt kí tự “|” sau biểu thức directive theo sau filter Ví dụ: 5.2.4.1 | currency Cú pháp: {{ number | currency : symbol : fractionsize }} 230 symbol: Ký hiệu tiền tệ hiển thị Ký hiệu ký tự văn fractionsize: Số chữ số thập phân Ví dụ: Kết quả: 5.2.4.2 | date Cú pháp: {{ date | date : format : timezone }} format: Kiểu định dạng ngày để hiển thị Có thể định dạng sau: “YYYY”, “YY”, “Y”, “MMMM”, “MMM”, “MM”, “M”, “DD”, “D”, Hoặc dạng: “short”, “medium”, “shortDate”, “mediumDate”, “longDate”, “fullDate”, timezone: múi sử dụng để định dạng ngày Ví dụ: Kết quả: 231 5.2.4.3 | filter Cú pháp: {{ arrayexpression | filter : expression : comparator }} expression: biểu thức sử dụng làm điều kiện để chọn phần tử mảng Nó chuỗi, đối tượng hàm comparator: xác định mức độ so sánh: true giá trị phần tử mảng biểu thức so sánh xác tuyệt đối, false giá trị phần tử mảng chứa biểu thức so sánh Ví dụ: Kết quả: 5.2.4.4 | limitTo Cú pháp: {{ object | limitTo : limit : begin }} limit: định số phần tử/ số kí tự cho mảng/ chuỗi begin: định vị trí bắt đầu cho giới hạn (khơng bắt buộc) 232 Ví dụ: Kết quả: 5.2.4.5 | orderBy Cú pháp: {{ array | orderBy : expression : reverse }} expression: định đối tượng xếp Nó chuỗi, mảng hàm reverse: đảo ngược thứ tự xếp (không bắt buộc) Ví dụ: Kết quả: 233 5.2.4.6 | uppercase Cú pháp: {{ string | uppercase}} Ví dụ: Kết quả: 5.2.5 | AngularJS Modules 5.2.5.1 | AngularJS modules gì? AngularJS modules sử dụng để định nghĩa ứng dụng AngularJS Module tập hợp dịch vụ (services), thị (directives), điều khiển (controllers), lọc (filters) thơng tin cấu hình ứng dụng Vì vậy, controller phải thuộc modules 5.2.5.2 | Khởi tạo module Để khởi tạo module sử dụng hàm angular.module Cú pháp: 234 angular.module(name, [requires], [configFn]); name: tên module tạo requires: module phụ thuộc Nếu xác định module tạo, khơng xác định module truy lục để cấu hình thêm (khơng bắt buộc) configFn: chức cấu hình cho module (khơng bắt buộc) Ví dụ: 5.2.5.3 | Thêm Controller Chúng ta thêm controller vào module theo cách sau: Ví dụ: Cách viết controller trình bày phần AngularJS Controllers 5.2.5.4 | Tạo Directive Ngoài directive có sẵn AngularJS, tạo directive cho riêng cách sử dụng hàm directive 235 Khi đặt tên cho directive áp dụng quy tắc camel (ví dụ: myDirective), gọi directive phải sử dụng dấu – để phân cách viết thường (ví dụ: my-directive) Ví dụ: 5.2.5.5 | Modules Controllers đặt tập tin ngồi Thơng thường ứng dụng AngularJS đặt module controllers tập tin Javascript Ví dụ có module chứa tập tin “myModule.js”, controller chứa tập tin “myCtrl.js” đưa tập tin vào trang web sau: Ví dụ: Tập tin myApp.js phải có nội dung sau: Tập tin myCtrl.js phải có nội dung sau: 236 5.2.6 | AngularJS Controllers 5.2.6.1 | AngularJS Controllers gì? Một ứng dụng AngularJS hoạt động dựa vào thành phần controller để điều khiển luồng liệu ứng dụng Một controller định nghĩa directive ngcontroller Một controller đối tượng JavaScript bao gồm thuộc tính hàm Mỗi controller chấp nhận $scope tham số để hướng đến ứng dụng mà phần controller điều khiển 5.2.6.2 | Scope gì? Scope đối tượng JavaScript đặc biệt có vai trị liên kết Controller View Thơng thường, Controller gắn giá trị cho thuộc tính Scope, View sử dụng thuộc tính cho việc hiển thị Bất thay đổi người dùng View giá trị model tương ứng thay đổi theo giá trị model thay đổi View thay đổi theo Trong ứng dụng AngularJS, Controller sử dụng để: Ø Thiết lập trạng thái ban đầu cho đối tượng $scope Ø Thêm hành vi cho đối tượng $scope Ø Sau đó, bind giá trị $scope View Khi tạo controller, $scope đưa vào làm đối số Ví dụ: 237 5.2.6.3 | Phương thức Controllers Một controller có phương thức (giá trị biến phương thức) Ví dụ: 5.2.7 | Ví dụ ứng dụng AngularJS Bây áp dụng đối tượng AngularJS vừa tìm hiểu để thực form order điện tử có chức sau: Ø Người dùng click vào tên mặt hàng để order Ø Mỗi lần click số lượng mặt hàng tăng lên đơn vị 238 Ø Muốn giảm số lượng xuống đơn vị click vào nút “-“ kế bên Ø Muốn hủy đặt mặt hàng click vào nút “x” kế bên Ø Mỗi lần người dùng click số lượng mặt hàng tổng số tiền tự động cập nhật lại Phần 1: Thực giao diện sau HTML CSS: Phần 2: Sử dụng AngularJS để thực phần code với hướng dẫn sau: Khai báo directive ng-app=”orderModule” ng-controller = “orderController” cho thẻ để định nơi bắt đầu ứng dụng AngularJS 239 Tiếp đến định nghĩa module có tên ”orderModule” controller có tên “orderController” khởi tạo Bây khai báo mảng drinks danh sách đối tượng ăn/ uống thực đơn, đối tượng có thơng tin sau: name (tên ăn/ uống), price (giá), order (số lượng đặt), active (trạng thái order) Tiếp đến khai báo hàm cho kiện người dùng click vào tên ăn/ uống để order 240 Hàm cho kiện người dùng click vào nút giảm bớt số lượng order cho tương ứng Hàm cho kiện người dùng click nút hủy order tương ứng Hàm tính tổng giá tiền người dùng order Hàm gọi lần tự động thực có thay đổi từ phần View người dùng Phần 3: Gắn kết liệu View với Module Controller Khai báo directive ng-repeat để lặp hết đối tượng có mảng drinks Directive đặt phần tử HTML mà muốn lặp lại số phần tử mảng 241 Gắn hàm add() cho kiện click người dùng vào tên ăn/ uống Đồng thời thay đổi trạng thái phần tử cách sử dụng directive ng-class Gắn kết liệu tên, giá, số lượng order ăn cho phần tử HTML Gắn hàm subtract() cho kiện click người dùng vào nút giảm số lượng ăn/ uống Gắn hàm cancel() cho kiện click người dùng vào nút hủy order ăn/ uống Gắn kết liệu tổng giá tiền cho phần tử HTML BÀI TẬP Máy tính điện tử Đồng hồ số Gallery hình ảnh Game tìm số Khi click Start, game tự phát sinh 100 số vị trí hình Người chơi phải tìm click vào số theo thứ tự thời gian phút Mỗi số + điểm Số sai khơng tính điểm Số click tô màu khác số lại Khi hết hình thơng báo số điểm 242 TÀI LIỆU THAM KHẢO [1] J S a t A T T Jeremy Osborn, "Web Design with HTML and CSS - Digital Classroom," in Web Design with HTML and CSS - Digital Classroom, Wiley Publishing, Inc, 2011 Một số website https://www.w3schools.com/ http://www.telegraph.co.uk/technology/microsoft/11577364/Web-browsers-a-briefhistory.html http://blog.teamtreehouse.com/i-dont-speak-your-language-frontend-vs-backend http://www.boostsuite.com/2012/04/24/what-is-a-website-conversion/ https://www.forbes.com/sites/denispinsky/2016/07/18/websitestandards/#59fad6ae3641 http://webstyleguide.com/wsg3/6-page-structure/3-site-design.html https://www.hindsiteinc.com/blog/the-benefits-of-a-mobile-first-design-strategy/ http://fredericgonzalo.com/en/2017/03/01/understanding-the-difference-betweenmobile-first-adaptive-and-responsive-design/ https://blog.4psa.com/css-display-and-the-basic-box-model/ https://developer.mozilla.org/en-US/docs/Web/HTML 243 ... học phần Thiết kế web học phần đầu tiên, đặt tảng cho học phần web sau Giáo trình biên soạn dựa theo đề cương học phần “Thiêt kế web 1” Khoa Công nghệ thông tin – Trường Cao đẳng Cơng nghệ Thủ... Laravel, v.v… Những công nghệ dạy học phần web sau Lập trình web, chuyên đề web 12 1.1.5 | Các ngơn ngữ lập trình web Hình – Một vài ngơn ngữ lập trình web frontend backend Khi nhắc đến web, không nhắc... ngành phát triển web; Nội dung chính: - Trình bày lịch sử hình thành phát triển web - Trình bày thuật ngữ web - Trình bày ngơn ngữ lập trình dành cho web - Trình bày tiêu chuẩn cần có website đại