Tài liệu Website trường đh công nghệ phiên bản tiếng anh trên thiết bị di động

LỜI CÁM ƠN Sau thời gian thực tập tại FPT Polytechnic, em đã chọn đề tài “Hoàn thiện chức năng hiển thị nội dung số trên điện thoại di động cho website của FPT Polytechnic bằng công cụ Wordpress ” làm khóa luận tốt nghiệp. Trong quá trình tìm hiểu về lý luận và thực tế để hoàn thiện đề tài này, em đã nhận được sự giúp đỡ nhiệt tình của Ban Giám đốc, của các cán bộ nhân viên phòng hệ thống thông tin, cùng toàn thể các cán bộ nhân viên trong FPT Polytechnic. Đặc biệt có sự hướng dẫn tận tình của cô giáo ThS Nguyễn Thị Hội. Tuy có sự nỗ lực của bản thân nhưng do khả năng chuyên môn còn hạn chế, nên khóa luận tốt nghiệp của em không tránh khỏi những thiếu sót. Em rất mong nhận được những ý kiến chỉ bảo quý báu của cô giáo hướng dẫn, cũng như các cô chú, anh chị trong FPT Polytechnic để em hoàn thiện khóa luận tốt nghiệp và nâng cao kiến thức phục vụ tốt hơn cho công việc sau này. Cuối cùng, em xin kính chúc quý Thầy, Cô dồi dào sức khỏe và thành công trong sự nghiệp. Đồng kính chúc các Anh, Chị trong FPT Polytechnic dồi dào sức khỏe và đạt được nhiều thành công trong công việc. Chân thành cảm ơn! Sinh viên thực hiện Trần Thanh Quang 1 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.1. Tầm quan trọng, ý nghĩa vấn đề nghiên cứu............................................................1 1.2. Tổng quan các tài liệu liên quan đến nội dung đề tài...............................................2 1.3. Mục tiêu nghiên cứu của đề tài................................................................................3 1.4. Đối tượng và phạm vi nghiên cứu của đề tài...........................................................3 1.4.1.Đối tượng.........................................................................................................3 1.4.2.Phạm vi............................................................................................................3 1.5. Các phương pháp áp dụng thực hiện đề tài..............................................................3 1.5.1.Phương pháp điều tra dữ liệu sơ cấp.................................................................3 1.5.2. Phương pháp điều tra dữ liệu thứ cấp..............................................................5 1.5.3 Xử lý dữ liệu đã thu thập..................................................................................5 1.6. Kết cấu của khóa luận............................................................................................6 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 của đề tài..........................................................................................7 2.1.1. Khái niệm cơ bản.............................................................................................7 2.1.1.1. Khái niệm về website.............................................................................7 2.1.1.2. Khái niệm về hiển thị website trên điện thoại di động...........................9 2.1.2. Một số lý thuyết và công cụ áp dụng trong quá trình thực hiện đề tài...........10 2.1.2.1. Đôi nét về Wordpress...........................................................................10 2.1.2.2. Vì sao 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 trong quá trình thực hiện đề tài....................13 2.2. Phân tích, khảo sát thực trạng wesite của FPT Polytechnic.................................13 2.2.1. Giới thiệu chung về FPT Polytechnic Việt Nam............................................13 2.2.2. Thực trạng website của FPT Polytechnic.......................................................14 2 2.2.2.1. Giới thiệu chung...................................................................................14 2.2.2.2.Các công nghệ được ứng dụng trên website..........................................16 2.2.3. Phân tích, đánh giá về website của 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 và Yslow)........................19 2.2.3.5. Thông tin thêm.....................................................................................20 2.2.4. Đánh giá hiện trạng website của FPT Polytechnic.........................................20 2.2.4.1. Kết quả phân tích dữ liệu thứ cấp.........................................................20 2.4.2.2. Kết quả phân tích dữ 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 3.1. Hoàn thiện chức năng hiển thị nội dung số trên điện thoại di động......................30 3.1.1. Từ giao diện trên PC, xác định những thành phần cần loại bỏ, những thành phần cần thay đổi để phù hợp với giao diện trên thiết bị di động.................................30 3.1.2. Vẽ phác thảo phiên bản trên điện thoại bằng bansamiq mockup...................33 3.1.3.Thiết kế giao diện trên Photoshop ( Kết quả tham khảo phần phụ lục 1)........34 3.1.4.Thiết kế giao diện trên WordPress cho thiết bị di động sử dụng Twitter Bootstrap ( các 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ị trên thiết bị di động (ảnh hiển thị trên điện thoại nhỏ hơn, lazy load, nén ảnh )..............................................................................................40 3.2. Định hướng phát triển của đề tài...........................................................................40 3.3. Đề xuất và kiến nghị đối với FPT Polytechnic nhằm áp dụng tốt các 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 1................................................................................................................ viii PHỤ LỤC 2.................................................................................................................. xi PHỤ LỤC 3................................................................................................................xiv 3 DANH MỤC BẢNG BIỂU HÌNH VẼ Bảng 2.1 Quyền hạn trong website của FPT Polytechnic Bảng 2.2 Đánh giá website FPT Polytechnic bằng công cụ Seo Worker Bảng 2.3 Mạng xã hội facebook của FPT Polytechnic Bảng 2.4 Hiệu suất website của FPT Polytechnic Bảng 2.5 Một số đánh giá khác về website của FPT Polytechnic Bảng 2.6 Đề xuất khác cho website của FPT Polytechnic Biểu đồ 2.1 Ý kiến về số nhân viên quản lý website Biểu đồ 2.2 Nội dung và chất lượng thông tin trên website Biểu đồ 2.3 Nội dung, cách sắp xếp và phân bố thông tin trên website Biểu đồ 2.4 Tốc độ tải của website Biểu đồ 2.5 Ý kiến về việc thay đổi cấu trúc của website Biểu đồ 2.6 Hình thức đặt hàng của khách hàng Biểu đồ 2.7 Kênh giao tiếp của sinh viên với FPT Polytechnic Biểu đồ 2.8 Mức độ hài lòng với các chức năng của website Biểu đồ 2.9 Các chức năng cần nâng cấp, bổ sung Biểu đồ 2.10 Mức độ cần thiết nâng cấp và hoàn thiện website Hình 2.1 Giao diện trang chủ của 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 cắt bớt Hình 2.6 Phác thảo website bằng công cụ Bansamiq mockup Hình 2.7 Thiết kế giao diện trên Photoshop Hình 2.8 Thiết kế menu chính bằng Photoshop Hình 2.9 Thiết kế menu đăng ký trực tuyến bằng Photoshop Hình 2.10 Thiết kế phần tin tức bằng Photoshop Hình 2.11 Thiết kế phần Poly góc nhìn bằng Photoshop Hình 2.12 Thiết kế phần sự kiện bằng Photoshop Hình 2.13 Thiết kế phần thư viện ảnh bằng Photoshop Hình 2.14 Thiết kế phần liên hệ bằng Photoshop DANH MỤC CÁC TỪ VIẾT TẮT TIẾNG VIỆT 4 STT 1 2 3 4 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ử 5 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 ta đang chứng kiến một cuộc cách mạng thực sự với điện thoại và các thiết bị di động. Hãy giành khoảng mười phút quan sát những thiết bị di động đang được sử dụng quanh bạn. Những chiếc điện thoại thông minh với cấu hình phần cứng còn cao hơn cấu hình của một chiếc máy tính desktop cách đây mười năm. Theo thống kê của vnexpress, người dùng Việt Nam đang ưa thích những chiếc điện thoại với màn hình khá lớn, trang bị màn hình cảm ứng mà giá của chúng còn đắt hơn một chiếc máy tính xách tay. Do đó thiết kế website cho thiết bị di động sẽ phát triển mạnh trong vài năm tới để đáp ứng kịp thời với sự bùng nổ thiết bị di động thông minh. Năm 2011 cũng đánh dấu sự ra đời hàng loạt và cạnh tranh gay gắt của các thiết bị di động thông minh hay còn gọi là smart phone chạy trên các nền tảng như Android, IOS, Window phone ... Chắc hẳn những Samsung, Apple, Nokia, LG... là những cái tên quen thuộc trong làng sản xuất smart phone. Các mẫu điện thoại mới liên tục được giới thiệu, thu hút người tiêu dùng bởi các tính năng ngày càng được cải tiến. Với công nghệ 3G đã được phát triển ở Việt Nam từ rất sớm, ngày nay ngay kể cả một cậu sinh viên cũng có thể sử dụng điện thoại của mình để cập nhật facebook khi đang ngồi trên xe buýt. Trước đây, việc thiết kế website sử dụng cho điện thoại cũng đã được biết tới.Giải pháp khi đó là viết 1 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 có thể là xây dựng 1 phiên bản web giành riêng cho điện thoại động và sử dụng như 1 sub-domain (Ví dụ mobile.tenmien.com hay (m.ten.com).Các giải pháp này đòi hỏi ngoà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 1 website nữa hay 1 phần mềm di động nữa.Thực tế là chỉ có một vài công ty lớn, có tên tuổi và có tiềm lực tài chính mới có thể thực hiện điều này.Trong 1 vài năm trở lại đây, các kỹ thuật thiết kế website cũng có những bước tiến vượt bậc, và đã có những giải pháp khác cho chúng ta. Các ngôn ngữ lập trình ngày một được hoàn thiện, các kỹ thuật mới được sáng tạo. HTML5, CSS3, PHP6,Wordpress... mang đến cho người thiết kế web nhiều giải pháp mới để lập trình website. Và những người thiết kế website hàng đầu cũng đã đón đầu xu hướng thiết kế website trên các thiết bị di động với kỹ thuật Responsive website( tự động hỗ trợ các website điều chỉnh website có độ rộng vừa khít với trình duyệt giúp hiển thị trên tất cả các kích thước màn hình khác nhau) Chính vì thế mà website FPT Polytechnic nói riêng và các website của các tổ chức doanh nghiệp khác nói chung cần phải bắt kịp được xu hướng này là xây dựng website có hỗ trợ hiển thị tốt nội dung trên các điện thoại di động và các thiết bị số 1.2.Tổng quan các 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 bản tiếng anh trên 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 một phiên bản website trường ĐH Công nghệ phiên bản tiếng Anh trên thiết bị di động. Phiên bản này là một bản rút gọn của website, cho phép hiển thị tốt trên thiết bị di động vốn bị hạn chế bởi kích thước màn hình. Bắt đầu từ việc nghiên cứu hệ thống website trường ĐH Công nghệ, vốn được xây dựng trên hệ quản trị nội dung Drupal. Sau khi nghiên cứu các thành phần cơ bản, các module quan trọng, hệ thống file giao diện của Drupal thì tiến hành thiết kế template cho phiên bản trên thiết bị di động. Triển khai bằng cách cài đặt một trang Drupal mới với dữ liệu được lấy từ phiên bản gốc và hiển thị lại theo template đã thiết kế. Kết quả, đã xây dựng thành công phiên bản trê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 năng 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 3 completer”, Packt Publishing.Nội dung chính của của cuốn sách: Cuốn sách đưa ra những kiến thức giúp cho người đọc nắm bắt về wordpress từ việc bắt đầu với wordpress; cách thay đổi những thông tin xuất hiện trên một trang chủ, bài viết; cách tải lên hình ảnh, âm thanh, video; các công việc xuất bản, di chuyển, bảo trì website; tạo giao diện, các widget, và plugin; tạo website trên mobile với wordpress. Sau khi tham khảo 2 tài liệu trên cùng với sự khảo sát tại FPT Polytechnic, em quyết định thực hiện nghiên cứu đề tài: “Hoàn thiện chức năng hiển thị nội dung số trên điện thoại di động cho website của FPT Polytechnic Việt Nam bằng công cụ Wordpress” .Sở dĩ chọn công cụ Wordpress vì công cụ này khác phục được những nhược điểm của Drupal là Drupal được đánh giá là khó sử dụng với người dùng mới.Việc tạo các Menu khiến người dùng cảm thấy thực sự bối rối. Drupal có ít các thành phần mở rộng (extensions) hơn Wordpress. Mỗi khi có phiên bản Drupal mới bạn phải chờ các nhà cung cấp nâng cấp extensions của họ để tương thích.Cách bố trí của website Drupal khiến người mới sử dụng khó tìm kiếm và đánh giá nên dùng extensions nào .Trong khi đó WordPress dễ sử dụng nhất trong 3 CMS ( Drupal, Joomla và Wordpress) , nó giúp bạn có một Blog, website trong vài phút . Bạn có thể vào http://wordpress.com để tạo một trang miễn phí cho mình và bắt đầu làm quen sử dụng WordPress . Các plugin của wordpress có rất nhiều và 90% là miễn phí, bạn có thể cài đặt (install) và nâng cấp (upgrade) các plugin này ngay trong phần quản lý của WordPress mà không cần phải download về như Joomla và Drupal . 1.3. Mục tiêu nghiên cứu của đề tài Hình thành cơ sở lý luận về website như khái niệm, chức năng hiển thị trên điện thoại di động, công cụ hỗ trợ cho việc hiển thị trên điện thoại di động. Nghiên cứu và đánh giá thực trạng của website của FPT Polytechnic. Hoàn thiện chức năng hiển thị nội dung số trên điện thoại di động cho website của FPT Polytechnic 1.4. Đối tượng và phạm vi nghiên cứu của đề tài 1.4.1. Đối tượng Đối tượng nghiên cứu của đề tài là hệ thống website của FPT Polytechnic Việt Nam, chức năng hiển thị nội dung số trên điện thoại di động, công cụ wordpress 1.4.2. Phạm vi Phạm vi nghiên cứu của đề tài là website của FPT Polytechnic Việt Nam, các đề tài có liên quan, các nguồn thông tin do chuyên gia phòng hệ thông thông tin của FPT Polytechnic Việt Nam cung cấp, thu thập trên các tài liệu tham khảo, trên internet 1.5. Các phương pháp áp dụng thực hiện đề tài 1.5.1. Phương pháp điều tra dữ liệu sơ cấp Là phương pháp điều tra những dữ liệu chưa qua xử lý, được thu thập lần đầu, và thu thập trực tiếp từ các đơn vị của tổng thể nghiên cứu thông qua các cuộc điều tra thống kê. Dữ liệu sơ cấp đáp ứng tốt yêu cầu nghiên cứu, tuy nhiên việc thu thập dữ liệu sơ cấp lại thường phức tạp, tốn kém. Để hoàn thành bài khóa luận này em có sử dụng phương pháp phỏng vấn cá nhân là một loại hình của phương pháp thu thập dữ liệu sơ cấp. Phương pháp phỏng 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 được điều tra để phỏng vấn theo một bảng câu hỏi đã soạn sẵn. Áp dụng khi hiện tượng nghiên cứu phức tạp, cần phải thu thập nhiều dữ liệu; khi muốn thăm dò ý kiến đối tượng qua các câu hỏi ngắn gọn và có thể trả lời nhanh được,… Do gặp mặt trực tiếp nên nhân viên điều tra có thể thuyết phục đối tượng trả lời, có thể giải thích rõ cho đối tượng về các câu hỏi, có thể dùng hình ảnh kết hợp với lời nói để giải thích, có thể kiểm tra dữ liệu tại chỗ trước khi ghi vào phiếu điều tra. Tuy nhiên chi phí cao, mất nhiều thời gian và công sứcnên khó đạt được 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ỹ và tỉ lỉ về nhiều khía cạnh của tổ chức, hệ thống. Thông tin trên giấy tờ phản ánh trong quá khứ, hiện tại và tương lai của tổ chức, hệ thống. Cách thức thực hiện: nghiên cứu các tài liệu về báo cáo doanh thu, chi phí và các mẫu phiếu, mẫu đơn tại tổ Điều hành quản lý tại Trung tâm Bảo dưỡng Ứng cứu thông tin. Ứng dụng của dữ liệu thu thập được: được sử dụng trong phần kết quả hoạt động kinh doanh của doanh nghiệp trong những năm gần đây cùng một 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 được sử dụng khi lấy thông tin từ một số lượng lớn các đối tượng trên một phạm vi địa lý rộng. Cách thức thực hiện: sử dụng phiếu điều tra tại các tổ trong trung tâm để điều tra các thông tin chi tiết tới hệ thống tính cước và 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 của thông tin thu thập: được sử dụng để xây dựng bài toán chi tiết cụ thể cho hệ thống tính cước và chăm sóc khách hàng cùng với kiến nghị đối với doanh nghiệp về phần cứng, phần mềm, con người. Phương pháp tìm kiếm trên Internet: Là phương pháp tìm kiếm thông dụng, đơn giản, tiết kiệm chi phí và cho kết quả nhanh nhưng dữ liệu thu thập được thường rộng và không chi tiết. Cách thức thực hiện: tìm kiếm thông tin về website, hiển thị nội dung trên điện thoại di động, các công cụ hỗ trợ việc thiết kế, lập trình Ngoài ra, còn sử dụng phương pháp thống kê, thu thập số liệu để làm rõ những nội dung liên quan. 1.5.2. Phương pháp điều tra dữ liệu thứ cấp a. Dữ liệu thứ cấp Dữ liệu thứ cấp là dữ liệu do người khác thu thập, sử dụng cho các mục dích có thể là khác với mục đích nghiên cứu của chúng ta. Dữ liệu thứ cấp có thể là dữ liệu chưaxử lý (còn gọi là dữ liệu thô) hoặc dữ liệu đã xử lý. Như vậy, dữ liệu thứ cấp không phải do người nghiên cứu trực tiếp thu thập b. Đặc điểm - Ưu điểm Tiết kiệm tiền bạc, thời gian do tận dụng các công trình nghiên cứu tìm hiểu hay những thống kê do người đi trước đã điều tra - Nhược điểm Số liệu thứ cấp này đã được thu thập cho các nghiên cứu với các mục đích khác và có thể hoàn toàn không hợp với vấn đề của chúng ta; khó phân loại dữ liệu; các biến số, đơn vị đo lường có thể khác nhau...Dữ liệu thứ cấp thường đã qua xử lý nên khó đánh giá được mức độ chính xác, mức độ tin cậy của nguồn dữ liệu Trong bài khóa luận này em đã thu thập nguồn dữ liệu thứ cấp thông qua việc tìm hiểu các tài liệu tham khảo, trên internet 1.5.3 Xử lý dữ liệu đã thu thập a. Phân tích và tổng hợp Phân tích trước hết là phân chia cái toàn thể của đối tượng nghiên cứu thành những bộ phận, những mặt, những yếu tố cấu thành giản đơn hơn để nghiên cứu, phát hiện ra từng thuộc tính và bản chất của từng yếu tố đó, và từ đó giúp chúng ta hiểu được đối tượng nghiên cứu một cách mạch lạc hơn, hiểu được cái chung phức tạp từ những yếu tố bộ phận ấy. Khi chúng ta đứng trước một đối tượng nghiên cứu, chúng ta cảm giác được nhiều hiện tượng đan xen nhau, chồng chéo nhau làm lu mờ bản chất của nó.Vậy muốn hiểu được bản chất của một đối tượng nghiên cứu chúng ta cần phải phân chia nó theo cấp bậc. Nhiệm vụ của phân tích là thông qua cái riêng để tìm ra được cái chung, thông qua hiện tượng để tìm ra bản chất, thông qua cái đặc thù để tìm ra cái phổ biến. Khi phân chia đối tượng nghiên cứu cần phải: - Xác định tiêu thức để phân chia. - Chọn điểm xuất phát để nghiên cứu. - Xuất phát từ mục đích nghiên cứu để tìm thuộc tính riêng và chung. Bước tiếp theo của phân tích là tổng hợp. Tổng hợp là quá trình ngược với quá trình phân tích, nhưng lại hỗ trợ cho quá trình phân tích để tìm ra cái chung cái khái quát.Từ những kết quả nghiên cứu từng mặt, phải tổng hợp lại để có nhận thức đầy đủ, đúng đắn cái chung, tìm ra được bản chất, quy luật vận động của đối tượng nghiên cứu. b. Mối quan hệ giữa phân thích và tổng hợp Phân tích và tổng hợp là hai phương pháp gắn bó chặt chẽ quy định và bổ sung cho nhau trong nghiên cứu, và có cơ sở khách quan trong cấu tạo, trong tính quy luật của bản thân sự vật. Trong phân tích, việc xây dựng một cách đúng đắn tiêu thức phân loại làm cơ sở khoa học hình thành đối tượng nghiên cứu bộ phận ấy, có ý nghĩa rất quan trọng. Trong nghiên cứu tổng hợp vai trò quan trọng thuộc về khả năng liên kết các kết quả cụ thể( có lúc ngược nhau) từ sự phân tích, khả năng trìu tượng, khái quát nắm bắt được mặt định tính từ rất nhiều khía cạnh định lượng khác nhau. 1.6. Kết cấu của khóa luận Bài khóa luận gồm 3 phần: - Phần 1: Tổng quan vấn đề nghiên cứu. Phần 2: Cơ sở lý luận và thực trạng về website của FPT Polytechnic Việt - Phần 3: Giải pháp định hướng phát triển cho chức năng hiển thị nôi dung số Nam. trên điện thoại di dộng cho website của FPT Polytechnic Việt Nam. Phần 2: CƠ SỞ LÝ LUẬN VÀ THỰC TRẠNG WEBSITE CỦA WEBSITE FPT POLYTECHNIC VIỆT NAM 2.1. Cơ sở lý luận của đề tài 2.1.1. Khái niệm cơ bản 2.1.1.1. Khái niệm về website a) Khái niệm website Theo [3] các khái niệm được nêu ra như sau: Website là tập hợp các trang web (webpage) có liên quan với nhau. Trang web(webpage) là một tệp văn bản có chứa đựng dữ liệu siêu văn bản (HTML - Hyper Text Markup Language) bao gồm văn bản, hình ảnh, âm thanh, video, đồ họa, các tài liệu kỹ thuật số... được tích hợp kết nối với nhau. Mỗi website, mỗi trang web được lưu trữ trên ít nhất một máy chủ web (Web server), truy cập qua mạng như Internet hay một mạng riêng thông qua một địa chỉ Internet cũng được gọi là URL (Uniform Resource Locator). Trang web đầu tiên người xem truy cập từ tên miền thường được gọi là trang chủ (homepage). Từ trang chủ, người xem có thể xem các trang khác thông qua các siêu liên kết (hyperlinks). Để một website hoạt động được, cần phải có tên miền (domain), không gian lưu trữ website (hosting), và nội dung website. Đối với các doanh nghiệp hoạt động trong lĩnh vực TMĐT nói chung, website bao gồm toàn bộ thông tin, dữ liệu, hình ảnh về các sản phẩm, dịch vụ và hoạt động sản xuất kinh doanh mà doanh nghiệp muốn truyền đạt tới người truy cập Internet. Với vai trò quan trọng như vậy, có thể coi website chính là bộ mặt của công ty, là nơi để đón tiếp và giao dịch với các khách hàng trên mạng. Với các website tích hợp TMĐT ở mức cao hơn, thì website như một cửa hàng trực tuyến để doanh nghiệp có thể thực hiện các giao dịch: bán hàng, đặt hàng, thanh toán, chăm sóc, tư vấn khách hàng,... Website của doanh nghiệp dễ dàng cập nhật và thay đổi thông tin về các sản phẩm, dịch vụ mới, các chương trình khuyến mãi, xu hướng sản phẩm,...Nhờ có website, thông tin được cung cấp tới các khách hàng của doanh nghiệp nhanh chóng, kịp thời, khách hàng có thể truy cập thông tin của website mọi lúc, mọi nơi. b) Phân loại website: Theo [3] phân loại dữ liệu như sau - Phân loại theo dữ liệu: Web tĩnh: Website tĩnh là website chỉ bao gồm các trang web tĩnh và không có cơ sở dữ liệu đi kèm. Dữ liệu trang web không thay đổi thường xuyên. Để thay đổi nội dung trên trang web người sở hữu phải truy cập trực tiếp vào các mã lệnh để thay đổi thông tin. Web tĩnh không có cơ sở dữ liệu bên dưới hệ thống, không có công cụ để điều khiển nội dung gián tiếp. Dạng file của trang web tĩnh thường là ".htm". Ưu điểm: Web tĩnh dành cho các web có nội dung đơn giản gọn nhẹ, không có sự can thiệp của người lập trình web, không phải xử lý những mã lệnh phức tạp. Vì vậy việc thiết kế đặt để các đối tượng thoải mái và tự do sáng tạo của người thiết kế nên web tĩnh thường sở hữu được một hình thức hấp dẫn và bắt mắt. Nhược điểm: vì không có hệ thống hỗ trợ thay đổi thông tin nên việc cập nhật thông tin web tốn nhiều chi phí và cần phải có người am hiểu kỹ thuật web thực hiện. Web động: Web động là trang web mà người dùng có thể tương tác với nó, có thể dễ dàng quản trị nội dung và điều hành website của mình thông qua các phần mềm hỗ trợ mà không nhất thiết cần phải có kiến thức nhất định về ngôn ngữ html, lập trình web, thiết kế website. Web động khi xây dựng sẽ bao gồm 2 phần: một phần hiển thị trên trình duyệt mà khi truy cập internet ta thường thấy (front-end) và một phần ngầm bên dưới dùng để điều khiển nội dung của trang web, phần nội dung ngầm này thường thì chỉ những người quản trị website đó mới có thể có quyền truy cập vào (back-end). Web động thường được phát triển bằng các ngôn ngữ lập trình tiên tiến như PHP, ASP, ASP.NET, Java, CGI, Perl, và sử dụng các cơ sở dữ liệu quan hệ mạnh như Access, My SQL, MS SQL, Oracle. Ưu điểm: Tính linh hoạt và có thể cập nhật thông tin thường xuyên, quản lý các thành phần trên website dễ dàng. Nhược điểm: Cấu trúc trang web khó thay đổi vì thường các trang đều có cấu trúc giống nhau, tốc độ tải trang chậm hơn web tĩnh do nội dung trang web được tạo động khi người dùng yêu cầu. - Phân loại theo hệ thống nội dung: Website cung cấp thông tin: như các website báo điện tử, website cung cấp thông tin theo những chuyên đề cụ thể. Thông thường các website cung cấp thông tin miễn phí và nguồn thu đến từ phí quảng cáo trên website. Tuy nhiên, nếu các thông tin có giá trị cao, người xem có thể phải trả phí để xem được các thông tin đó. Website cung cấp sản phẩm hoặc dịch vụ: các website này có thể chỉ giới thiệu thông tin về các sản phẩm, dịch vụ hoặc có thể có những tính năng giúp người xem có thể trực tiếp mua sản phẩm hoặc dịch vụ tại website. - Phân loại theo sự tương tác với người dùng: Web 1.0: là web thế hệ đầu tiên, website thường chỉ một chiều thông tin từ website đến người xem.Người được ở vào thế bị động là tiếp nhận thông tin và không có sự phản hồi trực tiếp lên website. Web 2.0: là thế hệ web thứ 2. Dạng web này có tính tương tác cao, người xem có thể tham gia đăng tải bài viết và tham gia xây dựng nội dung của website đó, dạng web này mang tính cộng đồng và tất cả các dữ liệu trên web là dữ liệu mở được tất cả mọi người xem web cung cấp. Chính vì thế dạng web này thân thiện với người đọc tạo cảm giác như người đọc cũng là người sở hữu website.Nó cuốn hút mọi người cùng cung cấp thông tin, chia sẻ dữ liệu, tạo ra những nguồn dữ liệu khổng lồ trên Internet.Ngày nay dạng web này đang được phát triển mạnh nhất trong các thể loại web tương tác. Web 3.0: Đây sẽ là web thế hệ thứ 3, giai đoạn hiện nay dạng web này trong thời kỳ đang hình thành và vẫn còn nhiều khái niệm chưa thống nhất. Tuy nhiên nếu nói một cách đơn giản dễ hiểu thì web 3.0 sẽ có bước đột phá về băng thông kèm theo là sự phát triển mạnh mẽ về phim ảnh và truyền hình trên Internet. Một số trình duyệt web hiện nay cho máy tính cá nhân bao gồm Internet Explorer, Mozilla Firefox, Safari, Opera, Avant Browser, Konqueror, Lynx, Google Chrome, Flock, Arachne, Epiphany, K-Meleon và AOL Explorer. 2.1.1.2. Khái niệm về hiển thị website trên điện thoại di động Theo trang http://www.thietketrangweb.vn thì định nghĩa website trên điện thoại di động như sau: Website cho thiết bị di động cũng tương tự như những website bạn vẫn thường thiết kế.Website cho di động được thiết kế để cho bất cứ thiết bị nào có hỗ trợ duyệt web đều có thể truy cập một cách dễ dàng. Khái niệm về hiển thị website trên di động xuất hiện khi ra đời những chiếc điện thoại di động có thể lướt web như chiếc máy tính thông thường. Tùy thuộc vào cấu hình máy điện thoại di động mà chúng có thể hiện thị website theo những kiểu khác nhau hoặc do trang web đó có hỗ trợ hiển thị trên di động như thế nào Khi thiết kế web cho thiết bị di động, chúng ta phải xem xét đến kích thước màn hình. Điều này có vẻ sẽ gây khó khăn cho những nhà thiết kế và lập trình đã quen làm cho màn hình HD với kích thước 1920 x 1200 hoặc lớn hơn. Vậy nội dung website hiển thị trên điện thoại di động cần phải được bố trí sao cho phù hợp với kích thước màn hình. Từ những năm trước, internet băng thông rộng (wifi) đã phổ biến ở khắp các quán cà phê, website phải tối ưu trình duyệt của mình để đảm bảo thời gian lướt web nhanh nhất. Bây giờ chúng ta cũng phải làm điều tương tự cho thiết bị di động. Các nhà sản xuất đưa ra ngày càng nhiều trình duyệt với tốc độ lướt web, tải dữ liệu cực nhanh. Thêm vào đó là nhu cầu tải dữ liệu không giới hạn của một bộ phận người dùng, họ sẵn sàng chi trả cho việc download tài liệu của mình. Vì vậy, phải giảm code, xóa bỏ bớt thẻ tags và các bình luận. Dùng hình ảnh kích thước nhỏ hơn và tài liệu nén để cho việc download được thực hiện dễ dàng hơn. Giảm bớt những đường links và nội dung không liên quan đến phần nội dung. Những mục trên sidebar(cột bên cạnh) và footer(chân trang) cũng có thể nên được bỏ đi để tập trung vào nội dung chính và góp phần đơn giản hóa trang web. Khi một trang web được hiển thị trên thiết bị di động,trang web đó nên được tùy chỉnh tự động cho phù hợp với kích thước màn hình. Với kích thước màn hình của hầu hết các loại điện thoại, một trang khó có thể hiển thị được hết. Nếu không được thu nhỏ lại, người dùng sẽ phải dùng đến thanh cuốn ngang và dọc để xem được hết nội dung của trang. Như thế rất bất tiện.Vì vậy, hãy tạo cấu trúc một cột vừa với kích thước màn hình của các thiết bị di động. Người dùng vẫn phải sử dụng thanh cuốn, nhưng họ chỉ cần cuốn theo chiều dọc. 2.1.2. Một số lý thuyết và công cụ áp dụng trong quá trình thực hiện đề tài 2.1.2.1. Đôi nét về Wordpress Theo www.vi.wordpress.org, định nghĩ về Wordpress như sau: WordPress là phần mềm mã nguồn mở được cung cấp miễn phí, sử dụng ngôn ngữ lập trình PHP và hệ cơ sở dữ liệu MySQL. Do đó, nó thích hợp cho ai muốn đặt blog trên chính website sử dụng tên miền của riêng mình. Tuy nhiên, nếu không có tên miền riêng và chịu được một vài hình ảnh quảng cáo đôi khi xuất hiện, bạn vẫn có thể dùng chung với nhà cung cấp Automattic Production tại địa chỉ http://wordpress.com tương tự các nhà cung cấp khác. Dịch vụ của Automattic Production đưa ra hơn 50 giao diện mẫu chất lượng cao.Tuy vậy, để tùy biến giao diện bạn phải bỏ ra 15 USD mỗi năm để chỉnh sửa CSS.WordPress không cho phép bạn thêm vào các đoạn mã JavaScript hay RSS bên ngoài (đồng nghĩa với việc bạn không thể đặt bất cứ biển quảng cáo lên blog của mình), nhưng nó cung cấp cho bạn một số ứng dụng nhỏ (widget) để lựa chọn và sử dụng bằng cách rê và thả.Phần soạn thảo làm việc khá tốt khi kết hợp giữa chế độ soạn thảo toàn diện (WYSIWYG) và mã HTML. Ngoài ra, WordPress còn thêm vào một số tính năng nhỏ nhằm hỗ trợ người dùng trong quá trình sử dụng như khả năng tự động lưu liên tục khi soạn thảo, nạp nội dung từ blog khác hay chia mục cho bài viết.Tuy nhiên, WordPress lại không có chức năng xem trước (preview) nội dung bài viết của mình, điều gây khó khăn cho người dùng khi họ cần xem xét và chỉnh sửa.Đây là sự kế thừa của b2\cafelog bởi Michel Valdrighi.Tên gọi WordPress được đề xuất bởi Christine Selleck, một người bạn của nhóm trưởng Matt Mullenweg.Phiên bản mới nhất của Wordpress là WP 3.4.1. 2.1.2.2. Vì sao lại chọn Wordpress Theo www.vi.wordpress.org : Thiết kế web bằng wordpress – Mã nguồn mở: WordPress luôn giữ vị trí tốt nhất về số lượng người dùng, tin tưởng và phát triển dựa trên CMS (Content Management System- Hệ thống quản trị nội dung) này. Từ khi ra đời, WordPress đã tạo cho mọi người một mã nguồn miễn phí và dễ dàng sử dụng cho tất cả mọi người.Nếu bạn đã sử dụng phần mềm soạn thảo văn phòng, thì Wordpress sử dụng dễ dàng như vậy. Sử dụng linh hoạt với các thao tác đơn giản: WordPress đa dạng về giao diện và với số lượng rất lớn plugin, bạn chỉ cần cài đặt và sử dụng, thậm chí bạn có thể tùy chỉnh plugin cho phù hợp với website của bạn. Với người mới thiết kế web thì đây là một công cụ rất tuyệt vời. Tích hợp sẵn chế độ Mobile cho website của bạn: Để khẳng định cho sự linh hoạt của mình, WordPress đã thân thiện mã nguồn của mình với chiếc điện thoại di động. Tính chất mở rộng của WordPress đã cho phép trang web của bạn sau khi thiết kế hoàn toàn có thể phù hợp với mọi phiên bản Mobile.Thậm chí có cả một plugin sẽ tự động hiển thị các chủ đề di động của trang web để người sử dụng khi nó được duyệt từ một thiết bị di động. Điều này có nghĩa rằng khi có cập nhật được thực hiện trên trang web, nó sẽ tự động được cập nhật trên các trang web điện thoại di động! WordPress ngày càng phát triển và hoàn thiện bậc nhất: Nói về khả năng phát triển … đó là những điều mà WordPress đã thực hiện và tiếp tục làm! Từ khởi đầu khiêm tốn của nó bắt đầu như là 1 công cụ viết blog đơn giản vào năm 2003, bây giờ được tải về hơn 90 triệu lần và được công nhận là một trong các hệ thống nội dung quản lý hàng đầu, chúng tôi nghĩ rằng nó thực sự là CMS hoàn hảo. 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 a. CSS Theo [8] định nghĩa về CSS: CSS là chữ viết tắt của cụm từ tiếng anh (Cascading Style Sheet), CSS được tổ chức World Wide Web (W3C) giới thiệu vào năm 1996. CSS chỉ đơn thuần là một file có phần mở rộng là .css, trong file này chứa những câu lệnh CSS, mỗi câu lệnh css sẽ định dạng một thành phần nhất định của tài liệu HTML như màu sắc, font chữ, . . ..Công dụng của CSS: Hạn chế tối thiểu việc làm rối mã HTML của trang Web bằng các thẻ quy định kiểu dáng (chữ đậm, chữ in nghiêng, chữ có gạch chân, chữ màu), khiến mã nguồn của trang Web được gọn gàng hơn, tách nội dung của trang Web và định dạng hiển thị, dễ dàng cho việc cập nhật nội dung. Tạo ra các kiểu dáng có thể áp dụng cho nhiều trang Web, giúp tránh phải lặp lại việc định dạng cho các trang Web giống nhau. b. jQuery Mobile Theo [6], định nghĩa về jQuery như sau: jQuery Mobile là một khung công tác phát triển giao diện người dùng web thân thiện với cảm ứng cho phép bạn phát triển các ứng dụng web di động làm việc trên các máy điện thoại thông minh và các máy tính bảng. Khung công tác jQuery Mobile được xây dựng trên đỉnh lõi jQuery và cung cấp một số phương tiện, gồm thao tác và chuyển dịch DOM (Mô hình đối tượng tài liệu), HTML và XML, xử lý các sự kiện, thực hiện truyền thông máy chủ bằng cách sử dụng Ajax, cũng như các hiệu ứng hình ảnh và hình ảnh động cho các trang web. Bản thân khung công tác di động là một bản tải bổ sung, riêng biệt có kích cỡ khoảng 12KB (đã rút gọn và nén) từ lõi jQuery có kích cỡ khoảng 25KB khi đã rút gọn/nén. Cũng như với phần còn lại của khung công tác jQuery, jQuery Mobile là thư viện được cấp phép kép (MIT và GPL), miễn phí c. Twitter Bootstrap Twitter Bootstrap bao gồm các mã CSS và HTML cơ bản cho typography, forms, buttons, tables, grids, navigation, và nhiều thành phần khác của website. Twitter Bootstrap cung cấp giao diện dạng lưới cố định (fixed) rộng 940px và 12 cột và giao diện động Fluid. Tương thích với màn hình phân giải cao Retina. d. Bansamiq mockup Theo www.balsamiq.com : Bansamiq mockup là một phần mềm thiết kế giao diện người dùng. Bansamiq mockup giúp cho người lập trình hay người dùng có thể thiết kế cho mình giao diện trên điện thoại di động hoặc trên máy tính thông qua việc mô phỏng các hình ảnh e. Photoshop Phần mềm giúp hỗ trợ vẽ, thiết kế giao diện trên website, chỉnh sửa ảnh 2.1.3. Phân định nội dung nghiên cứu trong quá trình thực hiện đề tài Trước tiên là hệ thống hóa cở sở lý thuyết về website, website trên điện thoại di động, công cụ wordpress. Sau đó là khảo sát, nghiên cứu và làm rõ sự cần thiết của website trên di động ngày nay từ đó đề xuất ra hoàn thiện chức năng hiển thị nội dung trên điện thoại di động cho website của FPT Polytechnic Việt Nam Trong phần hai đề tài nghiên cứu của mình, em sẽ làm rõ lý thuyết về website, hiển thị website trên điện thoại di động, công cụ Wordpress và một số công cụ khác. Từ các kết quả đánh giá, phân tích website, em sẽ đưa ra các nguyên nhân và tồn tại của website, và đưa ra giải pháp cho việc hoàn thiện chức năng hiển thị nội dung số trên điện thoại di động cho website của FPT Polytechnic Việt Nam bằng công cụ Wordpress trong phần ba của bài khóa luận Để thiết kế được chức năng hiển thị nội dung số trên điện thoại di đông cho website của FPT Polytechnic Việt Nam, trong khuôn khổ đề tài, em sử dụng Wordpress, CSS, jQuerry, Twitter Bootstrap 2.2. Phân tích, khảo sát thực trạng wesite của FPT Polytechnic 2.2.1. Giới thiệu chung về FPT Polytechnic Việt Nam Thông tin doFPT Polytechnic cung cấp: FPT polytechnic trực thuộc công ty FPT Education tập đoàn FPT,kinh doanh trong lĩnh vực giáo dục bao gồm các chuyên ngành đào tạo các chuyên ngành: Thiết kế Web, Ứng dụng phần mềm, Kế toán doanh nghiệp,QTDoanh nghiệp - Nhân sự & Văn phòng, QTDoanh nghiệp - Marketing & Bán hàng.FPT polytechnic có các chương trình đào tạo kéo dài 2 năm, mỗi năm 3 học kỳ. Đối tượng tuyển sinh của FPT Polytechnic là những học sinh đã tốt nghiệp THPT, có điểm tổng kết môn Toán lớp 12 hoặc điểm thi tốt nghiệp môn Toán đạt từ 5,5 trở lên hoặc sinh viên hệ chính quy các trường Cao đẳng, Đại học khác là đủ điều kiện để được xét tuyển vào trường. FPT Polytechnic chính thức đi vào hoạt động ngày 28/8/2010 với hai khối ngành đào tạo: Công nghệ thông tin (gồm Thiết kế web và Ứng dụng phần mềm) và Kinh tế - Kinh doanh (Kế toán doanh nghiệp, QTDoanh nghiệp - Nhân sự & văn phòng, QTDoanh nghiệp - Marketing & Bán hàng). Thời gian học trong hai năm, bằng tốt nghiệp là bằng cao đẳng nghề chính quy do Đại học FPT cấp. FPT Polytechnic triển khai mô hình giáo dục - đào tạo kiểu mới dựa trên sức mạnh của công nghệ thông tin. Đó là: “Thực học – Thực nghiệp”, đào tạo thông qua dự án với cách thức “cầm tay chỉ việc”. Đây là một trong những phương pháp đào tạo tiên tiến nhất hiện nay và còn mới lạ ở Việt Nam.Công việc thực tế trong doanh nghiệp được đưa vào bài giảng. Sinh viên sẽ được giao các nhiệm vụ, dự án ngay đầu giai đoạn để từng bước học hỏi và hoàn thiện. FPT Polytechnic tạo môi trường học tập giống doanh nghiệp và trong đó, sinh viên đóng vai trò như nhân viên.Các giờ học được tổ chức để giao việc và kiểm soát công việc. Mô hình đào tạo ở FPT Polytechnic thiên về thực hành và truyền nghề.Vì vậy, ngoài giảng viên chính sẽ có trợ giảng - người đi trước có kinh nghiệm hoặc sinh viên khoá trên - hướng dẫn cho sinh viên khoá dưới.Hệ thống giáo trình và tài liệu tham khảo có bản quyền từ các nhà xuất bản uy tín trên thế giới, thường xuyên cập nhật mỗi khi có phiên bản mới. Giáo trình của trường được chuyển ngữ và biên soạn sang Tiếng Việt thông qua sự hợp tác xuất với các nhà xuất bản quốc tế hàng đầu như McGrawHill, Pearson, Wiley… giúp sinh viên tiếp cận với tri thức công nghệ cập nhật một cách dễ dàng hơn, đặc biệt là khi khả năng ngoại ngữ còn hạn chế. Ngoài ra, nhà xuất bản Pearson sẽ cung cấp sách giáo trình, tài liệu giảng dạy với mức giá ưu đãi và dành các suất học bổng dành cho sinh viên và giảng viên xuất sắc.FPT Polytechnic cũng luôn tạo điều kiện cho sinh viên được phát triển bằng các hoạt động hướng nghiệp, giới thiệu việc làm cho sinh viên ngay trong quá trình học tập. 2.2.2. Thực trạng website của FPT Polytechnic 2.2.2.1. Giới thiệu chung Địa chỉ website: http://www.poly.edu.vn . Thời gian thành lập tháng 8/2010 Giao diện trang chủ của FPT Polytechnic: Hình 2.1. Giao diện trang chủ của FPT Polytechnic trên PC ( Nguồn www.poly.edu.vn) Chức năng của website FPT Polytechnic:Là cầu nối, quảng bá và truyền đạt thông tin đến các đối tượng: sinh viên, sinh viên tương lai, phụ huynh, đối tác…; Tổ chức các event, cuộc thi: Thử Thách Của Anh Gió, Chuyện của Lu-ka, Ảnh đẹp lúc 0 giờ, Nam Vương Poly, iPoly, Poly Confessions… ; Chăm sóc khách hàng (sinh viên, phụ huynh) thông qua hệ thống comment, yahoo pingbox; Đăng ký trực tuyến: Sinh