Cross Platform Mobile DevelopmentSUMMER SCHOOL

HTML

HTML nodes

<tag id=”id” class=”class1 class2 class3” style=”inline CSS definition” attribute=”value”></tag>

The attributes for each type of tag are set by the HTML standard.

With HTML5 and up developers are allowed to set custom attributes prefixed by “data-”<tag data-cnp=”19002…..”></tag>

CSS

css-selector{property:value;property:value;

}

Example:a{

color:green; /*this will make all links on a page green*/}

CSS selectors

element#id.class[attribute=value]:pseudo-class parent>direct-children parent childrean_and_grandchildren example: #container>.partial.blue>p

JavaScript

- dynamic typing (vs static)- prototype based (vs class based)- functional programmin- anonymous functions

jQuery

$(cssSelector) //returns a jQuery Element

Add/remove classes:$(cssSelector).addClass(newClass); $(cssSelector).removeClass(newClass); $(cssSelector).toggleClass(newClass);

Add/Read/Remove attributes

$(cssSelector).attr(“attribute_name”, value); $(cssSelector).attr(“attribute_name”); $(cssSelector).removeAttr(“attribute_name”);

Get/Edit HTML contents $(cssSelector).html(); $(cssSelector).html(new_content_as_string);

Create new nodes:var div = $(“<div>”); //new empty div nodevar p = $(“<p>A paragraph</p>”); //new p node with content insidevar clone = $(some css selector).clone(); //returns a jQuery element creating by cloning the original

Applying selection upon selection$(css Selector).find(another css Selector);some_var.find(css subSelector); // works if some_var is a jQuery element;

Events:$(selector).click(callback);$(selector).load(callback);$(selector).submit(callback);$(selector).unbind(eventType);

IoT template

PhoneGap Build

Mobile friendly frameworks

- jQuery mobile (mobile sites and apps framework)- BootStrap (library that helps creating UI fast) - Highly Recommended- Backbone (library used to create web/mobile apps)- AngularJS (another ibrary used to create web/mobile apps)- ionic (replaces phoengapwith it’s own binaries but still built on cordova) a little too card for beginners- Sencha Touch (huge library of widgets for mobile devices) (needs paid license if used for commercial app)