Tài liệu Nghiên cứu triển khai các giải pháp mobile responsive website và ứng dụ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 1 ĐẠ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 2 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! 3 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 4 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 5 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 6 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. 7 Đường link liên kết là một điểm mạnh của một website. Đối với các trang web phục vụ nhiều đối tượng khác nhau nên phân chia nội dung nhằm giúp người truy cập tiếp cận tốt nhất với trang web của mình. Đối với những đối tượng đã am hiểu, hay các sản phẩm, nội dung của trang web chúng ta đã có thương hiệu từ trước, người truy cập sẽ chỉ xem sơ qua là có thể chọn được thông tin cần thiết và phù hợp. Nhưng những người truy cập chưa ghé thăm website của mình lần nào thì họ cần phải tìm hiểu rõ hơn về các thông tin cũng như dịch vụ rồi mới đưa ra quyết định, vì vậy mà việc xây dựng những đường link liên kết ngay đến thông tin mà họ cần tham khảo là vấn đề quan trọng để có thể giữ được số lượng người truy cập tiềm năng. Tốc độ tải trang của một website tối đa là 3 giây là mức chuẩn cho một website chuẩn SEO. Người dùng sẽ không đủ kiên nhẫn chờ đợi quá 10 giây cho mỗi trang web trong website của mình mà họ chưa nhìn thấy được gì. Ngoài ra không phải ai cũng sử dụng đường truyền internet có tốc độ cao. Nếu website của mình load chậm sẽ mất đi số lượng người truy cập tiềm năng vốn có. Khi thiết kế website cần hạn chế lạm dụng hình ảnh, video và audio. Mặc dù việc sử dụng hình ảnh và audio có thể truyền tải thông tin đến người dùng một cách trực tiếp và nhanh chóng, nhưng cần chọn lọc và sử dụng khi cần thiết. Để có một website tương thích với tất cả các trình duyệt không phải nhà thiết kế web nào cũng có thể làm được, nhưng nếu đáp ứng được các trình duyệt thông dụng hiện nay như: Google Chrome, Internet Explorer, Mozila Firefox, Opera, Safari… là điều mà các website chuyên nghiệp cần phải có. Mặt khác như phân tích trên việc tạo ra giao diện của một trang web thân thiện hấp dẫn với người đọc là vấn đề cần nghiên cứu và áp dụng linh hoạt sáng tạo các nguyên tắc, kinh nghiệm của các chuyên gia. Việc sử dụng các từ ngữ dễ hiểu sẽ làm tăng thêm tính tiện dụng, giúp cho website thân thiện hơn đối với người dùng. Ai đó sẽ không theo dõi các quảng cáo hay nội dung của mình, nếu như họ không hiểu được những gì mà mình muốn truyền đạt. Đối với vấn đề này việc sử dụng ngôn từ phù hợp với kiến thức và trình độ của phân khúc thị trường mà mình đang hướng đến là vấn đề mình cần quan tâm và tìm hiểu rõ. Người truy cập tìm đến website có thể chưa biết gì về trang web, cũng như các thông tin dic vụ mà mình đang muốn cung cấp, vậy cần tìm hiểu về trang web đó họ 8 cần những gì? Làm cách nào để truyền đạt cho họ những thông tin cần thiết, dễ hiểu nhất. Đối với hình ảnh được sử dụng trên website cần được tối ưu kích thước và dung lượng ở mức tối thiểu mà người dùng vẫn có thể xem được. Người làm công việc tối ưu hình ảnh sẽ xem xét các thông số thấp nhất, độ nén tối đa, mà người dùng vẫn có thể xem được một cách rõ ràng.Việc tối ưu hóa tốc độ tải trang không chỉ 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 được nguồn tài nguyên và băng thông, làm tăng khả năng cung cấp lượng truy cập tốt hơn. Hiện nay, có khá nhiều trang web lạm dụng hình ảnh động và những hiệu ứng javascrip, hay sử dụng Flash để tạo ra các hiệu ứng đồ họa bắt mắt, đây là vấn đề cần được cân nhắc và chọn lọc khi sử dụng. Các thành phần này sẽ làm tăng thời gian tải về của website đồng thời cũng sẽ làm người dùng sao lãng thông tin chính mà mình đang muốn cung cấp.Với thời đại công nghệ như hiện tại, con người sẽ trở nên bận rộn và tất bật với công việc của mình hơn, việc tiết kiệm thời gian truy cập vào các trang web và tìm kiếm thông tin mà họ cần thiết là quan trọng hơn là tập trung vào những hiệu ứng đó. Không ít các website được thiết kế chưa kiểm tra kỹ lưỡng cho việc thích hợp với các trình duyệt web. Điều đó có thể làm cho website của mình giảm tính chuyên nghiệp, điển hình là vấn đề bể giao diện khi truy cập. Hiện nay (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 hãy nghiên cứu và tạo một trang web trên nền máy PC và 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 sẽ giúp đưa những thông tin mong muốn lên mạng internet cho mọi người cùng xem. Trang web có thể 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 và Bộ Giáo dục và Thể thao Lào được theo dõi và cùng xem dễ dàng. Kết hợp với các kiến thức về xây dựng trang web thân thiện và các công nghệ cài đặt, từ ý nghĩa của một trang web thân thiện phục vụ nhà trường, em xin thực hiện luận văn với đề tài: “Nghiên cứu và triển khai giải pháp Website resonsive và ứng dụng” với đề tài này em sẽ nghiên cứu áp dụng các công nghệ mới, hiện đại vào việc 9 xây dựng và phát triển trang web của trường trên nền PC và smart phone nhằm đáp ứng các nhu cầu đặt ra của nhà trường cho sự phát triển nhà trường và tăng cường sự hợp tác hữu nghị giữa hai nước Lào và 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 cơ bản về website. Website là một tập hợp các trang web (web pages) bao gồm văn bản, hình ảnh, video, flash… thường chỉ nằm trong một tên miền (domain name) hoặc tên miền phụ (subdomain). Trang web được lưu trữ ( web hosting) trên máy chủ web (web server) có thể truy cập thông qua Internet.Website đóng vai trò là một văn phòng hay một cửa hàng trên mạng Internet – nơi giới thiệu thông tin về sản phẩm hoặc dịch vụ do doanh nghiệp cung cấp… Có thể coi website chính là bộ mặt của doanh nghiệp, là nơi để đón tiếp và giao dịch với các khách hàng, đối tác trên Internet. Website từ lâu đã trở thành một phần không thể thiếu trong cuộc sống của con người. Đặc biệt, với thời kì công nghệ thông tin ngày càng phát triển như hiện nay, thương mại điện tử đã đến gần với con người hơn bao giờ hết. Vậy, mình đã biết gì về thành phần không thể thiếu đó. Hiện nay, để một website có thể vận hành trên môi trường mạng, chúng ta bắt buộc phải có 3 thành phần chính: - Domain name(tên miền): Là địa chỉ chính xác của một website, mà bất kì website nào muốn hoạt động đều phải có. Tên miền này chỉ tồn tại một và duy nhất trên mạng internet. Người dùng phải đóng phí duy trì hàng năm để sở hữu tên miền đó. - Cloud Hosting : Là nơi lưu trữ toàn bộ dữ liệu của trang web, từ thông tin, email, dữ liệu, hình ảnh,… Đồng thời, đây cũng là nơi diễn ra rất cả các hoạt động trao đổi thông tin giữa người dùng và đơn vị cung cấp dịch vụ thông qua mạng internet và các 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 được xuất hiện trên internet, đến với người tiêu dùng. Một số loại hosting cơ bản có thể 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 và tương tác với các thông tin trên một trang web bất kì. Các văn bản, dữ liệu, hình ảnh có thể chứa các siêu liên kết dẫn mình đọc đến các trang web khác trong cùng một địa chỉ, hoặc thậm chí là dẫn mình đọc sang hẳn một địa chỉ web khác. Nhờ có trình duyệt web mà người dùng có thể truy cập vào các thông tin trên web một cách nhanh chóng, đơn giản và dễ dàng thông qua các liên kết. Một bật mí nho nhỏ, mọi trang web có thể hiển thị khác nhau trên các trình duyệt khác nhau thông qua định dạng HTML. Một số trình duyệt web thông dụng hiện nay 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 là Web hoặc WWW, mạng lưới toàn cầu là một không gian thông tin toàn cầu mà mọi người có thể truy nhập (đọc và viết) qua các máy tính, điện thoại di động nối với mạng Internet. Thuật ngữ này thường được hiểu nhầm là từ đồng nghĩa với chính thuật ngữ Internet. Nhưng Web thực ra chỉ là một trong các dịch vụ chạy trên mạng, chẳng hạn như dịch vụ thư điện tử. Web được phát minh và đưa vào sử dụng vào khoảng năm 1990, 1991 Các tài liệu trên World Wide Web được lưu trữ trong một hệ thống siêu văn bản (hypertext), đặt tại các trung tâm máy chủ trong mạng Internet. Người dùng phải sử dụng một chương trình được gọi là trình duyệt web (web browser) để xem siêu văn bản. Chương trình này sẽ nhận thông tin (documents) tại ô địa chỉ (address) do người sử dụng yêu cầu thông tin trong ô địa chỉ được gọi là tên miền (domain name), rồi sau đó chương trình sẽ tự động gửi thông tin đến máy chủ (web server) và hiển thị trên màn hình máy tính của người xem. Người dùng có thể theo các liên kết siêu văn bản (hyperlink) trên mỗi trang web để nối với các tài liệu khác hoặc gửi thông tin phản hồi theo máy chủ trong một quá trình tương tác. Hoạt động truy tìm theo các siêu liên kết thường được gọi là duyệt Web. Quá trình này cho phép người dùng có thể lướt các trang web để lấy thông tin. Tuy nhiên độ chính xác và chứng thực của thông tin không được đảm bảo. 12 1.2. Phân tích thiết kế web Phân tích thiết kế web là dịch vụ dành cho các cá nhân, doanh nghiệp hoạt động giống như thiết kế một trang riêng giới thiệu tổng quan về một đơn vị trường bao gồm đầy đủ các thông tin liên hệ, tham khảo… và đối với các đơn vị giảng dạy nhiều bộ môn, nhiều ngành nghề hay gói dịch vụ khác nhau thì thiết kế website giáo dục chính là tạo nên một kênh để quảng bá các dịch vụ giảng dạy mà mình đang cung cấp [2]. Hiện nay, Nước ta đã và đang cực kỳ khuyến khích các trường, các trung tâm đào tạo ứng dụng công nghệ thông tin vào quản lý và điều hành để góp phần nâng cao chất lượng giảng dạy. Điều này dẫn đến việc có rất nhiều đơn vị kinh doanh giáo dục, trường học đã và đang sử dụng website làm công cụ truyền thông chính thức. Thiết kế website trường học có thể xem như một nơi để quảng bá hình ảnh, cơ sở vật chất tốt nhất đến sinh viên, phụ huynh, học viên đang có ý định theo học trường, sử dụng dịch vụ giáo dục của mình. Điều này rất quan trọng vì hiện nay các học viên, sinh viên tiềm năng họ có rất nhiều sự lựa chọn, và nếu như đơn vị của mình không làm mọi cách để thu hút họ thì đối thủ của mình sẽ thay mình làm điều đó. Sự thiết kế website không phải là một việc đơn giản vì đây là một website đa tiện ích thiết kế ra nhằm mang lại sự tiện lợi cho đội ngũ cán bộ mà còn giúp các bạn sinh viên, học viên có thể dễ dàng biết được các thông tin mới từ về các khóa học, đăng ký môn học, chuyên nghành…. chính vì vậy đòi hỏi sự tỉ mỉ, tinh tế trong từng thiết kế cũng như sự phối hợp logic sao cho phù hợp với lĩnh vực giáo dục nhất. Đối với việc thiết kế website này chỉ dùng 6 bước như sau: [3] Bước 1: Tìm một web host đáng tin cậy Trước khi chúng ta nói đến việc thiết kế website, chúng ta cần xử lý vấn đề kỹ thuật trước đã. Đầu tiên, ta cần tìm một web host đáng tin cậy để host site của chúng ta. Nhiều người thường tìm host rẻ nhất cho xong, rồi bắt đầu thiết kế ngay. Nhưng đó lại là sai lầm lớn nhất của họ. Không phải nhà cung cấp web host nào cũng có cùng chất lượng dịch vụ và tính năng, vì vậy chúng ta cần đầu tư vào bước này để chọn được một nơi có danh tiếng tốt và đáng tin cậy nhất. Sau đây là một số tính năng mà một 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 nhất  Họ có host những website đạt chất lượng cao 13  Tính năng cộng thêm để giúp việc sử dụng dễ dàng hơn, như tự động backup  Hướng dẫn chuyên sâu, để mình có thể tự xử lý vấn đề  Hỗ trợ bất kỳ nền tảng nào mình có thể cần dùng để tạo website Như chúng ta biết, hầu hết các web host đều quảng cáo rằng họ đáp ứng đầy đủ tiêu chuẩn. Cho nên cần tự nghiên cứu về mỗi nhà cung cấp. Hãy sử dụng các trang đánh giá hosting để chọn nhà cung cấp host được nhiều đánh giá tốt đôi khi còn tặng kèm tên miền miễn phí khi mình mua gói Premium hay Business của họ, vì vậy đừng quên nhận tên miền này khi chúng ta tiến hành thanh toán” Bước 2: Chọn nền tảng để xây dựng website Khi đã có hosting, ta chọn nền tảng/phần mềm để hỗ trợ mình thiết kế web thì có thể tự code từ con số 0 nếu muốn và nếu có thể, nhưng dĩ nhiên việc này chỉ phù hợp cho ai đã có kinh nghiệm lập trình rồi. Đối với nền tảng website, cần chọn hệ quản trị nội dung (Content Management Systems - CMS). Những nền tảng này sẽ có thể giúp thiết kế website chuyên nghiệp và có thể quản lý nội dung với khối lượng lớn, hầu hết đều thân thiện với người dùng mới. Có rất nhiều lựa chọn CMS, như là WordPress, nền tảng này đang chiếm tới 30% trên thế giới web, chúng ta có thể an tâm mà dùng. WordPress đơn giản, dễ sử dụng, và có thể tùy chỉnh chi tiết nhờ vào hệ thống theme và plugin của nó. Bên cạnh CMS, cũng có thể sử dụng công cụ webstie builder. Những giải pháp này giúp tạo website bằng phương pháp kéo thả, ngoài ra còn có các yếu tố sẵn sàng sử dụng. Website builders [11] là cách đơn giản nhất để giúp thiết kế website chạy tốt và vận hành nhanh, và còn có thể giúp tùy chỉnh rất nhiều. Nếu như thấy thích, với toàn bộ các gói hosting của Hostinger, được tặng sẵn website builder tích hợp để có thể chạy ngay khi đăng ký, nên hãy nhớ xem qua thử cách tạo website này. Trong phần còn lại của bài hướng dẫn này, chúng tôi sẽ tập trung sử dụng WordPress để thiết kế web, vì nó là nền tảng phổ biến nhất để sử dụng, nó còn ó nhiều tools giúp chúng ta học được thiết kế web nhanh chóng. Bước 3: Cài đặt công cụ mình cần Đầu tiên mình cần cài XAMPP thường được dùng để tạo máy chủ web (web server) được tích hợp sẵn Apache, PHP, MySQL, FTP Server, Mail Server và các công cụ như phpMyAdmin [14]. Sau đó ta bắt đầu cài WordPress. mình còn cần thiết lập vài 14 công cụ nữa để có thể thực sự mang thiết kế đến webstie, cần một theme trước, theme này sẽ phù hợp với thiết kế có trong đầu làm giao diện cho webstie. Có hàng ngàn themes chúng ta có thể chọn nếu như ta đang sử dụng WordPress. Chúng ta nên sử dụng theme miễn phí để làm quen với nền tảng này trước và cũng có thể chọn theme trong danh bạ theme chính thức của WordPress: Hãy xem qua các theme chọn một theme có nhiều bình luận tích cực và vừa được cập nhật. Một theme nếu không có cả 2 yếu tố trên thì không nên chọn, vì thường nó sẽ gây rắc rối về sau. Sau khi đã chọn được theme, hãy cài đặt và kích hoạt nó. Ở thời điểm này, chúng ta sẽ sử dụng WordPress page builder plugin. Công cụ này sẽ giúp thiết kế website nhanh chóng. WordPress có thể đơn giản, nhưng để website trông thực sự đẹp thì cần bỏ ít nhiều công sức để thiết kế. Với plugin website builder, chúng ta chỉ cần chỉnh thiết kế sao cho nó phù hợp, sử dụng plugin này cũng vô cùng đơn giản. Như chúng ta biết, có rất nhiều plugin builder trên WordPress. Tuy nhiên, chúng ta thích dùng Beaver Builder, vì nó có nhiều tính năng và cũng tiện dụng lắm, có thể xem qua hình sau: Làm thế nào để thiết kế website với plugin này thì lại không có gì khó khăn, có thể sử dụng hàng loạt yếu tố có sẵn để thêm vào trang web, chỉ cần kéo thả nó xuống vị trí cần thêm là được. Sau đó có thể chỉnh từng yếu tố, để nó trông đẹp là được: Nếu không thích Beaver Builder, thì có rất nhiều lựa chọn khác ngoài kia. Khi đã tìm được plugin thiết kế website phù hợp, chỉ cần cài đặt và sử dụng nó để làm quen. Bước 4: Tạo Mockup cho giao diện web Khi có thể thiết kế được một website, cần vận dụng khả năng sáng tạo cá nhân Sau khi có website WordPress với theme và plugin builder cài sẵn, chúng ta cấn lấy bút và giấy ra vẽ ra giao diện website để dàn trang xem nó như thế nào. Đây gọi là mockup, nó không cần phải chi tiết. Điểm quan trọng là nó cần chứa đủ các yếu tố ta muốn thấy trên website. Dĩ nhiên, cũng có thể vẽ thêm càng chi tiết càng tốt. Mockup sẽ được dùng làm hình ảnh tham khảo khi bước vào thiết kế website chính thức. Nếu không có giấy bút, vậy hãy dùng tool để tạo mockups trên máy tính. Điểm yếu của ứng dụng này là cần học sử dụng, cần dùng ít thời gian để làm quen và sử 15 dụng. Ở bước này, có thể chỉnh sửa mockup nhiều lần như mong muốn, cho đến khi cảm thấy hài lòng thì hãy qua bước tiếp theo. Bước 5: Thiết kế website Prototype (bản mẫu website) và hoàn thiện nó Sau khi đã có mockup, giờ là lúc chuyển từ giấy nháp lên thế giới số. Hay nói cách khác, sẽ bắt đầu tạo prototyp cho website. Vì đã có một website builder tốt rồi, chỉ việc mở nó ra bằng WordPress editor. Sau đó thêm yếu tố ta muốn vào trang web, sắp xếp nó sao cho nó xuất hiện giống như trong mockups. Tùy vào plugin builder thì quá trình này có thể khác nhau. Tuy nhiên, vào lúc này, đi sâu vào chi tiết, như là chọn kiểu chữ, cở chữ, màu sắc Điều quan trọng nhất là cần dàn trang sao cho prototyp của website hoạt động và chứa đầy đủ các yếu tố trên mockup vào. Sau khi đã có prototyp sẽ có thể thực hiện các quyết định liên quan đến dàn trang, chỉnh sửa và cải thiện thiết kế gốc của website. Đây là lúc nên tập trung vào những chi tiết nhỏ hơn. Thường thì mockups sẽ hoàn toàn khác với việc chuyển đổi sang prototyp. Nhưng, chuyện đó là bình thường. Và còn nữa, prototyp cũng không cần phải giống với một site hoàn thiện. Thời gian để thiết kế mất bao lâu sẽ tùy thuộc vào kiểu người nào nữa. Nếu như theo chủ nghĩa hoàn hảo thì chắc là sẽ lâu đó, vì còn có hàng loạt các yếu tố để tùy chỉnh và tùy biết, nên không cần phải vội. Một mẹo bạn nên nhớ trong đầu là đừng quan tâm đến văn bản nội dung trên web. Để xây dựng prototype nhanh hơn, hãy cứ dùng các loại text placeholder và stock image lấp vào chỗ trống. Khi đã thiết kế xong giao diện, và mọi thứ đã vừa mắt, có thể thêm nội dung vào để thay thế. Bước 6: Kiểm tra xem thiết kế trông có ổn không trên thiết bị di động. Chúng ta đã biết cách thiết kế website. Tuy nhiên, còn một bước cuối cùng mà cần phải quan tâm tới là cần đảm bảo nó cũng trông đẹp mắt trên thiết bị di động [6,7]. Ngày nay, traffic mobile đã vượt qua traffic từ máy tính, vì vậy việc đảm bảo thiết kế trông đẹp mắt trên độ phân giải nhỏ cũng là một yếu tố then chốt. Nếu website trông bất thường, khi mọi người truy cập từ điện thoại, họ sẽ rất thất vọng và ngay lập tức làm tăng tỉ lệ bounce rate lên, (vừa vào là thoát trang), điều này chắc không web master nào muốn. Nhưng ta không cần lo vì hầu hết các page builder WordPress (như là Beaver Builder đều có hỗ trợ mobile ngay từ đầu. Thiết kế đã được tự động điều chỉnh sao 16 cho đẹp mắt trên mobile, nên không cần làm gì hết. Nhưng, dĩ nhiên, cần kiểm tra trực tiếp để xem có vấn đề gì không. Có rất nhiều cách để kiểm tra, ví dụ có thể dùng điện thoại để truy cập. Thứ hai, có thể dùng Chrome’s Dev Tools, cách này tốt hơn vì có thể tự chọn phiên bản phân giải để duyệt website. Để truy cập vào công cụ này, chuột phải vào bất kỳ đâu trên website, nhấn nút Inspect. Giờ ở trên màn hình trên cùng, sẽ có lựa chọn độ phân giải như hình bên dưới: Nếu kỹ tính, có thể đi qua vài độ phân giải khác nhau để đảm bảo website trông thực sự ổn và hoạt động như mong muốn. Nếu có vấn đề, hãy quay lại bước prototype để sử dụng công cụ website builder để sửa chúng. Sau khi sửa lỗi, website đã sẵn sàng để ra mắt. 1.3. Các phần mềm quản trị cơ sở dữ liệu Hiện nay cùng với sự phát triển của công nghệ thông tin các hệ quản trị cơ sở dữ liệu cũng đa dạng và phong phú tuy nhiên phổ biến nhất vẫn là các hệ quản trị CSDL dưới đây: (1). Hệ quản trị cơ sở dữ liệu Oracle Oracle là hệ quản trị cơ sở dữ liệu quan hệ đối tượng được sử dụng rộng rãi nhất. Phiên bản mới nhất của công cụ này là 12c, trong đó c nghĩa là điện toán đám mây. Nó hỗ trợ nhiều phiên bản Windows, UNIX và Linux. Một vài tính năng của Oracle RDBMS (RDBMS) là viết tắt của Relational Database Management System có nghĩa là hệ quản trị cơ sỡ dữ liệu quan hệ. RDBMS là cơ sở cho SQL, và cho tất cả các hệ thống cơ sở dữ liệu hiện đại như MS SQL Server, IBM DB2, Oracle, MySQL và Microsoft Access. Hệ thống quản lý cơ sở dữ liệu quan hệ (RDBMS) là một hệ thống quản lý cơ sở dữ liệu (DBMS) dựa trên mô hình quan hệ được giới thiệu bởi EF Codd như sau:  Được bảo mật.  Chiếm không gian ít hơn  Hỗ trợ cơ sở dữ liệu lớn và giảm thời gian CPU để xử lý dữ liệu. Chi phí: Đây là một DBMS thương mại. (2). Hệ quản trị cơ sở dữ liệu MySQL Phiên bản mới nhất 8. Ngôn ngữ được sử dụng là C và C ++. Hoạt động trên Linux, Windows.Vài tính năng trong số này là: 17  Tốc độ xử lý dữ liệu cao, việc sử dụng trình kích hoạt tăng năng suất, với tính năng quay lại và cam kết giúp khôi phục dữ liệu nếu cần. Chi phí: Đây là một DBMS thương mại. (3). Hệ quản trị cơ sở dữ liệu Microsoft SQL server Được phát triển trong năm 1989. Phiên bản cập nhật mới nhất được đưa ra vào năm 2016. Ngôn ngữ được sử dụng là Assembly C, Linux, C ++ để viết nó. Hoạt động trên hệ điều hành Linux và windows. Một số tính năng của máy chủ MS SQL bao gồm:  Tương thích với Oracle cung cấp quản lý hiệu quả khối lượng công việc và cho phép nhiều người dùng sử dụng cùng một cơ sở dữ liệu. Chi phí: Đây là một DBMS thương mại. (4). Hệ quản trị cơ sở dữ liệu PostgreSQL Đó là một cơ sở dữ liệu nâng cao hơn. Các phiên bản hiện tại là 9.6.2. Có thể được sử dụng trên các hệ điều hành Linux và windows.Vài tính năng trong số này là:  Nó sử dụng cơ sở dữ liệu quan hệ đối tượng.  Dữ liệu vẫn an toàn.  Truy xuất dữ liệu nhanh hơn.  Chia sẻ dữ liệu thông qua trang tổng quan nhanh hơn. Chi phí: Đây là một công cụ nguồn mở. (5). Hệ quản trị cơ sở dữ liệu MongoDB Vài tính năng trong số này là:  Đó là một cơ sở dữ liệu có thể xử lý dữ liệu lớn đồng thời và sử dụng bộ nhớ trong để dữ liệu có thể truy cập dễ dàng, sử dụng các phép nối rất phức tạp không có ở đó, việc chia tỷ lệ có thể dễ dàng. Chi phí: Đây là một công cụ nguồn mở (6). Hệ quản trị cơ sở dữ liệu DB2 Phiên bản mới nhất 11.1.Developed trong năm 1983. Ngôn ngữ được sử dụng là Assembly Language, C, C ++ để viết nó. Nó hỗ trợ nhiều phiên bản Windows, UNIX và Linux. Một vài tính năng của IBM DB2 như sau:  Nó rất dễ dàng để cài đặt và thiết lập và dữ liệu có thể truy cập dễ dàng, chúng tôi có thể tiết kiệm số lượng lớn dữ liệu gần như lên đến byte vật nuôi. Chi phí: Đây là một DBMS thương mại. 18 (7). Hệ quản trị cơ sở dữ liệu Redis Hình 1.1: Redis - Top 7 hệ quản trị cơ sở dữ liệu phổ biến nhất hiện nay Phiên bản ổn định mới nhất là 3.2.8. Có thể làm việc trên các cửa sổ, hệ điều hành Linux. Nó được mã hóa bằng ngôn ngữ ANSI C.Vài tính năng trong số này là:  Tốc độ thực sự cao, các kiểu dữ liệu như băm và chuỗi cũng được sử dụng và hiệu suất truy vấn cao. Chi phí: Đây là một công cụ nguồn mở được cấp phép BDS. (8). Hệ quản trị cơ sở dữ liệu Elasticsearch  Elasticsearch thực chất hoặt động như 1 web server, có khả năng tìm kiếm nhanh chóng thông qua giao thức RESTful  Elasticsearch có khả năng phân tích và thống kê dữ liệu  Elasticsearch là 1 hệ thống phân tán và có khả năng mở rộng tuyệt vời. Lắp thêm node cho nó là nó tự động mở rộng cho mình. Chi phí: Đây là một 1 open source được phát triển bằng Java. Vài tính năng trong số này là:  Xử lý lượng lớn dữ liệu được lưu trữ trong nhiều máy chủ phân bố khắp nơi.  Song song đó cung cấp khả năng mở rộng cao và sẵn có mà không gặp một lỗi nào.  Các hệ thống Cassandra có thể mở rộng nhiều trung tâm dữ liệu, cho phép độ trễ thấp cho tất cả các máy kết nối. Tóm lại, mỗi hệ quản trị cơ sở dữ liệu nói trên đều có những ưu điểm và nhược điểm riêng, có thể hữu ích hoặc không phù hợp với yêu cầu dữ liệu của mình. Ngoài 3 hệ quản trị cơ sở dữ liệu bắt buộc phải nghiên cứu là Oracle, MySQL và Microsoft 19 SQL Server, mình cũng có thể tìm hiểu một số cơ sở dữ liệu khác như MongoDb hay Teradata (dùng cho big data, IoT, BI) để phù hợp với công việc hay đơn giản là thỏa mãn đam mê của bản thân. 1.4. Các kỹ thuật giải pháp thân thiện web trên mobile Tối ưu hóa website trên các thiết bị di động [6,7]. Khi các thiết bị di động, máy tính bảng đã trở thành một vật bất ly thân quan trọng của người dùng thì việc tối ưu hóa trang di động dường như đã trở thành một nhu cầu cấp bách đối với các doanh nghiệp để chạm vào các thị trường mới và bắt kịp xu thế cũng như nhu cầu của người những người tiêu dùng thường xuyên cập nhật xu hướng. Hiện nay xu hướng SEO Mobile đã trở thành một phần thiết yếu trong trong chiến lược quảng cáo thương hiệu, sản phẩm dịch vụ. Vì vậy việc tối ưu hóa website cho thiết bị di động trở nên rất quan trọng theo số liệu thống kê mới nhât có khoảng 97% người dùng tìm kiếm các thông tin trên điện thoại di động của mình và 54% trong số đó từng thực hiện giao dịch mua hàng trên điện thoại của mình. Thiết kế web Tín Nghĩa sẽ cùng chúng ta thảo luận vấn đề “Tại sao tối ưu hóa website trên các thiết bị di động lại quan trọng?" Khi các thiết bị di động, máy tính bảng đã trở thành một vật bất ly thân quan trọng của người dùng thì việc tối ưu hóa website trên các thiết bị di động sẽ đem lại nhiều cơ hội cũng như thách thức lớn đối với các nhà quảng cáo trong việc chuyển tải những thông điệp trưc tiếp mục tiêu và 1 trải nghiệm trực tuyến độc nhất thông qua các website thân thiện với người dùng Hình 1.2: 10 Phương pháp tối ưu website trên các thiết bi di động 20