Nghiên cứu và xây dựng web mobile nghe nhạc bằng jquery mobile

Nghiên cứu và xây dựng web mobile nghe nhạc bằng jquery mobile

Đề tài: Nghiên cứu xây dựng Web mobile nghe nhạc Jquery Mobile Mục Lục Mục Lục Chương I: Cơ sở lý thuyết I.Ngôn ngữ HTML CSS: II.Ngôn ngữ PHP&MySQL: .5 III.Tổng quan javascript: Chương II: Tổng quan JQuery I.Giới thiệu JQuery I.1 Khái niệm JQuery: I.3 Tại phải dùng JQuery .9 I.4 JQuery làm II Nguyên lý hoạt động JQuery .10 II.1 Cú pháp đối tượng 10 II.2 Điều khiển CSS đối tượng 10 II.3 Gắn kiện xử lý kiện 11 II.4 Một vài hàm API phổ biến thường dùng 11 Chương III: Tổng quan Jquery Mobile 12 I.Đặc trưng Web Mobile nay: 12 II Giới thiệu Jquery Mobile : 13 III.Khái niệm Jquery Mobile: 14 IV.Các tính Jquery Mobile: 14 V.Hỗ trợ trình duyệt Jquery Mobile: 15 VI.Tìm hiểu Jquery Mobile 15 VI.1 Jquery làm gì: 15 VI.2 Các thành phần Jquery Mobile: 16 Chương IV: Phân tích yêu cầu triển khai hệ thống xây dựng Demo 18 Page Đề tài: Nghiên cứu xây dựng Web mobile nghe nhạc Jquery Mobile I.Phân tích yêu cầu hệ thống: 18 II.Triển khai hệ thống: 19 III.Chương trình Demo 19 Chương V : Tổng kết 21 I.Ưu nhược điểm: 21 II Hướng phát triển: 21 III Bảng phân công công việc .22 Danh mục Bảng - Hình Mục Lục Page Đề tài: Nghiên cứu xây dựng Web mobile nghe nhạc Jquery Mobile Chương I: Cơ sở lý thuyết I.Ngôn ngữ HTML CSS: II.Ngôn ngữ PHP&MySQL: .5 III.Tổng quan javascript: Chương II: Tổng quan JQuery I.Giới thiệu JQuery I.1 Khái niệm JQuery: Hình 1: Các địa sử dụng trực tiếp JQuery .8 I.3 Tại phải dùng JQuery .9 I.4 JQuery làm II Nguyên lý hoạt động JQuery .10 II.1 Cú pháp đối tượng 10 Hình 2: Bảng liệt kê tiêu chí chọn đối tượng 10 II.2 Điều khiển CSS đối tượng 10 II.3 Gắn kiện xử lý kiện 11 II.4 Một vài hàm API phổ biến thường dùng 11 Chương III: Tổng quan Jquery Mobile 12 I.Đặc trưng Web Mobile nay: 12 II Giới thiệu Jquery Mobile : 13 III.Khái niệm Jquery Mobile: 14 IV.Các tính Jquery Mobile: 14 V.Hỗ trợ trình duyệt Jquery Mobile: 15 VI.Tìm hiểu Jquery Mobile 15 VI.1 Jquery làm gì: 15 Hình 3: Bảng tóm tắt thành phần giao diện 16 VI.2 Các thành phần Jquery Mobile: 16 Page Đề tài: Nghiên cứu xây dựng Web mobile nghe nhạc Jquery Mobile Hình 4: Cách sử dụng thuộc tính data-* .17 Hình : Một số phương thức đặc trưng $.mobile 18 Chương IV: Phân tích yêu cầu triển khai hệ thống xây dựng Demo 18 I.Phân tích yêu cầu hệ thống: 18 II.Triển khai hệ thống: 19 III.Chương trình Demo 19 Hình : Demo localhost 20 Hình : Demo phần mềm giả lập mobile sau up lên host 21 Chương V : Tổng kết 21 I.Ưu nhược điểm: 21 II Hướng phát triển: 21 III Bảng phân công công việc .22 Page Đề tài: Nghiên cứu xây dựng Web mobile nghe nhạc Jquery Mobile Chương I: Cơ sở lý thuyết I Ngôn ngữ HTML CSS: HTML viết tắt Hyper Text Markup Language (Ngôn ngữ đánh dấu siêu văn bản) Một tài liệu HTML thường có đuôi mở rộng html htm tất nhiên trang web Các trang HTML nói riêng trang web nói chung (.php, asp, ) có tình chất văn file txt hay doc có điều phức tạp đa dạng Các trang web HTML đọc trình duyệt web (Web Browse) khác phổ biến Internet Explorer (IE) Ngôn ngữ HTML có ưu điểm đơn giản chạy tốt với nhiều hệ điều hành nhiều trình duyệt web khác Tuy trình duyệt hãng khác sản xuất có cách biên dịch trang web khác nói chung cho kết tương tự Ngòai HTML sọan thảo đơn giản, không cần chương trình chuyên dụng, cần notepad chương trình soạn thảo văn CSS chữ viết tắt Cascading Style Sheets, đơn dạng file text với phần tên mở rộng css Trong Style Sheet chứa câu lệnh CSS Mỗi lệnh CSS định dạng phần định HTML ví dụ như: font chữ, đường viền, màu nền, chỉnh hình ảnh v.v Trước chưa có CSS, người thiết kế web phải trộn lẫn thành phần trình bày nội dung với Nhưng với xuất CSS, người ta tách rời hoàn toàn phần trình bày nội dung Giúp cho phần code trang web gọn quan trọng dễ chỉnh sửa Có cách để định dạng trang web : - Cục – code CSS chèn trực tiếp vào thẻ HTM Nhúng vào trang web Liên kết đến file biệt lập II Ngôn ngữ PHP&MySQL: PHP (viết tắt hồi quy "PHP: Hypertext Preprocessor") ngôn ngữ lập trình kịch hay loại mã lệnh chủ yếu dùng để phát triển ứng dụng viết cho máy chủ, mã nguồn mở, dùng cho mục đích tổng quát Nó thích hợp với web dễ dàng nhúng vào trang HTML Do tối ưu hóa cho ứng dụng web, tốc độ nhanh, nhỏ gọn, cú pháp giống C Java, dễ học thời gian xây dựng sản phẩm tương đối ngắn so với ngôn ngữ khác nên PHP nhanh chóng trở thành ngôn ngữ lập trình web phổ biến giới Hiện phiên PHP phát triển, PHP sử dụng thử download địa http://snaps.php.net Phiên PHP kỳ vọng lấp đầy khiếm khuyết PHP phiên tại, ví dụ: hỗ trợ namespace (hiện nhà phát triển chưa công bố rõ ràng vấn đề này); hỗ Page Đề tài: Nghiên cứu xây dựng Web mobile nghe nhạc Jquery Mobile trợ Unicode; sử dụng PDO làm API chuẩn cho việc truy cập sở liệu, API cũ bị đưa thành thư viện PECL Rất nhiều nhà phát triển ứng dụng quản lý dự án có quan điểm PHP chưa sẵn sàng cho cấp doanh nghiệp (enterprise) thực tế, PHP chưa xâm nhập sâu vào thị trường Chính thế, Zend tiến hành nhiều biện pháp nhằm chuẩn hóa PHP, tạo tin cậy cho giới người dùng cao cấp Zend Platform sản phẩm giúp quản lý hệ thống ứng dụng PHP, nâng cao hiệu suất, tăng tốc độ ứng dụng PHP • Zend Framework tập hợp lớp, thư viện lập trình viết PHP (PHP 5) nhằm cung cấp giao diện lập trình chuẩn cho nhà phát triển ứng dụng • Ngoài ra, số framework khác phát triển nhằm hỗ trợ lập trình PHP cấp doanh nghiệp, đáng ý kể đến CodeIgniter, CakePHP, Symfony, Seagull MySQL hệ quản trị sở liệu tự nguồn mở phổ biến giới nhà phát triển ưa chuộng trình phát triển ứng dụng Vì MySQL sở liệu tốc độ cao, ổn định dễ sử dụng, có tính khả chuyển, hoạt động nhiều hệ điều hành cung cấp hệ thống lớn hàm tiện ích mạnh.Với tốc độ tính bảo mật cao, MySQL thích hợp cho ứng dụng có truy cập CSDL internet MySQL miễn phí hoàn toàn bạn tải MySQL từ trang chủ Nó có nhiều phiên cho hệ điều hành khác nhau: phiên Win32 cho hệ điều hành dòng Windows, Linux, Mac OS X, Unix, FreeBSD, NetBSD, Novell NetWare, SGI Irix, Solaris, SunOS, Do PHP kết hợp với MySQL tảng chéo Bạn phát triển Windows phục vụ tảng Unix PHP chạy nhiều tảng khác nhau: windows, Linux, Unix,… PHP tương thích với hầu hết máy chủ sử dụng ngày nay.Miễn phí tải từ nguồn tài nguyên PHP Dễ dàng tìm hiểu chạy phía máy chủ III Tổng quan javascript: - JavaScript ngôn ngữ dựa đối tượng, có nghĩa bao gồm nhiều kiểu đối tượng, ví dụ đối tượng Math với tất chức toán học Tuy JavaScript không ngôn ngữ hướng đối tượng C++ hay Java không hỗ trợ lớp hay tính thừa kế - JavaScript đáp ứng kiện tải hay loại bỏ form Khả cho phép JavaScript trở thành ngôn ngữ script động - Giống với HTML Java, JavaScript thiết kế độc lập với hệ điều hành Nó chạy hệ điều hành có trình duyệt hỗ trợ JavaScript Ngoài JavaScript giống Java khía cạnh an ninh: JavaScript đọc viết vào file người dùng Page Đề tài: Nghiên cứu xây dựng Web mobile nghe nhạc Jquery Mobile - Các trình duyệt web Nescape Navigator 2.0 trở hiển thị câu lệnh JavaScript nhúng vào trang HTML Khi trình duyệt yêu cầu trang, server gửi đầy đủ nội dung trang đó, bao gồm HTML câu lệnh JavaScript qua mạng tới client Client đọc trang từ đầu đến cuối, hiển thị kết HTML xử lý câu lệnh JavaScript chúng xuất - Các câu lệnh JavaScript nhúng trang HTML trả lời cho kiện người sử dụng kích chuột, nhập vào form điều hướng trang Ví dụ bạn kiểm tra giá trị thông tin mà người sử dụng đưa vào mà không cần đến trình truyền mạng Trang HTML với JavaScript nhúng kiểm tra giá trị đưa vào thông báo với người sử dụng giá trị đưa vào không hợp lệ Page Đề tài: Nghiên cứu xây dựng Web mobile nghe nhạc Jquery Mobile Chương II: Tổng quan JQuery I Giới thiệu JQuery I.1 Khái niệm JQuery: Với phát triển mau lẹ Internet, người dùng ngày quan tâm đến hình thức trang web Trước trang web cần có banner, nội dung footer hời hợt cho trang web hoàn chỉnh Nhưng trang web phải có banner bắt mắt, nội dung hay nhiều hiệu ứng lạ mắt khác thu hút người đọc Chính web designer bắt đầu ý đến thư viện JavaScript mở jQuery để tạo hiệu ứng tương tác trực tiếp với người đọc cáchnhanh chóng dễ dàng nhiều sử dụng JavaScrip JQuery Javascript Framework Nó thư viện xây dựng để hỗ trợ nhà lập trình web tạo tương tác website cách nhanh JQuery thêm tương tác Ajax vào trang web bạn, đơn giản hóa cách viết Javascript tăng tốc độ xử lý kiện trang web, giúp tiết kiệm thời gian công sức so với cách viết javascript thông thường JQuery phát triển John Resigvào năm 2006 sau năm trở thành thư viện tiếng với hàng chục nghìn plugin hay, hàng triệu người sửdụng, hầu hết website ứng dụng JQuery có mã nguồn mở hoàn toàn miễn phí, bạn download https://jQuery.com Hoặc sử dụng trực tiếp JQuery lưu trữ jQuery hay Google từ địa sau Hình 1: Các địa sử dụng trực tiếp JQuery I.2 Sử dụng JQuery cần biết gì: JQuery ngôn ngữ mà thư viện hàm javascript jQuery hướng tới mục đích làm đơn giản hóa công việc phức tạp trước dùng javascript để điều khiển DOM, CSS,… Do vậy, để học jQuery bạn cần tối thiểu nắm bắt kiến thức sau: - HTML - JAVASCRIPT - CSS Page Đề tài: Nghiên cứu xây dựng Web mobile nghe nhạc Jquery Mobile I.3 Tại phải dùng JQuery jQuery đơn giản hóa cách viết Javascript tăng tốc độ xử lý kiện trang web, giúp tiết kiệm thời gian công sức so với cách viết javascript thông thường Bên cạnh đó, việc sử dụng jQuery giúp giải tốt vấn đề xung đột trình duyệt web Học jQuery đơn giản, bạn nắm vững CSS, bạn tiếp cận sử dụng jQuery nhanh chóng Ngoài jQuery có thư viện javascript tiếng khác mooTools, Prototype, Dojo jQuery thu hút web designer có ưu điểm Ưu điểm jQuery: - Hỗ trợ tốt việc xử lí vấn đề thường gặp (DOM, AJAX…) - Tương thích nhiều trình duyệt web phổ biến - Nhỏ gọn, dễ dùng, có nhiều tài liệu hướng dẫn sử dụng chi tiết - Ít xung khắc với thư viện Javascript khác - Plugin phong phú I.4 JQuery làm - Hướng tới thành phần tài liệu HTML: Nếu không sử dụng thư viện JavaScript này, bạn phải viết nhiều dòng code đạt mục tiêu di chuyển cấu trúc (hay gọi DOM = Document Object Model) tài liệu HTML chọn thành phần liên quan Jquery cho phép bạn chọn thành phần tài liệu để “vọc” cách dễ dàng sử dụng CSS - Thay đổi giao diện trang web: CSS công cụ mạnh để định dạng trang web có nhược điểm tất trình duyệt hiển thị giống Cho nên jQuery đời để lấp chỗ trống này, bạn sử dụng để giúp trang web hiển thị tốt hầu hết trình duyệt Hơn jQuery thay đổi class định dạng CSS áp dụng lên thành phần tài liệu HTML trang web trình duyệt load thành công - Thay đổi nội dung tài liệu: Jquery thay đổi bề trangweb, thay đổi nội dung tài liệu với vài dòng code Nó thêm bớt nội dung trang, hình ảnh thêm vào đổi sang hình khác, danh sách xếp lại chí cấu trúc HTML trang web viết lại mở rộng Tất điều bạn hoàn toàn làm nhờ giúp đỡ API (Application Programming Interface = Giao diện lập trình ứng dụng) - Tương tác với người dùng: Cho dù công cụ bạn dùng có mạnh mẽ đến mấy, bạn quyền định sử dụng công cụ coi bỏ Với thư viện javaScript jQuery, cho bạn nhiều cách để tương tác với người dùng ví dụ người dùng nhấp chuột vào đường link có xảy Nhưng hay không làm cho code HTML bạn rối tung lên nhờ Event Page Đề tài: Nghiên cứu xây dựng Web mobile nghe nhạc Jquery Mobile Handlers Hơn Event Handler API bảo đảm trang web bạn tương thích hầu hết với trình duyệt, điều làm đau đầu nhiều web designer - Tạo hiệu ứng động cho thay đổi tài liệu: Để tương tác tốt với người dùng, web designer phải cho người dùng thấy hiệu ứng xảy họ làm tác vụ Jquery cho phép bạn sử dụng nhiều hiệu ứng động mờ dần, chạy dọc chạy ngang v.v chưa đủ, cho phép bạn tự tạo hiệu ứng riêng - Lấy thông tin từ server mà không cần tải lại trang web: Đây công nghệ ngày trở nên phổ biến Asynchronous JavaScript And XML (AJAX), giúp người thiết kế web tạo trang web tương tác cực tốt nhiều tính Thư viện jQuery loại bỏ phức tạp trình duyệt trình cho phép người phát triển web tập trung vào tính đầu cuối Đơn giản hoá tác vụ javaScript Ngoài tính nêu trên, jQuery cho phép bạn viết code javaScript đơn giản nhiều so với cách truyền thống vòng lặp điều khiển mảng II Nguyên lý hoạt động JQuery II.1 Cú pháp đối tượng JQuery sử dụng cách CSS để lựa chọn phần tử HTML ( thẻ HTML) thực vài việc lên đối tượng chọn Việc chọn đối tượng có đặc điểm(nhiều thành phần) Nguyên tắc để chọn cụ thể sau: Cú pháp: $ (doi_tuong) $ : Ký tự bắt đầu JQuery việc xác định đối tượng (doi_tuong): Tiêu chí để xác định đối tượng Sau bảng liệt kê tiêu chí chuẩn mẫu để chọn đối tượng : $ (this) Chọn đối tượng ( đối tượng đặc biệt) | đơn lẻ $ (document) Chọn đối tượng toàn tài liệu ( đối tượng đặc biệt) | đơn lẻ $ (window) Chọn đối tượng cửa sổ hành (đối tượng đặc biệt) | đơn lẻ $ (‘p’) Chọn tất thẻ | nhiều thành phần $ (‘.ClassName) Chọn tất thẻ HTML có class=”ClassName’ | nhiều thành phần $ (‘#IdValue’) Chọn thẻ HTML có id=’IdValue’ | đơn lẻ Hình 2: Bảng liệt kê tiêu chí chọn đối tượng II.2 Điều khiển CSS đối tượng II.2.1 Lấy giá trị thuộc tính CSS Page 10 Đề tài: Nghiên cứu xây dựng Web mobile nghe nhạc Jquery Mobile Khi dùng JQuery, việc tác động trực tiếp lấy giá trị thuộc tính CSS đối tượng chọn vô đơn giản bạn sử dụng tên thuộc tính giá trị lấy có định dạng y định nghĩa CSS Cú pháp: $ (doi_tuong).css(‘ten_css’) doi_tuong : tiêu chí xác định đối tượng ten_css : tên thuộc tính css font-size, color, … II2.2 Đặt giá trị cho CSS Tương tự lấy giá trị thuộc tính CSS, việc gán giá trị cho đơn giản Cú pháp: $ (doi_tuong) css(‘ten_css’,’gia_tri’) doi_tuong : tiêu chuẩn xác định đối tượng ten_css : tên thuộc tính css font-size, color,… gia_tri : giá trị mà bạn muốn gán cho CSS II.3 Gắn kiện xử lý kiện II.3.1 Gán kiện vào đối tượng: Phần trình bày việc dùng jQuery để gán kiện lên đối tượng điều khiển xử lý kiện xảy Nội dung đề cập đến bao gồm cách dùng phổ thông để giúp bạn nắm bắt làm quen Những nội dung chi tiết kiện đề cập đầy đủ phần tài liệu Cú pháp : $ (doi_tuong).ten_su_kien(‘ham_dieu_khien’); doi_tuong : tiêu chí xác định đối tượng nói ten_su_kien : tên kiện ham_dieu_khien : hàm điều khiển kiện kiện phát sinh II.3.2 Hủy kiện vào đối tượng : Khi gán kiện cho đối tượng rồi, số trường hợp vài lý mà bạn muốn hủy kiện jQuery giúp bạn làm việc đơn giản Cú pháp : $ (doi_tuong).unbind(ten_su_kien) ; doi_tuong : tiêu chí xác định đối tượng ten_su_kien : tên kiện theo chuẩn javascript click, focus, load,… Nếu muốn hủy toàn kiện đối tương, ta dùng cú pháp sau: $ (doi_tuong).unbind(); II.4 Một vài hàm API phổ biến thường dùng Đây danh sách hàm API jQuery hay dùng để bạn tham khảo nhanh phục vụ vài mục đích đơn giản trình làm quen với jQuery Page 11 Đề tài: Nghiên cứu xây dựng Web mobile nghe nhạc Jquery Mobile làm tập Cũng nội dung bên trên, cách dùng liệt kê phần trường hợp phổ thông II.4.1 Hàm fadeIn() Hiệu ứng hiên thị đối tượng từ trạng thái suốt Nghĩa trạng thái ban đầu đối tượng phải suốt (opacity=0) Cú pháp: $ (doi_tuong).fadeIn(thoi_gian, dieu_khien); thoi_gian : thời gian chuyển, dùng sso(1/1000 giây) chuỗi ‘slow’ ‘fast’ dieu_khien : làm hàm thực thi sau trình đổi kết thúc Hàm bỏ trống II.4.2 Hàm fadeOut() Hàm có tác dụng gây hiệu ứng ngược lại với hàm fadeIn(), nghĩa nósẽ làm cho đối tượng trở nên suốt từ từ Các tham số cách sử dụng ý fadeIn() II.4.3 Hàm fadeTo() Hàm sử dụng cho hai trường hợp fadeIn() fadeOut()khi hướng tới mục đích chuyển đổi tự trạng thái đến trạng thái chỉđịnh Tùy vào giá trị giá trị đến mà có hiệu ứng fadeIn() hay fadeOut() Cú pháp : $ (doi_tuong).fadeTo(thoi_gian, dich_den, dieu_khien); thoi_gian : thời gian chuyển, sử dụng số (1/1000 giây) chuỗi ‘slow’ ‘fast’ dieu_khien : hàm thự thi sau trình đổi kết thúc Hàm bỏ trống dich_den : có giá trị từ 0-1( tương ứng 0% -> 100%) độ fade muốn chuyển đến II.4.4 Hàm show() Về chất tham số hàm gọi css('display','block') Còn có tham số cú pháp hoạt động tương tự fadeIn() Cú pháp : $ (doi_tuong).show(thoi_gian, dieu_khien); thoi_gian : thời gian chuyển, sử dụng số (1/1000 giây) chuỗi ‘slow’ ‘fast’ dieu_khien : hàm thự thi sau trình đổi kết thúc Hàm bỏ trống II.4.5 Hàm hide() Trái ngược với show(), tham sốthì hàm gọi.css('display', 'none') Còn có tham số cú pháp hoạt động tương tự fadeOut() Chương III: Tổng quan Jquery Mobile I Đặc trưng Web Mobile nay: I.1 Tối ưu chạm hình – Fingertip Optimization Page 12 Đề tài: Nghiên cứu xây dựng Web mobile nghe nhạc Jquery Mobile Khi thực khảo sát cho web sử dụng cho điện thoại (mobile website), hiển nhiên tất xây dựng để điều hướng với chạm tay Một số yếu tố gồm, ô tìm kiếm hình ảnh làm đủ lớn để ngón tay chạm vào Một phản ứng chạm vào hình thiết bị di động rõ ràng thói quen người dùng ngày nay, ý tới điều thiết kế cho mobile website I.2 Tối giản Tìm cách thu hút tập trung người sử dụng mobile hình nhỏ thách thức lớn Sự phức tạp sử dụng làm khó người dùng họ sử dụng Vì lý này, hầu hết mobile website có thiết kế layout đơn giản Một rút gọn điều hướng (so với web pc) sử dụng, giống phiên thu nhỏ, giúp người dùng tiếp cận với thông tin cần thiết nhất, phù hợp với thời điểm người dùng sử dụng mobile (nhanh gọn, tức thì) I.3 Không gian trống – White Space Không gian trống điều PHẢI có cho thiết kế web tốt, có ý nghĩa đặc biệt quan trọng lĩnh vực di động Bất trang web thiết kế cho mobile mà sử dụng nhiều hình ảnh, xếp lộn xộn, chật chội bị người dùng bỏ qua I.4 Tăng cường video hình ảnh Với phát triển công nghệ không dây, dung lượng rào cản lớn Chúng ta thoải mái với sáng tạo thị giác Chúng ta không ngần ngại phát triển dịch vụ mobile dành cho thư viện video, hình ảnh hình thức khác I.5 Tương tác với mạng xã hội Bản chất việc dùng điện thoại để kết nối, trang web sử dụng mobile tìm cách liên kết mạng xã hội, kết nối Facebook, Linking, Following Twitter Các chủ doanh nghiệp không muốn bỏ lỡ hội kết nối với khách hàng họ hàng ngày, hàng II Giới thiệu Jquery Mobile : Ngày nay, với phát triển vượt bậc smartphone tablet, truy cập website lúc Tuy nhiên, nhược điểm lớn website (đặc biệt website Việt Nam) sử dụng Flash nhiều Điều làm cho thiết bị di động gặp khó khăn trình truy cập (IOS không hỗ trợ chạy Flash lướt web, muốn bạn phải cài đặt thêm plugin Điều khó khăn số người không chuyên tin học làm giảm thời lượng Pin sử dụng) Chính Jquery Mobile đời Bên cạnh Sencha Touch, Jquery Mobile ủng hộ mạnh mẽ phát triển tảng Jquery Tuy nhiên dễ chịu so với Sencha Touch không ảnh hưởng đến việc code chức web (PHP, ASP ) Cách sử dụng dùng Jquery thông thường Page 13 Đề tài: Nghiên cứu xây dựng Web mobile nghe nhạc Jquery Mobile Jquery Mobile đời khoảng tháng 8/2010 phát triển nhanh tính phổ biến, mã nguồn mở cú pháp tương tự Jquery, nhiều plugin miễn phí, hiệu ứng chuyển động tốt Và quan trọng hết tương thích với tất thiết bị di động smartphone IOS, Android, Blackberry Hiện Jquery Mobile tiếp tục phát triển hoàn thiện Tuy nhiên.trong tương lai không xa thư viện hỗ trợ mạnh mẽ công nghệ HTML5 vàCSS3 cho thiết bị cảm ứng jQuery Mobile, khung công tác giao diện người dùng (UI), cho phép bạn viết ứng dụng web di động chức mà không cần viết dòng mã JavaScript Trong này, tìm hiểu tính khung công tác này, gồm trang bản, công cụ điều hướng, nút điều khiển biểu mẫu hiệu ứng chuyển tiếp Để tìm hiểu jQuery Mobile, bạn cần: - Tìm hiểu HTML - Hiểu điều JavaScript - Kiến thức Jquery III Khái niệm Jquery Mobile: jQuery Mobile 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 ứng dụng web di động làm việc máy điện thoại thông minh máy tính bảng Khung công tác jQuery Mobile xây dựng đỉnh lõi jQuery cung cấp số phương tiện, gồm thao tác chuyển dịch DOM (Mô hình đối tượng tài liệu), HTML XML, xử lý kiện, thực truyền thông máy chủ cách sử dụng Ajax, hiệu ứng hình ảnh hình ảnh động cho trang web Bản thân khung công tác di động tải bổ sung, riêng biệt có kích cỡ khoảng 12KB (đã rút gọn nén) từ lõi jQuery có kích cỡ khoảng 25KB rút gọn/nén Cũng với phần lại khung công tác jQuery, jQueryMobile thư viện cấp phép kép (MIT GPL), miễn phí IV Các tính Jquery Mobile: - Khá đơn giản: Khung công tác dễ sử dụng Bạn phát triển trang chủ yếu cách sử dụng đánh dấu dựa vào mã JavaScript tối thiểu không dùng mã - Nâng cấp tăng dần khả chịu lỗi: Trong jQuery Mobile sử dụng mã HTML5, CSS3 JavaScript nhất, tất thiết bị di động cung cấp hỗ trợ Triết lý JQuery Mobile hỗ trợ hai thiết bị có khả cấp cao khả cấp thấp hơn, chẳng hạn thiết bị không hỗ trợ JavaScript cung cấp trải nghiệm tốt - Tính dễ dùng: jQuery Mobile thiết kế với chủ ý dễ dùng Nó có hỗ trợ cho Các ứng dụng Internet phong phú dễ dùng (WAI-ARIA - Accessible Rich Internet Applications) để giúp làm cho trang web dễ dùng với khách truy cập bị tàn tật nhờ sử dụng công nghệ trợ giúp Page 14 Đề tài: Nghiên cứu xây dựng Web mobile nghe nhạc Jquery Mobile - Kích cỡ nhỏ: Kích cỡ tổng thể khung công tác di động jQuery tương đối nhỏ khoảng 12KB với thư viện JavaScript, 6KB với CSS, cộng với số biểu tượng - Tạo chủ đề: Khung công tác cung cấp hệ thống chủ đề, cho phép bạn đưa kiểu dáng ứng dụng riêng Khi dùng với công cụ PhoneGap, có sử dụng công nghệ web để xây dựng ứng dụng độc lập, khung công tác jQuery Mobile giúp đơn giản hóa việc phát triển ứng dụng bạn V Hỗ trợ trình duyệt Jquery Mobile: Chúng chặng đường dài với hỗ trợ trình duyệt thiết bị di động, tất thiết bị di động cung cấp hỗ trợ cho HTML5, CSS JavaScript Lĩnh vực nơi hỗ trợ nâng cấp tăng dần khả chịu lỗi jQuery Mobile vào Như nêu, jQuery Mobile hỗ trợ hai thiết bị có khả cấp cao cấp thấp, chẳng hạn thiết bị không hỗ trợ JavaScript Nâng cấp tăng dần có nguyên tắc cốt lõi sau: - Tất nội dung nên dễ dùng với tất trình duyệt - Tất chức nên dễ dùng với tất trình duyệt - Bố trí nâng cao cung cấp CSS liên kết - Hành vi nâng cao cung cấp JavaScript liên kết - Các sở thích trình duyệt người dùng cuối tôn trọng - Tất nội dung nên trình diễn (như thiết kế) thiết bị bản, nhiều tảng trình duyệt nâng cao nâng cấp CSS JavaScript liên kết ngoài, bổ sung JQuery Mobile cung cấp hỗ trợ cho tảng di động sau đây: • Apple® iOS: iPhone, iPod Touch, iPad (tất phiên bản) • Android™: tất thiết bị (tất phiên bản) • Blackberry®: Torch (phiên 6) • Palm™: WebOS Pre, Pixi • Nokia®: N900 (đang xây dựng) VI Tìm hiểu Jquery Mobile VI.1 Jquery làm gì: Query Mobile cung cấp hỗ trợ mạnh mẽ cho loại phần tử giao diện người dùng khác Hình cho thấy tóm tắt thành phần giao diện người dùng hỗ trợ Page 15 Đề tài: Nghiên cứu xây dựng Web mobile nghe nhạc Jquery Mobile Hình 3: Bảng tóm tắt thành phần giao diện Các công cụ, nút ấn, khung nhìn danh sách, thẻ, trình đơn bật lên, hộp thoại, hiệu ứng chuyển tiếp, ô cửa sổ chỉnh sửa phần tử biểu mẫu hỗ trợ Hầu hết, tất cả, phần tử giao diện người dùng mà bạn cần cho ứng dụng web di động cung cấp VI.2 Các thành phần Jquery Mobile: VI.2.1 Các thuộc tính data - * HTML5 jQuery Mobile dựa vào thuộc tính data-*của HTML5 để hỗ trợ phần tử giao diện người dùng, hiệu ứng chuyển tiếp cấu trúc trang khác Các thuộc tính bị trình duyệt không hỗ trợ chúng lặng lẽ loại bỏ Bảng sau cho thấy cách sử dụng thuộc tính data-* để tạo thành phần giao diện người dùng Thành phần Thuộc tính data-* HTML5 Page 16 Đề tài: Nghiên cứu xây dựng Web mobile nghe nhạc Jquery Mobile Các công cụ đầu trang(Header) Chân trang(Footer) Phần thân nội dung (content) Các nút ấn (button) Các nút ấn nhóm lại Các nút nhấn trực tiếp (inline button) Phần tử biểu mẫu (trình đơn select) Các khung nhìn danh sách Các hộp thoại Các hiệu ứng chuyển tiếp (transition) Button Yes No Apple Lemon Choose a option Option 1 Option 2 Option 3 One Two Three Open dialog Open dialog Open dialog Hình 4: Cách sử dụng thuộc tính data-* VI.2.2 $.mobile kiện phương thức hỗ trợ Đối tượng jQuery JavaScript liên quan đến ký hiệu $ Khung công tác jQuery Mobile mở rộng lõi jQuery trình cắm thêm di động, gồm mobile $.mobile có định nghĩa số kiện phương thức Một số phương thức đặc trưng $.mobile mô tả Phương thức $.mobile.changePage Cách sử dụng Để thay đổi lập trình từ trang sang trang khác Page 17 Đề tài: Nghiên cứu xây dựng Web mobile nghe nhạc Jquery Mobile Ví dụ: Để chuyển đến trang weblog.php sử dụng hiệu ứng slide, sử dụng $.mobile.changePage(“weblog.php”,”slice”) $.mobile.pageLoading Để hiển thị ẩn thông báo nạp trang Ví dụ: Để ẩn thông báo sử dụng $.mobile.pageLoading(true) $.mobile.silentScroll Để cuộn vị trí Y cụ thể mà không tạo kiện cuộn Ví dụ: Để cuộn đến vị trí Y 50, sử dụng $.mobile.silentScroll(100) $.mobile.addResolutionBreakpoints Jquery Mobile định nghĩa số điểm ngắt cho lớp min/max Gọi phương thức để bổ sung điểm ngắt Ví dụ : Để bổ sung lớp min/max cho chiều rộng điểm ảnh 800, sử dụng $.mobile.addResolutionBreakpoints(800) $.mobile.activePage Đề cập đến trang hoạt động Hình : Một số phương thức đặc trưng $.mobile Có số kiện mà bạn kết buộc chúng sử dụng phương thức bind() live(), chẳng hạn khởi tạo JQuery Mobile, kiện cảm ứng, thay đổi định hướng,các kiện cuộn, kiện hiện/ ẩn trang, kiện khởi tạo trang kiện hình ảnh động Chương IV: Phân tích yêu cầu triển khai hệ thống xây dựng Demo I Phân tích yêu cầu hệ thống: - Yêu cầu đề tài : Xây dựng web mobile nghe nhạc cho thiết bị cầm tay sử dụng thư viện JQuery Mobile - Phương pháp nghiên cứu: • Xác định vấn đề • Thu thập thông tin • Phân tích đánh giá Page 18 Đề tài: Nghiên cứu xây dựng Web mobile nghe nhạc Jquery Mobile • Xây dựng chương trình II Triển khai hệ thống: Thông qua yêu cầu đề tài, chúng em sử dụng ngôn ngữ PHP, XML, HTML, javascript, CSS thư viện JQuery Mobile để xây dựng chương trình Demo Các bước xây dựng chương trình : - Xây dựng giao diện trang index, playlist ứng dụng Codiqa có sắn trang web jquerymobile.com - Tải thư viện JQuery Mobile - Tạo file XML để xây dựng danh sách - Sử dụng javascript để hoàn thiện website - Chạy Demo localhost với phần mềm Vertrigo - Upload website lên host để test trực tiếp thiết bị cầm tay III Chương trình Demo III.1 Demo localhost với Vertrigo Page 19 Đề tài: Nghiên cứu xây dựng Web mobile nghe nhạc Jquery Mobile Hình : Demo localhost III.2 Demo phần mềm giả lập sau up lên host Page 20 Đề tài: Nghiên cứu xây dựng Web mobile nghe nhạc Jquery Mobile Hình : Demo phần mềm giả lập mobile sau up lên host Chương V : Tổng kết I Ưu nhược điểm: Xây dựng website nghe nhạc jquery thỏa mãn yêu cầu website nghe nhạc thiết bị cầm tay bình thường, bao gồm chức như: loại để lựa chọn, nghe nhạc, dừng nhạc, dễ sử dụng Tuy nhiên bên cạnh website bộc lộ số thiếu sót cung ứng chức bản, chưa có nhiều lựa chọn cho người nghe, cho chạy hát chưa có giao diện nghe nhạc, giao diện chưa tốt, chưa có kết nối CSDL để quản lý, chức chưa ổn định Trong suốt trình làm việc, chúng em đạt số thành như: hiểu rõ điều PHP, javascript , CSS, HTML bổ sung kiến thức cho chúng em thiết kế web Tuy mức độ báo cáo nhiều hạn chế, chúng em tiếp xúc với lập trình thiết kế Website Nhưng chúng em hy vọng thông qua báo cáo chúng em mang lại cho người nhìn khái quát, rõ ràng việc xây dựng trang web mobile việc sử dụng thư viện JQuery Mobile II Hướng phát triển: - Xây dựng giao diện chuyên nghiệp, thân thiện với người dùng - Có chức upload, download, search,… - Tạo tài khoản cho người sử dụng Page 21 Đề tài: Nghiên cứu xây dựng Web mobile nghe nhạc Jquery Mobile III Bảng phân công công việc Thời gian Nội dung công việc Từ 19/12 đến 23/12 Tìm hiểu ngôn ngữ PHP,XML, CSS, HTML, javascript Từ 24/12 đến 30/12 Tìm hiểu hệ thống, dịch tài liệu Jquery Mobile Từ 31/12 đến 6/1 Phân tích thiết kế giao diện website nghe nhạc theo yêu cầu Từ 7/1 đến hết Xây dưng demo chương trình Thiết kế giao diện : Đỗ Văn Thanh Nho – Ngô Văn Việt Xây dựng website : Nguyễn Hoàng An – Đặng Ngọc Trung Trong suốt trình làm việc nhóm tham khảo đóng góp ý kiến giúp đỡ lẫn nhau, hoàn thành phần, bảng phân công mang tính chất đảm nhiệm khâu trình bày Page 22 [...]... Đề tài: Nghiên cứu và xây dựng Web mobile nghe nhạc bằng Jquery Mobile • Xây dựng chương trình II Triển khai hệ thống: Thông qua yêu cầu của đề tài, chúng em sử dụng ngôn ngữ PHP, XML, HTML, javascript, CSS và thư viện JQuery Mobile để xây dựng chương trình Demo Các bước xây dựng chương trình : - Xây dựng giao diện các trang index, playlist bằng ứng dụng Codiqa có sắn trên trang web jquerymobile.com... Page 20 Đề tài: Nghiên cứu và xây dựng Web mobile nghe nhạc bằng Jquery Mobile Hình 7 : Demo trên phần mềm giả lập mobile sau khi up lên host Chương V : Tổng kết I Ưu nhược điểm: Xây dựng website nghe nhạc bằng jquery về cơ bản đã thỏa mãn các yêu cầu của một website nghe nhạc trên thiết bị cầm tay bình thường, bao gồm các chức năng như: có các thể loại để lựa chọn, nghe nhạc, dừng nhạc, dễ sử dụng... dụng) Chính vì vậy Jquery Mobile đã ra đời Bên cạnh Sencha Touch, Jquery Mobile cũng được ủng hộ mạnh mẽ và phát triển trên nền tảng Jquery Tuy nhiên nó dễ chịu hơn so với Sencha Touch vì nó không ảnh hưởng đến việc code chức năng web (PHP, ASP ) Cách sử dụng như chúng ta dùng Jquery thông thường Page 13 Đề tài: Nghiên cứu và xây dựng Web mobile nghe nhạc bằng Jquery Mobile Jquery Mobile ra đời khoảng... Fingertip Optimization Page 12 Đề tài: Nghiên cứu và xây dựng Web mobile nghe nhạc bằng Jquery Mobile Khi thực hiện một cuộc khảo sát cho các web sử dụng cho điện thoại (mobile website), hiển nhiên tất cả đều được xây dựng để điều hướng với chạm tay Một số yếu tố gồm, ô tìm kiếm và các hình ảnh được làm đủ lớn để ngón tay có thể chạm vào Một phản ứng khi chạm vào màn hình trên thiết bị di động rõ ràng... dụng Page 21 Đề tài: Nghiên cứu và xây dựng Web mobile nghe nhạc bằng Jquery Mobile III Bảng phân công công việc Thời gian Nội dung công việc Từ 19/12 đến 23/12 Tìm hiểu ngôn ngữ PHP,XML, CSS, HTML, javascript Từ 24/12 đến 30/12 Tìm hiểu hệ thống, dịch tài liệu Jquery Mobile Từ 31/12 đến 6/1 Phân tích và thiết kế giao diện website nghe nhạc theo yêu cầu Từ 7/1 đến hết Xây dưng và demo chương trình... trình từ trang này sang trang khác Page 17 Đề tài: Nghiên cứu và xây dựng Web mobile nghe nhạc bằng Jquery Mobile Ví dụ: Để chuyển đến trang weblog.php khi sử dụng hiệu ứng slide, sử dụng $ .mobile. changePage(“weblog.php”,”slice”) $ .mobile. pageLoading Để hiển thị hoặc ẩn thông báo nạp trang Ví dụ: Để ẩn thông báo sử dụng $ .mobile. pageLoading(true) $ .mobile. silentScroll Để cuộn một vị trí Y cụ thể mà... jquerymobile.com - Tải các thư viện của JQuery Mobile - Tạo file XML để xây dựng danh sách - Sử dụng javascript để hoàn thiện website - Chạy Demo trên localhost với phần mềm Vertrigo - Upload website lên host để test trực tiếp trên thiết bị cầm tay III Chương trình Demo III.1 Demo trên localhost với Vertrigo Page 19 Đề tài: Nghiên cứu và xây dựng Web mobile nghe nhạc bằng Jquery Mobile Hình 6 : Demo trên localhost... một đối tương, ta dùng cú pháp sau: $ (doi_tuong).unbind(); II.4 Một vài hàm API phổ biến thường dùng Đây là danh sách những hàm API jQuery hay dùng nhất để bạn có thể tham khảo nhanh và phục vụ vài mục đích đơn giản trong quá trình làm quen với jQuery cũng như Page 11 Đề tài: Nghiên cứu và xây dựng Web mobile nghe nhạc bằng Jquery Mobile làm cái bài tập Cũng như những nội dung bên trên, những cách... Nokia®: N900 (đang xây dựng) VI Tìm hiểu về Jquery Mobile VI.1 Jquery làm được những gì: Query Mobile cung cấp sự hỗ trợ mạnh mẽ cho các loại phần tử giao diện người dùng khác nhau Hình dưới đây cho thấy một bản tóm tắt về các thành phần giao diện người dùng đang được hỗ trợ hiện nay Page 15 Đề tài: Nghiên cứu và xây dựng Web mobile nghe nhạc bằng Jquery Mobile Hình 3: Bảng tóm tắt các thành phần giao... hạn như khởi tạo JQuery Mobile, sự kiện cảm ứng, thay đổi định hướng,các sự kiện cuộn, các sự kiện hiện/ ẩn trang, các sự kiện khởi tạo trang và các sự kiện hình ảnh động Chương IV: Phân tích yêu cầu và triển khai hệ thống xây dựng Demo I Phân tích yêu cầu hệ thống: - Yêu cầu đề tài : Xây dựng web mobile nghe nhạc cho thiết bị cầm tay sử dụng thư viện JQuery Mobile - Phương pháp nghiên cứu: • Xác định ... tài: Nghiên cứu xây dựng Web mobile nghe nhạc Jquery Mobile Hình : Demo localhost III.2 Demo phần mềm giả lập sau up lên host Page 20 Đề tài: Nghiên cứu xây dựng Web mobile nghe nhạc Jquery Mobile. .. quan Jquery Mobile I Đặc trưng Web Mobile nay: I.1 Tối ưu chạm hình – Fingertip Optimization Page 12 Đề tài: Nghiên cứu xây dựng Web mobile nghe nhạc Jquery Mobile Khi thực khảo sát cho web sử... người sử dụng giá trị đưa vào không hợp lệ Page Đề tài: Nghiên cứu xây dựng Web mobile nghe nhạc Jquery Mobile Chương II: Tổng quan JQuery I Giới thiệu JQuery I.1 Khái niệm JQuery: Với phát triển