Thiết kế web cho thiết bị di động

Thiết kế web cho thiết bị di động

Tải tài liệu “Thiết kế web cho thiết bị di động” về tại đây

1) Slide 1:

  • Sinh viên cần: Sinh viên đọc trước Phần I – Làm quen với phát triển web Mobile trong SGK
  • Giới thiệu môn học: syllabus, mục tiêu môn học, case study, assignment
  • Slide 1: Tổng quan về phát triển web Mobile
    – Khái quát về phát triển web trên mobile & thiết bị di động
    – Thiết lập môi trường phát triển web Mobile
  • Kiến thức cần nắm: Những kiến thức cơ bản về thiết kế web cho thiết bị di động
    Thiết lập môi trường phát triển web cho thiết bị di động
  • Thực hành – Lab 1:
    – Làm quen với các trang web dành cho di động
    – Làm quen với trang web kiểm tra lỗi cho web di động

2) Slide 2:

  • Sinh viên cần: Sinh viên đọc trước các chương trong Phần II – Cấu trúc ngôn ngữ đánh dấu cho phát triển web Mobile của SGK:
    – Chương 3: Ngôn ngữ đánh dấu mobile
    – Chương 4: Nhận diện thiết bị và thích ứng nội dung
  • Slide 2:  Tìm hiểu ngôn ngữ đánh dấu trong việc phát triển web Mobile
    – Ngôn ngữ đánh dấu web mobile
    – Nhận diện thiết bị và tính tương thích với các thiết bị di động
  • Kiến thức cần nắm: Làm quen với ngôn ngữ đánh dấu cho web di động:
    CSS cho web di động
    – Nhận diện thiết bị và tính tương thích với các thiết bị di động
    – Nâng cao khả năng tương tác của web di động với Javascript và AJAX
  • Thực hành – Lab 2:
    – Giúp sinh viên bước đầu làm quen với các ngôn ngữ đánh dấu cho web di động

3) Slide 3:

  • Sinh viên cần: Sinh viên đọc trước các  chương trong tài liệu :
    – DreamweaverCS5-Mobile & Web-Development-with-HTML5/ CSS3 & jQuery:
    – Chương 9: Khởi tạo trang web mobile với Jquery
    – Chương 5 SGK: Bổ sung khả năng tương tác sử dụng Javascript và AJAX
  • Slide 3: Thiết kế trang web cho mobile với Dreamweaver CS5 và Jquery
    – Nâng cao khả năng tương tác của web mobile với Javascript và AJAX
  • Kiến thức cần nắm: Nhận diện thiết bị và tính tương thích với các thiết bị di động
    Nâng cao khả năng tương tác của web di động với Javascript và AJAX
    Thiết kế trang web cho di động với Dreamweaver CS5
  • Thực hành – Lab 3:
    – Giúp sinh viên khởi tạo website cho thiết bị di động:
    – Khởi tạo
    – Tùy chỉnh, định dạng web

4) Slide 4:

  • Sinh viên cần: Sinh viên đọc trước các  chương trong tài liệu:
    – DreamweaverCS5-Mobile & Web-Development-with-HTML5/ CSS3 & jQuery:
    – Chương 10: Các thành phần Jquery mobile
  • Slide 4: Nâng cao khả năng thiết kế web Mobile với các thành phần Jquery mobile
    – Làm quen với các thành phần Jquery dành cho thiết bị di động
  • Kiến thức cần nắm: Khởi tạo trang mới với Jquery mobile
    Chèn các thành phần:
    + Layout grid
    + Collapsible block
    Sử dụng các thành phần form: input với Jquery mobile:
    + Jump menu
    + Input form
    + Các thành phần đặc biệt khác
  • Thực hành – Lab 4:
    – Khởi tạo web với Jquery Mobile
    – Khởi tạo form cho web di động
    – Thêm/loại bỏ các khối nội dung

5) Slide 5:

  • Sinh viên cần: Sinh viên đọc trước các  chương trong tài liệu :
    – DreamweaverCS5-Mobile & Web-Development-with-HTML5/ CSS3 & jQuery:
    – Chương 11: Tạo Apps
    – Chương 7 SGK: Cải tiến trang web mobile để dùng trên trình duyệt của điện thoại thông minh
  • Slide 5: Tạo App cho thiết bị di động
    – Làm quen với App trong thiết bị di động
    – Khởi tạo App trên thiết bị di động
  • Kiến thức cần nắm: Tổng quan về tạo App trong Dreamweaver
    Cấu hình, tùy chỉnh các App (ứng dụng) cho thiết bị di động
    Xây dựng ứng dụng
    Một số cải tiến cho web di động:
    + Tổng quan về kỹ thuật web di động
    + Webkit trong trình duyệt web di động
    + Một số trình duyệt web trên các thiết bị di động
    Thiết lập môi trường phát triển web cho thiết bị di động
  • Thực hành – Lab 5:
    Giúp sinh viên thực hiện được công việc tạo ứng dụng cho thiết bị di động từ một trang web di động
  • Hướng dẫn tạo App cho thiết bị di động(Cách 2)

6) Slide 6:

  • Sinh viên cần: Sinh viên đọc trước các chương trong SGK:
    – Chương 8: tối ưu hóa mã cho web mobile
    – Chương 9: Kiểm tra tính hợp lệ của mã phát triển web mobile
    – Chương 10: Kiểm tra trang web mobile
  • Slide 6: Kiểm tra tính hợp lệ và tối ưu hóa mã web mobile
    – Kiểm tra tính hợp lệ của mã web mobile
    – Kiểm tra trang web mobile trên trình duyệt
  • Kiến thức cần nắm: Tối ưu hóa mã web di động:
    + Kỹ thuật Post-Processing cho ngôn ngữ đánh dấu mobile
    + Tối ưu hóa web server cho trình duyệt di động
    Kiểm tra tính hợp lệ của web trên các trình duyệt di động
    Thiết lập môi trường phát triển web cho thiết bị di động
  • Thực hành – Lab 6:
    – Kiểm tra tính hợp lệ trên các trình duyệt di động
    – Tối ưu hóa trong cách viết code cho web di động

7) Slide 7:

  • Sinh viên cần: Sinh viên đọc trước các chương trong SGK:
    – Chương 11: Triển khai trang web mobile
    – Chương 12: Cách thích nghi trong hệ sinh thái di động
  • Slide 7: Định tuyến cho truy cập từ thiết bị di động đến website cho di động
    – Tối ưu hóa công cụ tìm kiếm di động (SEO) và thu hút truy cập
    – Cách thích nghi trong hệ sinh thái di động
  • Kiến thức cần nắm: Định tuyến cho truy cập từ thiết bị di động đến website cho di động
    – Tối ưu hóa công cụ tìm kiếm di động (SEO) và thu hút truy cập
    – Cách thích nghi trong hệ sinh thái di động
  • Thực hành – Lab 7:
    – Kiểm tra tính hợp lệ trên các trình duyệt di động
    – Tối ưu hóa trong cách viết code cho web di động

8) Slide 8:

  • Sinh viên cần: Xem trước Slide 8
    – Tham khảo trang web http://developer.sencha.com/ để tìm hiểu trước
  • Slide 8: Giới thiệu tổng quan open source mobile web framework (Sancha Touch)
  • Kiến thức cần nắm: – Giới thiệu về Sancha Touch
    – Sử dụng Sancha Touch để xây dựng ứng dụng
    – Thiết lập môi trường phát triển web cho thiết bị di động
  • Thực hành – Lab 8:
    – Cài đặt Sancha Touch framework
    – Xây dựng một số ứng dụng đơn giản bằng Sancha Touch

 

Trả lời

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Đăng xuất /  Thay đổi )

Google photo

Bạn đang bình luận bằng tài khoản Google Đăng xuất /  Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Đăng xuất /  Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Đăng xuất /  Thay đổi )

Connecting to %s

%d bloggers like this: