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

.menutool {

position:absolute;right:10px; width: 180px;height: 61px; padding-top: 15px; padding-left: 22px; margin-top: 10px;;
background: #f0f0f0;

-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;

-webkit-box-shadow: 2px 2px 3px 1px #8c8c8c;
-moz-box-shadow: 2px 2px 3px 1px #8c8c8c;
box-shadow: 2px 2px 3px 1px #8c8c8c;

border: 1px solid #8a8a8a;

z-index: 1000;

display: none;

}

.menutool span {width: 15px; height: 15px; top: -9px ; position: absolute; right: 13px ;

-moz-transform: scale(1) rotate(45deg) translate(0px, 0px) skew(0deg, 0deg);
-webkit-transform: scale(1) rotate(45deg) translate(0px, 0px) skew(0deg, 0deg);
-o-transform: scale(1) rotate(45deg) translate(0px, 0px) skew(0deg, 0deg);
-ms-transform: scale(1) rotate(45deg) translate(0px, 0px) skew(0deg, 0deg);
transform: scale(1) rotate(45deg) translate(0px, 0px) skew(0deg, 0deg);

border-top: 1px solid #8a8a8a;
border-left: 1px solid #8a8a8a;

background: #f0f0f0;

z-index: 999;

}

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

Here is the CSS for the above image

.bmpopup {

background: none repeat scroll 0 0 #F0F0F0;
border: 1px solid #8A8A8A;
border-radius: 8px 8px 8px 8px;
bottom: 13px;
box-shadow: 2px 2px 3px 1px #8C8C8C;
height: 60px;
left: 16%;
margin-top: 10px;
padding: 8px 12px;
position: fixed;
text-align: justify;
width: 180px;
z-index: 1000;
display:none;

}

.bmpopup span {width: 15px; height: 15px;  bottom: -9px ; position: absolute; left: 49% ;

-moz-transform: scale(1) rotate(45deg) translate(0px, 0px) skew(0deg, 0deg);
-webkit-transform: scale(1) rotate(45deg) translate(0px, 0px) skew(0deg, 0deg);
-o-transform: scale(1) rotate(45deg) translate(0px, 0px) skew(0deg, 0deg);
-ms-transform: scale(1) rotate(45deg) translate(0px, 0px) skew(0deg, 0deg);
transform: scale(1) rotate(45deg) translate(0px, 0px) skew(0deg, 0deg);

border-right: 1px solid #8a8a8a;
border-bottom: 1px solid #8a8a8a;

background: #f0f0f0;

z-index: 999;

}

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) :

.searchbox .searchtext{

border: none;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 0px;
-webkit-border-top-right-radius: 0px;
-moz-box-shadow: inset 0 0 5px #999;
-webkit-box-shadow: inset 0 0 5px #999;
box-shadow: inset 0 0 5px #999;
border-right: 1px solid #aeaeac;

color: #7f7f7e;
font-size: 14px;
width: 84%;
float: left;
height: 25px;
padding: 2px 2px 2px 4px;
margin-left: 4px;
margin-top: 4px;

}

Gradient Menu Background:

.menu-container ul li {
padding: 10px;
border-bottom: 1px solid #c6c6c6;
background: #e5e5e5; /* Old browsers */
background: -moz-linear-gradient(top, #e5e5e5 0%, #ffffff 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e5e5e5), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #e5e5e5 0%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #e5e5e5 0%,#ffffff 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #e5e5e5 0%,#ffffff 100%); /* IE10+ */
background: linear-gradient(top, #e5e5e5 0%,#ffffff 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5e5e5', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */

}

Rounded shaped button:

a.green-button {

background: #00a943; /* Old browsers */
background: -moz-linear-gradient(top, #00a943 0%, #00a341 50%, #008d18 50%, #008d18 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00a943), color-stop(50%,#00a341), color-stop(50%,#008d18), color-stop(100%,#008d18)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #00a943 0%,#00a341 50%,#008d18 50%,#008d18 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #00a943 0%,#00a341 50%,#008d18 50%,#008d18 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #00a943 0%,#00a341 50%,#008d18 50%,#008d18 100%); /* IE10+ */
background: linear-gradient(top, #00a943 0%,#00a341 50%,#008d18 50%,#008d18 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a943', endColorstr='#008d18',GradientType=0 ); /* IE6-9 */

border: 1px solid #848484;
border-radius: 5px 5px 5px 5px;
color: #FFFFFF;
display: block;
font-size: 16px;
font-weight: bold;
padding: 8px 15px 8px;
text-align: center;
text-decoration: none;
width: 84%;
margin: 20px 0px 20px 4%;
float: left;
}

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

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:

<!DOCTYPE html>
<html xml:lang="en" lang="en">

Meta tags:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width = device-width,minimum-scale=1.0,maximum-scale=1.0, user-scalable=no" />
<meta name="HandheldFriendly" content="True" />
<meta name="apple-mobile-web-app-capable" content="yes" />

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:

<link rel="apple-touch-icon" href="/images/apple-touch-icon.png"/>

Thanks

Sajith

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

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

Thanks CrosByMichaela for sharing this.

Air 3 has many support for mobile development. For example, it has now support of iPhone application background running features such as play audio, access internet, use voice service, and location based services.

Flash build iPhone profile xml file now supports properties like:

    <key>UIDeviceFamily</key>
         <array>
                    <string>1</string>
                    <string>2</string>
          </array>
     <key>UIBackgroundModes</key>
     <array>
                <string>audio</string>
     </array>
     <key>UIRequiresPersistentWiFi</key>
     <string>YES</string>

To Record voice from web we need the following thing:

1) A flash media server (eg: Adobe Media Server [paid] or Red 5 [free])

2) Java6

3) Webserver (eg, Apache, PHP)

4) A flash client app to record voice

The one I used
=========

We used Red 5 Server, because it is FREE and Open Source

We can proceed with our Apache + PHP

Flash Recorder APP from AVChat (They have Free Trial recorder for 30 days and the Full version costs around £50)

Installation
=======

Install Java 6 (find the correct build based on 64 bit or 32 bit processor)

install RED 5 (Download from http://code.google.com/p/red5/)

Run RED 5 and test the installation

Open a browser and type: http://127.0.0.1:5080/

If the installation is success, you can see the RED5 page

Try to install some demo app and try those demos

You need a Browser with Flash support to test the demos (Allow the security options)

Voice Recorder Client App
=================
You can many FREE recording app over internet. Even you can get the Action Script for Voice recording and you can create your-own Flash recorder if you know Flash

A better voice recorder app can be found at http://flvar.com/ which has PHP and ASP support where you can save/manipulate the recorded file

The AVChat App
===========

Download the chat app from the site http://flvar.com/

There are two sets of folders, on for red5 and one for web server.

Put the red5 projects in your webapps folder of RED5 server root

When you download the app, you’ll get a license key. Enter this key to the property file inside the red5 server app.

Put the web server folder in your apache web root

Open avc_settings.php and update the path of RED5 with your RED5 server path (see the example in the document)

Try accessing this project with your web browser, if you can see the flash player , it means your web app works fine

Try start recording, and if you can record, which means your RED5 server configuration is fine

Stop recording and click “Save”

Check for the recorded flv file in the RED5 stream folder.

This “Save” action trigger save_audio_to_db.php where we get details of the recorded stream and we can use PHP to manipulate that.

For example, to move the flv file into webserver root, or use FFMPEG to convert the FLV format to WAV or MP3 etc

Enjoy Voice Recording

– Sajith

find ./ -name “.svn” | xargs rm -Rf

A PHP based tool to generate QR Code for your website URL.

http://qrcode-factory.com/

Now a days, the usage of QR code is higher and this is becoming one of the PR generating mechanisms.

QR code is another kind of bar code called matrix bar code.  QR stands for Quick Reader (source: WikiPedia)

The tool is created using PHP QR code library.

Use RedLaser Apps for mobile devices to read QR codes.