1 NGHIÊN CỨU TRIỂN KHAI CÁC GIẢI PHÁP MOBILE RESPONSIVE WEBSITE VÀ ỨNG DỤNG LUẬN VĂN THẠC SĨ KHOA HỌC MÁY TÍNH THÁI NGUYÊN 2020 2 ĐẠI HỌC THÁI NGUYÊN TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG[.]
NGHIÊN CỨU TRIỂN KHAI CÁC GIẢI PHÁP MOBILE RESPONSIVE WEBSITE VÀ ỨNG DỤNG LUẬN VĂN THẠC SĨ KHOA HỌC MÁY TÍNH THÁI NGUYÊN - 2020 ĐẠI HỌC THÁI NGUYÊN TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG MOUA VANG NGHIÊN CỨU TRIỂN KHAI CÁC GIẢI PHÁP MOBILE RESPONSIVE WEBSITE VÀ ỨNG DỤNG CHUYÊN NGÀNH: KHOA HỌC MÁY TÍNH Mã số: 480101 LUẬN VĂN THẠC SĨ KHOA HỌC MÁY TÍNH Người hướng dẫn khoa học: TS Vũ Đức Thái THÁI NGUYÊN – 2020 LỜI CẢM ƠN Để hoàn thành luận văn này, lời em xin gửi lời biết ơn chân thành sâu sắc đến thầy giao TS Vũ Đức Thái tận tình hướng dẫn, truyền đạt kinh nghiệm quý giá cho em suốt trình nghiên cứu thực đề tài Em xin gửi lời cảm ơn đến thầy cô giáo khoa Công nghệ thông tin tồn thể thầy giáo truyền đạt vốn kiến thức quý báu cho em suốt trình học tập vừa qua Em quý thầy cô cung cấp truyền đạt tất kiến thức chun mơn cần thiết q giá Ngồi em rèn luyện tinh thần học tập làm việc độc lập sáng tạo Đây tảng cần thiết để thành công hôm Đề tài tốt nghiệp thạc sĩ hội để em áp dụng, tổng kết lại kiến thức mà học Đồng thời, rút kinh nghiệm thực tế quý giá suốt trình thực đề tài Sau thời gian em tập trung công sức cho đề tài làm việc tích cực, đặc biệt nhờ đạo hướng dẫn tận tình thầy giáo TS Vũ Đức Thái với thầy cô trường Đại học Công nghệ thông tin & Truyền thông - Đại học Thái Nguyên, giúp cho em hoàn thành đề tài cách thuận lợi gặt hái kết mong muốn Bên cạnh kết khiêm tốn mà em đạt được, chắn khơng tránh khỏi thiếu sót thực báo cáo mình, kính mong thầy thơng cảm Sự phê bình, góp ý q thầy học kinh nghiệm quý báu cho công việc em sau Là học viên ngành khoa học máy tính, em tự hào khoa mà theo học, tự hào tất thầy Kính chúc q thầy mạnh khoẻ, hạnh phúc, tiếp tục đạt nhiều thắng lợi việc giảng dạy, nghiên cứu khoa học nghiệp trồng người Em xin chân thành cảm ơn! MỤC LỤC MỤC LỤC DANH MỤC HÌNH ẢNH CHƯƠNG 1: TÌM HIỂU KỸ THUẬT XÂY DỰNG TRANG WEB 11 1.1 Một số khái niệm website 11 1.2 Phân tích thiết kế web 13 1.3 Các phần mềm quản trị sở liệu 17 1.4 Các kỹ thuật giải pháp thân thiện web mobile 20 CHƯƠNG 26 CÁC GIẢI PHÁP MOBILE FRIENDLY WEBSITE 26 2.1 Tiêu chuẩn website thân thiện 26 2.2 Các kỹ thuật nâng cao để xây dựng website thân thiện 28 2.3 Một số tiêu chí đanh giá thiết kế website chuẩn SEO 34 CHƯƠNG 45 ỨNG DỤNG XÂY DỰNG WEBSITE CHO TRƯỜNG THPT HỮU NGHỊ 45 LÀO-VIỆTNAM 45 3.1 Giới thiệu trường THPT hữu nghị Lào-Việtnam 45 3.2.1 : Đặc tả mơ hình 49 3.2.2 : Biểu đồ Use Case 49 3.4 Thiết Kế 52 Thiết kế sở liệu 52 3.5.3 Giao diện WebSite 57 3.6 Đánh giá tính thân thiện trang web……………………………………… 61 KẾT LUẬN 64 [6] Patrick McNeil , “Mobile Web Designer's Idea Book: The Ultimate Guide to 65 [7] McNeil, Patrick“Trends, Themes and Styles in Mobile Web Design”, Publisher: HOW Books, 2008 65 Phụ lục……………………………………………………………………………… 64 DANH MỤC HÌNH ẢNH Hình 1.1: Redis - Top hệ quản trị sở liệu phổ biến 19 Hình 1.2: 10 Phương pháp tối ưu website thiết bi di động 18 Hình 1.3: Yêu cầu Thiết kế website 22 Hình 1.4: Xây dựng trang web thân thiện với SEO 24 Hình 2.1: Định dạng văn thích hợp .27 Hình 2.2: Kỹ thuật tạo giao diện thân thiện 29 Hình 2.3: Kỹ thuật tùy biến theo loại hình hiển thịError! Bookmark not defined Hình 2.4: Tham khảo số mẫu để đáp ứng Error! Bookmark not defined Hình 2.5: Phân tích tổng quan thị trường đối thủError! Bookmark not defined Hình 2.6: Site vệ tinh dạng tin tức 36 Hình 2.7: cấu trúc phân tán 36 Hình 2.8: Cấu trúc phẳng .37 Hình 2.9: Phân tích từ khóa để SEO .37 Hình 2.10: Từ khóa key word 38 Hình 2.11: Xây dựng chiến lược internal link .39 Hình 2.12: Khởi tạo hệ thống network social 39 Hình 2.13: Dùng trọng tâm từ khóa 40 Hình 2.14: Content 40 Hình 2.15: Tiến hành Onpage website 39 Hình 2.16: Cập nhật sáng tạo 42 Hình 2.17: Xây dựng hệ thống Onpage 42 Hình 2.18: Tiến hành quảng bá website 43 Hình 3.1: Trường THPT xây thành lập vào năm 2009 45 Hình 3.2: Cựu Tổng bí thư Nơng Đức Mạnh đến thăm trường 2010 46 Hình 3.3: Bà Tịng Thị Phóng đến thăm trường ngày 25/02/2019 47 Hình 3.4: Cựu tổng bí thư Nơng Đức Mạnh đến thăm trường ngày 15/11/2019 47 Hình 3.5: Trường THPT Hữu Nghị Lào-ViệtNam 48 Hình 3.6 : Trường THPT Kim Liên Hà Nội 48 Hình 3.7: Đặc tả mơ hình 49 Hình 3.8: Biểu đồ Use Case tổng quát 50 Hình 3.9: Biểu đồ Usecase cho tác nhân người sử dụng .49 Hình 3.10: Biểu đồ usecase tác nhân người quản trị .49 Hình 3.11 Thiết kế CSDL .52 Hình 3.12 Cài đặt XAMPP để làm máy chủ web 55 Hình 3.13: Cài đặt Wordpress .55 Hình 3.14: Website Trang Chủ Của Trường THPT Hữu Nghị Lào-ViệtNam 57 Hình 3.15: Trang đăng ký học .58 Hình 3.16: Trang quản lý tin tực danh mục 59 Hình 3.17: Giao diện Mobile Ipad 60 Hình 3.18: Giao diện Destop 61 Hình 3.19: Giao diện trang chủ tiếng Việt 61 Hình 3.20: Giao diện trang liên hệ 59 Hình 3.21: Giao diện trang liên hệ 59 Hình 3.22: Giao diện trang liên hệ 60 MỞ ĐẦU Trong năm trở lại thiết bị di động trở nên phổ biến với người, kéo theo lượng truy cập website từ di động tăng đột biến Việc website hiển thị tốt loại thiết bị (desktop, máy tính bảng, điện thoại,…) cần thiết Vì bố cục website phải thiết kế để phù hợp với nhiều kích cỡ hình khác không thiết kế giao diện cố định người ta thường làm trước Đây xem thiết kế website tương thích tốt với di động Dựa phát triển thiết bị di động việc thiết kế website thân thiện với thiết bị di động trở nên dễ dàng Ngày mã nguồn cung cấp phương thức cho người lập trình biết website truy cập từ thiết bị (Iphone 6, Samsung S7, huawei, hay Ipad…) từ dễ dàng thiết kế website phù hợp với thiết bị người truy cập Khi thiết kế website cần tổ chức phân chia nội dung vơ quan trọng người dùng truy cập vào web Làm để khách hàng dễ dàng tìm kiếm nội dung mà họ cần thiết website mình? Một bố cục website hợp lý dễ dàng cho việc tìm kiếm thơng tin cần thiết truy cập Nếu web tổ chức không tốt bố cục không hợp lý, việc tiếp cận thông tin website trở nên khó khăn điều làm cho người truy cập quay lưng với website Cách phân chia tổ chức nội dung: trước thiết kế phải xác định thông tin cung cấp cho người dùng dạng Xác định đối tượng quan tâm đến nội dung mình, từ hiểu thêm sở thích, thể loại người truy cập quan tâm theo sát nhu cầu cần thiết người sử dụng từ thiết kế website thích hợp Bố cục nội dung: bố cục nội dung website phải thiết kế cách rõ ràng, tinh tế Các vấn đề liên quan đến yếu tố kỹ thuật thiết bị sử dụng để truy cập thông tin web (PC, máy tính bảng, điện thoại di động…) vấn đề nên quan tâm đến Khi người dùng vào trang web mình, phải cho họ thấy bật dẫn dắt họ tiếp cận thông tin trang web nhiều Đường link liên kết điểm mạnh website Đối với trang web phục vụ nhiều đối tượng khác nên phân chia nội dung nhằm giúp người truy cập tiếp cận tốt với trang web Đối với đối tượng am hiểu, hay sản phẩm, nội dung trang web có thương hiệu từ trước, người truy cập xem sơ qua chọn thơng tin cần thiết phù hợp Nhưng người truy cập chưa ghé thăm website lần họ cần phải tìm hiểu rõ thơng tin dịch vụ đưa định, mà việc xây dựng đường link liên kết đến thông tin mà họ cần tham khảo vấn đề quan trọng để giữ số lượng người truy cập tiềm Tốc độ tải trang website tối đa giây mức chuẩn cho website chuẩn SEO Người dùng không đủ kiên nhẫn chờ đợi 10 giây cho trang web website mà họ chưa nhìn thấy Ngồi khơng phải sử dụng đường truyền internet có tốc độ cao Nếu website load chậm số lượng người truy cập tiềm vốn có Khi thiết kế website cần hạn chế lạm dụng hình ảnh, video audio Mặc dù việc sử dụng hình ảnh audio truyền tải thơng tin đến người dùng cách trực tiếp nhanh chóng, cần chọn lọc sử dụng cần thiết Để có website tương thích với tất trình duyệt khơng phải nhà thiết kế web làm được, đáp ứng trình duyệt thơng dụng như: Google Chrome, Internet Explorer, Mozila Firefox, Opera, Safari… điều mà website chuyên nghiệp cần phải có Mặt khác phân tích việc tạo giao diện trang web thân thiện hấp dẫn với người đọc vấn đề cần nghiên cứu áp dụng linh hoạt sáng tạo nguyên tắc, kinh nghiệm chuyên gia Việc sử dụng từ ngữ dễ hiểu làm tăng thêm tính tiện dụng, giúp cho website thân thiện người dùng Ai khơng theo dõi quảng cáo hay nội dung mình, họ khơng hiểu mà muốn truyền đạt Đối với vấn đề việc sử dụng ngôn từ phù hợp với kiến thức trình độ phân khúc thị trường mà hướng đến vấn đề cần quan tâm tìm hiểu rõ Người truy cập tìm đến website chưa biết trang web, thơng tin dic vụ mà muốn cung cấp, cần tìm hiểu trang web họ cần gì? Làm cách để truyền đạt cho họ thông tin cần thiết, dễ hiểu Đối với hình ảnh sử dụng website cần tối ưu kích thước dung lượng mức tối thiểu mà người dùng xem Người làm cơng việc tối ưu hình ảnh xem xét thông số thấp nhất, độ nén tối đa, mà người dùng xem cách rõ ràng.Việc tối ưu hóa tốc độ tải trang khơng giúp cho người dùng mà cịn giúp hệ thống máy chủ nhẹ nhàng hơn, tiết kiệm nguồn tài nguyên băng thông, làm tăng khả cung cấp lượng truy cập tốt Hiện nay, có nhiều trang web lạm dụng hình ảnh động hiệu ứng javascrip, hay sử dụng Flash để tạo hiệu ứng đồ họa bắt mắt, vấn đề cần cân nhắc chọn lọc sử dụng Các thành phần làm tăng thời gian tải website đồng thời làm người dùng lãng thơng tin mà muốn cung cấp.Với thời đại công nghệ tại, người trở nên bận rộn tất bật với cơng việc hơn, việc tiết kiệm thời gian truy cập vào trang web tìm kiếm thông tin mà họ cần thiết quan trọng tập trung vào hiệu ứng Khơng website thiết kế chưa kiểm tra kỹ lưỡng cho việc thích hợp với trình duyệt web Điều làm cho website giảm tính chun nghiệp, điển hình vấn đề bể giao diện truy cập Hiện (2019), trường hữu nghị Lào-Việt Nam chưa có website, Ban giám hiệu nhà trường yêu cầu nghiên cứu tạo trang web máy PC Smart phone thân thiện với người dùng, trang web sử dụng hai ngôn ngữ Lào-Việt Nếu trường có trang web riêng giúp đưa thông tin mong muốn lên mạng internet cho người xem Trang web giúp nhà trường quảng bá, giới thiệu thông tin cho giáo viên, sinh viên, phụ huynh, trường khác, Bộ Giáo dục Đào tạo Việt Nam Bộ Giáo dục Thể thao Lào theo dõi xem dễ dàng Kết hợp với kiến thức xây dựng trang web thân thiện công nghệ cài đặt, từ ý nghĩa trang web thân thiện phục vụ nhà trường, em xin thực luận văn với đề tài: “Nghiên cứu triển khai giải pháp Website resonsive ứng dụng” với đề tài em nghiên cứu áp dụng công nghệ mới, đại vào việc xây dựng phát triển trang web trường PC smart phone nhằm đáp ứng nhu cầu đặt nhà trường cho phát triển nhà trường tăng cường hợp tác hữu nghị hai nước Lào Việt Nam 10 CHƯƠNG 1: TÌM HIỂU KỸ THUẬT XÂY DỰNG TRANG WEB 1.1 Một số khái niệm website Website tập hợp trang web (web pages) bao gồm văn bản, hình ảnh, video, flash… thường nằm tên miền (domain name) tên miền phụ (subdomain) Trang web lưu trữ ( web hosting) máy chủ web (web server) truy cập thơng qua Internet.Website đóng vai trị văn phịng hay cửa hàng mạng Internet – nơi giới thiệu thông tin sản phẩm dịch vụ doanh nghiệp cung cấp… Có thể coi website mặt doanh nghiệp, nơi để đón tiếp giao dịch với khách hàng, đối tác Internet Website từ lâu trở thành phần thiếu sống người Đặc biệt, với thời kì công nghệ thông tin ngày phát triển nay, thương mại điện tử đến gần với người hết Vậy, biết thành phần khơng thể thiếu Hiện nay, để website vận hành mơi trường mạng, bắt buộc phải có thành phần chính: - Domain name(tên miền): Là địa xác website, mà website muốn hoạt động phải có Tên miền tồn mạng internet Người dùng phải đóng phí trì hàng năm để sở hữu tên miền - Cloud Hosting : Là nơi lưu trữ tồn liệu trang web, từ thông tin, email, liệu, hình ảnh,… Đồng thời, nơi diễn hoạt động trao đổi thông tin người dùng đơn vị cung cấp dịch vụ thông qua mạng internet phần mềm hỗ trợ tự động Nếu khơng có thành phần này, website vĩnh viễn khơng xuất internet, đến với người tiêu dùng Một số loại hosting kể đến như: + Shared Web Hosting + Reseller Web hosting + Cloud Hosting + Máy chủ ảo – VPS Hosting + Máy chủ dùng riêng – Dedicated web hosting + Dịch vụ thuê chỗ đặt máy chủ – Colocation web hosting 11 - Trình duyệt web (Web browser) Một ứng dụng cho phép người dùng xem tương tác với thông tin trang web Các văn bản, liệu, hình ảnh chứa siêu liên kết dẫn đọc đến trang web khác địa chỉ, chí dẫn đọc sang hẳn địa web khác Nhờ có trình duyệt web mà người dùng truy cập vào thơng tin web cách nhanh chóng, đơn giản dễ dàng thơng qua liên kết Một bật mí nho nhỏ, trang web hiển thị khác trình duyệt khác thơng qua định dạng HTML Một số trình duyệt web thơng dụng cho máy tính cá nhân,di động bao gồm Internet Explorer, Mozilla Firefox, Safari, Opera, Avant Browser, Konqueror, Google Chrome, … World Wide Web: World Wide Web, gọi tắt Web WWW, mạng lưới tồn cầu khơng gian thơng tin tồn cầu mà người truy nhập (đọc viết) qua máy tính, điện thoại di động nối với mạng Internet Thuật ngữ thường hiểu nhầm từ đồng nghĩa với thuật ngữ Internet Nhưng Web thực dịch vụ chạy mạng, chẳng hạn dịch vụ thư điện tử Web phát minh đưa vào sử dụng vào khoảng năm 1990, 1991 Các tài liệu World Wide Web lưu trữ hệ thống siêu văn (hypertext), đặt trung tâm máy chủ mạng Internet Người dùng phải sử dụng chương trình gọi trình duyệt web (web browser) để xem siêu văn Chương trình nhận thông tin (documents) ô địa (address) người sử dụng yêu cầu thông tin ô địa gọi tên miền (domain name), sau chương trình tự động gửi thơng tin đến máy chủ (web server) hiển thị hình máy tính người xem Người dùng theo liên kết siêu văn (hyperlink) trang web để nối với tài liệu khác gửi thông tin phản hồi theo máy chủ trình tương tác Hoạt động truy tìm theo siêu liên kết thường gọi duyệt Web Quá trình cho phép người dùng lướt trang web để lấy thơng tin Tuy nhiên độ xác chứng thực thông tin không đảm bảo 12 1.2 Phân tích thiết kế web Phân tích thiết kế web dịch vụ dành cho cá nhân, doanh nghiệp hoạt động giống thiết kế trang riêng giới thiệu tổng quan đơn vị trường bao gồm đầy đủ thông tin liên hệ, tham khảo… đơn vị giảng dạy nhiều mơn, nhiều ngành nghề hay gói dịch vụ khác thiết kế website giáo dục tạo nên kênh để quảng bá dịch vụ giảng dạy mà cung cấp [2] Hiện nay, Nước ta khuyến khích trường, trung tâm đào tạo ứng dụng công nghệ thông tin vào quản lý điều hành để góp phần nâng cao chất lượng giảng dạy Điều dẫn đến việc có nhiều đơn vị kinh doanh giáo dục, trường học sử dụng website làm công cụ truyền thơng thức Thiết kế website trường học xem nơi để quảng bá hình ảnh, sở vật chất tốt đến sinh viên, phụ huynh, học viên có ý định theo học trường, sử dụng dịch vụ giáo dục Điều quan trọng học viên, sinh viên tiềm họ có nhiều lựa chọn, đơn vị khơng làm cách để thu hút họ đối thủ thay làm điều Sự thiết kế website khơng phải việc đơn giản website đa tiện ích thiết kế nhằm mang lại tiện lợi cho đội ngũ cán mà cịn giúp bạn sinh viên, học viên dễ dàng biết thông tin từ khóa học, đăng ký mơn học, chun nghành… địi hỏi tỉ mỉ, tinh tế thiết kế phối hợp logic cho phù hợp với lĩnh vực giáo dục Đối với việc thiết kế website dùng bước sau: [3] Bước 1: Tìm web host đáng tin cậy Trước nói đến việc thiết kế website, cần xử lý vấn đề kỹ thuật trước Đầu tiên, ta cần tìm web host đáng tin cậy để host site Nhiều người thường tìm host rẻ cho xong, bắt đầu thiết kế Nhưng lại sai lầm lớn họ Không phải nhà cung cấp web host có chất lượng dịch vụ tính năng, cần đầu tư vào bước để chọn nơi có danh tiếng tốt đáng tin cậy Sau số tính mà nhà cung cấp web hosting chất lượng cao cần có: Dịch vụ chăm sóc khách hàng tốt Họ có host website đạt chất lượng cao 13 Tính cộng thêm để giúp việc sử dụng dễ dàng hơn, tự động backup Hướng dẫn chuyên sâu, để tự xử lý vấn đề Hỗ trợ tảng cần dùng để tạo website Như biết, hầu hết web host quảng cáo họ đáp ứng đầy đủ tiêu chuẩn Cho nên cần tự nghiên cứu nhà cung cấp Hãy sử dụng trang đánh giá hosting để chọn nhà cung cấp host nhiều đánh giá tốt đơi cịn tặng kèm tên miền miễn phí mua gói Premium hay Business họ, đừng quên nhận tên miền tiến hành toán” Bước 2: Chọn tảng để xây dựng website Khi có hosting, ta chọn tảng/phần mềm để hỗ trợ thiết kế web tự code từ số muốn có thể, dĩ nhiên việc phù hợp cho có kinh nghiệm lập trình Đối với tảng website, cần chọn hệ quản trị nội dung (Content Management Systems - CMS) Những tảng giúp thiết kế website chuyên nghiệp quản lý nội dung với khối lượng lớn, hầu hết thân thiện với người dùng Có nhiều lựa chọn CMS, WordPress, tảng chiếm tới 30% giới web, an tâm mà dùng WordPress đơn giản, dễ sử dụng, tùy chỉnh chi tiết nhờ vào hệ thống theme plugin Bên cạnh CMS, sử dụng công cụ webstie builder Những giải pháp giúp tạo website phương pháp kéo thả, cịn có yếu tố sẵn sàng sử dụng Website builders [11] cách đơn giản để giúp thiết kế website chạy tốt vận hành nhanh, giúp tùy chỉnh nhiều Nếu thấy thích, với tồn gói hosting Hostinger, tặng sẵn website builder tích hợp để chạy đăng ký, nên nhớ xem qua thử cách tạo website Trong phần lại hướng dẫn này, tập trung sử dụng WordPress để thiết kế web, tảng phổ biến để sử dụng, cịn ó nhiều tools giúp học thiết kế web nhanh chóng Bước 3: Cài đặt cơng cụ cần Đầu tiên cần cài XAMPP thường dùng để tạo máy chủ web (web server) tích hợp sẵn Apache, PHP, MySQL, FTP Server, Mail Server công cụ phpMyAdmin [14] Sau ta bắt đầu cài WordPress cịn cần thiết lập vài 14 cơng cụ để thực mang thiết webstie, cần theme trước, theme phù hợp với thiết kế có đầu làm giao diện cho webstie Có hàng ngàn themes chọn ta sử dụng WordPress Chúng ta nên sử dụng theme miễn phí để làm quen với tảng trước chọn theme danh bạ theme thức WordPress: Hãy xem qua theme chọn theme có nhiều bình luận tích cực vừa cập nhật Một theme khơng có yếu tố khơng nên chọn, thường gây rắc rối sau Sau chọn theme, cài đặt kích hoạt Ở thời điểm này, sử dụng WordPress page builder plugin Công cụ giúp thiết kế website nhanh chóng WordPress đơn giản, để website trơng thực đẹp cần bỏ nhiều công sức để thiết kế Với plugin website builder, cần chỉnh thiết kế cho phù hợp, sử dụng plugin vô đơn giản Như biết, có nhiều plugin builder WordPress Tuy nhiên, thích dùng Beaver Builder, có nhiều tính tiện dụng lắm, xem qua hình sau: Làm để thiết kế website với plugin lại khơng có khó khăn, sử dụng hàng loạt yếu tố có sẵn để thêm vào trang web, cần kéo thả xuống vị trí cần thêm Sau chỉnh yếu tố, để trơng đẹp được: Nếu khơng thích Beaver Builder, có nhiều lựa chọn khác ngồi Khi tìm plugin thiết kế website phù hợp, cần cài đặt sử dụng để làm quen Bước 4: Tạo Mockup cho giao diện web Khi thiết kế website, cần vận dụng khả sáng tạo cá nhân Sau có website WordPress với theme plugin builder cài sẵn, cấn lấy bút giấy vẽ giao diện website để dàn trang xem Đây gọi mockup, khơng cần tiết Điểm quan trọng cần chứa đủ yếu tố ta muốn thấy website Dĩ nhiên, vẽ thêm chi tiết tốt Mockup dùng làm hình ảnh tham khảo bước vào thiết kế website thức Nếu khơng có giấy bút, dùng tool để tạo mockups máy tính Điểm yếu ứng dụng cần học sử dụng, cần dùng thời gian để làm quen sử 15 dụng Ở bước này, chỉnh sửa mockup nhiều lần mong muốn, cảm thấy hài lịng qua bước Bước 5: Thiết kế website Prototype (bản mẫu website) hồn thiện Sau có mockup, lúc chuyển từ giấy nháp lên giới số Hay nói cách khác, bắt đầu tạo prototyp cho website Vì có website builder tốt rồi, việc mở WordPress editor Sau thêm yếu tố ta muốn vào trang web, xếp cho xuất giống mockups Tùy vào plugin builder q trình khác Tuy nhiên, vào lúc này, sâu vào chi tiết, chọn kiểu chữ, cở chữ, màu sắc Điều quan trọng cần dàn trang cho prototyp website hoạt động chứa đầy đủ yếu tố mockup vào Sau có prototyp thực định liên quan đến dàn trang, chỉnh sửa cải thiện thiết kế gốc website Đây lúc nên tập trung vào chi tiết nhỏ Thường mockups hồn tồn khác với việc chuyển đổi sang prototyp Nhưng, chuyện bình thường Và cịn nữa, prototyp khơng cần phải giống với site hoàn thiện Thời gian để thiết kế tùy thuộc vào kiểu người Nếu theo chủ nghĩa hồn hảo lâu đó, cịn có hàng loạt yếu tố để tùy chỉnh tùy biết, nên không cần phải vội Một mẹo bạn nên nhớ đầu đừng quan tâm đến văn nội dung web Để xây dựng prototype nhanh hơn, dùng loại text placeholder stock image lấp vào chỗ trống Khi thiết kế xong giao diện, thứ vừa mắt, thêm nội dung vào để thay Bước 6: Kiểm tra xem thiết kế trông có ổn khơng thiết bị di động Chúng ta biết cách thiết kế website Tuy nhiên, bước cuối mà cần phải quan tâm tới cần đảm bảo trơng đẹp mắt thiết bị di động [6,7] Ngày nay, traffic mobile vượt qua traffic từ máy tính, việc đảm bảo thiết kế trông đẹp mắt độ phân giải nhỏ yếu tố then chốt Nếu website trông bất thường, người truy cập từ điện thoại, họ thất vọng làm tăng tỉ lệ bounce rate lên, (vừa vào thoát trang), điều không web master muốn Nhưng ta khơng cần lo hầu hết page builder WordPress (như Beaver Builder có hỗ trợ mobile từ đầu Thiết kế tự động điều chỉnh 16 cho đẹp mắt mobile, nên không cần làm hết Nhưng, dĩ nhiên, cần kiểm tra trực tiếp để xem có vấn đề khơng Có nhiều cách để kiểm tra, ví dụ dùng điện thoại để truy cập Thứ hai, dùng Chrome’s Dev Tools, cách tốt tự chọn phiên phân giải để duyệt website Để truy cập vào công cụ này, chuột phải vào đâu website, nhấn nút Inspect Giờ hình cùng, có lựa chọn độ phân giải hình bên dưới: Nếu kỹ tính, qua vài độ phân giải khác để đảm bảo website trông thực ổn hoạt động mong muốn Nếu có vấn đề, quay lại bước prototype để sử dụng công cụ website builder để sửa chúng Sau sửa lỗi, website sẵn sàng để mắt 1.3 Các phần mềm quản trị sở liệu Hiện với phát triển công nghệ thông tin hệ quản trị sở liệu đa dạng phong phú nhiên phổ biến hệ quản trị CSDL đây: (1) Hệ quản trị sở liệu Oracle Oracle hệ quản trị sở liệu quan hệ đối tượng sử dụng rộng rãi Phiên công cụ 12c, c nghĩa điện tốn đám mây Nó hỗ trợ nhiều phiên Windows, UNIX Linux Một vài tính Oracle RDBMS (RDBMS) viết tắt Relational Database Management System có nghĩa hệ quản trị sỡ liệu quan hệ RDBMS sở cho SQL, cho tất hệ thống sở liệu đại MS SQL Server, IBM DB2, Oracle, MySQL Microsoft Access Hệ thống quản lý sở liệu quan hệ (RDBMS) hệ thống quản lý sở liệu (DBMS) dựa mơ hình quan hệ giới thiệu EF Codd sau: Được bảo mật Chiếm khơng gian Hỗ trợ sở liệu lớn giảm thời gian CPU để xử lý liệu Chi phí: Đây DBMS thương mại (2) Hệ quản trị sở liệu MySQL Phiên Ngôn ngữ sử dụng C C ++ Hoạt động Linux, Windows.Vài tính số là: 17 Tốc độ xử lý liệu cao, việc sử dụng trình kích hoạt tăng suất, với tính quay lại cam kết giúp khơi phục liệu cần Chi phí: Đây DBMS thương mại (3) Hệ quản trị sở liệu Microsoft SQL server Được phát triển năm 1989 Phiên cập nhật đưa vào năm 2016 Ngôn ngữ sử dụng Assembly C, Linux, C ++ để viết Hoạt động hệ điều hành Linux windows Một số tính máy chủ MS SQL bao gồm: Tương thích với Oracle cung cấp quản lý hiệu khối lượng công việc cho phép nhiều người dùng sử dụng sở liệu Chi phí: Đây DBMS thương mại (4) Hệ quản trị sở liệu PostgreSQL Đó sở liệu nâng cao Các phiên 9.6.2 Có thể sử dụng hệ điều hành Linux windows.Vài tính số là: Nó sử dụng sở liệu quan hệ đối tượng Dữ liệu an toàn Truy xuất liệu nhanh Chia sẻ liệu thơng qua trang tổng quan nhanh Chi phí: Đây công cụ nguồn mở (5) Hệ quản trị sở liệu MongoDB Vài tính số là: Đó sở liệu xử lý liệu lớn đồng thời sử dụng nhớ để liệu truy cập dễ dàng, sử dụng phép nối phức tạp khơng có đó, việc chia tỷ lệ dễ dàng Chi phí: Đây công cụ nguồn mở (6) Hệ quản trị sở liệu DB2 Phiên 11.1.Developed năm 1983 Ngôn ngữ sử dụng Assembly Language, C, C ++ để viết Nó hỗ trợ nhiều phiên Windows, UNIX Linux Một vài tính IBM DB2 sau: Nó dễ dàng để cài đặt thiết lập liệu truy cập dễ dàng, chúng tơi tiết kiệm số lượng lớn liệu gần lên đến byte vật ni Chi phí: Đây DBMS thương mại 18 (7) Hệ quản trị sở liệu Redis Hình 1.1: Redis - Top hệ quản trị sở liệu phổ biến Phiên ổn định 3.2.8 Có thể làm việc cửa sổ, hệ điều hành Linux Nó mã hóa ngơn ngữ ANSI C.Vài tính số là: Tốc độ thực cao, kiểu liệu băm chuỗi sử dụng hiệu suất truy vấn cao Chi phí: Đây công cụ nguồn mở cấp phép BDS (8) Hệ quản trị sở liệu Elasticsearch Elasticsearch thực chất hoặt động web server, có khả tìm kiếm nhanh chóng thơng qua giao thức RESTful Elasticsearch có khả phân tích thống kê liệu Elasticsearch hệ thống phân tán có khả mở rộng tuyệt vời Lắp thêm node cho nó tự động mở rộng cho Chi phí: Đây open source phát triển Java Vài tính số là: Xử lý lượng lớn liệu lưu trữ nhiều máy chủ phân bố khắp nơi Song song cung cấp khả mở rộng cao sẵn có mà khơng gặp lỗi Các hệ thống Cassandra mở rộng nhiều trung tâm liệu, cho phép độ trễ thấp cho tất máy kết nối Tóm lại, hệ quản trị sở liệu nói có ưu điểm nhược điểm riêng, hữu ích không phù hợp với yêu cầu liệu Ngồi hệ quản trị sở liệu bắt buộc phải nghiên cứu Oracle, MySQL Microsoft 19 SQL Server, tìm hiểu số sở liệu khác MongoDb hay Teradata (dùng cho big data, IoT, BI) để phù hợp với công việc hay đơn giản thỏa mãn đam mê thân 1.4 Các kỹ thuật giải pháp thân thiện web mobile Tối ưu hóa website thiết bị di động [6,7] Khi thiết bị di động, máy tính bảng trở thành vật bất ly thân quan trọng người dùng việc tối ưu hóa trang di động dường trở thành nhu cầu cấp bách doanh nghiệp để chạm vào thị trường bắt kịp xu nhu cầu người người tiêu dùng thường xuyên cập nhật xu hướng Hiện xu hướng SEO Mobile trở thành phần thiết yếu trong chiến lược quảng cáo thương hiệu, sản phẩm dịch vụ Vì việc tối ưu hóa website cho thiết bị di động trở nên quan trọng theo số liệu thống kê nhât có khoảng 97% người dùng tìm kiếm thơng tin điện thoại di động 54% số thực giao dịch mua hàng điện thoại Thiết kế web Tín Nghĩa thảo luận vấn đề “Tại tối ưu hóa website thiết bị di động lại quan trọng?" Khi thiết bị di động, máy tính bảng trở thành vật bất ly thân quan trọng người dùng việc tối ưu hóa website thiết bị di động đem lại nhiều hội thách thức lớn nhà quảng cáo việc chuyển tải thông điệp trưc tiếp mục tiêu trải nghiệm trực tuyến độc thơng qua website thân thiện với người dùng Hình 1.2: 10 Phương pháp tối ưu website thiết bi di động 20 ...ĐẠI HỌC THÁI NGUYÊN TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG MOUA VANG NGHIÊN CỨU TRIỂN KHAI CÁC GIẢI PHÁP MOBILE RESPONSIVE WEBSITE VÀ ỨNG DỤNG CHUYÊN NGÀNH: KHOA HỌC MÁY TÍNH Mã... trường, em xin thực luận văn với đề tài: ? ?Nghiên cứu triển khai giải pháp Website resonsive ứng dụng? ?? với đề tài em nghiên cứu áp dụng công nghệ mới, đại vào việc xây dựng phát triển trang web trường... NGÀNH: KHOA HỌC MÁY TÍNH Mã số: 480101 LUẬN VĂN THẠC SĨ KHOA HỌC MÁY TÍNH Người hướng dẫn khoa học: TS Vũ Đức Thái THÁI NGUYÊN – 2020 LỜI CẢM ƠN Để hoàn thành luận văn này, lời em xin gửi lời biết