Anchor < a >
The anchor tag is used to define a hypertext link.
Angle brackets
less than (<) and greater than (>) symbols used to surround an element to create a tag.
Attribute
A property of an HTML element used to provide additional instructions to a given HTML tag. The attribute is specified in the start of HTML tag.
Broken links
Broken links are those links that do not work because the destination has been deleted or the path has been changed.
Browser
A program used to access and display HTML documents. Common examples: Internet Explorer, Netscape, and Mozilla Firefox.
CGI (Common Gateway Interface)
A programming standard that defines how programs communicate with each other and with the web server. Generally, a CGI-complaint program is called a script.
Clickable map
Another name for an imagemap.
Closing tag
An HTML instruction that tells the browser to turn off a specific feature of an opening tag.
Comments
Information added to the code for future reference. The information may include a brief explanation for what a complex code does. Comments are ignored by the browsers and they are visible in the source code. HTML comments start with .
Deprecated element
An element that will be obsolete in the future is referred to as deprecated. The element can be used today, however, it needs to be removed sometime in the future to avoid a situation where newer browsers would ignore that element.
Document content
Parts (such as text and graphics) of a web document that you want the user to see.
Document Type Definition (DTD)
A specification for a mark-up language.
Domain name
The alphabetic name for a computer host mapped to a computer's numeric IP (Internet Protocol) address.
Elements
An element in HTML refers to a tag (such as < head >, < body >, and < p >) or element of structure of a document(such as body, title, and paragraph).
Entities
Entities are those characters that do not appear on the keyboard (i.e., ™ ©, ®, etc.) or characters that have special meaning in HTML (i.e., <, >, &, etc.).
Form
A mechanism that enables a user to supply input to the web page author.
Footer text
The text that is not specifically related to the content of the webpage and that appears on every webpage is referred to as footer text. The most notable example of footer text is the copyright statements at the bottom of webpages.
Frames
HTML supports frames to divide a web page into independent and scrollable sections. Having two frames on a web page is like loading three separate pages in the browser. A common use for frames is to place the navigation on the left, and content on the right.
Frames (used at the top of a web page to specify HTML version)
A frames document type definition indicates that the document uses frames and it also supports deprecated elements. This is the most flexible document type definition.
FTP
FTP stands for File Transfer Protocol. FTP is a robust method for transferring files between computers using TCP/IP. TCP stands for Transmission Control Protocol and IP stands for Internet Protocol. TCP is responsible for transporting data and IP is responsible for making sure data goes to the correct address.
GIF (Graphics Interchange Format)
A file format (commonly used for web pages) used for storing image files.
Hotspot
A defined area on an image that acts as a hyperlink.
HTML (Hypertext Markup Language)
A web scripting language used for creating web page documents.
HTML converter
A software that converts text to HTML code.
HTML editor
A software that inserts HTML code as you work to create an HTML file.
Hypermedia
Hypertext that may include multimedia like text, images, sound, and video.
Imagemap
A graphic that has clickable areas (or hotspots) defined to allow a user to move to another URL.
Inline
Elements those that are supported directly by HTML are known as inline. Also, another characteristic of inline element is that their output can be seen or heard without the user taking any additional action (such as clicking, and installing of a plug-in) because the output is directly placed on the webpage. Inline elements include, for instance, animated graphics, graphics, and sound.
JPEG or JPG (Joint Photographic Experts Group)
A common cross-platform image format that is used on the web.
Line break
Line break simply refers to stop of the current line and continuation
to the next line. In HTML documents, the
tag is used to end a line.
Link
A hypertext link used to connect one document with another document or file.
Mirror site
A mirror site is a copy of a publicly available website.
Nesting/nested tags
Nesting occurs when you place tags within other tags. Anytime you create an HTML document, you will end-up using nested tags. For example, the
I wouldn't click the links, you can't get back.
HyperText Markup Language (HTML) is the main markup language for web pages . HTML elements are the basic building-blocks of webpages.
HTML is written in the form of
HTML elements
consisting of
tags
enclosed in
angle brackets
(like
), within the web page content. HTML tags most commonly come in pairs
like
![]()
. The first tag in a pair is the
start tag
, the second tag is the
end tag
(they are also called
opening tags
and
closing tags
). In between these tags web designers can add text, tags, comments and
other types of text-based content.
The purpose of a web browser is to read HTML documents and compose them into visible or audible web pages. The browser does not display the HTML tags, but uses the tags to interpret the content of the page.
HTML elements form the building blocks of all websites. HTML allows images and objects to be embedded and can be used to create interactive forms . It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items. It can embed scripts in languages such as JavaScript which affect the behavior of HTML webpages.
Web browsers can also refer to Cascading Style Sheets (CSS) to define the appearance and layout of text and other material. The W3C , maintainer of both the HTML and the CSS standards, encourages the use of CSS over explicitly presentational HTML markup. [1]
*I will try to use images as much as possible so you can see what the code actually looks like.
The above is what goes in every HTML document. It would show up as a blank, white document, but it is required for docuemnt structure.
You can use any text editor to write HTML, but for Windows I recommend Notepad ++ and TextWrangler for OS X. They will highlight different groupings of code in different colors, making it easier to read and understand.
When you save a document make sure to save it as filename.html The .html filename is very important!
HTML is case and extension sensitive which means that Picture.png is different from picture.png. Picture.jpg and Picture.png are also different! Make sure you take note of your ENTIRE filename!
The following infomration is from jQuery Mobile's website. I wouldn't click on the links, you can get back.
jQuery’s mobile strategy can be summarized simply: A unified user interface system that works seamlessly across all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Focused on a feature-rich but lightweight codebase built on progressive enhancement with a flexible, theming system and ThemeRoller tool .
The framework includes an Ajax navigation system that brings animated page transitions and a core set of UI widgets: pages , dialogs , toolbars , listviews , buttons with icons , form elements , accordions , collapsibles , and more.
The critical difference with our approach is the wide variety of mobile platforms we’re targeting with jQuery Mobile so no browser or device is left behind. We've also focused on making jQuery Mobile easy to learn with a simple, markup-based system to applying behavior and theming. For more advanced developers, there is a rich API of global configuration options , events , and methods to apply scripting , generate dynamic pages , and even build native apps with tools like PhoneGap.
To make this broad support possible, all pages in jQuery Mobile are built on a foundation of clean, semantic HTML to ensure compatibility with pretty much any web-enabled device. In devices that interpret CSS and JavaScript, jQuery Mobile applies progressive enhancement techniques to unobtrusively transform the semantic page into a rich, interactive experience that leverages the power of jQuery and CSS. Accessibility features such as WAI-ARIA are tightly integrated throughout the framework to provide support for screen readers and other assistive technologies.
jQuery Mobile allows you to write a standard HTML site, and by simply including a link to the jQuery Javascript files we can skin our sites. As you can see from the picture below, we are going to an onine link. To make it faster and viewable offline, download the framework. Zoom in if you can't see the code below.
Some of this code can be found on jQuery's website.
About the "data-role"-We will talk about them more soon, they are a big part of jQuery mobile.
Now let me explain what all of this code is doing. You should understand some of it from your HTML lessons. You can see we open the HTML document and the Head. We use atag then. The next four lines specify some settings and links. We then open a new After the see something called "data-role". In jQuery this allows you to have content. We then close the header. After that we open another div. This is where all of your content would go. As you can see in this one all we have is hello world. We then close everything and the HTML docuent. Below is a screenshot of everything completed.
Now we will learn how to make a list view with a "data-role" of listview. You can see the structure of the syntax below, and what it looks like.
You can see here that data-roles help you define what you would like to do. The data-inset and the data-filer="true" is what allows you to have to search bar at the top. You could search this list. It is very easy to make very powerful tools. Each statement in the list starts with a <li> which stands for list item. Then it links to a different page. You can just see it links to # but you should link it to another site. You should recognize them from your HTML lessons.
The data-role of a button is obviously "button". You can see at the start it is a link. Instead of # add your link. Here is a new data tag: data-icon="star" You can then see the title on the button and closing it up. Buttons are easy ;) Below are some more icons instead of stars.
By now you should be good with linking buttons to other pages and with data-roles of buttons. You should also be alright with the icons. Now we will be adding different colors to the buttons. Make sure you remeber the data-theme letters.
In the above sections you learned some basic data-tags. Find the full refernce guide at jQuerymobile.com.
Would you like to make mobile content but you really really don't want to code? You can use great graphical tools like codiqa to make jQuery sites without even coding one bit! Coding makes thing a little more confusing at first, but it is very worth it!
If you already have an HTML site that you would like to skin with jQuery, it is easy just to drop in the framework.
If you would not like to code you can check out codiqa. There are also some other graphical tools, but I like codiqa the best.
I would be surprised if this code made sense to you. That's because I am going to explain it!
Can't see the code? Pinch to zoom.
The first four lines are the code for the iWebKit topbar. The first line open ups the topbar class. The second line opens a left navagation button class. The Third line adds the home icon, and a home link. The Fourth line then closes the class.
The sixth line starts a another new content class for a textbox. The Seventh line starts a title for the text box and on the eigth line it has its text, then closes the graytitle. On line number nine we open a new pageitem class, in this case it is a textbox. Line number Ten opens the class further. Under that on line 11 is where you insert your text and images. In this example I have just an image centered. Lines 12,13, and 14 close the textbox and pageitem.
Before this code will be themed with iWebKit we need to add some more
code.
After you add that code, you can see what it looks like below. If you want to view all of this code on your computer go to: http://iamjake648.com/htmlappcode.txt
You may notice the blue question marks, we will talk about later. The code that goes into this file is below: (You can of course, just copy it from the example)
You do of course have to copy this code three times. All this code goes in the body. Lets explain this code below:
The first line shows you are opening a new content div element This is required whenever you add a page element to an iWebkit Document.
Now we are opening an ul class pageitem class .
The class is a menu. The a href="example.html" line shows that when this is tapped, it will go to the html file name example.
Under thumbs/change.png is where you say the image for that is. We will change ours later. The name class shows what will show up.
The rest of the code is simply closing all of these classes.
I put this code above the text box code.
If you remeber the blue question marks from above then you can replace them with images from the thumbs folder. You can make your own at 32X32 pixels. Make sure you replace example.png with the exact file name of the image file in the /thumbs folder.
Look at the example! This code is not optimal reading from here!
iWebkit offers tons more features that you can integrate into your web apps. These include things like phone integration, lists, ect. Ive included some more examples in the files, so be sure to check those out.
Some more features of iWebkit:
Make sure to check the examples and get some sample code ;)
Links with
data-role="button"
. Input-based buttons and button elements are auto-enhanced, no
data-role
required
| data-corners | true | false |
|---|---|
| data-icon | home | delete | plus | arrow-u | arrow-d | check | gear | grid | star | custom | arrow-r | arrow-l | minus | refresh | forward | back | alert | info | search |
| data-iconpos | left | right | top | bottom | notext |
| data-iconshadow | true | false |
| data-inline | true | false |
| data-mini | true | false - Compact sized version |
| data-shadow | true | false |
| data-theme | swatch letter (a-z) |
Multiple buttons can be wrapped in a container with a
data-role="controlgroup"
attribute for a vertically grouped set. Add the
data-type="horizontal"
attribute for the buttons to sit side-by-side.
Pairs of labels and inputs with
type="checkbox"
are auto-enhanced, no
data-role
required
| data-mini | true | false - Compact sized version |
|---|---|
| data-role | none (prevents auto-enhancement to use native control) |
| data-theme | swatch letter (a-z) - Added to the form element |
A heading and content wrapped in a container with the
data-role="collapsible"
| data-collapsed | true | false |
|---|---|
| data-content-theme | swatch letter (a-z) |
| data-iconpos | left | right | top | bottom | notext |
| data-mini | true | false - Compact sized version |
| data-theme | swatch letter (a-z) |
A number of collapsibles wrapped in a container with the
data-role="collapsible-set"
| data-content-theme | swatch letter (a-z) - Sets all collapsibles in set |
|---|---|
| data-iconpos | left | right | top | bottom | notext |
| data-mini | true | false - Compact sized version |
| data-theme | swatch letter (a-z) - Sets all collapsibles in set |
Container with
data-role="content"
| data-theme | swatch letter (a-z) |
|---|
Page with
data-role="page"
linked to with
data-rel="dialog"
on the anchor.
| data-close-btn-text | string (text for the close button, dialog only) |
|---|---|
| data-dom-cache | true | false |
| data-overlay-theme | swatch letter (a-z) - overlay theme when the page is opened in a dialog |
| data-theme | swatch letter (a-z) |
| data-title | string (title used when page is shown) |
Container with
data-enhance="false"
or
data-ajax="false"
| data-enhance | true | false |
|---|---|
| data-ajax | true | false |
Any DOM elements inside a
data-enhance="false"
container, save for
data-role="page|dialog"
elements, will be ignored during initial enhancement and subsequent
create
events provided that the
$.mobile.ignoreContentEnabled
flag is set prior to the enhancement (eg in a
mobileinit
binding).
Any link or form elements inside
data-enhance="false"
containers will be ignored by the framework's navigation functionality
when
$.mobile.ignoreContentEnabled
is set to true.
Container with
data-role="fieldcontain"
wrapped around label/form element pair
Select with
data-role="slider"
, two options only
| data-mini | true | false - Compact sized version |
|---|---|
| data-role | none (prevents auto-enhancement to use native control) |
| data-theme | swatch letter (a-z) - Added to the form element |
| data-track-theme | swatch letter (a-z) - Added to the form element |
Container with
data-role="footer"
| data-id | string (unique id, useful in persistent footers) |
|---|---|
| data-position | fixed |
| data-fullscreen | true (used in conjunction with fixed toolbars) |
| data-theme | swatch letter (a-z) |
Container with
data-role="header"
| data-position | fixed |
|---|---|
| data-fullscreen | true (used in conjunction with fixed toolbars) |
| data-theme | swatch letter (a-z) |
Links, including those with a
data-role="button"
, and form submit buttons share these attributes
| data-ajax | true | false |
|---|---|
| data-direction | reverse (reverse page transition animation) |
| data-dom-cache | true | false |
| data-prefetch | true | false |
| data-rel |
back (to move one step back in history)
dialog (to open link styled as dialog, not tracked in history) external (for linking to another domain) |
| data-transition | slide | slideup | slidedown | pop | fade | flip |
OL or UL with
data-role="listview"
| data-count-theme | swatch letter (a-z) | |
|---|---|---|
| data-divider-theme | swatch letter (a-z) | |
| data-filter | true | false | |
| data-filter-placeholder | string | |
| data-filter-theme | swatch letter (a-z) | |
| data-inset | true | false | |
| data-split-icon | home | delete | plus | arrow-u | arrow-d | check | gear | grid | star | custom | arrow-r | arrow-l | minus | refresh | forward | back | alert | info | search | |
| data-split-theme | swatch letter (a-z) | |
| data-theme | swatch letter (a-z) |
LI within a listview
| data-filtertext | string (filter by this value instead of inner text) |
|---|---|
| data-icon | home | delete | plus | arrow-u | arrow-d | check | gear | grid | star | custom | arrow-r | arrow-l | minus | refresh | forward | back | alert | info | search |
| data-role | list-divider |
| data-theme | swatch letter (a-z) - can also be set on individual LIs |
A number of LIs wrapped in a container with
data-role="navbar"
| data-icon | home | delete | plus | arrow-u | arrow-d | check | gear | grid | star | custom | arrow-r | arrow-l | minus | refresh | forward | back | alert | info | search |
|---|---|
| data-iconpos | left | right | top | bottom | notext |
| data-theme | swatch letter (a-z) - can also be set on individual LIs |
Container with
data-role="page"
| data-add-back-btn | true | false (auto add back button, header only) |
|---|---|
| data-back-btn-text | string |
| data-back-btn-theme | swatch letter (a-z) |
| data-close-btn-text | string (text for the close button, dialog only) |
| data-dom-cache | true | false |
| data-fullscreen | true (used in conjunction with fixed toolbars) |
| data-overlay-theme | swatch letter (a-z) - overlay theme when the page is opened in a dialog |
| data-theme | swatch letter (a-z) |
| data-title | string (title used when page is shown) |
Pairs of labels and inputs with
type="radio"
are auto-enhanced, no
data-role
required
| data-mini | true | false - Compact sized version |
|---|---|
| data-role | none (prevents auto-enhancement to use native control) |
| data-theme | swatch letter (a-z) - Added to the form element |
All
select
form elements are auto-enhanced, no
data-role
required
| data-icon | home | delete | plus | arrow-u | arrow-d | check | gear | grid | star | custom | arrow-r | arrow-l | minus | refresh | forward | back | alert | info | search |
|---|---|
| data-iconpos | left | right | top | bottom | notext |
| data-inline | true | false |
| data-mini | true | false - Compact sized version |
| data-native-menu | true | false |
| data-overlay-theme | swatch letter (a-z) - overlay theme for non-native selects |
| data-placeholder | true | false - Add to the Option |
| data-role | none (prevents auto-enhancement to use native control) |
| data-theme | swatch letter (a-z) - Added to the form element |
Multiple selects can be wrapped in a fieldset with a
data-role="controlgroup"
attribute for a vertically grouped set. Add the
data-type="horizontal"
attribute for the selects to sit side-by-side.
Inputs with
type="range"
are auto-enhanced, no
data-role
required
| data-highlight | true | false - Adds an active state fill on track to handle |
|---|---|
| data-mini | true | false - Compact sized version |
| data-role | none (prevents auto-enhancement to use native control) |
| data-theme | swatch letter (a-z) - Added to the form element |
| data-track-theme | swatch letter (a-z) - Added to the form element |
Input
type="text|number|search|etc."
or
textarea
elements are auto-enhanced, no
data-role
required
| data-mini | true | false - Compact sized version |
|---|---|
| data-role | none (prevents auto-enhancement to use native control) |
| data-theme | swatch letter (a-z) - Added to the form element |
If you have created your site with jQuery or iWebkit with code you should have a folder full of all of your HTML content. So now how do you test this on devices or let friends use it? We will upload it to a web server. You can get free web space with x10hosting. They are my favorite hosting company. You can get 10/GB of space and bandwidth for free without any ads. Start out by creating an account. You should be able to view your web adress and set a username and password.
If you have a PC then download WinSCP or Cyberduck if you have a Mac. This will allow you to use what is called FTP to transfter files to your server.
Make sure you change the file protocol to FTP. You should also make sure the port is 21. The host name should be your domain and your username and password are what you picked.
Drag all of your HTML files in a folder to your public_html folder. You can then go to your domain and test them on your device.
Well not absolutley required it is highly recommend. When you test on a device you can get a good idea of how it will actually run when your user uses it.
You can transfer it to a server and then test it that way. Keep in mind that when you turn it into a native app, it should load slightly better.
If you don't have a device for a platform you would like to support stop by your local best buy and try it out.
The following device report comes from jQuery's website. This is a report for jQuery. iWebkit will work great on all platforms, except for WebOS 2.x. For some reason there is some weird visual bugs. It is fixed in 3.x. I would also not use iWebkit on Blackberry 5 or below.
From the site:
jQuery Mobile has broad support for the vast majority of all modern desktop, smartphone, tablet, and e-reader platforms. In addition, feature phones and older browsers are supported because of our progressive enhancement approach. We're very proud of our commitment to universal accessibility through our broad support for all popular platforms.
We use a 3-level graded platform support system: A (full), B (full minus Ajax), C (basic HTML). The visual fidelity of the experience and smoothness of page transitions are highly dependent on the CSS rendering capabilities of the device and platform so not all A grade experience will be pixel-perfect but that's the nature of the web.
The follwoing guides will help you turn your HTML content into a native apps for blackberry devices. Make sure you follow every step.
The follwoing guides will help you turn your HTML content into a native apps for Macs. Make sure you follow every step.
We will be using all of the HTML and framework knowledge we learned earlier in the app to package our content as a native mac app that can be sold in an app store. It cn also be hosted on a server.
After adding the files, we will design the interface. It will be as simple as adding a UIWebView and then tweaking it to our size.
For this app you will need a number of downloads. I would recommend being on lion, but snow leopard will work too. You should also make sure you have the latest software updates.
Open up the Mac App Store and search for xcode. It's free so go ahead and install it. This does take up quite a bit of space and I reccomend you have at least 5gb of free space .
After downloading and installing all of our files, we now have to create the application. Open Xcode and click File>New.
Select Mac OS X and cocca application like the screenshot below.
You will now be asked some more information about your package. Most of this can stay default but some does require editing. Enter your project name, I would use no spaces. Your bundle ID is com.yourname.projectname. You can use your name of your company name.
It will create your project and you will have a blank application. We now need to add the Webkit.framwork. Do this on the main page by clicking the little plus under cocca.framwork.
Search for Webkit and add it. Feel free to drag it into the Frameworks folder.
We have set up the main part of our Mac app. We now need to edit a couple of things in the main files.
Open up the AppDelegate.h . It will open up for editing in the main window. You should be editing the file like the image below:
You should edit the file to look like the screenshot below. If you can't read it then you can download all of the source code http://iamjake648.com/MacApp.zip.
After adding all of that code you shouldn't have any errors. Now open the AppDelegate.m. It will open for editing too.
Make sure all of the code matches your project. We now need to add our folder with all of the HTML content. As you can see in this example our folder is htmlfolder/index.html. Make sure this matches your project also.
When asked, create folder references for all files. As you can see the file has been added to my project. The source code is available once again, on my website.
Now open MainMenu.xib and the MacApp Window. You can resize this to whatever size you need for your project.
Now drag in the WebView into the window with the desired size you want. Then double click on the Window. A blue line will appear. You need to link the UIWebView with MainWindow.
Since our app is just a window that opens and then closes after, it should quit in the dock also. Apps that don't need to run in the background need to quit after the user hits the red x button.
Your app will be rejected from the Mac App Store if you don't include the code below.
Open Appdelegate.m and add this line just above the closing bracket: [window setDelegate:self];
Now right after the awakeFromNib method add this:
You will get a warning, but this is totally normal and you don't need to worry about it.
Test it out, make sure your app quits when the red button is pressed.
Once again, you can download the Source Code from my website at http://iamjake648.com/MacApp.zip
Building Mac Apps is different than building for iOS. With iOS you only have one way to distribute: the App Store. Mac is an open platform. You can choose to list it in the App Store or just have it for download on your website. Below are some Pros and Details of Both.
Blackberry was the leader in the smarthpone industry. They are known for their excellent email applications and security. Lately, however, they have been falling behind. This doesn't mean there isn't a huge market though.
There are plenty of people who still carry around blackberries, and with some very easy tools you can create your very own applications for the platform. RIM has created an SDK for blackberry phones called WebWorks that allows you to use HTML and Javascript to access native features.
When you add phonegap, which is another mobile framework, to the SDK it is the easiest way to create apps for this platform. All you need is some basic HTML knowledge and some time and you can get an app submitted!
Before starting this process make sure you are on a Windows Machine. You can be running Windows XP (32-Bit) or Windows 7 (32 and 64-bit).
The first step is to download the Sun JDK . You can get this download from http://www.oracle.com/technetwork/java/javase/downloads/index.html#jdk. Make sure you install the JDK verison 1.6 or higher. You should then run the installer. Confused on the below variables? Check the screenshots at the bottom.
Now create a JAVA_HOME environment.
To verify Java is installed open a new command window by searching for "cmd". Type java -version
Now you have to download Apache Ant from: http://ant.apache.org/bindownload.cgi. You should extract the zip to C:\apache-ant.
The next step is to download and install the Blackberry Webworks SDK. There are three different versions of this SDK. (One for BB OS 5,6,7, One for the Playbook and one for BB10.) The BB10 SDK is still in beta.
Download all of the SDKs for the platforms you plan on using. Please note that phonegap does not yet support BB10. You can still download it now because they will support it in the future.
After the SDKs are downloaded you have to choose the folder you would like to install them. I like to change the default install location. For example my Playbook SDK is at C:\PBWP and my Smartphone SDK is at C:\SMWP.
The final step is to download phonegap. Unzip it in your C:\Dev folder.
After we have all of the files setup we can create our first project.
Step one is to open the Command Prompt or CMD. This can be done by clicking search and opening the command prompt.
Type "cd C:\Dev\phonegaplocation"
Change phonegaplocation to where you unziped your blackberry directory of the phonegap zip. If you type "ant help" you can see the different commands you can do.
The command to create the project file is:
"ant create -Dproject.path="C:\Dev\location"
Change location to your project name. See the two below screenshots.
Now that we have our project created, we have to specify the location of the Webworks SDK in the project.properties file. Open it open. This should be at the root of your new project file. Find the below lines and change it to where you installed your SDK.
After this, open the www folder. Drop all of the HTML content that you want to appear in your app here. Delete the original index.html and put in yours. This will be the first page that loads.
After you are done testing out your app on a simulator and are ready to test it on a device or submit it you can package it. Make sure you have your singing keys installed.
First off we need to change some things in the project.properties file. Add the fields for playbook development ip and passoword. You can enable development mode under settings/security.
Change the folder to your project. In the command prompt. Connect your device and then enter the following command:
ant playbook load-device
As you can see from the above command I would be running the ap on a playbook. If you want to run it on a blackberry phone change the command to:
ant blackberry load-device
It should just run fine on your device then. See the screenshot below.
To change the title of the application open config.xml in the www folder. You will see where when you open it.
Please note: When building a app for a playbook it will show up as a .bar file. If for a smartphone then it will be a .cod file.
If you don't have a device to test your apps on then a great alternative is to test it in the simulator. They are included with the SDKs. Open the project.properties and provide the fields that pertain to the simulator.
If you want to load it on the playbook simulator then type:
ant playbook load-simulator
This is done in the command prompt. Make sure you cd to your folder first. If you want to do it on a blackberry phone simulator use the following command:
ant blackberry load simulator
A new window will open, keep it open and then the simulator will open. Have fun testing :) more simulators can be downloading from their site. Simply google blackberry simulators.
Developers can
register their code signing keys online
. As part of the registration process, developers must choose and
provide a PIN that they will use while installing their code signing keys.
BlackBerry Code Signing keys are free of charge. Once registered,
a set of 3 keys and installation instructions will each be delivered in
a separate email. Code signing keys do not have any form of expiry,
and can be used indefinitely to sign many BlackBerry applications.
Typically, registration for code signing keys is processed within 2 hours.
If you haven’t received your keys within 2 hours of submitting the registration
form, please check your spam filters, the keys will be addressed from websigner@ws-smtp.rim.net.
If you are unable to locate them contact BlackBerry support at
CodeSigningOrders@BlackBerry.com
An email will be sent to the address used during the registration process. This email will include attached code signing key files, and instructions for how these files should be installed.
All code signing keys received need to be installed on the same PC. The same password must be specified for all keys on the same PC. You should receive each key/.csi file in a separate email message. make sure to save every file.
1. At the command prompt, navigate to the bin folder within the
BlackBerry WebWorks Packager installation directory. Default directories
are:
BlackBerry WebWorks SDK and BlackBerry WebWorks Plug-in for Microsoft
Visual Studio:
C:\Program Files\Research In Motion\BlackBerry Widget Packager\bin
BlackBerry WebWorks Development Plug-in for Eclipse:
<Eclipse Installation>\plugins\ net.rim.browser.tools.wcpc\ wcpc\bin
C:\Program Files\Research In Motion\BlackBerry Widget Packager\bin
2. Type the following command, including the full path of the .csi file:
java -jar SignatureTool.jar <.csi file path>
3. If a dialog that a private key cannot be found appears, perform
the following actions:
a. Click Yes.
b. Type a password for the private key.
c. Type the password to confirm it.
d. Click OK.
e. Move the mouse to generate data for the new private key.
4. In the Registration PIN field, type the PIN number that you supplied
when purchasing signature keys.
5. In the Private Key Password field, type a password of at least
eight characters. This is the private key password.
6. Click Register.
7. Click Exit.
Signing is only required when submitting or testing on a device.
Adding an icon and a loading screen to your app is easy. Open the folder containing your project. After that go to the www/resources. You should see three .png files.
icon and icon_hover are the icon files. These are 80X80. loading_foreground is the loading screen of the app. It is 200X200.
Replace these files with your own. Make sure they are .png files and the correct sizes. Also make sure the are named exactly right.
As of right now, WebOS does not have somebody to make hardware. HP has killed of their Devices, but the software still lives. There is still plenty of reason to develop for the platform!
When HP started their device Fire Sale they created 100's of thousands customers. These are all people you can target with your app. The future of this platform is very bright.
When you use phonegap, it is very easy to move across platforms. If you create this app with phonegap, then it will be super easy to port apps to other platforms!
Use this guide to create your very first TouchPad app, that you can then port to other Platforms. Here is what you need:
Setting up the SDK is very easy. We will also be setting up the emulator in this step.
Lets setup virtualbox. Go to http://www.virtualbox.org/wiki/Downloads. Download the installer for your platform. Its very easy to setup, it's just like any other application to install.
After it is done installing you don't need to open it or anything, just leave it alone for now.
Now it's time to go to developer.palm.com. Since we are using Macs, download it for OS X. Its also very easy to setup. Install it just like any other package. It should finish pretty fast and you will be set.
Making sure the SDK is setup properly is as simple as searching for the palm emulator in spotlight.
It will open. I recommend adding it to your dock. You will not have all the versions like I listed below unless you download more at the palm website. Scroll to the bottom and find older images.
The last step is to download the phonegap folder. Go to phonegap.com and click download in the upper right. Extract it to wherever, and you only need the WebOS folder. I like to put the folder in my root folder for easy access.
When you open the folder you should have these basic files. Once you have that you are all setup.
Alright, so now you have all of your HTML files ready. You simply have to drop them in the WebOS/framework folder. If you look in the screenshot below: my HTML file is index.html.
TIP! For the app to load you need to add the phonegapscript refrence to your index file. Add this code to your file:
This code is also in the scroll sample code.
For some reason when building apps for WebOS if you have HTML content that goes over the screen area, it cuts it off. This means you will have to use a third party framework to do this.
For this I like to use iScroll. Go ahead and download it. Put the iScroll.js file in your WebOS/framework folder. Then download the code you need from http://iamjake648.com/iscrollsample.zip Put this code in your body somewhere, and everything should be better.
Now that you have all of your HTML files in the /framework folder you are ready to build your first application in the folder. Remember where you unzipped the WebOS folder? Now open up a terminal window.
Type cd /WebOS (Or wherever you have the folder)
Before deploying to the emulator (or device if you have one) I like to package the file. When you package all of your files it will be a .ipk file. These files are executable on WebOS Devices.
You can do this very easy, with another command. Go back to your terminal window and type make package .
You now have a package built. Open up the Emulator to deploy to. (Or plug in your device)
As you can see from the above screenshot, I am using the touchpad emulator, but you can also build for phones. Please remember to have the emulator open when you do the next couple steps.
Its time to deploy your app. Go back to terminal and type the command: make deploy
If you did everything right you should get a screen like above. Go over to the emulator and click the downloads tab. This is where you application will be.
So now that you have your app built and now you want an icon and custom info right? First off lets go into the /WebOS/framework folder and open up the appinfo.json.
Change the "id" to what you want. The version also can be whatever. Vendor should be your company name. Keep type, icon, and main the same. Change the title to what you want the name ofyour app to be. Also keep the uiRevision the same.
For these changes to take effect you need to re-build the package by using the make package command.
Now its time to add an icon. Go into photoshop and create an image that is 48X48 pixels. Stick this in the root of your /WebOS directory. Since about you already added the icon to the appinfo.json files all you have to do is repackage the file!
Submitting your app to the App Catalog is very easy. Go to developer.palm.com and sign up for an account.
When submitting your app you will need to provide you .ipk package. This is in the root of your /WebOS folder. You can see mine below. That's the one you upload to Dev Center.
You can take screens from the emulator or the device. The rest of the process is self explanatory!
Why do almost all apps come to the iPhone first? It's because Apple has such great developer tools. Xcode is probably the best SDK out there. It's simple to install. Make sure you are on Lion. Also have all of the latest updates installed.
Open up the Mac App Store. Search for Xcode and install it. It's simple, but a large file. Make sure you have plenty of space and a fast internet connection.
Apache Cordova (Formely PhoneGap) is the framework that allows us to take our HTML and Javascript content from jQuery or iWebkit and turn it into a native iPhone app. This way you can submit it to the App Store.
Open up your internet browser and go to http://phonegap.com. Download the most recent version for the top right. You should get a zip downloaded. Open up the iOS folder and run the installer. This adds a template to phonegap.
After running the installer you are now ready to start setting up your project. Go to the next section :)
Creating a project is very easy. Open up Xcode. Create a new project. If the below dialog doesn't show up, then click File/New.
As you can see in the left tab we select iOS/Application. Then select PhoneGap-based application.
Under product name type in a name for your project. I like to keep mine all one word and lowercase. Make sure you remeber this, you will need it later for signing keys. Under company ID: com.yourcompanyname. After than click next.
Above is a screenshot of how your project will look after you create it. STOP! Before you do anything, run the project in the simulator. You can run it in the iPhone or iPad simulator, it doesn't matter. This creates the project structure.
You should get the above error. "Start page at 'www/indx.html' was not found". Phonegap works by loading your HTML content in a webview without any top or bottom bars.
Find the folder of files you have with all of your HTML files. You should rename this folder www. Make the main page "index.html". Drag this folder on the top of your project file.
Make sure to check "Copy items to groups folder" Also create folder refrences for any added folder.
Your project should now be ready to start texting on an actual device or disturibute to the App Store.
To test your apps on a device or submit them to the App Store you must sign your apps with a certificate. You must have a Apple Developer Account for iOS. This costs 100/year. After you have payed for your account go to: developer.apple.com. This is wear you download them.
Click on iOS Provisioning Portal. This is where you sign up for stuff. You can zoom in on the image to see better.
Start out be creating an certificate. This will require you to use keychain. Make sure you create a new one and then you will be giving info on how to get your certificate. Make sure you have one for Development and Distribution.
Under the Devices tab add the UDID's of all of the devices you would like to test on. With your device plugged in, tap Device ID and copy the UDID.
Do you remeber the app id we created at the start of the project? This is what you should put in under Bundle ID. Example "com.company.name". Under Bundle Seed ID open the Drop Down menu. Change it from Use Team ID. Description can be short and to the point.
Click on Provisioning Profiles. As you can see this is where all of your profiles are listed. I blocked mine out. Click new Profile at the top. name it and select the app ID from earlier.
Name it something like "App Name, Dev". Then click Distribution and create another Profile exactly the same. Name this one "App Name Distro". The development one should be selected when testing on devices. The Distro one shold be selected when submitting on the App Store.
Download the two profiles. They should be in your downloads folder. Drag these two on the of the Xcode icon. They will be added. You will have to type in your Username and Paswword for the Dev Center.
First off we will start by testing on a device. Make sure you have added the UDID of the device on the Apple Developer Portal. Also make sure you have dragged the profiles ontop of the xcode icon. Under project select the file. Also make sure Build Settings is selected at the top. Open the Code Signing tab.
Under each tab select iPhone Developer for Debug and iPhone Distribution for Release. You can now plug in your device and test it on it.
Before you can submit your app to the App Store, you must add it iTunes Connect. Open itunesconnect.apple.com. Click Manage Applicaions.
Click Add New App in the upper left. You will then be able to fill out information for the app. It is very self explainitory. If you only want your app for iPhone screenshots. Provide them for iPad too if you want it to be universal.
After the app is created click ready to upload. Then select Product/Archive in Xcode.
This should go without any errors. After that has finshed click Submit. Make sure you select the correct profile.
Your done! :) Now just wait for apple to approve or disapprove!
Setting up the SDK is very easy, and similar on each platform. There are a number of things you need for development, that you can get for Mac, Windows and Linux!
Getting the JDK is simple. Simply google Java JDK and make sure to download from sun.com. Run the downloaded exe like any other package installer.
Downloading the SDK is also simple, and is cross platform. Google "Android Developer" click SDK in the upper portion of the web page and download for your platform. I recommend extracting to root/android folder. (This will not be there you have to make one)
Then open "SDK Setup". Download the platforms you want, I recommend everything. Choose Install. Once the green bar has reached the other side, click close.
*Windows users have to set what is known as the environment variable. This can be done by going to the control panel and open system prefences. Click "Advanced System Settings" link on the left. Next click "Environment Variables". Create a new variable by clicking "New". In the name field type ANDROID. Then type the path as where you saved the sdk, then to the tools folder. There is one more thing that has to be changed. Under system variables select the PATH variable. Type the following under the Variable Value field: ";%ANDROID%".
Make sure you typed the above in right. Now we have to download eclipse. This will be the biggest file. Once again Google "Eclipse". Download either classic or for Java Developers. Once finsished extract the folder. Then run setup. You can create your workspace wherever you like.
There is one final step in installing the SDK. You have to download the Android ADT. Open eclipse and Choose Help>Install New Software. Click add and then type in "https://dl-ssl.google.com/android/eclipse/ as the repository. The name can be anything but I recommend using Android ADT. Click "OK" and just select everything in developer tools. Continue to click next until the setup is complete!
Congrats! You have now setup the SDK and are ready to unleash the developer in you!
Phonegap is another SDK element that needs to be installed. Altough this setup isn't as straightforward.
Phonegap is a multi-platform framework that allows you to build native apps with HTML5, CSS and other web standards.
You can learn more from the offical Phonegap website! "http://www.phonegap.com"
On the main page click the big orange download button! It should download as a zip, which you should extract as a folder. We will only need the Android folder so you can delete everything else you do not need.
Create a new Android Project.
The Project name should be anything you want. Leave everything down to build target as the default. Under build target select "2.2". Under properties the name can be anything, the package name should be com.yourname.example. You also want to create a new activity called App. Although not required the Min SDK version should be 3, for andorid 1.5
Now right click on your project and make two new folders. One should be called "libs" and the other "assets" Inside the assets folder create another sub-folder called "www".
Browse to where you download the phonegap file. Drag the phonegap.js to assets/www. Make sure to copy the file not link it. Keep the folder open because you will need to copy phonegap.jar to libs.
We now need to tell eclipse to recognize the .jar file. Do this by right clikcing on your project>Build Path>Configure Build Path. Then click add JAR on the right, browse to the libs folder and select the phonegap.jar. You many then need to refresh the project with F5.
We now need to make some changes to the projects main java file.
First change the class's extend from Activity to DroidGap. Next Replace the setContentView() line with super.loadUrl\("file:///android_asset/www
/index.html"); Then add import com.phonegap.*;
All sample code can be downloaded from "http://iamjake648.com/androidsamplecode.txt"
Open the sample code file and past the permission into the Android Manifest. Also add android:configChanges=
"orientation|keyboardHidden" to the activity tag in the Android Manifest.
The final step is to add your HTML files to the assets/www folder. Make sure you main file is named index.html!
The Android Market is a great place to submit your app, as so many people have access to it. To get started Google "Android Developer"
You should come to a screen like this, you will need a google account.
You will need a credit card to pay the one time fee of $25.00 USD. After that agree to the terms and you will be taken to the developer portal!
You won't see anything under listing, as you probably haven't submitted anything yet. Click the upload application button in the lower right.
Now is where you fill out all your details. It is pretty much straight forward, except taking screenshots. To do this I recomend rooting your device and then installing "ShootMe". To root your device download an app called "Root and Me"
Testing is one of the most important aspects of app development. First we will disscus the Android Emulator, then exporting an .apk file for a phone or to submit to the market.
Android Emulator
There is an emulator, for the computer that emulates an android device. It, however is very slow and buggy. Its fun to play around with, but I would use the real thing.
To create a new emulator click they gray and green android guy.
Once the window opens; click new on the side. Name it whatever, select the Android Verison you want, the size of the SD, the screen type and lastly the Hardware. You can add things like a Gyroscope and Accelerometer.
Your computer may now freeze, this is normal. Let it create the new virtual device. To start an emulator click start in the right hand side.
An image like the above will open, and the emulator will start!
To run in the emulator click Run>Run As>Android Application
Export .apk
To submit to the android store you would have to export your apk file from eclipse. This can be challenging at first, but it gets to be more of a chore.
To start the proccess right click on your project and click export. Make sure Export Android Application is selected and click next.
Save it as the project name. Now you will need to create a new keystore. A keystore is where you keep all of your application keys. Create a new one by selecting its location and entering a password.
Don't want to pay the 100/year for the App Store membersip? Don't blame you. You don't have to read the signing part of this guide either. Under the project's build settings change all of the values to "Don't Code Sign".
After that, build your project by pressing Command+B. Next open the products folder. Right click the .app file and show in finder.
The .app file will show up in the finder. Right click on the .app file and compress. This will turn it into a zip file that then can be submitted to cydia.
Cydia uses what are called repos to distribute files. My personal favorite one to use is ModMyi. They have the best support and the best Dev Portal.
It's easy to submit a package. Simpmmly provide a package name, screenshots and a description. Your package can also be submitted to the Cydia Store if you would like to charge for it. Your app should be reviewed with
Setting up the Windows Phone SDK is super easy! When using the Windows Phone SDK we will use a program from Microsoft called Visual Studio. Zoom in on the Adress bar for the download link of the Windows Phone 7.1 SDK.
The SDK is super easy to set up. Unless you would like to read through the release notes, just download the second file. This will download about 1GB of files from Microsoft's servers. This entire thing is very easy. When the SDK is done, move onto the next section.
After we have downloaded the SDK, we need to download PhoneGap. Download the zip file from http://phonegap.com. Unzip it, and open the lib/windows folder. Find the "AppStarter.zip" file and copy that.
Now go to your documents folder. You should have a folder called "Visual Studio 2010". Open the templates folder and then projecttempales inside of that. You shold have 2 folders. I like to paste the .zip file once here and once in Visual C#.
Alright, so we now have the SDK and PhoneGap installed. Now it's time to add our content.
Open Visual Studio. You can search for it if you didn't create an icon. Zoom in on the image if you can't see it. Under "Other Projects" Select Cordova Starter. Give it an name. You can save it anywhere.
In the above screenshot you can see the files in your project. In the www folder is where you put all of your HTML content. This is the content you created either with jQuery or iWebkit. Anwya, highlight all of your HTML files and drag them in here. Your main page should be index.html.
If you happen to have a WP7 device, it is very easy to test your apps on it.
Turn on your phone and if necessary unlock the phone screen.
On your phone, ensure that the date and time are correct.
Using the USB cable that came with your phone, connect your phone to your computer.
On your computer, the Zune software starts automatically. If Zune does not start, then start it manually.
On your computer, click Start , click All Programs , and then click Windows Phone SDK 7.1 .
Click Windows Phone Developer Registration .
The application starts, as shown in the following image. Verify that the Status message displays Phone ready. Please enter your Windows Live ID and password and click "Register" to begin .
Enter the Windows Live ID and password that correspond to your App Hub membership.
Click Register .
After your phone is successfully registered, the Status message will display Your phone has successfully been registered . You can now deploy applications to the Windows Phone. If you ever need to, you can also unregister the device by clicking Unregister in the tool.
You can now easily test on your device!
Submitting to the App Hub is easy! Simply google App Hub and sign up for an account. It costs 100/year unless you are a student registered with dreamspark.
