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

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