Module 3: Bindings - E4D

stickyraffleSoftware and s/w Development

Nov 4, 2013 (4 years and 8 days ago)

119 views

E4D
LEARNING

LTD

EXPERTS

D
ESIGN
D
EVELOP
D
EBUG
D
EPLOY


1

HTML 5.0
and Javascript Development


4

Day
s



32

Hours

Course Description:

HTML5 is the biggest leap forward in web technologies in the last generation.
With broad support from Apple, Mozilla, Microsoft and Google, all the major
browsers have rapidly incorporated HTML5 features.

HTML5 is A Web Experience that Uses Open Standards
; it provides you with
Rich Web Experiences with Cross Platform, Cross Device & Cross
-
Browser
Consistency.


In this course you will learn about the new HTML5 structural, semantic, and
form tags, how to use Canvas to create drawings natively in the browser,

how
to work with HTML5 audio and video, the new methods for storing variables
client
-
side, and how you build applications that work offline.



Model 1: HTML 5 Overview



JavaScript


jQuery


CSS3


Flash


Ajax


Why HTML5


Main features


Hello, HTML5 World!

Module
2: HTML5 Thinking



Basic HTML5 concepts


MVC pattern and separation of concerns


Semantic markup


Canvas


From HTML4 to HTML5


Simple class manipulation




E4D
LEARNING

LTD

EXPERTS

D
ESIGN
D
EVELOP
D
EBUG
D
EPLOY


2


Module 3: Data



New controls


Dataset (data
-
* attributes)


Validation


Offline Storage


IndexedDB


Application Cache


WebSQL

Module 4: Communicating With Server



Web sockets


Server events

Module 5: UI



Web sockets


More CSS3


Web fonts


UI Tricks (stroke, rounded corners , gradients, shadows, etc.)


Web workers


Drawing on screen


On
-
screen objects interactivi
ty


Drag and drop


Transforms, Transition and Animation


Video and Audio

Module 6: Desktop Integration



Notifications


Desktop drag and drop


History API

Module 7: HTML 5 and Mobile


Geo location


Speech Input


Offline applications


Device orientation

E4D
LEARNING

LTD

EXPERTS

D
ESIGN
D
EVELOP
D
EBUG
D
EPLOY


3


JavaScript &

Jquery


JavaScript has become popular in the last few years due to it being easy to
learn, highly flexible and yet a powerful scripting language. If you want to
implement dynamic actions on a web page in today’s browsers you have no
other option, but to u
se JavaScript. Currently, HTML5 is the future of web
development and JavaScript plays a major role. In this course we look deeply
into traditional JavaScript coding techniques, as well as modern scripting
practices used by JavaScript frameworks like jQuery
. We also review new
additions to HTML, CSS and JavaScript in HTML5. By the end we implement
what we learned with examples of JavaScript application development.



Module 1: JavaScript Fundamentals & Intro to jQuery


Traditional approaches to DOM scripting


Events, Functions, Classes


Client
-
side tools


What is jQuery?


jQuery improvements to JavaScript


Manipulating the DOM


Handling cross
-
browser issues with jQuery


Best practices and performance tips


Improvements in DOM manipulation, event handling, page styling

and utility functions


DOM manipulation and dynamic component constructio

Module 2: HTML5, What’s New and What You Need to Know


Introducing HTML5 and CSS3


Markup, HTML5 Style


More HTML5 Semantics


HTML5 Forms


HTML5 Audio and Video


Introducing CSS3


CSS3
Gradients and Multiple Backgrounds


CSS3 Transforms and Transitions


Embedded Fonts and Multi
-
column Layouts


Geolocation, Offline Web Apps, and Web Storage


Canvas, SVG, and Drag and Drop


Modernizr

E4D
LEARNING

LTD

EXPERTS

D
ESIGN
D
EVELOP
D
EBUG
D
EPLOY


4

Module 3: Advanced JavaScript and jQuery Techniques


Object li
terals


Namespacing


Object scope


Closures


Self executing anonymous functions


jQuery selectors and method chaining


jQuery utility methods


jQuery event binding, triggers and delegation


Custom events

Module 4: Application Development with jQuery


JSON vs XML


AJ
AX using jQuery


Client
-
side data stores


Avoiding conflicts with other libraries


Binding data models to views


Rewriting the UI using jQuery


Client
-
side controls: data grids, charting, etc



Knockout



The Model
-
View
-
Controller (MVC) pattern is an architectural design principle
that separates the components of a Web application. This separation gives
you more control over the individual parts of the application,
which lets you
more easily develop, modify
, and test them
.


Knockout is a JavaScript library that helps you to create rich, responsive
display and editor user interfaces with a clean underlying data model

using
the MVC (or MVVM) pattern
. Any time you have sections of UI that update
dynamically
(e.g., changing depending on the user’s actions or when an
external data source changes), KO can help you implement it more simply
and maintainably.


E4D
LEARNING

LTD

EXPERTS

D
ESIGN
D
EVELOP
D
EBUG
D
EPLOY


5


Module 1:
Welcome to Knockout

Knockout is a MVVM framework for JavaScript. It is complementary to other f
rameworks such
as jQuery and helps create a clean,maintainable code.


What is MVVM?


What is Knockout?



Knockout components


Introduction to JSFiddle


Using Knockout with Visual Studio

Lab:
Your first Knockout application

Creating your first javascript mvvm
based application using JSFiddle and Visual Studio. This
lab will go beyond the usual ‘Hello, world’ scope, and will demonstrate the basic use of
bindings.

Module 2:
Observables


Observables are the most basic concept of MVVM. In this module we are going t
o understand
what exeacly observables are, what types of observables we have with Knockout and what
are the best uses for each.


What are observables?


“Regular” observables


Observables arrays


Computed observables

Lab:
Using observables

this hands
-
on lab focuses on creating a sample app using the different types of observables

Module 3:
Bindings

Knockout offers us 4 types of built
-
in bindings. In this module we will understand what each
type has in store for us and when should we use eac
h. In addition we will get to know the
built
-
in templeting engine of Knockout.


What are bindings?


Text and appearnce bindings


Binding in forms



Control flow bindings


Custom bindings


Templeting

E4D
LEARNING

LTD

EXPERTS

D
ESIGN
D
EVELOP
D
EBUG
D
EPLOY


6

Lab:
Working with bindings

This hands
-
on lab focuses on working

with bindings, creating templates and extending the
basic types of bindings using the custom bindings engine of Knockout.

Module 4:
Data features

Knockout comes with many utilities for our disposal. In this module we will leverge those
utilities for both
interactivity of our application and debugging purposes.


Knockout built
-
in utilities


Special data features


Using data features for debugging


Lab:
Working with data features

This hands
-
on lab focuses on working with the many built in utitities that comes
with
Knockout.



SignalR
-

Websockets Communication


Course Description:


SignalR is a new async signaling library for .NET developed and maintained
by David Fowler and Damian Edwars from Microsoft’s ASP.NET and NuGet
teams. If you ever wanted to push data

from the server to clients (and not just
browser clients!) in real time with ease, SignalR will be your perfect
companion.




Module 1: Overview of push data transfer


Pushing data to clients has always been a bit of an issue. This module will

overview all the ways we can push data to clients and how SignalR comes to
the resuce…


What is persistant client/server connection?


Timed pulling


Long pulling/Forever Frame


WebSockets


How does SignalR fits in this mess


E4D
LEARNING

LTD

EXPERTS

D
ESIGN
D
EVELOP
D
EBUG
D
EPLOY


7

Module 2: SignalR’s

Connection Models


SignalR is meant to abstract the ways I push data to clients. But how it does
it? This module

will deep dive into the two connection models avaliable in
SignalR.


The PersistentConnection model


Lab: Using PersistentConnection


The Hub mod
el


Lab: Using Hubs


Dictating the trasport protocol

Module 3: More than just a browser technology


SignalR can be used in more than just browser application scenarios. In this
module we will intorduce other uses for SignalR.


Going retro: using SignalR for
console applications.


Lab: Building a chat server for both browser and console.


Going wireless: using SignalR in Windows phone 8 applications.


Lab: Extending the chat server for WP8.