Thursday, February 27, 2014
What is App Framework?
App Framework is a JavaScript library for mobile HTML5 app development. It allows you to build simple, rich and full HTML5/JavaScript mobile applications. This short tutorial is an introduction to the App Framework, and it presents the basic concepts and its main concepts.
App Framework library is inspired by jQuery. App Framework can design powerful interfaces for mobile devices such as Android or iOS. App Framework is composed of three elements: a library of queries and event management, a library of graphical interface and a plugin for WebKit library.
The library is functionally richer than jQuery Mobile. Another strong point of App Framework is that it requires only 3KB of memory against 35KB for jQuery. Scripts are also three times faster than jQuery on Android, and 2.2 times more faster on iOS.
Competing Frameworks
There are several competing frameworks to App Framework. These frameworks have more or less the same functionality as App Framework. We can mention among the best known: jQuery Mobile, Sencha Touch, jQTouch. The biggest advantage of App Framework is its weight and its execution speed. App Framework is the most powerful solution for mobile HTML 5 frameworks.
Prerequisites
Creation of a proxy
For the specific needs of the tutorial, we will need to make cross-domain requests through Ajax. To set up an Apache and PHP server is necessary in order to process these requests. Since JavaScript does not directly manage the cross-domain requests, we will set up a small proxy through php. Copy and paste the following code into a server.php file located in the same place as our HTML page. The “php_curl” module must be enabled in php.ini.
1
2
3
4
5
6
7
8
9
10
<? php
$ url1 = $ _GET ["url"];
$ ch1 = curl_init () / / Check that the php_curl extension is enabled in php.ini
curl_setopt ($ ch1, CURLOPT_URL, $ url);
curl_setopt ($ ch1, CURLOPT_HEADER, false);
curl_setopt ($ ch1, CURLOPT_RETURNTRANSFER, true);
$ xml1 = curl_exec ($ ch1);
echo $ xml1;
curl_close ($ ch1);
?>
App Framework
App Framework is a mobile adaptation of jQuery, so, both Frameworks use the same syntax. For this tutorial it is better to have some knowledge of jQuery. The App Framework can be downloaded at this address. Copy and paste into the directory of your site the following folders and files:
kitchensink
plugins
ui
Note: To test, you need a browser compatible with webkit and HTML5.
Tutorial
We will show you through this example how you can use App Framework to build your mobile application. Briefly, our example will be based on the conception of a small reader of RSS feeds. This is just to give you a basic knowledge of App Framework. Firstly we will build our GUI with jqUI and implement some features with App Framework.
Create a page
As a first step, we will create our page and configure our App Framework. Here is the skeleton of an App Framework Application:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<html>
<head>
<meta content="text/html; http-equiv="Content-type" charset=utf-8"/>
<script src="//cdn.app-framework-software.intel.com/2.0/appframework.min.js" type="text/javascript">
</script><script type="text/javascript" charset="utf-8"src="./ui/appframework.ui.min.js">
<link rel="stylesheet" type="text/css" href="css /af.ui.css"title="default" />
</script><script>
$.ui.ready (function ( ) {
$.ui.backButtonText ="Back". / / We override the back button text to always say" Back"
} ) ;
if (! ( (window.DocumentTouch && document instanceof DocumentTouch ) | | ' ontouchstart ' in window )) {
var script = document.createElement (" script");
script.src =" plugins/af.desktopBrowsers.js" ;
var tag = $ (" head" ). append ( script) ;
$.os.android = true;. / / let 's make it run like an android device
$.os.desktop = true. ;
}
</script>
</head>
<body>
<div id="afui">
</ div>
</ body>
</ html>
Create a page “index.html” in the root of your server and add the code above. This code is the base of our page, it imports the scripts that are necessary to use App Framework.Our application will be decomposed into two components: a page and its content and a menu. With App Framework, in order to create a page, we will create several divs inside the “content” div of our HTML file.
We’ll start by creating our main page “RSS” It will contain an input that allow the user to enter an RSS link and a panel containing the list of titles in the RSS flow. In the “afui” div we will add the “content” div. It is within this specific div that we will create the different pages of our application. Our first page will be titled “RSS”.
1
2
3
4
5
6
<div id="afui">
<div id="content">
<div title='RSS' class="panel" id="rss" style ="overflow: hidden" >
</ div>
</ div>
</ div>
We will add to our page an input element, a label and a submit button that allows the user to enter a URL. We will use the HTML5 tag “fieldset”. The
element allows a grouping of input fields into logical categories (thematic).
1
2
3
4
5
6
7
8
</fieldset><fieldset>
<legend> RSS 2.0
<form id="parser" onsubmit="return false">
<label for="links"> Enter rss 2.0 url <br />
<input type="text"id="links" name="links" class='jq-ui-forms'/>
<input type="submit" class="button" value="Submit" onclick=" Rssparse ()"/>
</ form>
</ fieldset>
The input and label tags are classic HTML tags, to which we added classes provided directly by afui. The “Rssparse ()” function will be implemented later.
Now that we have the first part of our page, we will have to create the part that displays the results of the RSS feed. We want to display, in the form of list, the various titles in the RSS feed. This section will mainly be created dynamically, but we have to prepare the ground. In the same way as for the form, we will add to the existing fieldset a second fieldset.
1
2
3
4
5
<fieldset>
<legend> Rss Feed
<ul id="flux">
</ul>
</ fieldset>
We have added the HTML tag “ul” because our content is a list of titles. App Framework will insert the “li” tags.
Creating a Menu
We are going to create a menu to our application. App Framework can easily create two types of menu. The first one is a navigation bar at the bottom of the application. The second is a menu on the left side of our application. The second menu is constantly displayed on the big screens but is retractable on smaller screens (smart phone). We will create this second type of menu.
Firstly we will start by creating a second page to our application. Just create a second div with a class “panel”.
1
<div title="Project" class="panel" id="test">
We will now add our menu through a tag “nav”. This tag is to be placed outside of #content. The menu is created automatically by afui. The class “title” allow us to define a section title. In afui the links between the internal pages of the application are specified by their id. So the call of our page test will be made by href =”# test”.
1
2
3
4
5
6
7
8
9
10
11
<nav>
<div class='title'> Business </div>
<ul>
<li class="BusinessHome">
<a href="#rss"> Home </a>
</li>
<li >
<a href="#test"> test </a>
</li>
</ul>
</nav >
Request and modification of the DOM
Now that we have the basis of our GUI, we are going to implement the internal features and make it dynamic.
selectors
As a first step, we are going to recover the action of the user when this one confirm a URL in our form. When creating this form, we defined the submit button like this:
1
<input type="submit" class="button" value="Submit" onclick=" Rssparse ()"/>
When the user will click on the submit button, the Rssparse() function will be called automatically. So we need to implement it. We will now turn to JavaScript. We will implement the parserRss() function at the end of our index.html file, after the closing tag “/html”. Initially this function will display the URL validated by the user.
1
2
3
4
5
<script>
function Rssparse ()
{
alert ($ ("# link1").val ())
}
The syntax is the same as jQuery. These selectors will allow us to get different objects of the DOM, from their id, their classes or their tag type.
Remember that during the creation of our form, we assigned to the input of type text, an id = link. By calling the selector $ (“# link1″ ), it is our input text containing the url entered by the user that is returned. Once this element was selected, we call val() function, that returns us the value of the selected item. $ (” # link1″ ).val ( ) returns the URL entered by the user!
Ajax request
In the same way as jQuery, App Framework can make Ajax requests. Due to cross-domain restrictions of the browsers, App Framework, just like jQuery, does not allow to make cross-domain Ajax requests.In our case, to get a RSS feed from a URL, we want to make a request on a server that is not ours. To make this request, we will use our proxy (cf. prerequisites ).
1
2
3
4
5
6
7
8
9
10
function Rssparse ()
{
$. ajax ( {
url : ' ? server.php url =' + $ ("# link1" ).val ( ),
success : function ( data) {
alert (" ok");
},
error: function () {alert ("fail");}
} ) ;
}
Here we make an intermediate request on our proxy specifying him the true URL of the request. Our proxy will then, take care, in PHP, to make the request and send us the result.
Xml parser and dynamic modification of the DOM
Having collected our xml data, we must now deal with them. App Framework provide us with a method named parseXML which allow, from a xml text, to build a DOM Document object. We can call directly on the object resulting from parseXML function, methods such as getElementsByTagName.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function Rssparse ()
{
$. ajax ( {
url : ' ? server.php url =' + $ ("# link" ) val ( ).
success : function ( data) {
var xmld = $.parseXML (data) ;
var nodes =xmld.getElementsByTagName ("item" ) ;
$("# flux" ).empty ();
for (i + + var i = 0 ; i < nodes.length )
{
var titles= nodes[ i ].getElementsByTagName ("title" );
var dom = $ ("# flux" ).append (" <li> <a href=' ' >" + titles [0] childNodes [0]. nodeValue +"< / li >"...) ;
}
}
error: function () {alert ("fail");}
} ) ;
}
Conclusion
App Framework offers most of the features of jQuery adapted to mobile devices.Its rich libraries and its unmatched performance, make it a comprehensive mobile HTML5 framework. This framework will allow you to build mobile applications in a very short time.
You can find the documentation here http://app-framework-software.intel.com/documentation.php.
Source : www.sitepoint.com/creating-mobile-html5-application-app-framework/
Thursday, February 27, 2014 2
Adobe Edge Animate
This is a great tool for creating interactive web content. You are able to create animations and interactive interface that will prove compelling to your website visitors. You are able to create a precise control function and create a densely packed website full of interesting elements.
In addition to Brackets and ecosystem Open Source plugins, Adobe Edge Code comes with two additional extensions. One for PhoneGap Build, a build tool (based on the development environment PhoneGap cross-platform) that allows applications to package native HTML containers for major mobile OS (iOS, Android and Windows Phone). The second gives access to the service Edge Fonts. From the acquisition of Typekit, it can (like Google Web Fonts) give online access to a library of Open Source Web Fonts (about 500), and you may insert its web pages – using CSS
@font-face and by copying and pasting a line in JavaScript source code.HTML KickStart
HTML5 Reset
Liveweave
Modernizr
canvas local storage or allowing web developer to use the browser as if it were on a desktop suggest HTML5 may revolutionize the world by offering developers a set of APIs that allow future generations to accomplish things in a browser that we can’t even imagine.Modernizr.load that accepts as an argument an object containing the tests to run, the path of the script to load if the test is successful and the path script to load in the event of failure of the test.Video.js
What is HTML5?
How Did HTML5 Get Started?
- New features should be based on HTML, CSS, DOM, and JavaScript
- The need for external plugins (like Flash) should be reduced
- Error handling should be easier than in previous versions
- Scripting has to be replaced by more markup
- HTML5 should be device-independent
- The development process should be visible to the public
The HTML5 <!DOCTYPE>
A Minimum HTML5 Document
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>
<body>
Content of the document......
</body>
</html>
HTML5 - New Features
- The <canvas> element for 2D drawing
- The <video> and <audio> elements for media playback
- Support for local storage
- New content-specific elements, like <article>, <footer>, <header>, <nav>, <section>
- New form controls, like calendar, date, time, email, url, search
Browser Support for HTML5
Wednesday, December 11, 2013
HTML Elements
An HTML element is everything from the start tag to the end tag:
Start tag * Element content End tag *
<p> This is a paragraph </p>
<a href="default.htm"> This is a link </a>
<br>
* The start tag is often called the opening tag. The end tag is often called the closing tag.
HTML Element Syntax
An HTML element starts with a start tag / opening tag
An HTML element ends with an end tag / closing tag
The element content is everything between the start and the end tag
Some HTML elements have empty content
Empty elements are closed in the start tag
Most HTML elements can have attributes
Tip: You will learn about attributes in the next chapter of this tutorial.
Nested HTML Elements
Most HTML elements can be nested (can contain other HTML elements).
HTML documents consist of nested HTML elements.
HTML Document Example
<!DOCTYPE html>
<html>
<body>
<p>This is my first paragraph.</p>
</body>
</html>
The example above contains 3 HTML elements.
HTML Example Explained
The <p> element:
<p>This is my first paragraph.</p>
The <p> element defines a paragraph in the HTML document.
The element has a start tag <p> and an end tag </p>.
The element content is: This is my first paragraph.
The <body> element:
<body>
<p>This is my first paragraph.</p>
</body>
The <body> element defines the body of the HTML document.
The element has a start tag <body> and an end tag </body>.
The element content is another HTML element (a p element).
The <html> element:
<html>
<body>
<p>This is my first paragraph.</p>
</body>
</html>
The <html> element defines the whole HTML document.
The element has a start tag <html> and an end tag </html>.
The element content is another HTML element (the body element).
Don't Forget the End Tag
Some HTML elements might display correctly even if you forget the end tag:
<p>This is a paragraph
<p>This is a paragraph
The example above works in most browsers, because the closing tag is considered optional.
Never rely on this. Many HTML elements will produce unexpected results and/or errors if you forget the end tag .
Empty HTML Elements
HTML elements with no content are called empty elements.
<br> is an empty element without a closing tag (the <br> tag defines a line break).
Tip: In XHTML, all elements must be closed. Adding a slash inside the start tag, like <br />, is the proper way of closing empty elements in XHTML (and XML).
HTML Tip: Use Lowercase Tags
HTML tags are not case sensitive: <P> means the same as <p>. Many web sites use uppercase HTML tags.
W3Schools use lowercase tags because the World Wide Web Consortium (W3C) recommends lowercase in HTML 4, and demands lowercase tags in XHTML.
Wednesday, December 11, 2013 0
You will learn about them in the next chapters.
HTML Headings
HTML headings are defined with the <h1> to <h6> tags.
Example
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
Try it yourself »
HTML Paragraphs
HTML paragraphs are defined with the <p> tag.
Example
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
Try it yourself »
HTML Links
HTML links are defined with the <a> tag.
Example
<a href="http://www.w3schools.com">This is a link</a>
Try it yourself »
Note: The link address is specified in the href attribute.
(You will learn about attributes in a later chapter of this tutorial).
HTML Images
HTML images are defined with the <img> tag.
Example
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">
Try it yourself »
Note: The filename and the size of the image are provided as attributes.
HTML can be edited by using a professional HTML editor like:
Adobe Dreamweaver
Microsoft Expression Web
CoffeeCup HTML Editor
The DOCTYPE declaration defines the document type
The text between <html> and </html> describes the web page
The text between <body> and </body> is the visible page content
The text between <h1> and </h1> is displayed as a heading
The text between <p> and </p> is displayed as a paragraph
