Mobile-Web-App

Monday, December 26, 2011

Include CSS in HTML

Basically there are 4 ways to include CSS style in HTML:

Embed CSS inside <style type="text/css"></style> in-between <head> and </head>

<html>
  <head>
    <title>CSS - 1</title>
    <style>
body { 
 margin-left: 20px; 
 margin-right: 20px;
 background-image: url("http://goo.gl/ZTEx7");
 background-repeat: no-repeat;
 background-position: bottom right;
 background-color: #e0e0e0 }
h1{font: bold 2em helvetica}
p { font-size: 20px; }    
    </style>
  </head>
  <body>
  
<h1>Mobile-Web-App</h1>
<p>Embed CSS inside <style type="text/css"></style> in-between <head> and </head></p>  
  
  </body>
</html>

Include <link> element to link to external CSS file.

<html>
  <head>
    <title>CSS - 2</title>
    <link rel="stylesheet" type"text/css" href="myCSS.css"/>
  </head>
  <body>
  
<h1>Mobile-Web-App</h1>
<p><link rel="stylesheet" type"text/css" href="myCSS.css"/></p>  

  </body>
</html>

With external CSS file, myCSS.css

body { 
 margin-left: 20px; 
 margin-right: 20px;
 background-image: url("http://goo.gl/ZTEx7");
 background-repeat: no-repeat;
 background-position: bottom right;
 background-color: #e0e0e0 }
 
h1{font: bold 2em helvetica}

p { font-size: 20px; }

Using <style type="text/css"> @import url(myCSS.css); </style> to import from external CSS file.

<html>
  <head>
    <title>CSS - 3</title>
    <style type="text/css">
     @import url(myCSS.css);
    </style>
  </head>
  <body>
  
<h1>Mobile-Web-App</h1>
<p>    
  <style type="text/css">
  @import url(myCSS.css);  
  </style>
</p>  

  </body>
</html>

Using HTML attribute style

<html>
  <head>
    <title>CSS - 4</title>
  </head>
  <body 
  style="
  margin-left:20px;
  margin-right:20px;
  background-image:url(http://goo.gl/ZTEx7);
  background-repeat:no-repeat;
  background-position:bottom right;
  background-color:#e0e0e0;
  ">

<h1 style="font: bold 2em helvetica">Mobile-Web-App</h1>
<p style="font: 20px sans-serif;">Using HTML attribute style</p>  
  
  </body>
</html>

A simple example using CSS, inside HTML

It's a simple example to implement CSS inside HTML.

<html>
<head>
  <title>CSS Test</title>
  <style>
body {
 margin-left: 20px;
 margin-right: 20px;
 background-image: url("http://goo.gl/ZTEx7");
 background-repeat: no-repeat;
 background-position: bottom right;
 background-color: #e0e0e0 }
 
h1{font: bold 2em helvetica}

p { font-size: 20px; }  
  </style>
</head>
<body>

<h1>Mobile-Web-App</h1>
<p>Test CSS</p>

</body>
</html>

Sunday, December 25, 2011

A character encoding system consists of a code that pairs each character from a given repertoire with something else, such as a sequence of natural numbers, octets or electrical pulses, in order to facilitate the transmission of data (generally numbers and/or text) through telecommunication networks or storage of text in computers.

A character code may be represented as a bit pattern, octets, or a sequence of electrical pulses.

Wikipedia have a huge list of character encoding, visit Wikipedia - Character encoding.

FREE AWS (Amazon Web Services)

AWS (Amazon Web Services) is introducing a free usage tier to new AWS customers get started in the cloud. New AWS customers will be able to run a free Amazon EC2 Micro Instance for a year, while also leveraging a free usage tier for Amazon S3, Amazon Elastic Block Store, Amazon Elastic Load Balancing, and AWS data transfer. AWS’s free usage tier can be used for anything you want to run in the cloud: launch new applications, test existing applications in the cloud, or simply gain hands-on experience with AWS.

know more: http://aws.amazon.com/free/

Wednesday, December 21, 2011

HTML Media Capture API

It's a example to input image file using W3C HTML Media Capture specification.

Note that not all browse have implemented this feature currently. It's a example run on Firefox for Android 9.0, running on table of HTC Flyer (Android 3.2.1). If user click on the Browse... button, it will open a file browser to select file. If capture button clicked, a camera capture dialog will be open.

<!DOCTYPE html>
<html>
<head>
<title>HTML5 Capture API</title>
</head>
<body>
<H1>HTML5 Capture API</H1>
<input type="file" accept="image/*" id="capture">
</body>
</html>

Head First Mobile Web

Despite the huge number of mobile devices and apps in use today, your business still needs a website. You just need it to be mobile. Head First Mobile Web walks you through the process of making a conventional website work on a variety smartphones and tablets. Put your JavaScript, CSS media query, and HTML5 skills to work—then optimize your site to perform its best in the demanding mobile market. Along the way, you’ll discover how to adapt your business strategy to target specific devices.

Navigate the increasingly complex mobile landscape
Take both technical and strategic approaches to mobile web design
Use the latest development techniques—including responsive web design, and server-side device detection with WURFL
Learn quickly through images, puzzles, stories, and quizzes

Tuesday, December 20, 2011

Create HTML5 Apps & Web Apps with the appMobi XDK

appMobi XDK(Cross Platform Development Kit) uses standard web languages (HTML5, CSS, and JavaScript) to create mobile apps for smartphones and tablets. Uniquely, you don't have to learn any new HTML tools to create apps with XDK. You can develop and test apps using Macintosh, PC, DreamWeaver, Visual Studio - whatever tools you are already comfortable using.

The XDK offers a comprehensive simulation and debugging capability far beyond any other mobile development system. Apps can be rapidly tested during development using the XDK's built-in emulator, or you can test on the actual device using WiFi and appMobi's unique AppLab testing apps. You can even email test versions of your app to colleagues or clients anywhere in the world, allowing them to test using AppLab.

appMobi web site: http://www.appmobi.com/