Slide curs-10
-
Upload
avner-solomon -
Category
Documents
-
view
28 -
download
4
Transcript of Slide curs-10
![Page 1: Slide curs-10](https://reader036.fdocuments.us/reader036/viewer/2022062407/55d140abbb61eb62188b46a5/html5/thumbnails/1.jpg)
Cross Platform Mobile DevelopmentSUMMER SCHOOL
![Page 2: Slide curs-10](https://reader036.fdocuments.us/reader036/viewer/2022062407/55d140abbb61eb62188b46a5/html5/thumbnails/2.jpg)
![Page 3: Slide curs-10](https://reader036.fdocuments.us/reader036/viewer/2022062407/55d140abbb61eb62188b46a5/html5/thumbnails/3.jpg)
![Page 4: Slide curs-10](https://reader036.fdocuments.us/reader036/viewer/2022062407/55d140abbb61eb62188b46a5/html5/thumbnails/4.jpg)
![Page 5: Slide curs-10](https://reader036.fdocuments.us/reader036/viewer/2022062407/55d140abbb61eb62188b46a5/html5/thumbnails/5.jpg)
![Page 6: Slide curs-10](https://reader036.fdocuments.us/reader036/viewer/2022062407/55d140abbb61eb62188b46a5/html5/thumbnails/6.jpg)
![Page 7: Slide curs-10](https://reader036.fdocuments.us/reader036/viewer/2022062407/55d140abbb61eb62188b46a5/html5/thumbnails/7.jpg)
![Page 8: Slide curs-10](https://reader036.fdocuments.us/reader036/viewer/2022062407/55d140abbb61eb62188b46a5/html5/thumbnails/8.jpg)
![Page 9: Slide curs-10](https://reader036.fdocuments.us/reader036/viewer/2022062407/55d140abbb61eb62188b46a5/html5/thumbnails/9.jpg)
HTML
![Page 10: Slide curs-10](https://reader036.fdocuments.us/reader036/viewer/2022062407/55d140abbb61eb62188b46a5/html5/thumbnails/10.jpg)
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](https://reader036.fdocuments.us/reader036/viewer/2022062407/55d140abbb61eb62188b46a5/html5/thumbnails/11.jpg)
CSS
css-selector{property:value;property:value;
}
Example:a{
color:green; /*this will make all links on a page green*/}
![Page 12: Slide curs-10](https://reader036.fdocuments.us/reader036/viewer/2022062407/55d140abbb61eb62188b46a5/html5/thumbnails/12.jpg)
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](https://reader036.fdocuments.us/reader036/viewer/2022062407/55d140abbb61eb62188b46a5/html5/thumbnails/13.jpg)
JavaScript
- dynamic typing (vs static)- prototype based (vs class based)- functional programmin- anonymous functions
![Page 14: Slide curs-10](https://reader036.fdocuments.us/reader036/viewer/2022062407/55d140abbb61eb62188b46a5/html5/thumbnails/14.jpg)
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);
![Page 15: Slide curs-10](https://reader036.fdocuments.us/reader036/viewer/2022062407/55d140abbb61eb62188b46a5/html5/thumbnails/15.jpg)
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](https://reader036.fdocuments.us/reader036/viewer/2022062407/55d140abbb61eb62188b46a5/html5/thumbnails/16.jpg)
Events:$(selector).click(callback);$(selector).load(callback);$(selector).submit(callback);$(selector).unbind(eventType);
![Page 17: Slide curs-10](https://reader036.fdocuments.us/reader036/viewer/2022062407/55d140abbb61eb62188b46a5/html5/thumbnails/17.jpg)
IoT template
![Page 18: Slide curs-10](https://reader036.fdocuments.us/reader036/viewer/2022062407/55d140abbb61eb62188b46a5/html5/thumbnails/18.jpg)
PhoneGap Build
![Page 19: Slide curs-10](https://reader036.fdocuments.us/reader036/viewer/2022062407/55d140abbb61eb62188b46a5/html5/thumbnails/19.jpg)
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)