Mobile Apps – History, Present, Future

In 1983 a certain Steve Jobs giving a conference speech in ‘Aspen U.S outlined his vision of software download where software would be downloaded over phone lines with no need for physical distribution methods , the first Macintosh had still yet to be launched but Steve Jobs as ever the technological visionary had envisioned the future ‘app store’.32 years on from his ‘Aspen speech and apps are so ubiquitous they seem an almost indispensable part of everyday life, but the path to the modern app has been a circuitous one demanding technological developments and innovation from numerous sources of which Apple played a leading but not sole.

In a sense the first apps on a ‘mobile’ device can be traced back to the games snake, pong and tic- tac-toe found on the Motorola DynaTAC 8000X, the first commercial phone launched in ‘83 which resembled and was often nicknamed the ‘brick’. A break-through in mobile communications, this unwieldy device also demonstrated via its simple games that a cell phone could be more than just a means for communication but could also be a mode for entertainment.

Further development came down the line with the PSIOn range of handheld computers (PDAs) using the EPOC operating system, 7 years on from the first mobile handset these small hand held computers came with a number of user programs including a word processor and diary. Around the same time Palm was launching its rival handheld personal device the Palm Pilot containing similar office style ‘apps’ to the PSIOn but accessible via a Gui screen – a precursor to the modern touchscreen smartphone.

Market Explosion

The early ‘90s saw an explosion in mobile phone take up and usage, phones were now smaller, cheaper and mass market but this competition whilst driving down costs and enabling mobile communication to become mass market actually stunted app innovation, with manufacturers not willing to reveal their proprietary technology to 3rd parties.

The mid ‘90s saw the inception and rise of the World Wide Web but mobile phones started to get left behind, with websites using technology and U.I principles including JavaScript, flash and high resolutions that phones couldn’t support. Out of this need to bring the WWW to mobile was borne wireless application protocol or WAP for short. WAP sites served up pages written in Wireless MarkUp Language a stripped down form of HTML, suitable for the limited processing power of mid ‘90s mobile devices.

WAP sites were slow and cumbersome, typing a URL via a numeric keypad on a small phone was onerous whilst sites didn’t take into account individual phone sizes. In addition to the many technical drawbacks, many WAP portals operated by the networks restricted access to their preferred content distributors which users disliked. WAP ultimately failed but it still heralded the start of ‘web browsing’ on a mobile handset and established the important principle of an open environment.
Evolution to the ‘mobile app’ continued with the development of cellular technology, first with 1G and then with the 2G cellular network. The cellular networks brought about the first ‘smartphones’, with the digital data transmission enabled by the 2G network allowing phones to carry many of the modern features which form the bedrock of modern apps.

Market Evolution

Evolution finally turned to revolution in ’07 with the first iPhone featuring a touch screen loaded with a number of pre-set apps. One year later and the Apple store launched allowing iPhone users to download apps directly to their phone and for independent developers to easily access and install apps.

Since ’08 the app ecosystem has thrived, there are now estimated to be over 138 million app downloads every year on the apple and google play stores, with an estimation of 268 million by 2017. Users now spend 80% of their time on apps compared to mobile web.

Whatever your online need there is an app which can satisfy it, from the simple functional such as weather apps or currency converters, to the worryingly bizarre such as an app that can retrace your steps after and alcoholic blackout. The app environment keeps on driving up consumer demands with companies responding in kind to stay competitive.

Whereas first it was just necessary to have an app, some kind of presence on the app store, now an app needs to be the best and have the most features. This has fuelled an environment which explains why an internet casino such as Mr Green now features over 60+ mobile casino games on its app even though the average player is never likely to use more than 10 of those from his handset. Some online casinos like LeoVegas mobile casino are even "mobile first" - more geared towards mobile phones and tablet users than desktop or mac users.

Future Outlook

What is the future of apps? Many commentators point to a number of flaws in the current app system including its poor economy of scale, where each single app representing just one use website, game or function takes up a relatively large amount of real estate space. They envision a content index system, where apps will be grouped together and with content accessed more on a push based notification system. Other commentators see apps joined together, yelp to find a good restaurant connected to the restaurants app to order, a truly interconnected app environment instead of the silo based environment we currently have. It is possible Cryptocurrencies would have a positive effect on that.

Whatever the future, one thing is for certain is that it won’t remain static, 30+ years took us from snake on the Motorola to the current app environment, the next 30 is set to be just as exciting.

Prevent Cross Site Scripting aka XSS attacks

Cross Site Scripting also called as xss attack it is one of the most common web vulnerabilities today, after making a tutorial on sql injection i thought that making a tutorial on preventing cross site scripting would be useful to readers.

First of all what is XSS (not CSS)

It is a web application bug on non filtered user input like search or comment box.
When an attacker has the possibility to inject some code into the page and on site reload that code does not show, it is called Non Persistent xss attack and when the code is saved on a database and loaded into the page that that is a high security risk.
He could insert an malicious script to steal user cookies or even further so how can we prevent xss at all.

Let's take an simple example of an vulnerable php script:
<?php
if(isset($_GET['search'])){
echo 'You searched for'.$_GET['search'];
}
else{
?><form action="" method="get">
<input type="text" name="search" value="search.."><br>
<input type="submit"></form>
}
?>
Basically this script is vulnerable
We can use this php functions:

• htmlspecialchars
• htmlentities

There are a few other we could use like is_int, is_numeric, (int)$data used when we are expecting the user to enter only numbers, also we can use preg_match, eregi which we can use for example to check if email is valid etc..

So here it is the implementation of htmlspecialchars

<?php
if(isset($_GET['search'])){
echo 'You searched for'.htmlspecialchars($_GET['search']);
}
else{
?><form action="" method="get">
<input type="text" name="search" value="search.."><br>
<input type="submit"></form>
}
?>

htmlspecialchars does not filter all characters like htmlentities does but that does not mean that it contain bugs.
Also i would like to mention that never using javascript for filtering user input, consider it only as a gui part handled by php, maybe most of you know this either.
I also recommend reading this other web security articles

CSS Tutorial Series #1

So this will be the first tutorial series on our site. This is a CSS series in this series we will try to cover all the topics about CSS such as the pseudo-class and etc..

Lets start 

First of all whats CSS?

CSS means Cascadind Sthyle Sheets
Its easy to learn??

Of course yes is one of the easiest languages which most web developers use.

Why to use CSS?

You should use it in order to define the formatting applied on your website such as colors, backround images and etc..

Defining Styles With CSS

The basic purpose of CSS is to allow designers to define a style ( a list of formatting details) and then to apply it to html page(s).

<html>
<head>
<title>Sample Page</title>
<body>
<h1><font face='sans-serif' color='#336600'>Title 1</font>
</h1>
<p>...</p>

<h2><font face="sans-serif" color="#3366CC>Title 2</font>
</h2>
<p></p>


<h2><font face="sans-serif" color="#3366CC>Title 3</font>
</h2>

<p></p>

</body>
</head> 

This was a simple example so we used three separate times. But i wouldn't be better to define the fonts at once, then apply to headinds?

With the power of CSS we can do this



<html>
<head>
<title>Sample Page</title>
<style type="text/css">
h1, h2 {
  font-family: sans-serif;
  color: #3366cc;
}
</style>
<body>
<h1><Title 1</h1>
<p>...</p>

<h2>Title 2</h2>
<p>...</p>

<h2>Title 3</h2>

<p>...</p>

</body>
</head> 

Now this is just a small example what we will learn from this series i know that  you think that this tutorial is a little bit uncompleted but next time i will try to cover the tutorial as much as i can.

Thanks a lot !

Donate Button With Photoshop

Hi I am the new contributor on this site and this is my first tutorial.
So today we are going to make a Basic donate button for Paypal.

So lets get started by creating a new file on photoshop.

Then set the document size 92x26 pixel resolution 300 pixels per inch, CYMK colors and transparent backround.

Then we put some guides to our file in order to help us.
Then we create a new layer and we select the Rounded Rentangle Tool.

After we have dragged a Rounded Rentagle we will ad some colors. So we select the layer of the element and we right-click and select blending options.

And we selecte the following parametres:

 And that we've got by far:

Next we Rasterize the Layer by right-clicking on the layer and selecting Rasterize Layer

Then we make a new layer and we select the type tool and we write Donate

*I have added some effects on the text but you can leave as it is or you can experiment until you got you 'style' also you can use your favorite font.

Now we make a new layer and select again the type tool and we make the $ sign next to the text.

And thats all if you like you can add whatever you like to do it 'ala your style'
So we save by clicking File , Save us and select the folder you like to save it type the name of your file and Save it as .jpg.


Now go to http://www.paypal.com and log to your account .

Then Click on the menu bar where it says Merchant Services 

On the right side down ia a box says Donations click that one and something like this will apear to you. Fill all the areas according to the instructions.

When you finish click create button.

Now you should copy the whole scipt and create and new html file in order to place the script.

Your code should be like this

<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="KJRZCTWPKFTSL">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>


Now replace the this line

<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif" />

With this

<input type="image" src="yourimagepath.jpg" />



And add it to your site in order to have some income.

Thank for reading 
If you have any questions or problems please let me help you!

Php tutorial, Login script with Jquery

View Demo Download

On today's tutorial were gonna build an Php and Jquery login script.

To make it more easy i separated the article in 4 parts:

1. Html Form
2. Adding Php
3. Jquery checks
4. Final code

First of all we are goind to make the html form which it is well designed in css3
<html>
<head>
<title>Php And Jquery Login tutorial</title>
<link rel="stylesheet" href="style.css" type="text/css">
<script src="jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="code.js" type="text/javascript"></script>
</head>
<body>
<div id="alert">Please type something.</div>
<div id="box">

<form action="submit.php" method="post" id="ContactForm">
<input type="text" name="user" value="Username.." id="user"><br />
<input type="password" name="pass" value="passwd" id="pass"><br />
<input type="submit" value="Login" class="button">
<div class="form_result"> </div>
</form>

</div>
</body>
</html>

The php backend, just a simple login script for demonstration

<?php
if(isset($_POST['user']) && !empty($_POST['pass'])){
$uid = "mikel";
$pid = "thecodertips";
if($_POST['user'] != $uid){
die("Wrong username..");
}
if($_POST['pass'] != $pid){
die("Wrong password..");
}
echo 'Welcome.';
}
?>

Then the css part
input{
outline: none; /* removes google chrome outline */
}

#box{ /* the login box design */
width: 190px;
background-image: -webkit-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(243,243,243,1) 100%);
background-image:    -moz-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(243,243,243,1) 100%);
background-image:     -ms-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(243,243,243,1) 100%);
background-image:      -o-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(243,243,243,1) 100%);
background-image:         linear-gradient(top, rgba(252,252,252,1) 0%,rgba(243,243,243,1) 100%);
-webkit-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.15), 0px 1px 2px 0px rgba(0,0,0,0.15), 0px -2px 3px 0px rgba(255,255,255,1)inset, 0px -16px 0px 0px rgba(237,237,237,1)inset;
-moz-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.15), 0px 1px 2px 0px rgba(0,0,0,0.15), 0px -2px 3px 0px rgba(255,255,255,1)inset, 0px -16px 0px 0px rgba(237,237,237,1)inset;
box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.15), 0px 1px 2px 0px rgba(0,0,0,0.15), 0px -2px 3px 0px rgba(255,255,255,1)inset, 0px -16px 0px 0px rgba(237,237,237,1)inset;
border: solid 1px #5E5E5E;
border-color: #5E5E5E #888888 #696969 #888888;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;
padding: 0px 20px 0px 20px;
display: inline-block;
font-size: 15px;
line-height: 32px;
color: rgba(51,51,51,1);
}

#user, #pass{
padding: 8px;
color:gray;
margin: 10px;
-webkit-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.15), 0px 1px 2px 0px rgba(0,0,0,0.15), 0px -2px 3px 0px rgba(255,255,255,1)inset, 0px -16px 0px 0px rgba(237,237,237,1)inset;
-moz-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.15), 0px 1px 2px 0px rgba(0,0,0,0.15), 0px -2px 3px 0px rgba(255,255,255,1)inset, 0px -16px 0px 0px rgba(237,237,237,1)inset;
box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.15), 0px 1px 2px 0px rgba(0,0,0,0.15), 0px -2px 3px 0px rgba(255,255,255,1)inset, 0px -16px 0px 0px rgba(237,237,237,1)inset;
border: solid 1px #5E5E5E;
border-color: #5E5E5E #888888 #696969 #888888;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;
}

#user:hover, #pass:hover{
border:1px solid #00BFFF;
color: black;
}

.button {
background-image:-webkit-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(243,243,243,1) 100%);
background-image:-moz-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(243,243,243,1) 100%);
background-image:-ms-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(243,243,243,1) 100%);
background-image:-o-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(243,243,243,1) 100%);
background-image:linear-gradient(top, rgba(252,252,252,1) 0%,rgba(243,243,243,1) 100%);
-webkit-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.15), 0px 1px 2px 0px rgba(0,0,0,0.15), 0px -2px 3px 0px rgba(255,255,255,1)inset, 0px -16px 0px 0px rgba(237,237,237,1)inset;
-moz-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.15), 0px 1px 2px 0px rgba(0,0,0,0.15), 0px -2px 3px 0px rgba(255,255,255,1)inset, 0px -16px 0px 0px rgba(237,237,237,1)inset;
box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.15), 0px 1px 2px 0px rgba(0,0,0,0.15), 0px -2px 3px 0px rgba(255,255,255,1)inset, 0px -16px 0px 0px rgba(237,237,237,1)inset;
border: solid 1px #5E5E5E;
border-color: #5E5E5E #888888 #696969 #888888;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;
padding: 0px 20px 0px 20px;
display: inline-block;
font-size: 15px;
line-height: 32px;
color: rgba(51,51,51,1);
margin-left: 25%;
}
.button:active {
background-image: -webkit-linear-gradient(top, rgba(167,199,225,1) 0%,rgba(124,176,222,1) 100%);
background-image:    -moz-linear-gradient(top, rgba(167,199,225,1) 0%,rgba(124,176,222,1) 100%);
background-image:     -ms-linear-gradient(top, rgba(167,199,225,1) 0%,rgba(124,176,222,1) 100%);
background-image:      -o-linear-gradient(top, rgba(167,199,225,1) 0%,rgba(124,176,222,1) 100%);
background-image:         linear-gradient(top, rgba(167,199,225,1) 0%,rgba(124,176,222,1) 100%);
-webkit-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.15), 0px 1px 2px 0px rgba(0,0,0,0.15), 0px -2px 3px 0px rgba(182,226,244,1)inset, 0px -16px 0px 0px rgba(99,165,219,1)inset;
-moz-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.15), 0px 1px 2px 0px rgba(0,0,0,0.15), 0px -2px 3px 0px rgba(182,226,244,1)inset, 0px -16px 0px 0px rgba(99,165,219,1)inset;
box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.15), 0px 1px 2px 0px rgba(0,0,0,0.15), 0px -2px 3px 0px rgba(182,226,244,1)inset, 0px -16px 0px 0px rgba(99,165,219,1)inset;
border: solid 1px #323D9F;
border-color: #323D9F #3365B4 #3365B4 #3365B4;
}

#alert{ /* alert box */
margin-left: 80%;
width: 200px;
background: #333;
box-shadow: inset 0 -1px 0 rgba(255,255,255,.4);
border: 1px solid;
color: #fff;
padding: 15px;
position: fixed;
_position: absolute;
text-shadow: 0 1px 0 rgba(0,0,0,.5);
animation: animate-bg 5s linear infinite;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;
text-align: center;
font-weight: bold;
}

Here comes the jquery part, i added some validations and a post method handled by php
$(document).ready(function(){
// hide alert boxes

$('#alert').hide();

// empty() function used when there is nothing entered


   // lets declare the variables for easier usage
 
   var user = $('#user');
   var pass = $('#pass');
   var button = $('.button');
 
   // checking if there is nothing submitted
 
    $(button).click(function(){

if(user.val().length < 3){
$('#alert').fadeIn();
return false;
}
if(pass.val().length < 3){
$('#alert').fadeIn();
return false;
}

$.ajax({type:'POST', url: 'submit.php', data:$('#ContactForm').serialize(), success: function(response) {
    $('#ContactForm').find('.form_result').html(response);
}});

return false;

   });
 
 });

NOTE! The php script contains security holes, it is used just as an example for the tutorial.

Designing input fields using Jquery

To make a website look more professional it is imtortant to use the latest programing languages like Html5 and Css3 and of course Jquery.

First of all we will start with css, making it beautiful then we will use jquery to handle user clicks.

Download Create 3 files, index.html, style.css and script.js
Open index.html and write
<html>
<head>
<title>Jquery input fields | thecodertips.com</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="script.js"></script>
<link type="text/css" rel="stylesheet" href="style.css">
</head>
<body>
<center><a href="http://thecodertips.com" id="tut" title="Read the tutorial">&#187;&#187; Tutorial &#171;&#171;</a><br /><br />
<input type="text" id="box" value="Type something..">
</center>
</body>
</html>
Now open style.css and write
#box{
outline: none; /* remove default borders */
padding: 5px; /* zoom it by 5px */
border: 1px solid gray; /* set an black border */
color: gray; /* text in the box is set to gray */
/* set border radius */
-webkit-border-radius: 3px; /* to work with google chrome and safari */
-moz-border-radius: 3px; /* to work with firefox */
border-radius: 3px; /* other browsers like ie */
}

/* when the user is typing in the box */
#box:focus{
border: 1px solid #0066FF;
color: #333;
}

/* to style the tutorial link */
#tut{
text-decoration: none;
color: #0066FF;
}
Now open script.js and write
$(document).ready(function(){

// set a variable to the box
var box = $("#box");

// once box get's clicked
box.click(function(){
box.val(""); // set it to empty
});

});

PHP MYSQL - post to database

Hello googlers
On todays post mi gonna tell you how to post to mysql database.

First of all we must make the html form for index.html:
<html>
<body>
<form action="index.php" method="get">
<input type="text" name="user">
<input type="submit" value="post">
</form>
</body>
</html>
This html script will post form data to index.php, for example we write "Mikel" on the box and clock post button, the url will change to index.php?user=mikel

Now the php part, index.php:
<?php
// we get submitted data and check if user really submitted it
if(isset($_GET['user']){
$user = $_GET['user'];

// make an mysql connection, make sure to edit this
mysql_connect("host", "user", "password"); // host = host name, user = database user, password = database password
mysql_select_db("database"); // database = mysql database name

// escape input from dangerous charachters
$user = htmlentities(mysql_real_escape_string($user));
}
else{
// else print "you have not submitted anything
die("You have not submitted anything.");
}
?>

Ok we are done with html and php part, now go to mysql: localhost/phpmyadmin if you are on localhost, go to your database and create a table named users with 2 fields:

And click go.

And click save.
Now lets move back to index.php
After $user = htmlentities(mysql_real_escape_string($user)); create a new line and add:
mysql_query("INSERT INTO users(name) VALUES('$user');
echo "Submitted.";

Thats it! Whole script of index.php should look:

<?php
// we get submitted data and check if user really submitted it
if(isset($_GET['user']){
$user = $_GET['user'];

// make an mysql connection, make sure to edit this
mysql_connect("host", "user", "password"); // host = host name, user = database user, password = database password
mysql_select_db("database"); // database = mysql database name

// escape input from dangerous charachters
$user = htmlentities(mysql_real_escape_string($user));

mysql_query("INSERT INTO users(name) VALUES('$user');
echo "Submitted."; 

}
else{
// else print "you have not submitted anything
die("You have not submitted anything.");
}
?>

Thanks for reading and dont forget to follow us or like on facebook :D

HTML Limit input and textarea charachters using maxlength

After a tutorial on using php tuo limit charachter length i decided to make one for html input fields.
It is an easy and simple tutorial, we will use maxlength
Lets move on:
<html>
<body>
<!-- the input field -->
<input type="text" maxlength="20">
<textarea maxlength="20"></textarea>
</body>
</html>
As you can se the input and textarea boxes are limited up to 20 charachters.
Short tutorial :) hope it may help someone :D