LỜI CÁM ƠN Sau thời gian thực tập FPT Polytechnic, em chọn đề tài “Hoàn thiện chức hiển thị nội dung số điện thoại di động cho website FPT Polytechnic công cụ Wordpress ” làm khóa luận tốt nghiệp Trong q trình tìm hiểu lý luận thực tế để hoàn thiện đề tài này, em nhận giúp đỡ nhiệt tình Ban Giám đốc, cán nhân viên phịng hệ thống thơng tin, tồn thể cán nhân viên FPT Polytechnic Đặc biệt có hướng dẫn tận tình giáo ThS Nguyễn Thị Hội Tuy có nỗ lực thân khả chun mơn cịn hạn chế, nên khóa luận tốt nghiệp em khơng tránh khỏi thiếu sót Em mong nhận ý kiến bảo quý báu cô giáo hướng dẫn, cô chú, anh chị FPT Polytechnic để em hồn thiện khóa luận tốt nghiệp nâng cao kiến thức phục vụ tốt cho công việc sau Cuối cùng, em xin kính chúc q Thầy, Cơ dồi sức khỏe thành công nghiệp Đồng kính chúc Anh, Chị FPT Polytechnic dồi sức khỏe đạt nhiều thành công công việc Chân thành cảm ơn! Sinh viên thực Trần Thanh Quang i MỤC LỤC LỜI CÁM ƠN i MỤC LỤC ii DANH MỤC BẢNG BIỂU HÌNH VẼ .iv DANH MỤC CÁC TỪ VIẾT TẮT TIẾNG VIỆT .v PHẦN 1: TỔNG QUAN VẤN ĐỀ NGHIÊN CỨU 1.1 Tầm quan trọng, ý nghĩa vấn đề nghiên cứu 1.2 Tổng quan tài liệu liên quan đến nội dung đề tài .2 1.3 Mục tiêu nghiên cứu đề tài 1.4 Đối tượng phạm vi nghiên cứu đề tài 1.4.1.Đối tượng .3 1.4.2.Phạm vi 1.5 Các phương pháp áp dụng thực đề tài 1.5.1.Phương pháp điều tra liệu sơ cấp .3 1.5.2 Phương pháp điều tra liệu thứ cấp 1.5.3 Xử lý liệu thu thập 1.6 Kết cấu khóa luận Phần 2: CƠ SỞ LÝ LUẬN VÀ THỰC TRẠNG WEBSITE CỦA WEBSITE FPT POLYTECHNIC VIỆT NAM .7 2.1 Cơ sở lý luận đề tài 2.1.1 Khái niệm 2.1.1.1 Khái niệm website 2.1.1.2 Khái niệm hiển thị website điện thoại di động ii 2.1.2 Một số lý thuyết cơng cụ áp dụng q trình thực đề tài 10 2.1.2.1 Đôi nét Wordpress 10 2.1.2.2 Vì lại chọn Wordpress 11 2.1.2.3 Một số công cụ hỗ trợ khác cho việc hoàn thiện : CSS, jquerry mobile, Twitter-Bootrap, Bansamiq mockup, Phốthop 12 2.1.3 Phân định nội dung nghiên cứu trình thực đề tài 13 2.2 Phân tích, khảo sát thực trạng wesite FPT Polytechnic .13 2.2.1 Giới thiệu chung FPT Polytechnic Việt Nam 13 2.2.2 Thực trạng website FPT Polytechnic .14 2.2.2.1 Giới thiệu chung 14 2.2.2.2.Các công nghệ ứng dụng website 16 2.2.3 Phân tích, đánh giá website FPT Polytechnic 17 2.2.3.1 Quản trị website 17 2.2.3.2 Phân tích website 18 2.2.3.3 Mạng xã hội .19 2.2.3.4 Hiệu suất (Sử dụng công cụ đo PageSpeed Yslow) 19 2.2.3.5 Thông tin thêm 20 2.2.4 Đánh giá trạng website FPT Polytechnic .20 2.2.4.1 Kết phân tích liệu thứ cấp .20 2.4.2.2 Kết phân tích liệu sơ cấp 21 Phần 3: GIẢI PHÁP, ĐỊNH HƯỚNG PHÁT TRIỂN VÀ CÁC ĐỀ XUẤT VỀ CHỨC NĂNG HIỂN THỊ NỘI DUNG SỐ TRÊN ĐIỆN THOẠI DI ĐỘNG CHO WEBSITE FPT POLYTECHNIC 30 iii 3.1 Hoàn thiện chức hiển thị nội dung số điện thoại di động 30 3.1.1 Từ giao diện PC, xác định thành phần cần loại bỏ, thành phần cần thay đổi để phù hợp với giao diện thiết bị di động .30 3.1.2 Vẽ phác thảo phiên điện thoại bansamiq mockup 33 3.1.3.Thiết kế giao diện Photoshop ( Kết tham khảo phần phụ lục 1) 34 3.1.4.Thiết kế giao diện WordPress cho thiết bị di động sử dụng Twitter Bootstrap ( bước chi tiết tham khảo phụ lục 2) 39 3.1.5.Tối ưu hóa ảnh hiển thị thiết bị di động (ảnh hiển thị điện thoại nhỏ hơn, lazy load, nén ảnh ) 40 3.2 Định hướng phát triển đề tài 40 3.3 Đề xuất kiến nghị FPT Polytechnic nhằm áp dụng tốt giải pháp .41 KẾT LUẬN CỦA KHÓA LUẬN .vi DANH MỤC TÀI LIỆU THAM KHẢO vii PHỤ LỤC viii PHỤ LỤC xi PHỤ LỤC xiv DANH MỤC BẢNG BIỂU HÌNH VẼ Bảng 2.1 Quyền hạn website FPT Polytechnic Bảng 2.2 Đánh giá website FPT Polytechnic công cụ Seo Worker Bảng 2.3 Mạng xã hội facebook FPT Polytechnic Bảng 2.4 Hiệu suất website FPT Polytechnic Bảng 2.5 Một số đánh giá khác website FPT Polytechnic Bảng 2.6 Đề xuất khác cho website FPT Polytechnic Biểu đồ 2.1 Ý kiến số nhân viên quản lý website iv Biểu đồ 2.2 Nội dung chất lượng thông tin website Biểu đồ 2.3 Nội dung, cách xếp phân bố thông tin website Biểu đồ 2.4 Tốc độ tải website Biểu đồ 2.5 Ý kiến việc thay đổi cấu trúc website Biểu đồ 2.6 Hình thức đặt hàng khách hàng Biểu đồ 2.7 Kênh giao tiếp sinh viên với FPT Polytechnic Biểu đồ 2.8 Mức độ hài lòng với chức website Biểu đồ 2.9 Các chức cần nâng cấp, bổ sung Biểu đồ 2.10 Mức độ cần thiết nâng cấp hồn thiện website Hình 2.1 Giao diện trang chủ FPT Polytechnic Hình 2.2 Các vùng đánh dấu để thay thê, loại bỏ Hình 2.3 Thanh menu ngang thành menu dọc Hình 2.4 Hộp đăng ký trực tuyến ngang thành dọc Hình 2.5 Thư viện ảnh cắt bớt Hình 2.6 Phác thảo website cơng cụ Bansamiq mockup Hình 2.7 Thiết kế giao diện Photoshop Hình 2.8 Thiết kế menu Photoshop Hình 2.9 Thiết kế menu đăng ký trực tuyến Photoshop Hình 2.10 Thiết kế phần tin tức Photoshop Hình 2.11 Thiết kế phần Poly góc nhìn Photoshop Hình 2.12 Thiết kế phần kiện Photoshop Hình 2.13 Thiết kế phần thư viện ảnh Photoshop Hình 2.14 Thiết kế phần liên hệ Photoshop DANH MỤC CÁC TỪ VIẾT TẮT TIẾNG VIỆT STT Các từ viết tắt CNTT HTTT QTDN TMĐT Cách viết đầy đủ Công nghệ thông tin Hệ thống thông tin Quản tri doanh nghiệp Thương mại điện tử v vi PHẦN 1: TỔNG QUAN VẤN ĐỀ NGHIÊN CỨU 1.1.Tầm quan trọng, ý nghĩa vấn đề nghiên cứu Trong khoảng hai năm trở lại đây, chứng kiến cách mạng thực với điện thoại thiết bị di động Hãy giành khoảng mười phút quan sát thiết bị di động sử dụng quanh bạn Những điện thoại thông minh với cấu hình phần cứng cịn cao cấu hình máy tính desktop cách mười năm Theo thống kê vnexpress, người dùng Việt Nam ưa thích điện thoại với hình lớn, trang bị hình cảm ứng mà giá chúng cịn đắt máy tính xách tay Do thiết kế website cho thiết bị di động phát triển mạnh vài năm tới để đáp ứng kịp thời với bùng nổ thiết bị di động thông minh Năm 2011 đánh dấu đời hàng loạt cạnh tranh gay gắt thiết bị di động thơng minh hay cịn gọi smart phone chạy tảng Android, IOS, Window phone Chắc hẳn Samsung, Apple, Nokia, LG tên quen thuộc làng sản xuất smart phone Các mẫu điện thoại liên tục giới thiệu, thu hút người tiêu dùng tính ngày cải tiến Với cơng nghệ 3G phát triển Việt Nam từ sớm, ngày kể cậu sinh viên sử dụng điện thoại để cập nhật facebook ngồi xe buýt Trước đây, việc thiết kế website sử dụng cho điện thoại biết tới.Giải pháp viết phần mềm cho điện thoại, có mục đích tự động cập nhật thơng tin từ website.Cũng xây dựng phiên web giành riêng cho điện thoại động sử dụng sub-domain (Ví dụ mobile.tenmien.com hay (m.ten.com).Các giải pháp địi hỏi ngồi chi phí cho thiết kế website thơng thường, bạn phải bỏ thêm chi phí để thiết kế thêm website hay phần mềm di động nữa.Thực tế có vài cơng ty lớn, có tên tuổi có tiềm lực tài thực điều này.Trong vài năm trở lại đây, kỹ thuật thiết kế website có bước tiến vượt bậc, có giải pháp khác cho Các ngơn ngữ lập trình ngày hồn thiện, kỹ thuật sáng tạo HTML5, CSS3, PHP6,Wordpress mang đến cho người thiết kế web nhiều giải pháp để lập trình website Và người thiết kế website hàng đầu đón đầu xu hướng thiết kế website thiết bị di động với kỹ thuật Responsive website( tự động hỗ trợ website điều chỉnh website có độ rộng vừa khít với trình duyệt giúp hiển thị tất kích thước hình khác nhau) Chính mà website FPT Polytechnic nói riêng website tổ chức doanh nghiệp khác nói chung cần phải bắt kịp xu hướng xây dựng website có hỗ trợ hiển thị tốt nội dung điện thoại di động thiết bị số 1.2.Tổng quan tài liệu liên quan đến nội dung đề tài Luận văn:“ Website trường ĐH công nghệ phiên tiếng anh thiết bị di động”–tác giả Nguyễn Thị Thanh Tâm, Khoa Công Nghệ Thông Tin trường ĐH Công Nghệ Đề tài xây dựng phiên website trường ĐH Công nghệ phiên tiếng Anh thiết bị di động Phiên rút gọn website, cho phép hiển thị tốt thiết bị di động vốn bị hạn chế kích thước hình Bắt đầu từ việc nghiên cứu hệ thống website trường ĐH Công nghệ, vốn xây dựng hệ quản trị nội dung Drupal Sau nghiên cứu thành phần bản, module quan trọng, hệ thống file giao diện Drupal tiến hành thiết kế template cho phiên thiết bị di động Triển khai cách cài đặt trang Drupal với liệu lấy từ phiên gốc hiển thị lại theo template thiết kế Kết quả, xây dựng thành công phiên thiết bị di động cho website trường ĐH Công nghệ với tên miền riêng Tuy nhiên, hệ thống chưa có chức tự nhận diện thiết bị truy cập để điều hướng sang tên miền Cuốn sách: April Hodge Silver, (1/2011) “Wordpress completer”, Packt Publishing.Nội dung của sách: Cuốn sách đưa kiến thức giúp cho người đọc nắm bắt wordpress từ việc bắt đầu với wordpress; cách thay đổi thông tin xuất trang chủ, viết; cách tải lên hình ảnh, âm thanh, video; cơng việc xuất bản, di chuyển, bảo trì website; tạo giao diện, widget, plugin; tạo website mobile với wordpress Sau tham khảo tài liệu với khảo sát FPT Polytechnic, em định thực nghiên cứu đề tài: “Hoàn thiện chức hiển thị nội dung số điện thoại di động cho website FPT Polytechnic Việt Nam công cụ Wordpress” Sở dĩ chọn công cụ Wordpress cơng cụ khác phục nhược điểm Drupal Drupal đánh giá khó sử dụng với người dùng mới.Việc tạo Menu khiến người dùng cảm thấy thực bối rối Drupal có thành phần mở rộng (extensions) Wordpress Mỗi có phiên Drupal bạn phải chờ nhà cung cấp nâng cấp extensions họ để tương thích.Cách bố trí website Drupal khiến người sử dụng khó tìm kiếm đánh giá nên dùng extensions Trong WordPress dễ sử dụng CMS ( Drupal, Joomla Wordpress) , giúp bạn có Blog, website vài phút Bạn vào http://wordpress.com để tạo trang miễn phí cho bắt đầu làm quen sử dụng WordPress Các plugin wordpress có nhiều 90% miễn phí, bạn cài đặt (install) nâng cấp (upgrade) plugin phần quản lý WordPress mà không cần phải download Joomla Drupal 1.3 Mục tiêu nghiên cứu đề tài Hình thành sở lý luận website khái niệm, chức hiển thị điện thoại di động, công cụ hỗ trợ cho việc hiển thị điện thoại di động Nghiên cứu đánh giá thực trạng website FPT Polytechnic Hoàn thiện chức hiển thị nội dung số điện thoại di động cho website FPT Polytechnic 1.4 Đối tượng phạm vi nghiên cứu đề tài 1.4.1 Đối tượng Đối tượng nghiên cứu đề tài hệ thống website FPT Polytechnic Việt Nam, chức hiển thị nội dung số điện thoại di động, công cụ wordpress 1.4.2 Phạm vi Phạm vi nghiên cứu đề tài website FPT Polytechnic Việt Nam, đề tài có liên quan, nguồn thơng tin chun gia phịng hệ thơng thơng tin FPT Polytechnic Việt Nam cung cấp, thu thập tài liệu tham khảo, internet 1.5 Các phương pháp áp dụng thực đề tài 1.5.1 Phương pháp điều tra liệu sơ cấp Là phương pháp điều tra liệu chưa qua xử lý, thu thập lần đầu, thu thập trực tiếp từ đơn vị tổng thể nghiên cứu thông qua điều tra thống kê Dữ liệu sơ cấp đáp ứng tốt yêu cầu nghiên cứu, nhiên việc thu thập liệu sơ cấp lại thường phức tạp, tốn Để hoàn thành khóa luận em có sử dụng phương pháp vấn cá nhân loại hình phương pháp thu thập liệu sơ cấp Phương pháp vấn cá nhân trực tiếp (personal interviews): Nhân viên điều tra đến gặp trực tiếp đối tượng điều tra để vấn theo bảng câu hỏi soạn sẵn Áp dụng tượng nghiên cứu phức tạp, cần phải thu thập nhiều liệu; muốn thăm dò ý kiến đối tượng qua câu hỏi ngắn gọn trả lời nhanh được,… Do gặp mặt trực tiếp nên nhân viên điều tra thuyết phục đối tượng trả lời, giải thích rõ cho đối tượng câu hỏi, dùng hình ảnh kết hợp với lời nói để giải thích, kiểm tra liệu chỗ trước ghi vào phiếu điều tra Tuy nhiên chi phí cao, nhiều thời gian cơng sứcnên khó đạt chất lượng hỏi cao Phương pháp nghiên cứu tài liệu: Là phương pháp cho phép nghiên cứu kỹ tỉ lỉ nhiều khía cạnh tổ chức, hệ thống Thông tin giấy tờ phản ánh khứ, tương lai tổ chức, hệ thống Cách thức thực hiện: nghiên cứu tài liệu báo cáo doanh thu, chi phí mẫu phiếu, mẫu đơn tổ Điều hành quản lý Trung tâm Bảo dưỡng Ứng cứu thông tin Ứng dụng liệu thu thập được: sử dụng phần kết hoạt động kinh doanh doanh nghiệp năm gần số phần liên quan khác Phương pháp sử dụng phiếu điều tra: Là phương pháp sử dụng lấy thông tin từ số lượng lớn đối tượng phạm vi địa lý rộng Cách thức thực hiện: sử dụng phiếu điều tra tổ trung tâm để điều tra thông tin chi tiết tới hệ thống tính cước chăm sóc khách hàng với số lượng câu hỏi sát với mục đích thu thập Ứng dụng thông tin thu thập: sử dụng để xây dựng toán chi tiết cụ thể cho hệ thống tính cước chăm sóc khách hàng với kiến nghị doanh nghiệp phần cứng, phần mềm, người Phương pháp tìm kiếm Internet: Là phương pháp tìm kiếm thơng dụng, đơn giản, tiết kiệm chi phí cho kết nhanh liệu thu thập thường rộng không chi tiết ... XUẤT VỀ CHỨC NĂNG HIỂN THỊ NỘI DUNG SỐ TRÊN ĐIỆN THOẠI DI ĐỘNG CHO WEBSITE FPT POLYTECHNIC 30 iii 3.1 Hoàn thiện chức hiển thị nội dung số điện thoại di động 30 3.1.1 Từ giao di? ??n... thị nội dung số điện thoại di động cho website FPT Polytechnic Việt Nam công cụ Wordpress phần ba khóa luận Để thiết kế chức hiển thị nội dung số điện thoại di đông cho website FPT Polytechnic. .. trợ cho việc hiển thị điện thoại di động Nghiên cứu đánh giá thực trạng website FPT Polytechnic Hoàn thiện chức hiển thị nội dung số điện thoại di động cho website FPT Polytechnic 1.4 Đối tượng