Cross Platform Mobile Development SUMMER SCHOOL

Slide curs-10

Embed Size (px)

Citation preview

Page 1: Slide curs-10

Cross Platform Mobile DevelopmentSUMMER SCHOOL

Page 2: Slide curs-10
Page 3: Slide curs-10
Page 4: Slide curs-10
Page 5: Slide curs-10
Page 6: Slide curs-10
Page 7: Slide curs-10
Page 8: Slide curs-10
Page 9: Slide curs-10


Page 10: Slide curs-10

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>

Page 11: Slide curs-10





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

Page 12: Slide curs-10

CSS selectors

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

Page 13: Slide curs-10


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

Page 14: Slide curs-10


$(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);

Page 15: Slide curs-10

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;

Page 16: Slide curs-10


Page 17: Slide curs-10

IoT template

Page 18: Slide curs-10

PhoneGap Build

Page 19: Slide curs-10

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)