How to: iOS7 status bar overlaps

As an iOS Developer, I noticed that the status bar showing the carrier, time and battery level in iOS7 acts different comparing to the previous versions of iOS. The main difference between iOS6 and iOS7 regarding this bar is that it does not reserve a specific height into the application and it simply place it over your app with a black or white font color, based on the background image of that area.

Analyzing the following image you will notice the status bar difference between the mentioned iOS versions.

How to solve the issue and keep the design the same in both iOS6 and iOS7?
There are multiple solutions for this issue, but I would recommend only one out of them. Before showing you the way that I would do it, I would like to tell you: do not update your mobile application design by adding a 20px margin to the top, as design itself cannot be controlled by iOS version and by the meaning of it, your iOS6 application will be affected as well.

My solution applies to the back-end of the application, even if this is mainly a front-end problem. I do it back-end side, because I only need to do something only if the target device is using iOS7, otherwise there won’t be any changes. In case it detects iOS7 on targeted devices, is going to add a 20px margin to the application viewport. By doing this, the status bar will have the same effect as in previous iOS versions.

Step 1: Open MainViewController.m file inside your application

Step 2: Find (void)viewWillAppear:(BOOL)animated function

Step 3: Replace the previous found function with the following code

 - (void)viewWillAppear:(BOOL)animated
{
    if ([[[UIDevice currentDevice] systemVersion] floatValue] >= 7) {
        CGRect viewBounds = [self.webView bounds];
        viewBounds.origin.y = 20;
        viewBounds.size.height = viewBounds.size.height - 20;
        self.webView.frame = viewBounds;
    }
    [super viewWillAppear:animated];
}

Step 4: Save and recompile your application.

This solution may also be applied to PhoneGap/Cordova iOS apps. I have tested it with Cordova 3.x and it works fine, but I don’t know if it works for Cordova 2.x

Fresh design

After a long period in which my online activity was almost null, I got some time, thanks to my new job and the actual working hours, to be back online. As a result, in the past days, I started to redesign my blog. I decided to go back to the origin and get rid of the WooTheme that I was using before. Right now I am back to twentyeleven theme, and even though there are only slight changes to it, I am planning refresh my blog with a brand new flat design. I hope that in the upcoming Christmas holiday I will be done with the entire redesign process.

WAMP, XAMPP – MySQL slow connection Windows 8

I’m not a Windows 8 user, but I have a friend who’s using Windows 8 and he had problems caused by MySQL connection. There was a 1 second delay for any query, even in phpmyadmin. Firstly he tried XAMPP, 1 second delay, switched to WAMP – again 1 second delay, another option was EasyPHP – exactly the same problem.

How can we solve the problem?
I noticed that Internet Explorer 10 is not responding to the following keyword: “localhost“. In theory “localhost” may be replaced by “127.0.0.1“. If we do this in our browser(IE10) we can see that it works and we have access to our local server, located at 127.0.0.1.

What’s the link between Internet Explorer 10 and MySQL Delay?
Both Windows 8 and IE 10 are Microsoft products, so we have to find the relationship between those two. MySQL Connection Queries usually is formed as:

$mysqli = new mysqli("localhost", "user", "password", "database"); #this connection statement has 1 second delay

In order to solve the problem we should update the connection query as it follows:

$mysqli = new mysqli("127.0.0.1", "user", "password", "database"); #this connection statement is almost instant

In order to solve the problem, replace “localhost” with “127.0.0.1″ in the MySQL Connection Query.

WordPress Plugin – Google URL Builder::Twitter

This article is the official page for my plugin. Everything related to this plugin will be written within this post. I am open to any suggestions and I would like to get feedback from you.

How does it work?

Every time you post a new article, you have a meta box where you can specify the post name as it will be tracked for your Google Analytics reports. Based on the value that you insert into this box, the plugin will add a Twitter button at the beginning of your post which will contain the post title, a custom text and it will also display the URL built using your preferences.

Plugin Name: Google URL Builder:: Twitter

Download via WordPress Plugins: http://wordpress.org/extend/plugins/google-url-buildertwitter/

Donate between $1 – $1,000,000 so I can drink a coffee and continue the plugin development (:

Version 1.0 – 01.12.2012

Changelog
- there are no known bugs
- the constants inside the url_twitter.php file are easy configurable
- solved bit.ly url encode possible problems

Step 1: Open the plugin file(url_twitter.php) and go to line 14. This line looks like this:

define('TWITTER_ACCOUNT', 'your_twitter_username');

Step 2: You have to change ‘your_twitter_username’ with your value. Your line 14 will look like:

define('TWITTER_ACCOUNT', 'danielroscaro');

Step 3: Go to line 15. This line looks like this:

define('CAMPAIGN_SOURCE', 'Twitter%2BName');

Step 4: Replace empty spaces (‘ ‘) with ‘%2B’ – example: ‘Twitter Name’ => ‘Twitter%2BName’. Your line 15 will look like:

define('CAMPAIGN_SOURCE', 'Your%2BCampaign%2BSource');

Step 5: Go to line 16. This line looks like this:

define('CAMPAIGN_MEDIUM', 'twitter-blog');

Step 6: Replace the existing value with your own. Your line 16 will look like:

define('CAMPAIGN_MEDIUM', 'another-campaign-medium-value');

Step 7: Go to line 17. This line looks like this:

define('TWEET_MESSAGE', 'your_custom_text_right_here');

Step 8: Replace the message with your own. It may also be empty and the tweet message will contain only the article title. Your line 15 may look like:

define('TWEET_MESSAGE', ' | Daniel Roșca');

Step 9: Now it’s time to configure the Bit.ly API. Go to line 19. This line looks like this:

define('BITLY_LOGIN', 'login_key');

Step 10: Replace the login key with yours. Your line 19 may look like:

define('BITLY_LOGIN', 'x_75vmkln25g'); #this value is fake

Step 11: The last part of configuration process needs to update the Bit.ly API Key. Go to line
20
. This line looks like this:

define('BITLY_API', 'api_key');

Step 12: Replace the API key with yours. Your line 20 may look like:

define('BITLY_API', 'D_v5a6ffa71a6sh5584d5b23ec4512f85a'); #this value is fake

That’s it! Enjoy using this plugin and monitor your Twitter visits.

Previous Versions

Version: 0.3 – 30.11.2012

Download Plugin – version 0.3

Changelog
- Added constants for easier edits

How to set it up

Because I am still working on this plugin you will have to manually configure some parameters inside the plugin code. I will give you the exact guides to do this.

Step 1: Open the plugin file(url_twitter.php) and go to line 12. This line looks like this:

define('TWITTER_ACCOUNT', 'danielroscaro');

Step 2: You have to change the my Twitter account with yours. Your line 12 will look like:

define('TWITTER_ACCOUNT', 'your_twitter_username');

Step 3: Go to line 13. This line looks like this:

define('CAMPAIGN_SOURCE', 'Twitter%2BName');

Step 4: Replace empty spaces (‘ ‘) with ‘%2B’ – example: ‘Twitter Name’ => ‘Twitter%2BName’. Your line 13 will look like:

define('CAMPAIGN_SOURCE', 'Your%2BCampaign%2BSource');

Step 5: Go to line 14. This line looks like this:

define('CAMPAIGN_MEDIUM', 'tw-blog');

Step 6: Replace the existing value with your own. Your line 14 will look like:

define('CAMPAIGN_MEDIUM', 'another-campaign-medium-value');

Step 7: Go to line 15. This line looks like this:

define('TWEET_MESSAGE', ' | Daniel Roșca');

Step 8: Replace the message with your own. It may also be empty and the tweet message will contain only the article title. Your line 15 may look like:

define('TWEET_MESSAGE', '');

Step 9: Now it’s time to configure the Bit.ly API. Go to line 17. This line looks like this:

define('BITLY_LOGIN', 'gh_kjafd71jdka'); #the values used here are fake

Step 10: Replace the login key with yours. Your line 17 may look like:

define('BITLY_LOGIN', 'your-login-key-here');

Step 11: The last part of configuration process needs to update the Bit.ly API Key. Go to line 18. This line looks like this:

define('BITLY_API', 'J_i8h2vc7kga6dd6155d5b98ec8740f85a'); #the values used here are fake

Step 12: Replace the API key with yours. Your line 18 may look like:

define('BITLY_API', 'your-bitly-api-key-right-here');

Version: 0.2 – 29.11.2012

Download Plugin – version 0.2

Changelog
- Fixed a bug that could appear on post update
- Added support for bit.ly

How to set it up

Because I am still working on this plugin you will have to manually configure some parameters inside the plugin code. I will give you the exact guides to do this.

Step 1: Open the plugin file(url_twitter.php) and go to line 67. This line looks like this:

$new_meta_value = '?utm_source=Twitter%2B-%2BDR%2BEN%2BBlog&utm_medium=dr-tw-en-blog&utm_campaign=' . $value;

Step 2: You have to change the campaign source you’re using them for you campaign. If you want to insert your own campaign source you have to edit the following piece of code from line 67:

utm_source=Twitter%2B-%2BDR%2BEN%2BBlog

Inserting your campaign source means that you have to delete everything is placed after the ‘utm_source=‘. If you campaign source name contains spaces(empty space), please do replace the empty space to %2B. For example, if your campaign source is:

Twitter Campaign

Your code should look like this:

Twitter%2BCampaign

So in line 67 your code will be:

$new_meta_value = '?utm_source=Twitter%2BCampaign&utm_medium=dr-tw-en-blog&utm_campaign=' . $value;

Step 3: Update your campaign medium. In order to add your own campaign medium you have to delete what is placed between ‘utm_medium=‘ and ‘&utm_campaign=‘. In this case you have to delete and add your campaign medium instead of the following code:

dr-tw-en-blog

Let’s say that the campaign medium will be twitter-medium, so line 67 will look like this:

$new_meta_value = '?utm_source=Twitter%2BCampaign&utm_medium=twitter-medium&utm_campaign=' . $value;

Step 4: You can also customize the text that is displayed in the tweet message. In order to edit this message you have to go to line 109:

$content	= '<a href="https://twitter.com/share" class="twitter-share-button" style="float: right;" data-text="' . $title . ' | Daniel Roșca" data-url="' . bitly($link_string) . '" data-via="danielroscaro" data-size="large" data-count="none"> </a>' . $content;

In this line you will find next ‘data-text‘ attribute. In this case this attribute looks like this:

data-text="' . $title . ' | Daniel Roșca"

You can replace | Daniel Roșca with your own text, but do not touch the other part of the code, because your post title won’t be visible in the tweet anymore. Let’s say that you want to replace my text with ‘ | Your Company Name‘, so the attribute code will look like:

data-text="' . $title . ' | Your Company Name"

Step 5: Set your own Twitter account for ‘via @Username‘ part of the message. On the same line 109 you have to look for ‘data-via’ attribute:

data-via="danielroscaro"

You should replace ‘danielroscaro‘ with your own Twitter username.

data-via="twitterUsername"

Step 6: Set up your bit.ly account. Got to line 123:

$content 	= file_get_contents("http://api.bit.ly/v3/shorten?login=YOUR_LOGIN&apiKey=YOUR_API&longUrl=".$url."&format=xml");

Replace YOUR_LOGIN with the data from bitly abd YOUR_API with the API Key provided by bitly. After you replace those values your line will look like:

$content 	= file_get_contents("http://api.bit.ly/v3/shorten?login=x_53rpngn2uu&apiKey=D_e6g6ffa71a6dd6155d5b98ec8740f85a&longUrl=".$url."&format=xml");

Note: the login key and apiKey are fake and won’t work. They are stated as an example

Version: 0.1 – 29.11.2012

Download Plugin – version 0.1

The plugin helps you to build the URL based on your Google URL Builder campaigns for Twitter. It replaces the standard WordPress Post URL with the URL that you’re building with the Google URL Builder.

How to set it up

Since there is version 0.1 you will have to manually configure 3 parameters inside the plugin code. I will give you the exact guides to do this.

Step 1: Open the plugin file(url_twitter.php) and go to line 67. This line looks like this:

$new_meta_value = '?utm_source=Twitter%2B-%2BDR%2BEN%2BBlog&utm_medium=dr-tw-en-blog&utm_campaign=' . $value;

Step 2: You have to change the campaign source you’re using them for you campaign. If you want to insert your own campaign source you have to edit the following piece of code from line 67:

utm_source=Twitter%2B-%2BDR%2BEN%2BBlog

Inserting your campaign source means that you have to delete everything is placed after the ‘utm_source=‘. If you campaign source name contains spaces(empty space), please do replace the empty space to %2B. For example, if your campaign source is:

Twitter Campaign

Your code should look like this:

Twitter%2BCampaign

So in line 67 your code will be:

$new_meta_value = '?utm_source=Twitter%2BCampaign&utm_medium=dr-tw-en-blog&utm_campaign=' . $value;

Step 3: Update your campaign medium. In order to add your own campaign medium you have to delete what is placed between ‘utm_medium=‘ and ‘&utm_campaign=‘. In this case you have to delete and add your campaign medium instead of the following code:

dr-tw-en-blog

Let’s say that the campaign medium will be twitter-medium, so line 67 will look like this:

$new_meta_value = '?utm_source=Twitter%2BCampaign&utm_medium=twitter-medium&utm_campaign=' . $value;

Step 4: You can also customize the text that is displayed in the tweet message. In order to edit this message you have to go to line 107:

$content	= '<a href="https://twitter.com/share" class="twitter-share-button" style="float: right;" data-text="' . $title . ' | Daniel Roșca" data-url="' . $perma . '' . $url_twitter . '" data-via="danielroscaro" data-size="large" data-count="none"> </a>' . $content;

In this line you will find next ‘data-text‘ attribute. In this case this attribute looks like this:

data-text="' . $title . ' | Daniel Roșca"

You can replace | Daniel Roșca with your own text, but do not touch the other part of the code, because your post title won’t be visible in the tweet anymore. Let’s say that you want to replace my text with ‘ | Your Company Name‘, so the attribute code will look like:

data-text="' . $title . ' | Your Company Name"

Step 5: Set your own Twitter account for ‘via @Username‘ part of the message. On the same line 107 you have to look for ‘data-via’ attribute:

data-via="danielroscaro"

You should replace ‘danielroscaro‘ with your own Twitter username.

data-via="twitterUsername"

Aptana Studio 3 and GitHub – Update

Based on the first article that I wrote regarding Aptana Studio 3 and GitHub I am coming with a new update, because there were some changes made by GitHub. This update applies for the users that installed Git for Windows.

The previous article covering this topic is the core linking Aptana Studio and Github. In this article I will give you some references to GitHub Help that will help you to connect those two services. As I wrote in the previous paragraph, this will only apply for the users who are using Git for Windows.

Aptana and GitHub

How to get started?

If you installed Git for Windows you have to manually configure the SSH keys so that the previous tutorial will work without any problems. In order to configure the SSH keys you have to follow Generating SSH Keys on GitHub.

After you complete the tutorial from GitHub you can go to my previous article and link Aptana Studio with your GitHub repositories.

Right now you can enjoy your work with Aptana Studio and GitHub. Happy Codding!

Day 5: PHP and MySQL #EAAA

Day #5 was the end of back-end development. Since there were only few functions left for this day everything went smoothly and the courses were done in less than 3 hours. I hope that everything was clear and all the participants learnt new stuff in regards to Object Oriented, PHP and SQL.

Download source files from here: Source Files

Day 2: PHP and MySQL #EAAA

In the first day of working with PHP and MySQL the things were going slower than in this day. I was talking today about database normalization process, user roles, projects, admin and user panel. Moreover, the SQL statements are all organized into models.

Download: Source Files

Custom WordPress Themes and SEO

Up to now I have been working a lot with twentyeleven / twentyten themes or child themes. I didn’t try to create a theme from scratch before, but today I did it. However, I noticed that there are essential parts missing from almost all the tutorials that I found. Moreover, even Codex is not complete and it need some updates as soon as possible.

My main scope is to develop a custom theme that is fully compatible to Search Engines so that a blogger may have lots of benefits in regards to SEO. Maybe I won’t go in so many details into this article, but I will list the parts that are important and they must be present in every WordPress Theme.

The most important part of a theme, even if the official guide on Codex does not mark it as required is the Search functionality.
On the second place it will be a well-designed and optimized list with the categories. Please do take into consideration that using JavaScript to design this list won’t help at all for SEO so you have to do it purely in CSS3.
The last, but not the least important element is the tags cloud. As JavaScript won’t be a good solution for its development, it also needs to be completely coded using pure CSS3.

How to organize the Search Results Page

You may take into consideration placing some of the most important articles in the search result page when there are no results based on the user input. Moreover, you may place the most popular tags, maybe the user will be interested to search those keywords and surely they will have results. Try to think outside the box when you organize those things on your website, because a great organization usually results into more visits and probably returning visits as well – that’s actually what why are looking for when we start blogging.

That is is for now. Please do take into consideration those three factors when you start to develop your custom WordPress Theme.