Mobile-Web-App

Wednesday, January 4, 2012

Where to place Javascript in HTML web page

Javascript can be placed in <head> or <body>. It can be Javascript code in HTML file, in-between <script> and </script>. Or link to external javascript file using src attribute.

Place Javascript code in <head>. It will be executed as long as the browser parses the head; before the page body loaded.

<!doctype html>
<head>
 <title>Mobile-Web-App: Test Javascript</title>
 <meta charset="utf-8">
 
 <!-- Place Javascript code in <head> -->
 
 <!-- Place Javascript code here directly -->
 <script>
  alert("Hello All:) - It's Javascript in <head>."); 
 </script>
 
 <!-- Link to external Javascript -->
 <script src="extJavascript.js">
 </script>
 
</head>
<body>
<h1>Mobile-Web-App: Test Javascript</h1>
<p>Where to add Javascript in HTML: in <head></p>

</body>
</html>

Place Javascript in head, link to external .js file

Place Javascript code in <body>.

<!doctype html>
<head>
 <title>Mobile-Web-App: Test Javascript</title>
 <meta charset="utf-8">
</head>
<body>
<h1>Mobile-Web-App: Test Javascript</h1>
<p>Where to add Javascript in HTML: in <body></p>

 <!-- Place Javascript code in <body> -->
 
 <!-- Place Javascript code here directly -->
 <script>
  alert("Hello All:) - It's Javascript in <body>."); 
 </script>
 
 <!-- Link to external Javascript -->
 <script src="extJavascript.js">
 </script>

</body>
</html>

extJavascript.js

alert("Alert from External Javascript");

Head First HTML5 Programming: Building Web Apps with JavaScript

HTML has been on a wild ride. Sure, HTML started as a mere markup language, but more recently HTML’s put on some major muscle. Now we’ve got a language tuned for building web applications with Web storage, 2D drawing, offline support, sockets and threads, and more. And to speak this language you’ve got to go beyond HTML5 markup and into the world of the DOM, events, and JavaScript APIs.

Now you probably already know all about HTML markup (otherwise known as structure) and you know all aboutCSS style (presentation), but what you’ve been missing is JavaScript (behavior). If all you know about are structure and presentation, you can create some great looking pages, but they’re still just pages. When you add behavior with JavaScript, you can create an interactive experience; even better, you can create full blown web applications.

Head First HTML5 Programming is your ultimate tour guide to creating web applications with HTML5 and JavaScript, and we give you everything you need to know to build them, including: how to add interactivity to your pages, how to communicate with the world of Web services, and how to use the great new APIs being developed for HTML5.

Here are just some of the things you’ll learn in Head First HTML5 Programing:

Learn how to make your pages truly interactive by using the power of the DOM.
Finally understand how JavaScript works and take yourself from novice to well-informed in just a few chapters.
Learn how JavaScript APIs fit into the HTML5 ecosystem, and how to use any API in your web pages.
Use the Geolocation API to know where your users are.
Bring out your inner artist with Canvas, HTML5’s new 2D drawing surface.
Go beyond just plugging a video into your pages, and create custom video experiences.
Learn the secret to grabbing five megabytes of storage in every user’s browser.
Improve your page’s responsiveness and performance with Web workers.
And much more.

Monday, January 2, 2012

iOS Development using MonoTouch Cookbook

Over 100 recipes for developing and deploying applications for the iOS using C# and .NET

Detailed examples covering every aspect of iOS development using MonoTouch and C#/.NET
Create fully working MonoTouch projects using step-by-step instructions.
Recipes for creating iOS applications meeting Apple's guidelines.

In Detail

MonoTouch brings the amazing revenue opportunities of Apple's billion dollar app store to C# and .NET developers.

This cookbook leaves no stone unturned, providing you with practical recipes covering user interfaces, data management, multimedia , web services, and localization, right through to application deployment on the app store.

Whatever the area of MonoTouch iOS development you need to know about, you will find a recipe for it in this cookbook. Minimum theory and maximum practical action defines this book. It is jam packed with recipes for interacting with the device hardware, like the GPS, compass and the accelerometer. Recipes for those all important real word issues are covered such as reading and responding to battery state. It is the essential cookbook for C# and .NET developers wanting to be part of the exciting and lucrative world of iOS development.

What you will learn from this book

Create applications specifically designed for the iPad.
Consume .NET web services, including WCF.
Capture and manage multimedia resources using the device's camera and microphone.
Use the accelerometer to capture and respond to device movements.
Create location-aware applications using the built-in GPS, compass and mapping features.
Create graphics and animation for powerful applications.
Effectively use multitasking features to provide a user-friendly experience.
Target worldwide audience with localization techniques and deploy to the App Store.

Approach

The book is written in a cookbook style, presenting examples in the style of recipes, allowing you to go directly to your topic of interest, or follow topics throughout a chapter to gain in-depth knowledge.

Sunday, January 1, 2012

CSS: Universal Selector

Universal selector is "*". The CSS rule in universal selector will be applied to all elements in the document.

Example:

<html>
<head>
  <title>Mobile-Web-App</title>
  <style>

#marketplace{
 background-image: url("marketplace.png");
}
#live{
 background-image: url("live.png");
}
#bugzilla{
 background-image: url("bugzilla.png");
}
#forums{
 background-image: url("forums.png");
}
#planet{
 background-image: url("planet.png");
}
#wiki{
 background-image: url("wiki.png");
}
#portal{
 background-image: url("portal.png");
}

*{
 height:50px;
 background-repeat: no-repeat;
 background-position: bottom right;
}
  </style>
</head>
<body>

<h1>Mobile-Web-App: Universal Selector</h1>
<div id="marketplace">marketplace</div>
<div id="live">live</div>
<div id="bugzilla">bugzilla</div>
<div id="forums">forums</div>
<div id="planet">planet</div>
<div id="wiki">wiki</div>
<div id="portal">portal</div>

</body>
</html>

CSS: ID Selector

ID selector begins with a '#'. It's a example:

<html>
<head>
<title>Mobile-Web-App</title>
<style>

#marketplace{
 background-image: url("marketplace.png");
}
#live{
 background-image: url("live.png");
}
#bugzilla{
 background-image: url("bugzilla.png");
}
#forums{
 background-image: url("forums.png");
}
#planet{
 background-image: url("planet.png");
}
#wiki{
 background-image: url("wiki.png");
}
#portal{
 background-image: url("portal.png");
}

.placeBottomRight{
 height:50px;
 background-repeat: no-repeat;
 background-position: bottom right;
}
</style>
</head>
<body>

<h1>Mobile-Web-App: CSS ID Selector</h1>
<div id="marketplace" class="placeBottomRight">marketplace</div>
<div id="live" class="placeBottomRight">live</div>
<div id="bugzilla" class="placeBottomRight">bugzilla</div>
<div id="forums" class="placeBottomRight">forums</div>
<div id="planet" class="placeBottomRight">planet</div>
<div id="wiki" class="placeBottomRight">wiki</div>
<div id="portal" class="placeBottomRight">portal</div>

</body>
</html>

Friday, December 30, 2011

CSS class name selector

Class name selector begins with a dot. It's a example:

<html>
<head>
<title>Mobile-Web-App</title>
<style>

.graybackground{
 background-color: gray;
}
.marketplace{
 background-image: url("marketplace.png");
}
.live{
 background-image: url("live.png");
}
.bugzilla{
 background-image: url("bugzilla.png");
}
.forums{
 background-image: url("forums.png");
}
.planet{
 background-image: url("planet.png");
}
.wiki{
 background-image: url("wiki.png");
}
.portal{
 background-image: url("portal.png");
}

.placeBottomRight{
 height:50px;
 background-repeat: no-repeat;
 background-position: bottom right;
}
</style>
</head>
<body>

<h1>Mobile-Web-App: CSS selector by class name</h1>
<div class="graybackground">graybackground</div>
<div class="marketplace placeBottomRight">marketplace</div>
<div class="live placeBottomRight">live</div>
<div class="bugzilla placeBottomRight">bugzilla</div>
<div class="forums placeBottomRight">forums</div>
<div class="planet placeBottomRight">planet</div>
<div class="wiki placeBottomRight">wiki</div>
<div class="portal placeBottomRight">portal</div>

</body>
</html>

Thursday, December 29, 2011

DOCTYPE

A Document Type Declaration, or DOCTYPE, is an instruction that associates a particular SGML or XML document (for example, a webpage) with a Document Type Definition (DTD) (for example, the formal definition of a particular version of HTML). In the serialized form of the document, it manifests as a short string of markup that conforms to a particular syntax.

The HTML layout engines in modern web browsers perform DOCTYPE "sniffing" or "switching", wherein the DOCTYPE in a document served as text/html determines a layout mode, such as "quirks mode" or "standards mode". The text/html serialization of HTML5, which is not SGML-based, uses the DOCTYPE only for mode selection. Since web browsers are implemented with special-purpose HTML parsers, rather than general-purpose DTD-based parsers, they don't use DTDs and will never access them even if a URL is provided. The DOCTYPE is retained in HTML5 as a "mostly useless, but required" header only to trigger "standards mode" in common browsers.

Source: Wikipedia - Document Type Declaration

Example of <!DOCTYPE> in HTML5

<!DOCTYPE html>
<html>
<head>
<title>Title...</title>
</head>
<body>
Body...
</body>
</html>