Programming Ideas, Logics, Tips and Tricks

This post is part of series HTML5 iPhone Website

How can we make a tool tip bubble using CSS3.

A tool tip is a box and an arrow at the edge pointing something. We can create this using two divs or one div and a span, one in normal mode and the other rotate through 90 degree or nearer.

Then, we make them rounded corners, borders, and by changing z-index, we move the smaller div behind the main div, then it will look like this:

Here is the CSS for the above tool tip

Another example for tooltip bubble, (this is for bookmark tool tip for iPhone)

Here is the CSS for the above image

This article is part of  series, “HTML5 iPhone Website Development”

During your CSS creation, whenever  you think you need a gradient or rounder corner or a rotation, we can use the advantage of CSS3.

Don’t need to go to W3Schools or any CSS 3 documentation, that is old style

Use online tools, example and the one I mostly used: http://css3generator.com/

Here you can create css3 for most of the browsers support CSS3. In our case, we just need to take the web-kit part, as we are making this for iPhone. However, during your learning, better to copy full CSS, so that you can see the changes using your Firefox, I  know you will be using Firefox for development and html slicing with Firebug

So copy the full CSS from css3generator.com for the beginning. In the final stages of your development, you can remove unwanted css if you want this site in iPhone only.

Using this tool you can set

Border Radius, Box Shadow, Text Shadow, RGBA, Font-Face for custom fonts, Multiple Column divs, box sizing and resizing, Outlines, transitions, transformations, Selectors, Different Gradients etc.

Some output of these CSS3 looks like this:

Search box design (rounded corner and shadow) :

Gradient Menu Background:

Rounded shaped button:

In the next post, we can see different designs like Facebook Button, Bubble tool tips, Loading indicators etc in CSS3 in 3-4 lines

Started writing a series post after a long time for HTML5 iPhone Website Development.

Read my previous Series here:

Gmail Architecture

Online Photoshop

Basic Structure

As usual start designing your website with iPhone layout in mind. Things to remember before you design

1) iPhone support HTML5 and CSS3

2) iPhone has two orientations.

3) iPhone has no built in Menu for browser (mobile safari)

4) iPhone has a footer navigation by default in Safari

Why these things are important before we design something in Photoshop ?

Because, since iPhone has CSS3 support which has a lot of design advantages like rounded corner, gradients, rotation, dual background etc, the design can make a design which is suitable for a HTML developer to slice. In normal website development, we achieve these effects using small or big images in repeated mode. Here in CSS3.0, it all done using 2-3 lines of plain text in CSS file.

Since iPhone has 2 orientation, it is up to the product designer to decide whether we want two layouts of just one. Because iPhone can use two different CSS files for different orientation. I will cover this in coming chapters.

The number of controls or button in mobile safari browser is less, and hence we need to provide custom menus in our designs for each navigation, say go to home page, or my galleries, terms page etc. Also every click is just taps, and there is no scope for hover events, which is used in good consideration in majority of the Desktop websites.

Since safari has a footer navigation already, we can avoid many back buttons in our designs. Also can think about tools like Bookmark is placed at bottom. So, if you want to show a tool tip to bookmark your site, you can locate that tool tip button on the footer. (In coming series I will show you how quickly we can create a tool tip bubble for bookmark just with css3.o)

Special Tags

Once the design is done, before we start slicing, need to check some special tags available for iPhone (I would say for many latest handsets)

Doctype and HTML tag:

Meta tags:

For iPhone, it is better to display a website in full width mode, without any zoom options, these meta tags simply does this.

The rest of the slicing, just follow typical div-css float model design (of course no table)

Continue like normal CSS slicing, and think about using CSS3.0 techniques whenever needed. All backgrounds, gradients, shadows, borders, round corners, rotations etc, use CSS3.0. In the next chapter, I will show you which are the tools we can use to create css3.0 for a particular design.  Don’t reinvent the wheel by learning all css3.0 techniques, Google is there for you

See you in next series post, “CSS3.0 tools – don’t reinvent the wheel”

Tips:

You can create custom bookmark icon using the following header, this is same like favicon for Desktop browsers:

Thanks

Sajith

Created a small html5 page today to check which audio format your browser support in HTML5.

It is using a Javascript code to detect browsers audio status dynamically and show the result.

I also added 5 different audio format sample using html5 audio node, and using this you can test whether any particular format is playing or not

It works for both Desktop browsers and mobile browsers.

Here is the URL:

http://www.sajithmr.me/html5/audio/

From February 2012 onwards, Facebook stops App profile pages. But you can still move all your page likes and users to new page (till Feb).

The new Facebook app creation flow is really confusing.

For developers, to add a app as a tab to another page, you  need to user the following URL:

https://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&next=YOUR_URL

next parameter should be your canvas page url.

Here you can see an option to add this app to your page.

Mac port packages are available for Asterisk in mac

As a first step, do a port update to get all new packages:

port selfupdate

Step 2:

sudo port install asterisk

[This is a long process, it will start installing many dependancy packages]

Possible errors you can see:

1) Image error: /opt/local/bin/a2p is being used by the active perl5.8 port.  Please deactivate this port first, or use ‘port -f activate perl5′ to force the activation.

Solution: Check all perl version installed using the given command:

sudo port installed | grep perl

Uninstall old perl version will solve this problem.

eg: port uninstall perl5 @5.8.9_0

sudo port uninstall   perl5.8 @5.8.9_3

Also if you can run an update outdate package command, this will be alos helpful:

sudo port upgrade outdated

Continue again the command: sudo port install asterisk

2) Error: Target org.macports.configure returned: configure failure: shell command failed (see log for details).

portaudio failed to install.

Solution: Download port audio files from portaudio website.  Replace the source files of portaudio local folded  (where the error is located) and Manually install it using the following commands

sudo /usr/bin/make -j2 -w all
sudo /usr/bin/make install

After installation, link this portaudio with port installation using the following command:

port -f activate portaudio

Continue running this command: sudo port install asterisk

3) When installing Asterisk, you may get another error:

For a undefined variable: snmp/agent.c:830: error: ‘RONLY’ undeclared

Solution: Find the file snmp/agent.c and add #define RONLY 1

If Asterisk still fail to install, download the package file from asterisk website and install manually.

Before compiling this, edit makeopts file and update the line:

change “CONFIG_LDFLAGS=” to “CONFIG_LDFLAGS= /usr/lib/bundle1.o

Good luck

Those who use their on hosting inside an iframe  for Facebook Fan page, there is a mechanism to pass additional parameters to your iframe page if you need to create a deep URL.

A normal Fan page of Facebook would like this:

https://www.facebook.com/apps/application.php?id=xxxxxxxxxx&sk=app_XXXXXX

This Url will call your domain, say example.com inside the iframe to load the page.

Each time the iframe is loaded, Facebook do a POST to this iframe URL with some data which we can use to identify the status of the user, eg, whether the user already liked this page, or any other parameter is passed through the fan page url.

Facebook keep app_data variable for developers to pass additional parameters to your iframe page.

eg: https://www.facebook.com/apps/application.php?id=xxxxxxxxxx&sk=app_XXXXXX&app_data=mydata

To retrieve this information, in PHP, use can use the following code:

<?php

if(isset($_REQUEST["signed_request"]))
{

$signed_request = $_REQUEST["signed_request"];
// $_POST also work, but better with $_REQUEST

list($encoded_sig, $payload) = explode(‘.’, $signed_request, 2);

$data = json_decode(base64_decode(strtr($payload, ‘-_’, ‘+/’)), true);

if(isset($data['app_data']))
{
$mydata = $data['app_data']; //here you can get the value you passed
}
}

?>

Check my article here  to see how you can get the ‘like’ status using PHP

Courtesy: From various online sources

Thanks
Sajith

Two months ago, I published a jQuery plugin to record audio from browser (without any Media server) called jRecorder

I got many responses and requests to maintain the code with new enhancements and some bug fixes.

Based on that, a new version (1.1) is released which has the capability to preview the recorded audio before sending to the server.

See the example implementation and documentation here.

Also I made this source open and available for anybody to develop at: https://github.com/sythoos/jRecorder/

Thanks

Sajith

Buzitweet is a blogging platform where anyone can register using a Facebook account and can post your articles. No matter what topic it is, it can be programming, videos, quotes, images, pictures or any thing.

I use that platform for writing quick programming tips, and which I feel  really interesting.

Here are my recent 4 posts:

Upload File using PhoneGap

PhoneGap new version comes with upload/download file support in iPhone/Android and BlackBerry

Problem in PhoneGap accessing external URL

Article on how to access a 3rd party website content using PhoneGap (Default setting does not allow this)

Change Browser Address Location using Javascript (w/o reloading)

Article on manipulating browser address bar without reloading the page. Do not work for IE

Get filetype from header without checking extension in Unix

Get the MIME type of a file without checking the extension of the file (Good way – Unix style)

Thanks

Sajith

Sometime in Facebook Pages, you can see the message / banner, we have offers for you, like us to see. Or Like us to unlock the content etc. These all are for getting more likes in their Facebook page and indeed, it is a very nice idea to spread your updates among many of your Facebook Fans. Usually people won’t do the dislike option to revert it back!

The question is how can we do this ?

The trick here is, you need to create a page using iframe as you usually create FB app. In that iframe, you have your custom page fragment hosted somewhere else showing some copies/contents/offer etc.

Each time when Facebook load your url inside the iframe, Facebook do a POST to your domain signed_request as the parameter. The rest of the part you have to handle with your server side scripting.

Here mine is PHP:

<?php

$signed_request = $_REQUEST["signed_request"];
// $_POST also work, but better with $_REQUEST

list($encoded_sig, $payload) = explode(‘.’, $signed_request, 2);

$data = json_decode(base64_decode(strtr($payload, ‘-_’, ‘+/’)), true);

if (empty($data["page"]["liked"])) {

//write code here to show a non-liked situational contents
echo “You haven’t liked us yet”;

}
else {

//write code here to show contents for already liked people
echo “Hello Fan, here are your offers.”;

}
?>

Just another time pass.

Today I tried Angry Birds Welcome Screen in HTML5. Use Latest Safari for HTML5 with Sounds. In my Mozilla Animation works but no sound.

(If you are viewing this post via Email, click the link to see the animation)

Click for FULLSCREEN

(more…)

I tried new Adobe Edge yesterday, wow it is cool and it took only 10 minutes for me to develop the following animation in HTML 5. You can simply do animation, movements, rotation, resizing, font changes etc as you do in Flash layers . You can also write actions in javascript, if reached here, or if click here do this, or do that. It will give your exported html file with all these design in pure HTML5. Please use new Firefox or Safari or Chrome to try this.
(more…)

Recently I made a jQuery plugin named jRecorder to record voice in html pages.

This plugin is very easy to integrate with your web page and you DON’T need a flash server or RED5 server to do the recording

What all you need is a Web Server (PHP or any server scripting language).

You can find the documentation and Download the plugin HERE.

eg: $.jRecorder( settings );

Another advantage is your can decide your recorder design, buttons , mic activity level , recording progress etc in HTML+CSS and this plugin gives you many recording callback events to manage. It is like jPlayer plugin for audio playback.

This plugin sends recorded WAV file to your webserver, where you can save this file where ever you wish. You can use FFMPEG tool to convert this WAV to MP3 or any other format for further use

The technology used here is, the plugin uses hidden swf file to record the voice and save the binary data in browser’s cache and when the recording finishes, it sends the data to webserver. Thats why you don’t need any Flash media server to capture the recording on time.

The plugin is good for recording voice less than 180 seconds (3 min), else the time to upload the final data to server takes longer.

Feel free to add comments here if the plugin causes any problem or error.

Those who wish to continue the development, the GIT version is available at: https://github.com/sythoos/jRecorder/

Thanks

Sajith

The tips is based on my requirement to call india using a calling number.

Usually calling card has their number and after that we need to enter our PIN (for some calling card, PIN won’t be there) then we need to enter the destination number.

All this can be done in a single call using comma (or pause in some phone)

For example, 020XXXXX,00914XXXXXXX  will dial the initial number first and when it get connected, it dial the second number after a second

If you need to wait 2-3 seconds before dialling the second number, you can add more pauses (commas), like

020XXXXX,,,00914XXXXXXX

Using this technique, if you know the total flow of an IVR call, say for example, to a customer care number, you can save the full flow as a contact using commas and just do a dial

eg: 020XXXXX,1,,,3,,4,5   => Dial the customer care agent number, press 1 after a second, wait 3 seconds and press 3, wait 2 seconds press 4 and then press 5 . All in a single call.

In iPhone, you can get this comma when you add a new contact, by pressing the * button [you can see a pause button and a wait button there. You can use pause button to put a comma]

Thanks

Sajith

[This tip is for information purposes only. Always use technology for good intensions. ]

Take any JPG file and place inside a folder. Place the files to hide inside same folder and zip the altogether to a single file (do zip even if there is only one file to hide)

Open terminal and switch to the folder where you put those files

cat  filestohide.zip >> myimage.jpg

This command will attach the zip file at the bottom of the jpg file. You can check the size of new jpg file, it will be increased.  You can simply delete your filestohide.zip file because it is added inside the image.

Click open the jpg file in any image reader app, you can see the same old image, and no information about the file you added inside.

To retrieve the file back rename the jpg file to .zip extension.

Form terminal type unzip myimage.zip , this will show some error/warning in zip file format, but you can get the filetohide.zip file unzipped in same folder.

[In Windows, if Winzip not work, use 7zip to unzip compressed hidden files]