Course Details

HTML5 + CSS3 + BootStrap + JavaScript + jQuery + jQuery UI + jQuery Mobile + PhoneGap + Node.JS + AngularJS
Image

Course Introduction 課程簡介

此課程內容相當豐富。課程主要教授學員Web的前台程式設計(Front End programming)等相關技術,

  • 學習如何利用HTML5 打造網頁的骨架及如何利用CSS來美化網頁。
  • 學習使用HTML5 的新功能, 例如地圖服務 ,視頻播放, 網頁繪畫及資料儲存等。
  • 學習JavaScript這個跨平台的前端網頁語言及如何利用JavaScript處理 DOM tree 及與伺服器程式進行 AJAX 溝通。
  • 學習如何利用jQuery來簡化Javascript的寫法及介紹各種實用的jQuery Libraries程式庫。
  • 學習使用jQuery UI 快速建立網頁介面。
  • 學習如何使用jQuery Mobile 建立 Mobile Web。
  • 學習如何使用PhoneGap 或 Cordova去將網站變成 Android 或 iPhone Apps。
  • 學習如何使用PhoneGap 或 Cordova的各種 plug-ins 去強化 Apps 功能。
  • 學習如何使用BootStrap 去快速建立迴響式 (Responsive) 網站。
  • 學習如何利用Node.JS 將 JavaScript 變成 Server side language 網站後台語言, 使開發人員只須學習一種語言便可開發完整的應用程式。
  • 學習如何使用AngularJS 去建構出一個更快速及容易維護的前台程式。
  • 學習如何利用AngularJS 去建立一個SPA(Single Page Application)。

技術包括:

HTML5

HTML5是最新版本的HTML,可以準確描述出網頁的內容及外觀。HTML5利用JavaScript解決了瀏覽器兼容性的問題,並且引入多媒體及不同類型Tags增強結構及可讀性。

CSS3

CSS3 是一套美化網頁既語言,利用CSS我們可以加入不同的美化效果。例如背景圖畫、邊框、顏色、動畫效果及各種設計元素。

JavaScript

Javascript是運行於瀏覽器上的程式語言 自從Google的v8引擎出現後,JavaScript的效能得到大大的提升 令我們可以在網頁上創造出不同的互動效果。

jQuery

jQuery是一套跨瀏覽器的JavaScript函式庫,簡化HTML與JavaScript之間的操作,是目前最受歡迎的JavaScript函式庫。

jQuery UI

jQuery UI 是一套跨瀏覽器的JavaScript函式庫,提供抽象化、可自訂主題的GUI 控制項與動畫效果。適合用來建立成網頁介面。

jQuery Mobile

jQuery Mobile是另一套Javascript 函式庫,可快速建構出跨平台的流動網站介面, 與各種各樣的智能手機和平板電腦兼容。

PhoneGap/Cordova

PhoneGap/Corodva 是讓開發者可以使用HTML和Javascript開發行動裝置Apps應用程式的工具。可將任何網站包封成一個iPhone / Android Apps。

BootStrap

BootStrap 是一套跨瀏覽器的CSS framework ,可快速製作出適合不同裝置及尺寸的回彈性網頁介面。

Node.JS

Node.JS是一個Javascript Server 或執行環境,令JavaScript獨立於瀏覽器外運作 ,可取替php等後台程式語言。

AngularJS

現今最流行的Web frontend framework, 利用不同的 Directives 及 MVC 設計模式 模式, 大大加強HTML的功能,不用寫程式也能做出不同的互動效果,被譽為HTML6。

Course Duration 課程時數

24 hrs (18 hrs 面授 + 6 hrs 視像)

Course Objective 課程目標

本課程目的是培訓學員了解現今各種新穎的網頁設計技術,讓學員能利用學懂的技術去建構不同類型的 Web及Apps應用程式

Entry Requirement 入學要求

報讀者無需任何程式設計背景,但對網頁程式設計及各種新技術有興趣請便可報讀

Course Features 課程特點

★ 解說詳細:循序漸進說明各種技術的使用方法。
★ 即時實習:即時實習,導師與學員一起由零開始打造系統。
★ 多元學習:了解不同技術的配搭,因應情況使用不同的技術方案。
★ 視像重溫:部分複雜的課程部分將以視像形式教授,學員可在家重複觀看方便吸收。

Face to Face Course Outline 面授課程內容 (18 hrs)

第一部分是課堂實習,學員將與導師一起進行一連串的實習。為期18小時

Lesson 1:

  • HTML Basic Tags (Header, Hyperlink, Paragraph, Table, Image)
  • HTML Layout using DIV tags
  • CSS basic styling commands and cascading concepts
  • CSS ID and class concepts
  • CSS Box Model (Background and Border styling)
  • CSS Color schemes and Google fonts
  • CSS Float and Layout

Lesson 2:

  • CSS Menu bar makeup
  • JavaScript Basics and Functions
  • JavaScript Variables and Arrays
  • JavaScript If-Else and Looping control structures
  • DOM (Document Object Model) introduction
  • Interacting DOM by JavaScript
  • AJAX communication with Server by JavaScript

Lesson 3:

  • jQuery Basic Sytnax
  • Interacting DOM with jQuery
  • AJAX communication with Server by jQuery
  • jQuery UI (User Interface)
  • jQuery UI widgets (Datepicker,Accordion and Tabs)
  • jQuery UI themes
  • jQuery UI drag and drop

Lesson 4:

  • jQuery Mobile for Mobile Web Design
  • jQuery Mobile Page structure
  • jQuery Mobile Page Navigation
  • jQuery Mobile widgets (ListView,Panels,Forms)
  • jQuery Mobile event programming
  • PhoneGap Build for coverting web site to Apps

Lesson 5:

  • BootStrap for Responsive Web Design
  • Build a BootStrap based site from scratch
  • BootStrap Grid system for web layout
  • Using BootStrap classes to build various common web elements
  • BootStrap for styling a form
  • BootStrap for mobile web

Lesson 6:

  • Setup Node.JS and Express Web server
  • Run Javscript out of the browsers
  • AngularJS MVC concepts
  • AngularJS model, directives and modules
  • AngularJS 2-way binding
  • AngularJS controllers and services

Online Videos Course Outline 視像課程內容 (6 hrs) - 3個內月無限重複觀看

Introduction to HTML5 (29m:51s)

TopicsDuration
1 - Environment Setup (Free) 01m:52s
2 - Web Page Basic Structure 05m:28s
4 - Using Headers and Paragraphs 03m:22s
5 - Adding Images to the Web page 02m:23s
6 - Linking pages with HyperLinks 02m:02s
7 - Using Tables to organize data 03m:08s
8 - Use of List to present information 01m:30s
9 - Final Exercises 08m:48s

jQuery Mobile for Mobile Web and Apps (1h:49m:49s)

TopicsDuration
1 - Introduction to jQuery Mobile 05m:39s
2 - Write a sample mobile web page 02m:52s
3 - Setup environment for mobile development and use of meta viewport 03m:26s
4 - Build two mobile pages and link them up 06m:30s
5 - Converting hyperlink to button with icons 02m:47s
6 - Adding different page transitions 02m:45s
7 - Creating snapshot for the server and shutting down the server 02m:19s
8 - Use of ListView to organize information 03m:53s
9 - Adding images and filters to the ListView 04m:51s
10 - Adding a Login Form and backend PHP file 07m:02s
11 - Radio button and Checkbox for advanced form 07m:10s
12 - Adding Select Menu and Search Field 03m:41s
13 - Adding Toggle Button and Sliders 04m:17s
14 - Adding Dialog box for communication 03m:40s
15 - Using Grids to set the layout of the page 05m:02s
16 - Adding Collapsible and Collapsible Set to hide content 03m:13s
17 - Using Tables to organize information 05m:06s
18 - Upload Photo to the web server using File Transfer Plugin API 09m:06s
19 - Theming the pages using ThemeRoller 05m:06s
20 - Modifying jQuery Mobile configuration 02m:50s
21 - Detecting Tap and Taphold events 03m:02s
22 - Detecting Swipe, SwipeLeft, SwipeRight events 02m:12s
23 - Changing page by using Swipe events 04m:15s
24 - Detecting Scroll start and stop events 01m:44s
25 - Detecting Orientation change events 01m:30s
26 - Detecting various Page related events 05m:51s

Building Mobile Apps using PhoneGap / Corodva with jQuery Mobile (2h:18m:18s)

TopicsDuration
1 - Introduction to Cordova and NodeJS 4m:36s
2 - Create a blank Cordova project and adding different platform support 05m:26s
3 - Introducing how to install Java JDK and Android Studio for Android Apps 02m:58s
4 - Java JDK and Android Studio Installation 16m:40s
5 - Creating an empty project using Android Studio 06m:35s
6 - Customizing the content of the Cordova application 03m:53s
7 - Customizing the content of the Cordova Appication using jQuery Mobile 02m:35s
8 - Creating the simple template for testing plugin 04m:10s
9 - Adding necessary libraries to them sample template 04m:50s
10 - Detecting Resume and Pause events in Cordova application 02m:36s
11 - Detecting Button related events in Cordova applications 02m:22s
12 - Detecting Battery status using Battery Plugin API 06m:09s
13 - Detecting Device configuration using Device Plugin API 03m:04s
14 - Adding various notifications using Dialogs Plugin API 06m:55s
15 - Detecting Network connection using Network Information Plugin API 04m:45s
16 - Dialing Phone, Sending SMS and Sending Email in Cordova Apps 02m:59s
17 - Download JSON file from web server and load into ListView 10m:08s
18 - Taking Photo using Camera Plugin API 10m:58s
19 - Get Photo from Device Photo Libary using Camera API 02m:15s
20 - Upload Photo to the web server using File Transfer Plugin API 09m:06s
21 - Playing Music using Media Plugin API 10m:09s
22 - Record Sound using Media Plugin API 04m:23s
23 - Get Location and Map using Geolocation Plugin API 07m:22s
24 - Set name and icon for the Cordova app 03m:24s

Creating CRUD based applications using AngularJS (1h:06m:30s)

TopicsDuration
1 - Introduction to the CRUD system interface and design 03m:30s
2 - Setup the Development Environment 07m:22s
3 - Design and Build the List View by BootStrap 07m:51s
4 - Using ng-repeat to print out data from Model 03m:40s
5 - Using ng-class to style the List View 06m:01s
6 - Calling Add View function using ng-click from List View 10m:28s
7 - Swapping List View and Add View by ng-show 06m:44s
8 - Calling Delete View function by using ng-click from List View 07m:17s
9 - Making Delete Function to identify which record to delete 05m:36s
10 - Calling Edit View function by using ng-click from List View 08m:01s

Creating SPA (Single Page Application)using AngularJS (26m:34s)

TopicsDuration
1 - Setup the basic structure of the SPA page 04m:18s
2 - Use of different controllers to control different page sections 01m:17s
3 - Adding Bootstrap library to format the page 03m:39s
4 - Creating multiple pages and adding ngRoute for routing 06m:07s
5 - Setup the routing configuration for SPA 07m:50s
6 - Add different controllers for each pages 03m:23s

Featured Video Demos

jQuery Demo: Dropdown Menu

jQuery Demo: Tab Menu

jQuery Demo: Side Menu

jQuery Demo: Smooth Scroll Menu

jQuery Demo: Photo Caption

jQuery Demo: Slider Caption

Navigation

Social Media

IT Design