Nghiên cứu triển khai các giải pháp mobile responsive website và ứng dụng

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

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ố: 8 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

3

LỜI CẢM ƠN

Để hoàn thành luận văn này, lời đầu tiên em xin gửi lời biết ơn chân thành và

sâu sắc nhất đến thầy giao TS. Vũ Đức Thái đã tận tình hướng dẫn, truyền đạt những

kinh nghiệm quý giá cho em trong suốt quá trình nghiên cứu và thực hiện đề tài này.

Em xin gửi lời cảm ơn đến các thầy cô giáo trong khoa Công nghệ thông tin

cùng toàn thể các thầy cô giáo đã truyền đạt vốn kiến thức quý báu cho em trong suốt

quá trình học tập vừa qua. Em đã được quý thầy cô cung cấp và truyền đạt tất cả kiến

thức chuyên môn cần thiết và quý giá nhất. Ngoài ra em còn được rèn luyện một tinh

thần học tập và làm việc độc lập và sáng tạo. Đây là nền tảng hết sức cần thiết để có

thể thành công như hôm nay.

Đề tài tốt nghiệp thạc sĩ là cơ hội để em có thể áp dụng, tổng kết lại những kiến

thức mà mình đã học. Đồng thời, rút ra được những kinh nghiệm thực tế và quý giá

trong suốt quá trình thực hiện đề tài. Sau một thời gian em tập trung công sức cho đề

tài và làm việc tích cực, đặc biệt là nhờ sự chỉ đạo và hướng dẫn tận tình của thầy giáo

TS. Vũ Đức Thái cùng với các thầy cô trong 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 một cách

thuận lợi và gặt hái được những kết quả mong muốn. Bên cạnh những kết quả khiêm

tốn mà em đạt được, chắc chắn không tránh khỏi những thiếu sót khi thực hiện báo cáo

của mình, kính mong thầy cô thông cảm. Sự phê bình, góp ý của quý thầy cô sẽ là

những bài học kinh nghiệm rất quý báu cho công việc của em sau này. Là học viên

ngành khoa học máy tính, em rất tự hào về khoa mà mình theo học, tự hào về tất cả các thầy cô

của mình.

Kính chúc quý thầy cô mạnh khoẻ, hạnh phúc, tiếp tục đạt được nhiều thắng lợi

trong việc giảng dạy, nghiên cứu khoa học và sự nghiệp trồng người.

Em xin chân thành cảm ơn!

4

MỤC LỤC

MỤC LỤC...................................................................................................................................... 4

DANH MỤC HÌNH ẢNH............................................................................................................ 5

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 cơ bản về website................................................................................... 11

1.2. Phân tích thiết kế web........................................................................................................... 13

1.3. Các phần mềm quản trị cơ sở dữ liệu.................................................................................. 17

1.4. Các kỹ thuật giải pháp thân thiện web trên mobile............................................................ 20

CHƯƠNG 2.................................................................................................................................. 26

CÁC GIẢI PHÁP MOBILE FRIENDLY WEBSITE............................................................. 26

2.1. Tiêu chuẩn một 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 3.................................................................................................................................. 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 về 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ế cơ sở dữ liệu................................................................................................................... 52

3.5.3. Giao diện của WebSite...................................................................................................... 57

3.6. Đánh giá về tính thân thiện của 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

5

DANH MỤC HÌNH ẢNH

Hình 1.1: Redis - Top 7 hệ quản trị cơ sở dữ liệu phổ biến nhất hiện nay....................19

Hình 1.2: 10 Phương pháp tối ưu website trên các thiết bi di động ..............................18

Hình 1.3: Yêu cầu về Thiết kế website..........................................................................22

Hình 1.4: Xây dựng trang web của chúng ta luôn thân thiện với SEO .........................24

Hình 2.1: Định dạng văn bả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 màn hình hiển thịError! Bookmark not

defined.

Hình 2.4: Tham khảo một số mẫu để đáp ứng ..............Error! Bookmark not defined.

Hình 2.5: Phân tích tổng quan cơ bản về thị trường và đố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 và social...........................................................39

Hình 2.13: Dùng đú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 và sáng tạo....................................................................................42

Hình 2.17: Xây dựng được 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 mới xây và 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

6

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 và danh mục..............................................................59

Hình 3.17: Giao diện Mobile và 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

7

MỞ ĐẦU

Trong những năm trở lại đây các thiết bị di động đã trở nên quá phổ biến với

mọi người, kéo theo đó là lượng truy cập các website từ di động cũng tăng đột

biến. Việc một website có thể hiển thị tốt trên mọi loại thiết bị (desktop, máy tính

bảng, điện thoại,…) là rất cần thiết.

Vì vậy bố cục của website phải được thiết kế để phù hợp với nhiều kích cỡ màn

hình khác nhau chứ không chỉ thiết kế một giao diện cố định như người ta vẫn thường

làm trước đó. Đây được xem là thiết kế website tương thích tốt với di động .

Dựa trên sự phát triển của các 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 hơn. Ngày nay các mã nguồn còn cung cấp các

phương thức cho người lập trình biết được website được truy cập từ thiết bị nào

(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 và phân chia nội dung vì nó vô cùng quan trọng

đối với người dùng truy cập vào web. Làm sao để khách hàng có thể dễ dàng tìm kiếm

được nội dung mà họ cần thiết trên website của mình? Một bố cục website hợp lý sẽ

dễ dàng cho việc tìm kiếm các thông tin cần thiết khi truy cập. Nếu một web được tổ

chức không tốt bố cục không hợp lý, việc tiếp cận các thông tin của website sẽ trở nên

khó khăn điều đó có thể làm cho người truy cập quay lưng với website của mình. Cách

phân chia và tổ chức nội dung: trước khi thiết kế chúng ta phải xác định được thông tin

sẽ cung cấp cho người dùng sẽ ở dạng nào. Xác định được các đối tượng sẽ quan tâm

đến các nội dung của mình, từ đó có thể hiểu thêm về sở thích, các thể loại được người

truy cập quan tâm theo sát được nhu cầu cần thiết của 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 của website phải được thiết kế

một cách rõ ràng, tinh tế. Các vấn đề liên quan đến yếu tố kỹ thuật như là các thiết bị

được sử dụng để truy cập thông tin web (PC, máy tính bảng, điện thoại di động…) là

vấn đề chúng ta nên quan tâm đến. Khi người dùng vào trang web của mình, mình phải

cho họ thấy sự nổi bật nó sẽ dẫn dắt họ tiếp cận thông tin trang web nhiều hơn.