117048276952d6560f6c1180.56308843_3617e13b

HTML5 VS. NATIVE MOBILE APPLICATIONS – WHO DO YOU BACK?

117048276952d6560f6c1180.56308843_3617e13b

Generally, the answer is completely dependant on an individual project specification and brief although according to a recent Gartner report amongst 478 developers in North America and Europe, 22% of developers are developing hybrid apps, 24% on mobile web-applications and 41% on native app development such as iOS or Android specific applications.



Consequently, the heated topic often leaves developers opting for one over the other, mostly down to personal preferences. However, developers are shifting more towards the significance of striking a balance between the ability to monetise their applications whilst providing a high quality, easily-understandable and friendly user experience.

THE DIFFERENCE IN DEVELOPMENT

Developing native applications is generally considered much easier than finding the perfect balance on a responsive website that suits all types of devices. Languages and their supported IDE’s, such as Objective-C and XCode, make rapid development of native mobile applications much easier to accomplish and typically, developers don’t require much understanding of the underlying principles of the platform and its language.

Developers will often find that bug-fixing in native applications is easier than identifying issues on hybrid or HTML5-specific apps. This is mostly due to the complex debugging tools an IDE will provide you with that can pinpoint the exact root and cause of a bug. However, the major disadvantage in development is the fact that every application is native to its OS, device and platform, so developers often need to release multiple versions to accommodate the wide spread of devices.

In contrast, HTML5 developers will often take a different approach with the development. Typically, the developers are familiar with creating web technologies, giving them the advantage that they have a wider skill base to approach the task, without necessarily needing to learn a new IDE or programming language. Also, HTML5 mobile applications can run on any device or platform that has access to a web browser, immediately increasing the development reach – although – you may end up spending equally as much time testing your application – similar to native applications per device testing – you’ll need to cross-browser check your application. With there being an enormous amount of mobile and tablet devices, you’ll need to strike a balance on the devices you want to target and those you decide not to officially support.

DELIVERING USER EXPERIENCE TO GENERATE A REVENUE STREAM

If we look through a consumers perspective, monetisation and development are two different things entirely. If we take a game as an example, you’ll only be focusing initially on the visual appeal of the application and, once we have purchased the game, how easy it is to play. However, as a developer, you may set in stone additional ways your consumers can turn your app into a revenue stream – are you offering in-app purchases? If you’re using HTML5, how will you integrate the equivalent of in-app purchases to your users, what checkout will you integrate into, is there a charge?



With any application, you want to create something that’s visually appealing, powerful and has a look and feel that’s symbolic to your corporate branding – therefore the user interface (UI) design of your application is hugely important.

With native mobile applications, you have access to higher graphic rendering and better synchronisation that’ll often aid your consumers appeal knowing that the device they’re on can do more than a standalone static HTML5 web-application. Additionally, developing native mobile applications means consumers can take advantage of their devices hardware – you can integrate the camera, GPS, volume, search buttons, etc. directly into your application that can potentially update the UI. Of course this goes without saying, HTML5 has come a long way and developers have a batch of new API’s that allow them to access the devices battery, geolocation, though you’ll have to put the effect in to get these working on par with the native mobile application.

When it comes to HTML5, developers have the normal flexibility they have when designing websites. CSS3 allows you to control pretty much every aspect of your website, and, if it doesn’t support a selector you’re after you can always fallback to a Javascript/jQuery selector. However, if we are addressing games, HTML5 doesn’t provide the same level of sophistication we’d hope to implement (unless you get really dirty programming) although with HTML5 you can put together simple, streamline applications that are low in development cost, yet high in revenue. The less sophisticated an application design and development is, the more profit you’re likely to make and thus potentially the more preferable the option?

PERFORMANCE

Performance is always a huge factor to the success of any application. Consumers want responsive (in the aspect of load times and non-sluggish behaviour), adaptive and flexible applications that are able to handle a high load of requests – in case the person using the application gets ‘click happy’ – you don’t just want the application to crash and ungraciously handle the issues.

Depending on the type of application you’re looking to develop will assess whether or not you need access to an Internet connection which can be the downfall of most web-applications. How do you access it when you’re stuck in a mobile signal dead spot? Native applications will typically aggressively cache all their content and resources, meaning you’re able to continue using the application when you go offline and simply synchronise all your data when you re-connect either through 3G, 4G or Wi-Fi. However, as applications become more socially connected, both types of application will suffer under the wrath of needing an ‘always connected’ device – even with native applications, there is typically something happening in the background, some form of asynchronous update.

Another factor you’ll want to consider is that of memory and optimisation. You always want to develop any application in the strictest standard possible. You want to ensure you’re not leaking memory on native mobile applications, and ensure you’re not hogging shared memory on web-applications. Native applications such as iOS applications have a huge selection of tools and utilities that able you to debug and test your application for leaks and assignment issues. Thankfully, with HTML5 web-applications you tend to bi-pass this issue altogether, or at least they’re not as major as most tablets, laptops and PC’s will have more resources available.



Overall, it’s valid to say that both native and web applications have an equal share of pitfalls when it comes to performance so it simply comes down to a matter of preference and what you know you’ll be able to manage and refactor when an issue does arise.

A QUICK ROUNDUP

As unhelpful as it may seem, I believe a conclusion on the matter is entirely opinion based and therefore biased towards what any developer prefers. If you’re well-versed in Objective-C, C, C++ or Java if you’re not, you may want to learn Objective-C – then you’d most likely enjoy and thus prefer developing native applications. Whilst if you’re already a web designer or developer, you’ll tend to sway towards the HTML5 responsive web-application approach – after all, that’ll cut down your development and provide a platform that can be accessed on all devices that have access to a web browser.

WHAT NEXT?

Every great mobile application, whether HTML5 based or native to any platform, will require an API. We’ve put together some great articles on designing a REST API server for your mobile application and some programming guidelines for setting up and implementing OAuth2 in Objective-C (for iOS apps).

 Original article has been published at madebymagnitude
images

Step-by-Step PHP Tutorials for Beginners

PHP Tutorials for beginners

images

Introduction

Interested in creating your own website? Ever wondered how cool is it to have a website that has a log-in/log-out functionality? Want to learn how to Create, Read, Update or Delete(CRUD) records in a database? Have you lost track on your previous tutorials? Well, I’m going to teach you how to create one from scratch where in you will know every single details on how the code works. If you are new to back-end web development, this tutorial is for you. I’ll explain everything in detail so that you won’t have to research some particular methods being used. We won’t be using any frameworks to keep things simple. Also I won’t be focusing on the websites design since were after the functionalities though, it’s easy to implement the design. What will be doing is a simple item list when the users is logged in.




*Shameless plug*

You can also checkout my ASP.NET MVC 5 version for this one right here.

Pre-requisites

In this tutorial, we will be using some languages that will enhance our development. If you really don’t know any of the things I will mention, it’s ok. Just try to go with the flow. It’s just easy to comprehend them since I’m not into using advanced methods for this one. Off course since this is creating a back-end service for a website, you must know at least the very very very basics of the following:

  1. HTML/CSS – Off course this will never get off the list when it comes to web development. Why did I even bother place this? LOL.
  2. JavaScript – For a redirecting script. No jQuery needed for now
  3. mySQL – the most basic language for querying. We will be using this for our CRUD(Create, Read, Update, Delete) functionalities.

For the software, you will be needing the following:

  1. Text EditorSublime Text/Notepad++ will do. This will serve as our coding environment.
  2. XAMPP – This will be our web server. This is were we will be saving our website files and save our data to the database.
  3. Web Browser – You can use any browser for as long as it doesn’t eat much of your RAM.
Make sure to have those 3 installed. Do not proceed if your not done installing them. I already provided a hyperlink to make things faster.

For our agenda in this topic:

  1. Utilize CRUD statements in SQL – Create, read, update and delete records in a database.
  2. Simple authentication and security – Logging in and out, handling unauthorized users and restricting access.
  3. Simple time and date manipulation – Displaying time and date postings and monitoring your posts.
  4. Displaying public and private data – Simply display information for logged-in users only and for the public
  5. De-briefing and Summary – Final output and some notes. FAQ’s are also place here.

Topic Contents:

Note: In case you stopped on a certain part or want to search quickly , you can simply resume by pressing ctrl + f and look for the number where you last stopped

  1. Setting up your server

  2. Creating the public HTML Pages

  3. Creating the database and it’s tables

  4. Adding users to the database

  5. User log-in: Authentication

  6. Setting up the home page for Logged-in users and Logging-out

  7. Testing Page Security

  8. Adding data to the list – User Access Only

  9. Displaying data in the home page

  10. Editing Data

  11. Deleting data

  12. Displaying public data

  13. De-briefing and Summary

Make sure you follow chronologically. Don’t proceed without accomplishing the previous part not unless you know the code.

Some reminders before we start:

Note: If the picture seems unclear/blurry, you can click it to view it on it’s larger size. Also, pardon me for using images to display the codes rather than showing you a raw text because it can’t format properly on my WordPress subscription but don’t worry, I’ll be uploading the finished product on the end of this tutorial to double-check your work.

———-Real Tutorials Begin Here———-

1.) Setting up your server

Now that your all set and go, as the basics of programming goes, let’s start by creating a simple shoutout of“hello world” in our server.




First of, go to the directory where you installed your XAMPP (Commonly in C:\xampp). From there go to thehtdocs folder (Commonly in C:\xampp\htdocs) and create a folder named “MyFirstWebsite“.

1 - PHP101

From that part, you have now created a Local URL for your website. That folder will be used to supply in all website files (.html, .php, .css, .js, etc.). Open up your text editor and let’s get started!

I use sublime text as my text editor. If your using Notepad++ or any others, it’s ok. It’s not really a big factor but it’s just a preference on which one would you like to use.

What we will do is a basic HTML page and display “hello world” from the server using a basic PHP syntax. We then type the following syntax:

Hello World

<html>
    <head>
    <title>My first PHP Website</title>
    </head>
    <body>
        <?php
            echo "<p>Hello World!</p>";
        ?>
    </body>
</html>

Save the file to the “MyFirstWebSite” Folder and name it as “index.php“. (Directory as seen on the top part of the image)

Now that you have the file. Let’s now open your XAMPP control panel. In case it doesn’t appear on your desktop, it is located in your XAMPP folder as seen on the image:

Untitled

Untitled

Now that it’s there, Run your Apache and mySQL by clicking the “Start” button on the actions column. You should see a random PID(s) and the default port number. Apache is the name of our web server wherein it will handle all the files as well as serve as the communication to the web browser and MySQL is our database which will store all of our information.

Open up your web browser and in the address bar, type localhost. You should see the menu of your XAMPP.

If it’s the first time you run it, it will ask what language would you prefer, just simply pick and it will lead you to the menu. If you will noticed the directory is localhost/xampp, it’s where the default page leads you even if you type in localhost.

Untitled

If that appears, then it means that your XAMPP server is now running. Now let’s try running the website you just placed. Try typing localhost/MyFirstWebsite. It should be the same as the picture below.

Untitled




If you will notice that the URL is MyFirstWebsite, it is derived from the htdocs folder and it automatically reads files that are named “index”(Be it index.html, index.aspx, etc), which serve as the default page. Typinglocalhost/MyfirstWebsite/index.php is just the same. You can also create your custom name for the URL by simply renaming the folder but let’s just stick to MyFirstWebsite.

Note: If you don’t have a file named index and you entered the URL, you will receive an error 404 for not having the file on the server. If you do have different files that are not named index.<extention>, you have to specify the specific file name. E.x: localhost/MyfirstWebsite/page.php

2.) Creating the public HTML Pages

Next, let’s re-modify our website and add a registration link where our users can register as well as a Log-in page right after getting registered. Let’s modify our home page with the following code:

index.php

Untitled

<html>
    <head>
        <title>My first PHP Website</title>
    </head>
    <body>
        <?php
            echo "<p>Hello World!</p>";
        ?>
        <a href="login.php"> Click here to login 
        <a href="register.php"> Click here to register 
    </body>
</html>

As you can see, we only added 2 links which are for the Login and register. Let’s create the registration page first:

register.php

Untitled

<html>
    <head>
        <title>My first PHP Website</title>
    </head>
    <body>
        <h2>Registration Page</h2>
        <a href="index.php">Click here to go back<br/><br/>
        <form action="register.php" method="POST">
           Enter Username: <input type="text" name="username" required="required" /> <br/>
           Enter password: <input type="password" name="password" required="required" /> <br/>
           <input type="submit" value="Register"/>
        </form>
    </body>
</html>

As you can see, it’s just a basic form where the user can input his/her credentials. Now for the login page:




Hint: Just copy-paste the same code to make things faster.

login.php

Untitled

<html>
    <head>
        <title>My first PHP Website</title>
    </head>
    <body>
        <h2>Login Page</h2>
        <a href="index.php">Click here to go back<br/><br/>
        <form action="checklogin.php" method="POST">
           Enter Username: <input type="text" name="username" required="required" /> <br/>
           Enter password: <input type="password" name="password" required="required" /> <br/>
           <input type="submit" value="Login"/>
        </form>
    </body>
</html>

Basically it’s just the same code as from the register.php but the changes made were the ones underlined.

Click here for the complete login.php code

Try running localhost/MyFirstWebsite again and your pages should look like this:

index.php

Untitled

login.php

Untitled

register.php

Untitled

3.) Creating the database and it’s tables

Now that we have our basic page for the public. Let’s proceed to the database. First, typelocalhost/phpmyadmin. This will lead you to the phpmyadmin homepage:

localhost/phpmyadmin

Untitled

From there, go to the Databases tab located on top then from the text box in the middle, type first_db then click on create. Just leave the Collation as is.

Untitled

You have just successfully created your first database. Now from there, let’s create a table wherein we can register our users and display information. First, click on first_db located on the left side and create a table namedusers with 3 columns then click on Go.

Untitled

For the table’s structure, make sure to have the following fields then click on save:

  • Format: Column Name – Type – Length – Null Property – Other Properties
  • id – INT – N/A – Not Null – Auto Increment
  • username – varchar – 50 – Not null
  • password – varchar – 50 – Not null

Leave everything by default if not specified.

Untitled

Note: You need to scroll right for the auto_increment. I just edited the picture to fit the A_I field




Next, create another table named list with 7 columns and for the table’s structure:

  • id – INT – N/A – Not Null – Auto Increment
  • details – text – Not null
  • date_posted – varchar – 30 – Not null
  • time_posted – Time – Not null
  • date_edited – varchar – 30 – Not null
  • time_edited – Time – Not null
  • public -varchar – 5 – Not null

Untitled

4.)Adding users to the database

Now that we have our tables. Let’s move on to the fun part, getting your registration page into action. From yourregistration.php, add the following below the html codes:

register.php

Untitled

<html>
    <head>
        <title>My first PHP Website</title>
    </head>
    <body>
        <h2>Registration Page</h2>
        <a href="index.php">Click here to go back<br/><br/>
        <form action="checklogin.php" method="POST">
           Enter Username: <input type="text" name="username" required="required" /> <br/>
           Enter password: <input type="password" name="password" required="required" /> <br/>
           <input type="submit" value="Register"/>
        </form>
    </body>
</html>

Here’s the explanation to the code:

  • $_SERVER[“REQUEST_METHOD”] == “POST” – checks if the form has received a POST method when thesubmit button has been clicked. The POST method is created in the html from the method=”POST”. Clickhere for the form method reference.
  • $_POST[”] – gets the name coming from a POST method. This just simply gets the input based on the name from the form. In our case it’s username and password.
  • mysql_real_escape_string() – encapsulates the input into a string to prevent inputs from SQL Injections. This ensures that your strings don’t escape from unnecessary characters. Click here to learn more about SQL Injections.

Now try to go to your register.php and try to input anything then click on “Register”. In my case I placed in the username xtian and password as 123456. It should display the inputs below. Here’s my sample:

Untitled

On this part, you should have understood on how to get input from the form. Now to add it to the database. On your register.php, add the following code:

register.php

Untitled

<html>
    <head>
        <title>My first PHP Website</title>
    </head>
    <body>
        <h2>Registration Page</h2>
        <a href="index.php">Click here to go back<br/><br/>
        <form action="checklogin.php" method="POST">
           Enter Username: <input type="text" name="username" required="required" /> <br/>
           Enter password: <input type="password" name="password" required="required" /> <br/>
           <input type="submit" value="Register"/>
        </form>
    </body>
</html>

alert("Username has been taken!");</script>'; // Prompts the user
           Print '<script>window.location.assign("register.php");</script>'; // redirects to register.php
        }
    }

    if($bool)
    {
        mysql_query("INSERT INTO users (username, password) VALUES ('$username', 'password')"); // inserts value into table users
        Print '<script>alert("Successfully Registered!");</script>'; // Prompts the user
        Print '<script>window.location.assign("register.php");</script>'; // redirects to register.php
    }
}
?>

Click here for the complete register.php file

Here are the explanations to the code:

  • mysql_connect(“Server name”,”Server Username”,”Server Password”) – The syntax used to connect to our XAMPP server. localhost or 127.0.0.1 is the name of the server. The default username is root and no password for default.
  • mysql_select_db(“database name”) – Selects the database to be used.
  • or die(‘Message’) – Displays the error message if the condition wasn’t met.
  • mysql_query(‘sql query’) – does the SQL queries. Click here for some SQL query samples. The again, i’m not here to discuss about mySQL.
  • mysql_fetch_array(‘query’) – fetches all queries in the table to display or manipulate data. It is placed in a while loop so that it would query all rows. Take note that only 1 row is queried per loop that’s why a while loop is necessary.
  • $row[‘row name’] – the value of the column in the current query. It is represented as an array. In our case $row is the name of the variable for our row in the loop.

Try the inputs that you have made earlier and see what happens. It should prompt that you have successfully registered. Try going to phpmyadmin and see your users table:

Untitled

Congratulations! Now you know how to add data into the database with data validations.

5.)User log-in: Authentication

Now for the login page. Let’s create a new file called checklogin.php. The reason is going back to our login.php,our form has an action called “checklogin.php”, particularly <form action = “checklogin.php” method= “POST”>. If you will notice on the register.php, it’s also on register.php because the back-end is done on the same file as well.

Let’s now code the checklogin.php with the following syntax:

checklogin.php

Untitled

<?php
    session_start();
    $username = mysql_real_escape_string($_POST['username']);
    $password = mysql_real_escape_string($_POST['password']);
    $bool = true;

    mysql_connect("localhost", "root", "") or die (mysql_error()); //Connect to server
    mysql_select_db("first_db") or die ("Cannot connect to database"); //Connect to database
    $query = mysql_query("Select * from users WHERE username='$username'"); // Query the users table
    $exists = mysql_num_rows($query); //Checks if username exists
    $table_users = "":
    $table_password = "";
    if($exists > 0) //IF there are no returning rows or no existing username
    {
       while($row = mysql_fetch_assoc($query)) // display all rows from query
       {
          $table_users = $row['username']; // the first username row is passed on to $table_users, and so on until the query is finished
          $table_password = $row['password']; // the first password row is passed on to $table_password, and so on until the query is finished
       }
       if(($username == $table_users) && ($password == $table_password))// checks if there are any matching fields
       {
          if($password == $table_password)
          {
             $_SESSION['user'] = $username; //set the username in a session. This serves as a global variable
             header("location: home.php"); // redirects the user to the authenticated home page
          }
       }
       else
       {
        Print '<script>alert("Incorrect Password!");</script>'; // Prompts the user
        Print '<script>window.location.assign("login.php");</script>'; // redirects to login.php
       }
    }
    else
    {
        Print '<script>alert("Incorrect username!");</script>'; // Prompts the user
        Print '<script>window.location.assign("login.php");</script>'; // redirects to login.php
    }
?>

Click here for the complete checklogin.php code

Here’s the explanation of the code (Some are explained earlier so there’s no need to reiterate):

  • session_start() – Starts the session. This is usually done on authenticated pages. The reason why we used this is because this is required for the $_SESSION[”].
  • mysql_num_rows() – This returns an integer. This counts all the rows depending on the query.
  • $_SESSION[‘name’] – Serves as the session name for the entire session. This is relatively similar to public variables in object-oriented programming. We will be using this for validating whether the user is authenticated or not.

Now try to test your input with a wrong username and password. It should return the desired prompt. After testing, try inputting the correct values. It should lead you to home.php.

Note: home.php does not exist yet so it will produce an error 404.

6.)Setting up the home page for Logged-in users and Logging-out

Now that were authenticated, let now create our home page (home.php) with this following syntax:

home.php

Untitled

<html>
    <head>
        <title>My first PHP Website</title>
    </head>
   <?php
   session_start(); //starts the session
   if($_SESSION['user']){ // checks if the user is logged in  
   }
   else{
      header("location: index.php"); // redirects if user is not logged in
   }
   $user = $_SESSION['user']; //assigns user value
   ?>
    <body>
        <h2>Home Page</h2>
        
<hello>! 
 <!--Display's user name-->
        <a href="logout.php">Click here to go logout</a><br/><br/>
        <form action="add.php" method="POST">
           Add more to list: <input type="text" name="details" /> <br/>
           Public post? <input type="checkbox" name="public[]" value="yes" /> <br/>
           <input type="submit" value="Add to list"/>
        </form>
    <h2 align="center">My list</h2>
Id Details Edit Delete

</body> </html>




Here’s the explanation to the code:

  • session_start() – Basically starts the session. Required for $_SESSION[”].
  • header() – redirects the user.

Try refreshing your browser and it should look like this:

Untitled

Now that we have our home, let’s try creating our logout.php and test if the user’s session is off. What we would do is that if the user is logged-out, the user shouldn’t access home.php. So here’s the simple syntax to logout.php:

logout.php

Untitled

<?php
    session_start();
    session_destroy();
    header("location:index.php");
?>

The syntax is simple. session_destroy() simply remove’s all session’s meaning, the value of $_SESSION[”] will be removed and header() will simply redirect it to the home page.

7.)Testing Page Security

Now try refreshing home.php and click on logout. Now try Clicking on the back button of your browser and see what happens:

Untitled

As you can see, it doesn’t direct you to home.php because you are logged-out. Now for the second test, try manually inputting the address localhost/MyFirstWebsite/home.php. The same case should also happen. Since were logged-out, even a manual input of the address doesn’t access an authorized page. What we have done is a simple security mechanism wherein we redirect back unauthorized users into a public page.

Now try logging in again and let’s go back to home.php.

8.) Adding data to the list – User Access Only

In our next step, let’s create the adding of item’s to the list. As you will notice from the form, it is written as <formaction=”add.php” method=”POST”>, meaning our http post request goes to add.php and with that, we create our add.php with the following syntax:

add.php

Untitled

<?php
    session_start();
    if($_SESSION['user']){
    }
    else{ 
       header("location:index.php");
    }

    $details = mysql_real_escape_string($_POST['details']);
    $time = strftime("%X"); //time
    $date = strftime("%B %d, %Y"); //date

    Print "$time - $date - $details";
?>

Take note that this ain’t our official add.php syntax yet, I’m just going to demonstrate the time and date syntax and getting your input.

Now go back to your home.php and try to add an item then click on “Add to list”.

Untitled

This should be the following output on add.php:

Untitled

As you can see, we have our current time, date, and your input. Here’s the explanation to the code:

  • strftime() – get’s the time based on what format your placed.
  • %X – current system time.
  • %B – current system month.
  • %d – current system day.
  • %Y – current system year.

Now let’s modify our add.php and add the following data into the database together with the data from the checkbox:

add.php

Untitled

<?php
    session_start();
    if($_SESSION['user']){
    }
    else{ 
       header("location:index.php");
    }

    if($_SERVER['REQUEST_METHOD'] == "POST")
    {
       $details = mysql_real_escape_string($_POST['details']);
       $time = strftime("%X"); //time
       $date = strftime("%B %d, %Y"); //date
       $decision = "no";
   
       mysql_connect("localhost","root","") or die(mysql_error()); //Connect to server
       mysql_select_db("first_db") or die("Cannot connect to database"); //Conect to database
       foreach($_POST['public'] in $each_check) //gets the data from the checkbox
       {
          if($each_check != null){ //checks if checkbox is checked
             $decision = "yes"; // sets the value
          }
       }

       mysql_query("INSERT INTO list(details, date_posted, time_posted, public) VALUES ('$details','$date','$time','$decision')"); //SQL query
       header("location:home.php");
    }
    else
    {
       header("location:home.php");
    }
?>

Click here for the complete add.php code

Here’s a little explanation:

  • foreach() – gets the value of the checkbox. As you will notice, the checkbox format in the form isname=”checkbox[]”. To get data from checkbox, it has to be instantiated as an array. Doing so would make it possible to get data from multiple checkboxes.

Now try entering some data and click “Add to list”. In my case, I’ll just use fish again. Let’s go to our phpmyadmin and let’s see if the data has been added. Here’s the result of my case:

localhost/phpmyadmin

Untitled

9.)Displaying data in the home page

Now that we have seen that the data has been successfully added. Let’s now display the data in our home page. Let’s modify our home.php and let’s add some columns for the date:

home.php

Untitled

<html>
    <head>
        <title>My first PHP Website</title>
    </head>
   <?php
   session_start(); //starts the session
   if($_SESSION['user']){ // checks if the user is logged in  
   }
   else{
      header("location: index.php"); // redirects if user is not logged in
   }
   $user = $_SESSION['user']; //assigns user value
   ?>
    <body>
        <h2>Home Page</h2>
        
<hello>! 
 <!--Display's user name-->
        <a href="logout.php">Click here to go logout</a><br/><br/>
        <form action="add.php" method="POST">
           Add more to list: <input type="text" name="details" /> <br/>
           Public post? <input type="checkbox" name="public[]" value="yes" /> <br/>
           <input type="submit" value="Add to list"/>
        </form>
    <h2 align="center">My list</h2>
    ';
             Print '";
             Print '";
             Print '";
             Print '";
             Print '';
             Print '';
             Print '';
          Print '';
       }
    ?>
Id Details Post Time Edit Time Edit Delete Public Post
‘. $row[‘id’] . “ ‘. $row[‘details’] . “ ‘. $row[‘date_posted’] . ” – ” . $row[‘time_posted’] . “ ‘. $row[‘date_edited’] . ” – ” . $row[‘time_edited’] .” edit delete ‘. $row[‘public’] . ‘

</body> </html>

The explanation to the added code is quite simple. It just basically displays the data coming from the while loop. It has been explained earlier in our tutorial so I believe that by this point, you should have understood the process of getting the data in the query. Going back to the browser, try refreshing your home.php and see what happens:

Untitled

It should now display that data. From our CRUD checklist, we have now accomplished Create and Read. Next is to update(edit) and delete information. If you will notice we have edit and delete links displayed on the column. I’ll add another data to the list named “tuna” to have another example and this time, it’s privacy to no:

Untitled

10.) Editing Data

Let’s now try editing our data and to do that we will use a new functionality called “GET“. With our previous methods, we have been using POST as our http request but this time, let’s use GET for editing and deleting records. To start of, let’s modify our home.php and add a little code to 2 columns:




home.php

Untitled

<html>
    <head>
        <title>My first PHP Website</title>
    </head>
   <?php
   session_start(); //starts the session
   if($_SESSION['user']){ // checks if the user is logged in  
   }
   else{
      header("location: index.php"); // redirects if user is not logged in
   }
   $user = $_SESSION['user']; //assigns user value
   ?>
    <body>
        <h2>Home Page</h2>
        
<hello>! 
 <!--Display's user name-->
        <a href="logout.php">Click here to go logout</a><br/><br/>
        <form action="add.php" method="POST">
           Add more to list: <input type="text" name="details" /> <br/>
           Public post? <input type="checkbox" name="public[]" value="yes" /> <br/>
           <input type="submit" value="Add to list"/>
        </form>
    <h2 align="center">My list</h2>
    ';
             Print '";
             Print '";
             Print '";
             Print '";
             Print '';
             Print '';
             Print '';
          Print '';
       }
    ?>
Id Details Post Time Edit Time Edit Delete Public Post
‘. $row[‘id’] . “ ‘. $row[‘details’] . “ ‘. $row[‘date_posted’] . ” – ” . $row[‘time_posted’] . “ ‘. $row[‘date_edited’] . ” – ” . $row[‘time_edited’] .” edit delete ‘. $row[‘public’] . ‘

</body> </html>

If you have noticed, we only added URL parameter for the edit and delete links namely id. We will be using this later to handle thee data. The reason why we use id is because it’s a unique identifier. It is possible for the person to have enter the same data so it’s not recommended to use the details as a mean for manipulation later on.

Try putting your cursor into the edit link and you will see the value of the id onthe lower left:

Untitled

Now that we have that, let’s try creating our edit.php and let’s try to get the data from there:

edit.php

lines 1 – 42

Untitled

<html>
    <head>
        <title>My first PHP Website</title>
    </head>
   <?php
   session_start(); //starts the session
   if($_SESSION['user']){ // checks if the user is logged in  
   }
   else{
      header("location: index.php"); // redirects if user is not logged in
   }
   $user = $_SESSION['user']; //assigns user value
   ?>
    <body>
        <h2>Home Page</h2>
        
<hello>! 
 <!--Display's user name-->
        <a href="logout.php">Click here to go logout</a><br/><br/>
        <a href="home.php">Return to home page</a>
    <h2 align="center">Currently Selected</h2>
     0)
           {
              while($row = mysql_fetch_array($query))
              {

Some explanations to the code:
  • !empty() – a method that checks if the value is not empty. The syntax can be reversed if you want to check if it’s empty by removing the explanation point (!), therefore it’s syntax would be empty().
  • $_GET[”] – Used to get the value from the parameter. In our case, we use id as our URL parameter so the syntax would be $_GET[‘id’].
  • $id_exists – the variable that checks whether the given id exists.
  • $_SESSION[‘id’] – we place the value of id into session to use it on another file.

lines 42 – 76 Untitled

Print "<tr>";
   Print '

“; Print ‘”; Print ‘”; Print ‘”; Print ‘”; Print “”; } } else { $id_exists = false; } } ?>

Id Details Post Time Edit Time Public Post
‘ . $row[‘id’] . “ ‘ . $row[‘details’] . “ ‘ . $row[‘date_posted’] . ” – ” . $row[‘time_posted’].” ‘ . $row[‘date_edited’] . ” – ” . $row[‘time_edited’].” ‘ . $row[‘public’] . “

<br/> Enter new detail: <input type=”text” name=”details”/> <br/> public post? <input type=”checkbox name=”public[]” value=”yes”/> <input type=”submit” value=”Update List”/> </form> ‘; } else { <h2 align=”center”>There is not data to be edited.</h2> } ?> </body> </html> Click here for the complete edit.php code (Only refer to the front-end part. Github Sourced)

The reason why we are putting the variable $id_exists is because in case the user modifies the URL parameter into a non-existing number(in our case we only have 2 rows/id’s), we can display a prompt in which the data doesn’t exist.




Now try clicking the edit link into the first row and it should display like this:

Untitled

Complete edit.php code:

<html>
    <head>
        <title>My first PHP Website</title>
    </head>
   <?php
   session_start(); //starts the session
   if($_SESSION['user']){ // checks if the user is logged in  
   }
   else{
      header("location: index.php"); // redirects if user is not logged in
   }
   $user = $_SESSION['user']; //assigns user value
   ?>
    <body>
        <h2>Home Page</h2>
        
<hello>! 
 <!--Display's user name-->
        <a href="logout.php">Click here to go logout</a><br/><br/>
        <a href="home.php">Return to home page</a>
    <h2 align="center">Currently Selected</h2>
     0)
           {
              while($row = mysql_fetch_array($query))
              {
                  Print "";
                     Print '";
                     Print '";
                     Print '";
                     Print '";
                     Print '";
                  Print "";
               }
            }
            else
            {
               $id_exists = false;
            }
         }
      ?>
Id Details Post Time Edit Time Public Post
‘ . $row[‘id’] . “ ‘ . $row[‘details’] . “ ‘ . $row[‘date_posted’] . ” – ” . $row[‘time_posted’].” ‘ . $row[‘date_edited’] . ” – ” . $row[‘time_edited’].” ‘ . $row[‘public’] . “

<br/> Enter new detail: <input type=”text” name=”details”/> <br/> public post? <input type=”checkbox name=”public[]” value=”yes”/> <input type=”submit” value=”Update List”/> </form> ‘; } else { <h2 align=”center”>There is not data to be edited.</h2> } ?> </body> </html> Click here for the complete edit.php code (Only refer to the front-end code. Github sourced)

Let’s try modifying the URL parameter by removing ?id=1 and now should result tolocalhost/MyFirstWebsite/edit.php and it should result like this:

Untitled

Now try putting a value that is greater than the id number, in our case, let’s try 5 and it should result like this:

localhost/MyFirstWebsite/edit.php?id=5

Untitled

Now that we secured our URL parameters, lets now place the edit syntax. Let’s go back to edit.php and add some following code to update the information to the database:

edit.php

Untitled

<?php
   if($_SERVER['REQUEST_METHOD'] == "POST")
   {
      mysql_connect("localhost", "root", "") or die (mysql_error()); //Connect to server
      mysql_select_db("first_db") or die ("Cannot connect to database"); //Connect to database
      $details = mysql_real_escape_string($_POST['details']);
      $public = "no";
      $id = $_SESSION['id'];
      $time = strftime("%X"); //time
      $date = strftime("%B %D, %Y"); //date

      foreach($_POST['public'] as $list)
      {
         if($list != null)
         {
            $public = "yes";
         }
      }
      mysql_query("UPDATE list SET details='$details', public='$public', date_edited='$date', time_edited='$time' WHERE id='$id'");
      header("location:home.php");
   }
?>

Click here for the complete edit.php code (Github)

Now try refreshing and go back to the edit page. Let’s try a different data. In my case, I’ll be using “Salmon” and change it to non-public:

edit.php?id=1

Untitled

Go ahead and click Update list and you should be redirected to home.php and see the updated list.

Untitled

Now, we have a time and date of edit displayed on the Edit Time column. Our privacy has been set now to non-public and the value has changed into Salmon.

Congratulations! We have now done the edit function!

11.) Deleting data

Looking back to the CRUD, we have now done creating(adding), reading(displaying), and updating(editing) records. Now for the last part, deleting records. For this part it’s just relatively the same as what we have done on edit but what differs is just the SQL statement. Instead of using UPDATE, we will be using the DELETE syntax. In deleting records, we have to prompt people making sure that they’d really want to delete the record so we will be adding a little javascript in home.php. To do that, let’s modify our code and add some int home.php




home.php

Untitled

<table border="1px" width="100%">
    
       Id
       Details
       Post Time
       Edit Time
       Edit
       Delete
       Public Post
    
    ';
             Print ''. $row['id'] . "";
             Print ''. $row['details'] . "";
             Print ''. $row['date_posted'] . " - " . $row['time_posted'] . "";
             Print ''. $row['date_edited'] . " - " . $row['time_edited'] ."";
             Print '<a href="edit.php?id='.$row['id'].'">edit';
             Print '<a href="#" nclick="myfunction('.$row['id'].')">delete</a>';
             Print ''. $row['public'] . '';
          Print '';
       }
    ?>



<script>
    function myFunction(id)
    {
       var r = confirm("Are you sure you want to delete this record?");
       if(r == true)
       {
          window.location.assign("delete.php?id=" + id);
       }
    }
</script>

Click here for the complete home.php code

As you have noticed, we edited the link for the delete. We changed href into “#” and added and onclick function for Javascript for the method of myFunction and inside it’s parameter is the id of the row. Below the table written is the Javascript syntax wherein it prompts the user if he/she want’s to delete the record. If the user confirms, the page then directs to delete.php together embedded with the value of the id. Now let’s create delete.php and here’s the following syntax:

delete.php

Untitled

<?php
    session_start(); //starts the session
    if($_SESSION['user']){ //checks if user is logged in
    }
    else {
       header("location:index.php"); //redirects if user is not logged in.
    }

    if($_SERVER['REQUEST_METHOD'] == "GET")
    {
       mysql_connect("localhost", "root", "") or die(mysql_error()); //connect to server
       mysql_select_db("first_db") or die("cannot connect to database"); //Connect to database
       $id = $_GET['id'];
       mysql_query("DELETE FROM list WHERE id='$id'");
       header("location:home.php");
    }
?>

Click here for the complete delete.php code

The code is just simple and the syntax are also the ones that we used before but noticed we have changed our request method into GET. We are now using the GET request since we have a URL parameter. Now try refreshinghome.php and let’s try deleting the first record. This should be the result:

Prompting:

Untitled

End-result:

Untitled

Congratulations! Now we have now officially completed our CRUD statements!

12.) Displaying public data

Now for the last part, displaying public data. We will be displaying data that’s been set to yes in our index.php, in which is a page for non-authenticated users. It’s very simple. We just have to edit our index.php and add a some php code and table. Here’s our updated index.php:

index.php

Untitled

Now log-out and see your default page. It should look something like this:

Untitled

Note: You won’t see the data yet since we haven’t set any information to public.

Now let’s log-in again and this time, let’s add some more data. In my case I’ve added the following:

  • Salad – public
  • Corn – non-public
  • Pasta – public
  • Chicken – public
  • Spaghetti – non-public

With a total of 6 data’s with 3 of each privacy setting:

home.php

Untitled

Now let’s log-out and see our default page(index.php). It should now look like this:

index.php

Untitled

As you can see, it only display’s data that are set to public.

Congratulations! We have finally finished the tutorials for this session!

13.) De-briefing and Summary

In the end, you should have the following files:

Untitled

As I mentioned earlier, I’ll be uploading the finished product. Click here

I also uploaded the sql file for the database in case you want to use the exact data that I have. To import the sql file, you can just simply click on export and select the sql file but make sure to create the database first. If you like, I can create a separate blog for that. Just let me know in the comments section.

Anticipated questions

Here are the questions that I think you will be asking. I tried to anticipate these to avoid confusions:

  • Whenever I register a new user, the same list appear. I was expecting for each different user, there would be a separate list for them. Did I do something wrong?

That’s actually a good question. As you can see, I’m only teaching BASIC CRUD functionalities, authentication, and security not a membership system. Creating a separate list per user requires a separate table for each of them. So the logic behind it is for each time after you insert data, you will insert it in another table and have it relationships to one another. You can use the CREATE syntax for creating a separate table for the user which goes something like this:

Create table $username (column1 int auto_increment, column2 varchar(50), etc…)

You can click here for the Create table syntax.

The reason why I didn’t do that part is because your gonna have to do a lot of querying and it would make my code look complicating which can consumes a lot of time developing it so it’s definitely out of my scope. It would be better if you just try it out yourself and figure out the way. After all, everything you need is already in this blog.

  • Would it be easier to use master pages? Because i’ve noticed you had to re-write the server and database connection all over again for each page

Yes, it is easier to use master pages. The reason why I didn’t use it is for our readers to easily understand the logic behind it. Maser pages can make it a bit confusing for starters.

  • Why not use a framework? I bet that would look neat and easy.

Then again, I mentioned in the title Creating your First PHP Program FROM SCRATCH. It’s nice to start of from nothing that from a “template” so that our reader would know the code by heart.

  • I know that this is might be an old way of developing PHP. I’ve heard that there are new features released.

I only presented based on my mastery. I’ve been working with PHP for a long time now and I might not heard about the new features. If you think the new one makes it look good then try it out then.

  • Why not create a separate file for the CSS and Javascript?

Simple, i’m only demonstrating you about the functionalities. Were more on the back-end code rather than the front-end. I really didn’t focused on the design. If you ask how to design your code with the PHP, well it’s as easy as styling a regular HTML file.

Well I guess that concludes everything. Thanks guys I hope you learned something from this topic.

Original article has been published at Code project

 

 

html5-and-css3-642x321

10 Great HTML5 and CSS3 Tutorials To Master Web Development

html5-and-css3-642x321HTML5 is the latest version of the amazing markup language. It’s a term for the next generation of web apps, how functionality will be expanded with better markup HTML, better style CSS, and better interactivity JavaScript.

HTML5 was introduced in order to support various features that the modern day websites require. To begin with HTML5 supports the multimedia; in fact this language support both audio and video files to be played in a browser. Furthermore HTML5 offers support for canvas areas like interactive animated infographic.



On top of this, HTML5 supports the Geolocation API to identify user’s location and allows you to add valid data attributes, which helps in storing the data without affecting the web page UI. HTML5 made a breakthrough by allowing web applications to store data in the browser.

These data attributes can be added in a hidden manner from the user and can be later used by JQuery or your JavaScript functions.

Have a look at these step by step tutorials to learn and handle HTML5 and CSS3 markup languages.

1) How to build HTML5/CSS3 Webpages

Nowadays web developers are trying to build highly creative websites that capture the attention of visitors. They are many rooms to explore to understand the new features in HTML5 and CSS3. In this guide you will figure out the basic structure of the HTML5 and CSS3 markup languages, so you will have the skills and the ability to make compelling and beautiful web pages.

guide2

2) HTML5 Cheat Sheet

Web developers often use HTML and CSS Cheat sheet during their work. For frontend development, cheat sheets are especially helpful as most of us cannot commit every snippet and tag to memory. This cheat sheet is a good reference aid for your work because it’s a beautiful visual grid that contains a list of all HTML5 tags and of their related meaning.

html sheet2

3) How to Code a Homepage Template with HTML5 and CSS3

This tutorial has been created to guide you through the process of converting one of a popular PSD homepage template on Media tool into fully coded HTML and CSS. In this tutorial you will learn from setting up the folder structure, exporting the assets dissecting and adding the CSS styles.

simply4

4) Wrapping Content In Shapes With CSS3

CSS Shapes allow web designers to wrap content around custom paths, like circles, and ellipse thus breaking free from the constraints of the rectangle. It will also help you to rapidly create magazine-quality layouts on web pages, with little PhotoShop trickiness required. If you want to wrap your content in a custom shape, but you don’t know how to do it then here is a tutorial to learn the tricks.



magazine-layout2

5) Create Cool Image Captions with CSS3

In this tutorial we will show you how to create a cool image captions with various transitions using CSS3 with a stylish Box style effects that give an awesome look to your website. With CSS3 you can make really nice effects, no need to implement jQuery for that.

caption

6) HTML5 : Positioning with Geolocation

The Geolocation API of HTML5 helps in identifying the user’s location, which can be used to provide location specific information to the user. There are many techniques used to identify the location of the user. In this tutorial you will learn the Geolocation capabilities of HTML5 and the basic principles needed to take advantage of them in your next HTML5 app.

Geolocation-API

7) Turn Your Images Into Polaroids with CSS3

Magical things can be done by combining various CSS properties, especially when some of the new CSS3 tricks are thrown into the mix. Through a combination of browser-specific CSS (2 and 3) integration and some basic styling you will learn how to turn a regular old images into cool looking Polaroid style images.



images-polaroids-final

8) Prism Effect Slider with Canvas

This tutorial will teach you how to construct a simple slider with prism effect. You will be using HTML5 and a plain JavaScript.

prism effect

9) Responsive CSS Timeline with 3D Effect

In this tutorial we will show you how to create an experimental CSS-only timeline with a 3D effect. The idea is to expand a content area when the associated radio input is selected.

3DTimeline

10) Creating a WordPress Theme From Static HTML

In this tutorial you will learn how to create a WordPress Theme from Static HTML and CSS files. You will learn how to create the template files, how to prepare your HTML and CSS files for WordPress, ensuring the structure would work, the valid code and the correct classes were being used. This article is part of a series called creating a WordPress theme from static HTML.



WordPress-HTML5

Original article has been published at designhook

diffuse-shadow-UIs-642x321

10 Fresh Examples of Diffuse Shadow UIs

It seems like some of web design trends aren’t going anywhere soon. We’ve seen Material Design initiation and evolution, advanced animations and microinteractions, vibrant color schemes, beautiful typography, great use of minimalism, new responsive design technique and tools and much more interesting stuff. We also noticed a new trend that is making its way through web design community: diffuse shadow design.diffuse-shadow-UIs-642x321




To better understand and analyze this hot design trend, we’ve comprised a list of 10 fresh UIs with diffuse shadows. Let’s have a look:

Dribbble shots UI by Worawaluns

Dribbble-shots-UI

IKEA Get Growing! by Jason Zigrino

IKEA-Get-Growing

Customize Product by Goutham

customize-product

Movie Streaming by Dwinawan Hariwijaya

Movie-Streaming

Nike Product Page by Ilja Miskov





Nike-Product-Page

Calling Card by Willionaire

calling-cards

Book Store Website by Dwinawan Hariwijaya

Book-Store-Website

Fashion App by Willionaire

Fashion-App

Calendar by Goutham

calendar

Paperpillar Studio Landing Page by Ghani Pradita





Studio-Landing-Page
Have you spotted some other cool examples? Let us know by inserting a link in the comments. Cover image source.
Original article has been published at designhook

28786.pic

The 12 Best and Worst Logo Redesigns of 2015

As we enter into the final few months of the year, some people like to reflect on what they’ve accomplished and how they’ve grown. Me? I’m a logo nerd, so instead of self reflection, I like to look back and think about which brands have changed. Some of the biggest brands in the world updated their logos this year and as always, the reviews are pretty mixed. Let’s take a look.

Be sure to check out our list of the best and worst logo redesigns from 2015 as well.

1. CareerBuilder

Let’s start this off with a bang. CareerBuilder might win the prize for the most universally hated new logo of 2015. Their old logo was a fairly simple, condensed wordmark with a nice color scheme. By contrast, their new logo is somewhat of a mess of colors, icons, typography styles and conflicting ideas.



logos

Reactions

A poll on UnderConsideration allowed respondents to vote on whether the new logo was “Great,” “Fine,” or “Bad.” 93% voted “Bad” for the icon and 89% voted “Bad” for the wordmark (each question had just under 900 votes total). The reactions on Twitter were about the same:

What Happened?

It’s impossible to say for certain what made this redesign go so wrong, but my guess is that it’s a classic example of a company simply expecting way too much from a logo and attempting to pack it so full of meaning that it just becomes cluttered and confusing. The list of things that the logo is meant to represent is pretty long:

  1. The matching of the right talent with the right opportunity
  2. Actionable intelligence and customized insights
  3. The smooth flow of data between systems and platforms
  4. Boldness
  5. Motivating
  6. Dependable
  7. Trustworthy
  8. Professional
  9. “The mark is intended to flip to emphasize the ‘T’ when referring to CareerBuilder’s pre-hire platform components, Talentstream Technologies.”

The creative director on the project even alludes to this idea of too much complexity in her post on the logo: “Yes, this is a lot to include in a single logo. The project constraints, however, called for this level of complexity, requiring key inspirations be equally represented to highlight the company’s transformation.”

Translation: the people in charge wanted too much from one logo.

2. Verizon

Verizon’s logo redesign is kind of the opposite of CareerBuilder’s. It’s a prime example of a strong trend that you’ll see throughout this post and across many top brands. Last year, logo design went flat. This year, designers are going much further than killing gradients and shadows, they’re killing everything. Graphics? Out. Serifs? Who needs ’em? Helvetica Bold? Yes please.

Verizon’s original logo was pretty dynamic. The italics and zooming red lines gave it a sense of motion and excitement. The new one is pretty plain by comparison, which isn’t necessarily a bad thing.

logos

I’ve actually always hated the original and definitely agree that it needed an update. When I look at the new one though, it’s hard to fight that sense of being disappointed in something so generic (even though that’s probably exactly what they need).

Reactions

Reactions were a bit mixed for this one with plenty of people chiming in on all sides. The average response is somewhere between “meh” and “better…” Gizmodo has this to say about the new design:

“The new logo is not particularly interesting—it’s part New York City subway, part nuGap, part check this box to accept terms & conditions. But who cares?”

3. Google

This is the one you’ve been waiting for. I’m not sure any logo redesign in history has received as much press, social media coverage, and debate as Google’s recent overhaul. Here again we see the “undesign” trend going strong.

logos

Personally, I’m a bit sad to see those serifs go and I’m always hesitant to praise any logo design that feels like someone opened Photoshop, picked a font, typed a word, and called it a day. That being said, this new logo grew on me pretty quickly and I’m confident that in five years I’ll look back and think the old version looks dated and awful.




If anyone can argue that they need a simple, timeless, sans-serif wordmark, I think it’s the company that is known for bringing the Internet to the world as a bunch of plain text results on a white page. The new logo is clean and straightforward, with just a little playful disrespect (that’s the part that’s driving typography designers nuts). Now that it’s had some time so sit with me, I really think it nearly perfectly embodies Google as a company.

Reactions

Medium has definitely become the place for thoughtful design posts and critiques, and its faithful users have been cranking out Google logo reviews at full blast.

Gerry Leonidas: “That the logo went from a flawed but characterful modulated style all the way to a geometric sans suggests that the branding agency had neither good ideas, nor typographic expertise.”

Simon Darby: “I think I speak for most of the world, when I say the new logo is out of balance by just one character. The second ‘g’ looks like it was created by a separate design and development team.”

WebDesignerDepot: The new design is a vast improvement aesthetically, but it’s unlikely it will stand the test of time because it’s too now, too of the moment. This is Google’s 2015–2016 logo.

4. Facebook

In theory, Facebook updating their logo is a situation that should be every bit as explosive as the Google change. Any time Facebook changes the slightest thing, literally millions of users threaten revolt and exclaim their undying love to the previous layout (which they hated when it rolled out too).

Facebook played it fairly safe though with a gentle refining that likely went completely unnoticed by 90% of the 1.5 billion people using the site.

logos

Once again, we see a brand abandoning any notions of a unique identity by smoothing out all the quirks and personality present in their logo. The 2015 logo mantra is, without a doubt, “the plainer the better.”

The old logo definitely had some quirkiness to it, but it gave it character. There were some nice touches that I really miss, such as the interplay of the slants on the “f” and “a”.

logos

Confusingly, the new logo keeps the slanted “f”, but without the accompanying “a” for balance, it doesn’t really make sense. Why keep the awkward slant?
logos

Reactions

A lot of the tweets about Facebook’s new logo were aimed at simply getting people to notice the change.

View image on Twitter

View image on Twitter

View image on Twitter

View image on Twitter

5. Life is Good

If you live in the U.S., Life is Good is a brand that you’re probably familiar with, even if you don’t know it. From t-shirts to Jeep stickers, you’ve no doubt seen these happy little stick figures chilling out or engaging in various outdoor activities:

logos

As you can see, this is a brand that is absolutely built on a fun, messy aesthetic. Even such an openly wacky brand couldn’t resist the lure of the 2015 undesign trend. They’ve traded in their messy text and are trying to look more like just about everyone else with a bold sans-serif typeface.

logos

Obviously, their old logo is kind of ugly, but it was sort of an intentional ugly that played up the friendly aspect. The new logo admittedly attempts to retain a bit of this personality with the messy circle and heavily rounded text.

Personally, I really like the imperfect circle and the new color scheme. They’re both a big improvement. I do find myself wishing the typography honored the old brand a bit more though.

Here’s what the Life is Good Twitter account had to say about the “optimistic” new logo.

This one received some pretty brutal ratings on UnderConsideration with over 77% of respondents putting it in the “bad” category. A cursory read through reveals that most (but not all) tweets about the update were negative as well.

6. Los Angeles Clippers

The new Clippers logo drops the serifs, but they’ve done anything but simplify the rest. The old logo has a nice, compact badge quality to it with a retro vibe that’s attractive without feeling ancient. Conceptually, it’s pretty simple: a flying basketball with some text over it.




By contrast, the new logo has quite a few things going on. In addition to the super condensed and slightly distorted Clippers text, there’s the basketball with the “LAC” in it. The big lines under the ball give it a sense of motion, like it’s bouncing. But it’s not just a bouncing basketball, it’s also cleverly styled to look like a basketball court.

logos

I actually really like all the ideas behind the various pieces new logo without necessarily loving the end result as a whole. It’s not terrible by any means, but I think some further refinement could’ve made it great.

Reactions

I’ll be honest, I laughed at the new IHOP logo when I first saw it. It felt like some creepy clown face concept that just went all wrong. That being said, this one has really grown on me. Now when I look at it, it feels happy and reminds me of a smiley face pancake, which is exactly what they were going for.

logos

This teaches us an important lesson. Change can be jarring. If you hate a new logo design, it could simply be your brain grappling with something new. Try waiting a few weeks before you make a firm decision about hating or loving it. You might find yourself warming up to a concept that you previously couldn’t stand.

Reactions

If you make your logo in any way resemble a clown, you have to accept the fact that people think clowns are creepy, and that’s certainly the direction you get from a lot of the Twitter reviews for IHOP’s new logo.

View image on Twitter

8. Tokyo 2020 Olympics

This one isn’t technically a redesign of an old logo, but it was such a disaster that it is now getting its own redesign, so I’m tossing it in as an honorable mention.

The back story here is that each round of Olympics gets its own logo. From my perspective, these logos are almost always dreadful (remember that London 2012 mess?). For this reason, when I saw the Tokyo 2020 logo, I was pleasantly surprised. The modern art vibe won me over instantly. The shape is all at once reminiscent of a “T”, a “2”, and with the circle, a “0” (Tokyo 2020, get it?). I thought it was beautiful.



Unfortunately, Théâtre de Liège in Belgium also loved the unique shape… when they put it in their logo years before.

logos

It’s tricky to say whether we’re seeing inspiration, coincidence, or outright plagiarism. The obvious similarities are striking though, and that caused quite the uproar in the design community. It quickly led to a lawsuit and a complete scrapping of the Olympic logo.

Reactions

Photo published for Tokyo’s Olympics Logo Is a Confusing Geometric Mess

Tokyo’s Olympics Logo Is a Confusing Geometric Mess

It’s stiff, bland, and spiritless. More than that, it’s unclear what it’s meant to symbolize.

wired.com

Photo published for Tokyo’s Olympics Logo Is a Confusing Geometric Mess

Tokyo’s Olympics Logo Is a Confusing Geometric Mess

It’s stiff, bland, and spiritless. More than that, it’s unclear what it’s meant to symbolize.

View image on Twitter

View image on Twitter

9. Microsoft Expl.. Err… Edge

Microsoft is killing their infamous browser with the little “e” logo… and launching a new browser with a little “e” logo. They’ve gone from Explorer to Edge. I’m counting that as a rebrand.

I actually wrote a whole post about the new edge logo, titled “Why The Ugly New Microsoft Edge Logo Is Genius.” The idea here is simple: yes, Edge’s logo is awkward and ugly, but it’s just familiar enough to prevent confusion with literally millions of users who only one thing about their computer: “the e icon = the Internet.” Just think of all the customer support phone calls that won’t have to happen.



logos

Reactions

10. Opera

While we’re on the subject of browser logos, Opera just rolled out a significant update to their iconic “O” logo. In recent years, they’ve played around with various levels of shading, shadows, and bevel while maintaining the same basic O shape. This time around, they’ve gone with a 3D ring shape with a very subtle (intentional?) nod to the original O in the negative space.

logos

The new logo comes with a full new brand system with lots of supporting graphics and usage guidelines. Taking it all in, it seems like a well executed update.

logos

As a bonus, my wife noticed that the new Opera logo looks a lot less like the “Oprah” Magazine logo than the previous version. As soon as I compared the two, I realized that her observation was pretty dead on.

logos

Reactions

Photo published for Meet Opera's new brand identity

Meet Opera’s new brand identity

Today Opera is announcing its new brand identity. Meet the new Opera logo and read what else is part of the rebranding.

opera.com

Photo published for Meet Opera's new brand identity

Meet Opera’s new brand identity

Today Opera is announcing its new brand identity. Meet the new Opera logo and read what else is part of the rebranding.

opera.com

 11. SpotifyIn June, Spotify changed their brand green… and broke the Internet.

logos

The seemingly subtle update was actually part of some really great branding exploration that included lots of bold color experiments.

logos
logos



Pretty cool right? It doesn’t matter though. All people saw was that new green, and they freaked out.

Reactions

The new green was the topic of the week, getting tons of coverage on social media and tech blogs:

12. OpenTable

To end on a positive note, we’ll take a look at one final 2015 logo design: OpenTable. This is one redesign where I think the undesign trend paid off nicely. The old logo was pretty rough around the edges. Even though it nicely communicated the concept of the app, the 3D effect and quirky condensed type really feel like a dated aesthetic from the early days of when iPhone apps were just taking off.

The new logo feels simpler and more professional while still managing to steer clear of generic.

logos

The O shape that doubles as a table with someone sitting at it works well. Their new brand direction and language is all about bringing people together around a table, a concept played out nicely in the animated version of the logo.

logos

Reactions

The reviews on Twitter are pretty mixed for the OpenTable rebrand, with lots of people going the “it looks like…” route.

Pro Tip: Give Logo Designers a Break

Here’s the deal: logo design is hard. Really, really hard. I know because I’m tackling two logo design projects at the moment and I fully admit that it is far easier to critique someone else’s logo work than to build a great logo, or heck even a decent logo, yourself.

So even as we scratch our heads at projects like Career Builder’s and wonder what went wrong, let’s all admit that summing up an entire brand in one nice little icon or wordmark that pleases both your client and the social media firing squad is nearly impossible. All the designers behind the projects above faced a lot of challenges and I commend them all for tackling projects that are so open to the scrutiny of others.

Note:- Original article has been published at Creative bloq 

PHP-Tutorial-for-Beginners-How-to-Get-Started-with-PHP1

PHP Tutorial for Beginners

PHP is a powerful scripting language that fits gracefully into HTML and puts the tools for creating dynamic websites in the hands of the people — even people like me who were too lazy to learn Perl scripting and other complicated backend hoodoo.

This tutorial is for the person who understands HTML but doesn’t know much about PHP. One of PHP’s greatest attributes is that it’s a freely distributed open-source language, so there’s all kinds of excellent reference material about it out there, which means that once you understand the basics, it’s easy to find the materials that you need to push your skills.

Contents

  1. Introduction
    1. What Is PHP?
  2. What you’ll need
  3. Steps
    1. The Basics
      1. Basic Syntax
      2. Code Syntax
    2. Your First Script
    3. Error Messages
    4. A Few More Statements
    5. Very Able Variables
      1. Naming Variables
    6. HTML Forms and PHP
      1. Get versus Post
    7. Arrays
    8. Associative Arrays
    9. Operators; If, Else, Elseif; Loops
      1. If
      2. Else
      3. Elseif
    10. Comparison and Logical Operators
      1. Comparison Operators
      2. Logical Operators
      3. Aritmetic Operators
    11. Loops
      1. Other Loops
    12. Functions
    13. Some Final Thoughts
  4. Suggested readings

Introduction

What Is PHP?

So, what is this whole PHP business all about?

PHP is a program that gets installed on top of your web server software. It works with versions of Apache (Tutorial:Apache for Beginners), Microsoft IIS and other server software packages.

You use PHP by inserting PHP code inside the HTML that makes up your website. When a client (anybody on the web) visits a web page that contains this code, your server executes it. That’s why you need to install your own server in order to test PHP locally — the server is the brain here, not your browser. Users don’t need any special plug-ins or anything to see your PHP in action — it gets to the end user as regular old-fashioned HTML.

PHP is a scripting language, like HTML. That means that code does not need to be compiled before it gets used — it gets processed on the fly as necessary.




Before we dig in, you should know about a site called PHP.net. PHP is an open-source language, and PHP.net is its control center, with extensive reference material about the language and tips sent in by users across the globe. PHP.net has exceptional, deep information about the language, but it can be a little cryptic for the newcomer. We’ll look more closely at how to use PHP.net at the end of this tutorial.

So, what kinds of things can PHP do? Welllll … it can:

  • take info from web-based forms and use it in a million ways (store it in a database, create conditional pages depending on what the forms said, set cookies for later, send e-mail, write your mom on her birthday);
  • authenticate and track users;
  • run threaded discussions on your site;
  • serve different pages to people using different browsers or devices;
  • publish an entire website using just a single layout template (server-side includes-style);
  • serve XML pages.

But before we can get to the specific uses of PHP, we need to start with a quick preview of the building blocks of PHP, beginning with a sample script. This example script is titled “chickenman.php.” When called by a web browser, it would simply read, “I am the CHICKEN MAN!”

1 <?php
2
3
4
5  print ("I am the CHICKEN MAN");
6
7
8
9  ?>

The  ?php and tags start and end a PHP script, and your meat goes in the middle. Got that? Good! Now let’s walk through the basic rules you need to know to before you can write your first PHP script.

What you’ll need

Before we begin, you will need to install a server on your own machine in order to test your PHP scripts locally. You can install WampServer for Windows machines from http://www.wampserver.com/en/ In order to have a Localhost machine. If you’re using a Mac you can get MAMP from http://www.mamp.info.

If you have space on a web server which supports PHP, you can also test your PHP there, but this is kind of a pain because it means you’ll need to FTP your files or telnet in every time you want to change something.

Steps

The Basics

The code itself fits right inside a page’s HTML, and like HTML it is made up of plain ol’ text. So a page that displays the words “I am the CHICKEN MAN!” message would sit inside an HTML page namedsomething.php, like this:

01 <html>
02  <head>
03  <title> Chicken Man Example </title>
04  </head>
05  <body>
06  <font color="red">My PHP code makes this page say:</font>
07  <p>
08  <?php
09  print ("I am the CHICKEN MAN");
10  ?>
11  </p>
12  </body>
13  </html>

See how that works? The HTML is rendered as regular HTML, but everything inside the  ?php and tags gets processed as PHP.




Basic Syntax

It’s time to write your own first PHP script. The basic rules of PHP are as follows:

Naming Files In order to get a PHP script working, the file it’s in or the file that it calls to do the heavy lifting must end in .php (earlier versions used the file extensions .php3 and .phtml). Like HTML, your files are saved as plain text.

Comments It’s important to get in the habit of leaving notes about your code with the comment tags so that months down the road you can make sense of what you were trying to make your script do. The way you set comments apart from your code (that you don’t want displayed or executed) is with either “//” at the beginning of each line, or surrounded by “/*” and “*/” if you want to comment out several lines:

01 <?php
02
03 // This will be ignored. Note to self:
04
05 // Pick up ice cream, cake, and balloons.
06
07 print ("I am the CHICKEN MAN");
08
09 /*
10
11 This, too, will be ignored.
12
13 Hey, and don't forget
14
15 the spanking machine!
16
17 */
18
19 ?>

Code Syntax

Start of Code Every piece of PHP code begins with “<?php” (or the abbreviated “<?” if your server is configured to handle that).

End of Code The way to signify that the PHP code is finished is by adding “?>” at the end.

Every Chunk With a few exceptions, each separate instruction that you write will end with a semicolon.

Parentheses The typical function looks like this …

1 print ( );

… where “print” is the function and the stuff that the function works on sits inside the parentheses, with a semicolon to finish it off. (Just to confuse you, “print” is the exception that also works without parentheses.) By the way, echo () is the same as print ().

Much like HTML, the actual formatting of your PHP code (where you put spaces, line breaks, etc.) will not affect the outcome except those parts of the code that tell a web browser how to display your page. So this piece of code …

01 <?php
02
03
04
05     print ("I am the CHICKEN MAN");
06
07
08
09     ?>
10
11
12
13 ... is effectively identical to:
14
15
16
17     <?php print ("I am the CHICKEN MAN"); ?>

Like more complicated HTML, it behooves you to use white space and tabs in your code to make the code more understandable.

Ready to write your first script? Let’s go.

Your First Script

OK, so write your first script already! Copy the following script, but put whatever you want inside the quotation marks. “Print” here means print to the screen of a web browser when you open the file:

01 <html>
02
03 <body>
04
05   <?php
06
07   print ("I am the CHICKEN MAN");
08
09   ?>
10
11 </body>
12
13 </html>

Save the file with any name that has no spaces and ends in .php, and if you’ve installe

    d a server on your own machine, you need to save the script somewhere inside the server’s root folder (on Windows this is typically in the “wwwroot” directory inside the “inetpub” directory on your C: drive).

The next step is to open the file in your browser. Since you need the server to run your PHP code, you have to open the file through a URL that finds the correct file through your web server. On Windows, your computer name is your root URL. My computer name is “rocketboy,” so to see the contents of my root directory, I type “http://rocketboy” into the Web browser and voila! I see the contents of my root folder. To open the file “chickenman.php” in a directory called “tests” inside the root directory, I’d type “http://rocketboy/tests/chickenman.php” and see my example.

If you’re testing on a PHP-able web server, FTP your files anywhere on your server and they should work when you open them through the URL.

Go on now and get your first script working. Then come back and we’ll have some fun. Together. (If you can’t get your first script working, look at our First Script Troubleshooting Guide.)

Error Messages

Fun, eh? Fun if it worked. If not — if you had an error in your script — you probably got an error message that looked something like this:

1 Parse error:
2
3 parse error in C:Inetpubwwwrootwebmonkey_articletest9.php
4
5 on line 12

Error messages can be very useful and you’re bound to run into lots of them. You’ll get a message like this for every line in your script that has an error. For our purposes, all we really need to know is that there is something wrong with our code in line 12 of the document “test9.php,” so let’s look at that line and see if we can figure it out (good text editors like BBEdit have a function that lets you jump to any particular line). I always start by looking to see if my basic syntax is correct: did I leave out the closing tag, a line’s semicolon, quotation marks?

A Few More Statements

Let’s continue by adding to your test code from the last page to show a couple useful tools.

In the same code that you wrote before, drop in a couple more statements. As you see, you can gang up more than one PHP function inside the same opening and closing tags. My comments in the code explain what each part does:

01 <html>
02
03  <body>
04
05  This text right here (or any HTML I want to write)
06
07  will show up just before the PHP code stuff.
08
09  <p>
10
11  <?php
12
13  // first, this $PHP_SELF thang is
14
15  // an environment variable that'll show the
16
17  // path from your root folder to this
18
19  // document itself, like /webmonkey_article/test3.php.
20
21  // I put this in just for fun.
22
23  // NOTE: This may only work if your server is Apache.
24
25  print "$PHP_SELF";
26
27  // next we have to "print" any
28
29  // HTML code we want the browser
30
31  // to follow to determine
32
33  // the layout of the results page.
34
35  // In this case, we're adding a <p> tag
36
37  // the <p> tags could have been put
38
39  // inside the same print statement as the
40
41  // "I am the CHICKEN MAN" text.
42
43  // between the $PHP_SELF text and the
44
45  // next bunch of stuff.
46
47  print ("<p>");
48
49  print ("I am the CHICKEN MAN");
50
51  print ("<p>");
52
53  /* This next "phpinfo" business outputs a long page that
54
55  tells you exactly how your version of PHP is configured.
56
57  This can be useful when troubleshooting problems down
58
59  the road */
60
61  phpinfo();
62
63  ?>
64
65  </p>
66
67  </body>
68
69  </html>

NOTE: Phpinfo will output a long page of info about your version of PHP. You don’t need to understand what it all means, I just wanted to show you that it’s there if you ever need it.

Very Able Variables

So far, all we’ve done is have a PHP script print some text. Big whoop. Let’s get down and dirty now with variables. A variable is a container for holding one or more values. It is the means by which PHP stores information and passes it along between documents and functions and such. You may remember variables from algebra — in the equation “x + 2 = 8″, x is a variable with the value 6.

The reason why variables are so important to PHP is that the very notion of having dynamic web pages — pages which respond somehow to user input — relies on data being passed around between pages (or parts of a page). Variables are the main mechanism for transferring data like this.

I think the easiest way to explain how variables work in PHP is to show them in action. There are three basic things you can do with variables:

  1. Set them (give them one or more values);
  2. Re-set them if they were set before;
  3. Access them (read the value of a variable and then do something useful with it).

Variables in PHP start with a dollar sign (“$”). Below I am setting a variable, using it, then setting and using it again. The value that a variable holds can be changed any time at all.



01 1. <?php
02
03 2. $utterance = "I love you!";
04
05 3. print ("When I'm happy, I want to say $utterance");
06
07 4. print ("<p>");
08
09 5. $utterance = "I will smite you!";
10
11 6. print ("When I'm angry, I want to say $utterance");
12
13 7. ?>

Here’s what that page will look like:

PHP_Tutorial_utterance.gif

In line two I have created a variable that I decided to name “utterance.” All variables start with “$”, so my variable is written “$utterance” in the code. Here’s how that last code snippet breaks down line by line. Please note: the webserver does the PHP interpreting before sending the browser finished HTML code.

  • Line 1 tells the webserver: “Start PHP code here”.
  • Line 2 creates the variable $utterance and also sets it, giving it the initial value of “I love you!”.
  • Line 3 prints a phrase that draws on the variable $utterance.
  • Line 4 creates atag in HTML to put vertical space between the two utterances.
  • Line 5 RE-SETS the variable $utterance and gives it the value “I will smite you!”.
  • Line 6 prints a new phrase that draws on the new meaning of the variable $utterance.
  • Line 7 tells Mr. Webserver: PHP code ends here.

See how the variable $utterance is used as a sort of container that can hold different values? We just set and then called variables inside the same script, but the power of PHP is that you can set a variable in one place — say from a form that a user fills out — and then use that variable later.

The syntax of setting a variable is to:

  • define it with the = sign ($utterance = “I love you!”;);
  • use quotation marks if you’re defining it with a string of letters (“I love you!”; numbers don’t require quotes);
  • end each instruction with a semicolon.

Then you call it by refering to the variable name ($utterance in lines 3 and 6 — notice no quotation marks there).

Naming Variables

You can name a variable anything you want so long as it follows these rules:

  • it starts with a letter;
  • it is made up of letters, numbers, and the underscore character (that’s the _ character, as in “$baby_names”);
  • it isn’t used elsewhere (like “print”).

Warning: Variable names are case-sensitive, so $baby_names and $Baby_names are not the same. You also should try to make your names have some meaning so that you can still make sense of your code next year.

In the examples so far, we have set variables as chunks of text, which are known as “strings.” Variables can also hold the values of numbers and some other things as well (objects, arrays, booleans).

Final note: One thing that can be a little confusing when starting to use PHP is the use of quotation marks inside PHP functions. Use single or double quotes to set off strings (that is, chunks of text), as in:

1 print ("I am the CHICKEN MAN");

This will print the text I am the CHICKEN MAN. If you want to display quotation marks as characters in the output of your PHP script, you must escape them with the “” character, which tells PHP not to use the next character as part of the code. So to output the text “I am the CHICKEN MAN” (with quotation marks showing in the result) the code would look like:

1 print (" "I am the CHICKEN MAN"" );

HTML Forms and PHP

In our examples so far, we have set variables and then used them all in the same code. This doesn’t make much sense because in those instances, we could have just hard-coded the values instead of using variables.

Let’s get some real mileage by creating HTML forms to gather user input, turning that input into variables, and then doing various things with the information that we just collected.

No sense in sitting around waiting – let’s go ahead and make a Web page that collects your favorite dirty word and displays it on another page that tells you what a pervert you are. All of this gives a page that looks a lot like this.

First, we make the form page, which is regular HTML with a form in it. I’m calling mine “badwords_form.html,” but call yours whatever you like. (If you want a good primer on HTML forms, read Jay’s How To Add HTML Forms to Your Site tutorial.)

01 <html>
02
03  <head>
04
05  <title>My Form</title>
06
07  </head>
08
09  <body>
10
11  <form action="bad_words.php" method=post>
12
13  My name is:
14
15  <br> <input type="text" name="YourName">
16
17  My favorite dirty word is:
18
19  <br /><input type="text" name="FavoriteWord">
20
21  <input type="submit" name="submit" value="That's Right!">
22
23  </form>
24
25  </body>
26
27  </html>

This is a regular HTML form. The important pieces are as follows:

Line 7: the HTML that reads action="bad_words.php" tells the browser which PHP document will process the results of the form. That is to say, in a minute you’ll create a document called “bad_words.php” which will be the little engine that makes the result page happen. (We’ll get to themethod=post part later on.)

Line 10: input type="text" determines that the form element which we want here is “text” or a text box (we could also have a radio button, check box, etc.); name="YourName" determines that whatever the user types into the text box will become a variable that we have called “YourName.” This is what ties together forms and variables – each form field can set a variable to be used however you want.

Line 13: here you have another text input that sets a variable called “FavoriteWord” which is the user’s favorite dirty word.

Line 16, 17: This code makes a submit button with the text “That’s Right!” and ends the form.

So this form will collect the unassuming user’s name and favorite bad word, but now what do we do with it? Let’s take the variables she set and echo them back in another context on another page.

On line 7 of the HTML above, we told the form to head on over to bad_words.php once the submit button was hit. This is what bad_words.php looks like:

01 1.
02
03 2.
04
05 3.
06
07 4.
08
09 5.
10
11 6.
12
13 7.
14
15 8.
16
17 9.
18
19 10.
20
21 11.
22
23 12.
24
25 13.
26
27 14.
28
29 15.
30
31 16.
32
33 17.
34
35 18.
36
37 19.
38
39 20.
40
41 21.
42
43 22.
44
45 23.
46
47 24.
48
49 25.
50
51 26.
52
53 27.
01 <html>
02
03 <head>
04
05 <title>Perv!</title>
06
07 </head>
08
09
10
11 <?php
12
13 // Capture the values posted to this php program from the text fields
14
15 // which were named 'YourName' and 'FavoriteWord' respectively
16
17
18
19 $YourName = $_REQUEST['YourName'] ;
20
21 $FavoriteWord = $_REQUEST['FavoriteWord'] ;
22
23 ?>
24
25
26
27 <body bgcolor="#FFFFFF" text="#000000">
28
29 <p>
30
31
32
33 Hi <?php print $YourName; ?>
34
35
36
37 <p>
38
39
40
41 You like the word <b> <?php print $FavoriteWord; ?>!?!</b>
42
43
44
45 <p>You oughta be ashamed of yourself!
46
47
48
49 </body>
50
51
52
53 </html>

See how this form passed a variable along from the form page to the PHP file? You have not seen the last of this.

Get versus Post

So far, we’ve used the “Post” method of passing form data as opposed to the other method, “Get.” This is the part of the form code that reads  form action="bad_words.php" method=post¢.

The difference between these two is that the “post” method transparently passes along all the information the page has gathered, whereas the “get” method will pass all that info along as part of the URL (in the form above, this would look like: http://rocketboy/webmonkey_article/bad_words.php?YourName=bob&FavoriteWord=crikey%21&submit=Enter+My+Data%21 – see how the info the user entered about his name and his favorite word get added to the URL?)

Arrays

One of your best tools now that you’ve mastered variables – you have, haven’t you? – are arrays.

Arrays give you the ability to store not just one value inside a variable, but a whole bunch of values in a single variable.

If I wanted to catalog all of the animals in my house, I could set each one as a regular variable. I’ve got two dogs, Phoebe and Ruby, and a squirrel that died in the attic last year, whom we’ll call Rotty. Setting each one as a variable looks like this:

1 $dog1 = "Phoebe";
2
3 $dog2 = "Ruby";
4
5 $squirrel1 = "Rotty";

But an array will let us store all these inside one single variable, which I’ll call $critters. Each element of the variable has its own “key” that is used to access that part of the array, which can either be a string of letters or numbers.

Let me explain the “key” concept another way: If we’re storing three different values inside one variable (like storing Phoebe, Ruby, and Rotty inside $critters), we need some way to be able to suck out any individual part of the array to use it. An array will automatically number each element that comprises it, so the key can be element 1, element 2, and element 3. Or, as we’ll see later on, we can name each part of the array with text. In this case I could make the keys “fat dog,” “skinny dog,” and “squirrel” and use those to identify each array member.

Let’s make a simple array and then use it. The easiest way to create an array is to use the array() function, which assigns a bunch of values to your array at once and looks like this:

1 $critters = array ( "Phoebe", "Ruby", "Rotty" );

This stores all my animal names into one variable ($critters) in an array, and automatically assigns a numbered “key” to each element starting in order and giving the first element the number 0. So Phoebe is element [0], Ruby is [1], Rotty is [2], etc. I make up the name of the array myself (here it’s $critters).

You can now get at any of the array elements by referring to the variable followed by the element number in square brackets: $critters[0], for example. Here it is in action:

1 <?php
2
3
4
5     print "$critters[2]";
6
7
8
9     ?>

This will simply print the third element in the array, which is Rotty (don’t forget that array numbers start at 0, so $critters[2] is third after $critters[0] and $critters[1]).

There’s another way to set an array, or even to add to an existing array, by setting each element individually:

1 $critters[] = "Phoebe";
2
3    $critters[] = "Ruby";
4
5    $critters[] = "Rotty";

This’ll have the same effect as using the array() function, giving the first element the key [0] and so on. But wait! I forgot about Opie the cat. Hmmm. Regardless of how we made the array in the first place, I can easily add Opie like this:

1 $critters[] = "Opie";

PHP is smart enough to count the number of elements and give Opie the next available one, which in this case (after Phoebe, Ruby, and Rotty) is [3].

To recap this concept, I can set an array to include the animals in my house either this way:

1 $critters[] = "Phoebe";
2
3 $critters[] = "Ruby";
4
5 $critters[] = "Rotty";
6
7 $critters[] = "Opie";

Or this way:

1 $critters = array ( "Phoebe", "Ruby", "Rotty", "Opie" );

Both will be indexed in the computer brain with the values:

1 $critters[0] = "Phoebe";
2
3 $critters[1] = "Ruby";
4
5 $critters[2] = "Rotty";
6
7 $critters[3] = "Opie";

And in both cases, you could get at any element in the array by describing its number …

1 <?php
2
3
4
5    print "$critters[3]";
6
7
8
9    ?>

… which would print the string Opie to the window of your browser.

Arrays can be made to do all kinds of things, like being incremented by number, sorted in alphabetical order, printed by different types of categorization, and many more.

Associative Arrays

Ready to get more complicated? The associative array indexes the contained elements not by numbers, but by names that you determine. Inside the array() function, you set up pairs where you name the key and its value using the combo of the “=” and the “>”, like: key=>”value”. Here’s what it looks like in action:

01 $PhoebeDog = array (
02
03           name=>"Phoebe",
04
05           description=>"fat dog",
06
07           color=>"grey and white",
08
09           age=>7
10
11               );

Here we’re telling the array to create the keys “name,” “description,” “color,” and “age”; and we give each of those keys a value (name is “Phoebe”, description is “fat dog,” and so on).

We can get at any part of the array through the “key” names that we set, for example:

1 print $PhoebeDog[color];

will give us grey and white. We can also set each key individually, like so:

1 $animals[name] = "Phoebe";
2
3 $animals[description] = "fat dog";
4
5 $animals[color] = "grey and white";
6
7 $animals[age] = 7;

Finally, let’s make it hurt. We’re going to get some serious power out of this arrays business by creating a “multi-dimensional” array. A multi-dimensional array is an array (say the animals in my house) that is made up of other arrays (for each animal, an array that contains the critter’s name, color, description, and age).

We make multi-dimensional arrays by creating one array:

1 $animals = array
2
3         (
4
5             );

…and then we fill that array with an array of animals in which we’ve defined the keys, like this:

01 $animals = array (
02
03         array ( name=>"Phoebe",
04
05                 type=>"dog",
06
07                 color=>"grey and white",
08
09                 age=>7 ),
10
11         array ( name=>"Ruby",
12
13                 type=>"dog",
14
15                 color=>"brown and white",
16
17                 age=>7 ),
18
19         array ( name=>"Rotty",
20
21                 type=>"squirrel",
22
23                 color=>"grey",
24
25                 age=>2 ),
26
27         array ( name=>"Opie",
28
29                 type=>"cat",
30
31                 color=>"grey tabby",
32
33                 age=>5 )
34
35                     );

To use this now, we can get any part of the information contained in there by naming the overall array ($animals), naming the number of the sub-array that we want to find out about (Phoebe is [0], Ruby is [1], etc.) and then naming the key for the attribute we want to get at (name, type, color, or age).

To find out the age of the cat, we’d write:

1 print $animals[3][age];

Here’s what it all looks like together. This is all in one page, but remember that you can set arrays in one place (in code or in form fields from another page or in a database, say) and get at the info contained within from somewhere else. Here I’m putting it all together on one page so you can see it all at once.

01 <html>
02
03 <head>
04
05 <title>Pet Arrays</title>
06
07 </head>
08
09
10
11 <body>
12
13
14
15 <?php
16
17
18
19 $animals = array (
20
21         array ( name => "Phoebe",
22
23                 type => "dog",
24
25                 color => "grey and white",
26
27                 age => 7 ),
28
29         array ( name => "Ruby",
30
31                 type => "dog",
32
33                 color => "brown and white",
34
35                 age =>7 ),
36
37         array ( name => "Rotty",
38
39                 type => "squirrel",
40
41                 color => "grey",
42
43                 age =>2 ),
44
45         array ( name => "Opie",
46
47                 type => "cat",
48
49                 color => "grey tabby",
50
51                 age => 5 )
52
53                     );
54
55
56
57 print $animals[2]["type"];
58
59 print ("<br>");
60
61 print $animals[3]["color"];
62
63
64
65 ?>
66
67
68
69
70
71 </body></html>

What we’ve just done is create an array that includes a sub-array for each animal which contains detailed info about that critter; then we print a sentence that uses the type and ages of two of the animals.

Operators; If, Else, Elseif; Loops

The whole deal about making dynamic websites is that you want your web page to be as smart as possible — to have code sitting there that can make all sorts of decisions based on different kinds of user input, user conditions (what browser is Visitor X using?), or information that you set yourself. Examples of this could be:

  • After a user enters an email address, check that it has a valid form (whoever@wherever.com) and if not, serve a page that says, “hey pal, how about a VALID email address?”
  • Serve one set of HTML to .com domains and another to .gov domains (where you try not to use any big words that might confuse ‘em).
  • Know whether a customer at your online store is meeting a minimum dollar amount for an online credit card purchase.
  • And on and on and on – the possibilities are limitless.

If

The way to make your pages smart is to use If, Else, and Elseif statements along with Comparison and Logical Operators. The most important one of these is the

1

statement, which gives you the ability to code:

1 If some condition is true, then do somesuch thing;
2
3 If the condition is not true, then ignore it;

The syntax of this statement is as follows:

1 if (condition) {
2
3
4
5 // code in here to execute if the condition is true
6
7
8
9 }

Here it is in action. First we set the variable

01 <?php
02
03
04
05  $FavoriteColor = "blue";
06
07
08
09  if ($FavoriteColor == "blue") {
10
11
12
13  print ("I like blue too!");
14
15
16
17  }
18
19
20
21  ?>

Please note that:

1 if ($FavoriteColor = "blue")

and

1 if ($FavoriteColor == "blue")

are not the same thing, the first will always be true as it sets $FavoriteColor to blue.

Else

Else builds on the if statement as if to say:

1 If some condition is true, then do somesuch thing;
2
3 ELSE, in case that first condition is NOT true, then do this other thing.

It works like this:

01 if (condition) {
02
03
04
05 // code in here to execute if the condition is true
06
07
08
09 } else {
10
11
12
13 // code in here to execute if the condition is not true
14
15
16
17 }

Here it is in motion:

01 <?php
02
03
04
05 $FavoriteColor = "yellow";
06
07
08
09 if ($FavoriteColor == "blue") {
10
11
12
13 print ("I like blue too!");
14
15
16
17 } else {
18
19
20
21 print ("You don't like blue?! Crazy fool!");
22
23
24
25 }
26
27
28
29 ?>

What you see above is the typical format for writing statements like this. The key part is to see where the curly braces are so you don’t get confused as to which statement belongs to which piece of the code. Above, the first set of { and } belong to the “if,” the second { and } belong to the “else.”

Elseif

There’s one more sibling in the if, else family, and it’s called elseif. Where else is sort of a blanket control that make something happen as long as the if statement is not true, elseif makes something happen if a specific condition is met:

1 IF some condition is true, then do somesuch thing;
2
3     ELSEIF some other specific condition is true, then do another thing;

It looks like this:

01 <?php
02
03
04
05     $FavoriteColor = "green";
06
07
08
09     if ($FavoriteColor == "blue") {
10
11
12
13     print ("I like blue too!");
14
15
16
17     } elseif ($FavoriteColor = green) {
18
19
20
21     print ("MMMmmmmmmmmmm, green!");
22
23
24
25     }
26
27
28
29     ?>

You could even add an ELSE statement at the end in case FavoriteColor were neither blue nor green.

Comparison and Logical Operators

We’ve seen how the “=” sign works when we set variables in the scripts we’ve written so far (as in the code$FavoriteColor = "blue"; and $utterance = "I will smite you!"; ). The equal sign here is what we call the “assignment operator” and is the simplest operator we’ve got: $a = b means “the variable a is assigned the value b (for the moment).”

But you can squeeze a lot more juice out of your PHP using what are called “comparison operators,” “logical operators,” and “arithmetic operators.” Here’s what they are, in tables copied verbatim fromPHP.net.

Comparison Operators

These give you the ability to compare whether elements are equal, identical, less than or greater than one another (with some other variations).

Example Name Result
$a == $b Equal TRUE if $a is equal to $b.
$a === $b Identical TRUE if $a is equal to $b, and they are of the same type. (PHP 4 only)
$a != $b Not equal TRUE if $a is not equal to $b.
$a <> $b Not equal TRUE if $a is not equal to $b.
$a !== $b Not identical TRUE if $a is not equal to $b, or they are not of the same type. (PHP 4 only)
$a < $b Less than TRUE if $a is strictly less than $b.
$a > $b Greater than TRUE if $a is strictly greater than $b.
$a <= $b Less than or equal to TRUE if $a is less than or equal to $b.
$a >= $b Greater than or equal to TRUE if $a is greater than or equal to $b.

Logical Operators

Here you can compare elements using comparisons and, or, and the like.

Example Name Result
$a and $b And TRUE if both $a and $b are TRUE.
$a or $b Or TRUE if either $a or $b is TRUE.
$a xor $b Xor TRUE if either $a or $b is TRUE, but not both.
 ! $a Not TRUE if $a is not TRUE.
$a && $b And TRUE if both $a and $b are TRUE.
$a || $b Or TRUE if either $a or $b is TRUE.

Aritmetic Operators

Just what it says – this is basic math.

Example Name Result
$a + $b Addition Sum of $a and $b.
$a – $b Subtraction Difference of $a and $b.
$a * $b Multiplication Product of $a and $b.
$a / $b Division Quotient of $a and $b.
$a % $b Modulus Remainder of $a divided by $b.

Loops

Loops are really handy. They let you program your code to repeat itself (and also to figure out how many times to run through itself before it’s done). Loops have instructions to “keep running this piece of code over and over again until certain conditions are met.” You can use more than one kind of loop. Let’s look at the most basic kind, the “while” loop.

The while loop says,

01 while (something is true)
02
03
04
05 {
06
07
08
09 // do something that you specify
10
11
12
13 }

While loops are often used with incrementing and decrementing a variable that is an integer. What in thehell does that mean? It means that you can automatically have the script add (or subtract) a whole number (1, 2, 3, etc.) from part of a script each time it runs through, until the number reaches a maximum or minimum value that you’ve set.

So if you wanted a script to print the numbers from 1 to 10, you can tell it (this is English, not PHP here):

01 a. the variable $MyNumber = 1;
02
03
04
05 b. print $MyNumber;
06
07
08
09 c. add 1 to $MyNumber;
10
11
12
13 d. go to sep a. and run this script again with the new value of $MyNumber;
14
15
16
17 d. stop when $MyNumber reaches 11;

The syntax for incrementing and decrementing the value of a variable is:

$a++; adds 1 to the value of the variable $a each time through
$a–; subtracts 1 from the value of the variable $a each time through

So the code itself for printing the numbers 1 through 10 could look like this:

01 1.
02
03 2.
04
05 3.
06
07 4.
08
09 5.
10
11 6.
12
13 7.
14
15 8.
16
17 9.
18
19 10.
20
21 11.
22
23 12.
24
25 13.
26
27 14.
28
29 15.
01 <?php
02
03
04
05 $MyNumber = 1;
06
07
08
09 while ($MyNumber <= 10)
10
11
12
13 {
14
15
16
17 print ("$MyNumber");
18
19
20
21 $MyNumber++;
22
23
24
25 }
26
27
28
29  ?>
  • line 1: start PHP code;
  • line 3: set variable $MyNumber to 1;
  • line 5: initiate “while” loop: while the variable $MyNumber is less than or equal to 10, execute what’s below; otherwise move on;
  • line 9: print the current value of $MyNumber;
  • line 11: add 1 to the value of $MyNumber;
  • line 15: end PHP code.

For these loops, you can use all the “operators” listed on the section above to be the conditions that must be met before the loop stops.

Other Loops

PHP has other kinds of loops, but they are beyond the scope of this tutorial. If you want to learn what they are and how to use them, follow these links to PHP.net:

Functions

If you’ve used HTML a lot, you know that it’s a pretty limited language that was designed back in the dark ages before we all knew what the Net was capable of.

PHP, however, is very flexible. Not only does PHP have a library of canned functions that’ll do everything from sorting stuff in alphabetical order to sending email, from connecting with databases to balancing your spaceship’s inertial sub-space dampers, but you can also create your very own functions to do all manner of things related to your website. The functions you create get executed exactly like those from the PHP library, but they’re your own. In the following section, I’ll show a glimpse of how you create your own functions and feel the power.

Functions you create are like little machines that do something for you. You construct them and then call them as needed.

You’ll remember that the very first thing we learned to do was a simple “print” statement, which followed the form:

1 <?php
2
3
4
5  print ("whatever it is I want to show up on-screen");
6
7
8
9  ?>

Functions that you create are built upon a similar form, but take it farther:

01 <?php
02
03
04
05 function MyFunction ()
06
07
08
09 {
10
11
12
13 statements that make up the function;
14
15
16
17 }
18
19
20
21 ?>

So you start a function with the words function WhatYouNameIt(), with the words WhatYouNameIt() being anything you choose (no spaces).

Then you define the rules of the function inside the following curly brackets (that’s { and } on lines 5 and 9). Don’t you just love the words “curly brackets?”

Let’s walk through the making of a couple functions. Functions come in two flavors, those that require “arguments” and those that don’t. An “argument” is a variable that comes from outside the function, but which the function needs in order to run.

Let’s first look at one that doesn’t require arguments:

01 <?php
02
03
04
05 function ChickenMan()
06
07
08
09 {
10
11
12
13 print "<b>I am the CHICKEN MAN!</b>";
14
15
16
17 }
18
19
20
21 ChickenMan();
22
23
24
25 ?>

line 1: start PHP;
line 3: create function ChickenMan;
line 5: start definition of function ChickenMan;
line 7: definition of ChickenMan is to print “I am the CHICKEN MAN!” inside and tags;
line 9: end definition of ChickenMan;
line 11: call function ChickenMan (meaning “do the thing that we defined the function to do”);
line 13: close PHP;

Any place in this web page that you put “ChickenMan();” inside the <?php and ?> tags, it’ll print your little statement. See how this saves you time if you want to print this string a bunch of times in different places?

Now let’s get a little more complicated and create a function that does take arguments. Say I’m a loan shark and I’m going to loan you the money to buy that personal hovercraft you’ve been lusting after. I’ll lend you however much you need, but you have to pay me 14 percent interest per week or I break your legs.

I’ll create a function called InterestPayment which calculates your weekly payments (until you pay off the whole loan amount in one lump sum).

First we’ll create a form page where the user enters how much of a loan he or she wants. The user enters the hovercraft’s sticker price, and that number gets passed along from the form as a variable called  font size="2">$Cost. (For the HTML behind this, go here.)

Next, our function will take the amount that the user enters into the variable  font size="2">$Cost and spit back 14 percent of that amount, which is how much the hapless borrower owes every week. This will happen in the PHP page titled “loanshark.php” that the form page points to (it points with this code: <form action=”loanshark.php” method=post> ). Here’s what the function will look like:

01 1.
02
03 2.
04
05 3.
06
07 4.
08
09 5.
10
11 6.
12
13 7.
14
15 8.
16
17 9.
18
19 10.
20
21 11.
22
23 12.
24
25 13.
26
27 14.
28
29 15.
30
31 16.
32
33 17.
34
35 18.
36
37 19.
38
39 20.
40
41 21.
42
43 22.
44
45 23.
46
47 24.
48
49 25.
50
51 26.
01 <html>
02
03  <head>
04
05  <title>Loans</title>
06
07  </head>
08
09
10
11  <body>
12
13
14
15  <?php
16
17
18
19  $interest_rate = .14;
20
21
22
23  function YouOweMe($cost, $interest_rate) {
24
25
26
27  $weekly_payment = ($cost*$interest_rate);
28
29
30
31  print "You better pay me $$weekly_payment every week, or else!";
32
33
34
35  }
36
37
38
39
40
41 <font color="#000000">YouOweMe($cost, $interest_rate);
42
43
44
45  ?>
46
47
48
49
50
51  </body>
52
53  </html>

Here’s the line-by-line breakdown.

line 8: start php;
line 10: set variable called $interest_rate to 14%;
line 12: create function YouOweMe that relates to the variables $cost and $interest_rate;
line 14: create variable $weekly_payment, the value of which is the cost times the interest rate;
line 16: print to screen a sentence that uses the value of the $weekly_payment variable;
line 20: engage the function YouOweMe, which (because of the function defined beforehand) simply prints the sentence You better pay me [14% of the amount the user entered on the form page] every week, or else!

Notice on line 16 that we want the code to actually print out a dollar sign before the weekly payment. We escape that character with a to make sure the PHP engine doesn’t think we’re naming a variable there. Then we just happen to name a variable right afterwards ($WeeklyPayment), so the two together look like font size="2">$$WeeklyPayment.

Some Final Thoughts

If it got a little brutal back there trying to make sense of my functions, don’t worry — you’ll probably get used to squinting through other people’s code once you get going. That’s because somebody has probably written code for whatever you need to do already, and is probably happy to share it with you. Making sense of it all gets easier and easier the more you use this stuff. And since PHP is an open-source language (meaning the source code is shared openly instead of being hoarded by an evil corporation), the language is surrounded by a sense of cooperation among its users, many of whom will help you if they can.

Suggested readings

With the knowledge that you have so far, you can go almost anywhere with this PHP business. But how do you find out out to do a particular task that you need to do? Here are some good resources. These are just places that I frequent, but by no means is this a comprehensive list:

  • PHP.net: As I’ve mentioned, PHP.net is the language’s central brain. Here are parts of PHP.net that I’ve found especially useful.
  • Manual: The site contains a general manual for PHP. Some functions may take a while to figure out, but it’s all here. Once at PHP.net, follow the links to Documentation > View Online and pick your language.
  • Function List: At the top of the main php.net page you’ll find a search box in which you can search different areas of the site. If there’s a function you need to find, search through the functions there. Often you’ll have to search for a word (“cookie”) and then figure out from the results which function is what you want (“setcookie”).
  • FAQ: Find great info in the FAQ, including a category titled “Common Problems.”

TIP: No matter what source you use for reference material (and you’ll need sources!), there’s a general rule of thumb to use when writing this stuff. It’s always good to map out what you need to do and then test your concept as simply as possible. Once you get the machinery working, you can put in your real content and make it more and more complex. It’s much harder to troubleshoot if you don’t start out with simple pieces.
Recommended Reading

I bought several books when I started learning PHP that were of varying quality. I really liked Larry Ullman’s “PHP for the World Wide Web” (Peachpit Press). “Teach Yourself PHP4 in 24 Hours” by Matt Zandstra was also good. Books published by O’Reilly are also generally excellent.

1462437187elk-logo

How Can the ELK Stack Be Used to Monitor PHP Apps?

When things go south with our applications — as they sometimes do, whether we like it or not — our log files are normally among the first places where we go when we start the troubleshooting process. The big “but” here is that despite the fact that log files contain a wealth of helpful information about events, they are usually extremely difficult to decipher.

A modern web application environment consists of multiple log sources, which collectively output thousands of log lines written in unintelligible machine language. If you, for example, have a LAMP stack set up, then you have PHP, Apache, and MySQL logs to go through. Add system and environment logs into the fray — together with framework-specific logs such as Laravel logs — and you end up with an endless pile of machine data.

Talk about a needle in a haystack.

1462437187elk-logo

The ELK Stack (Elasticsearch, Logstash, and Kibana) is quickly becoming the most popular way to handle this challenge. Already the most popular open-source log analysis platform — with 500,000 downloads a month, according to Elastic — ELK is a great way to centralize logs from multiple sources, identify correlations, and perform deep-data analysis.




Elasticsearch is a search-and-analytics engine based on Apache Lucene that allows users to search and analyze large amounts of data in almost real time. Logstash can ingest and forward logs from anywhere to anywhere. Kibana is the stack’s pretty face — a user interface that allows you to query, visualize, and explore Elasticsearch data easily.

This article will describe how to set up the ELK Stack on a local development environment, ship web server logs (Apache logs in this case) into Elasticsearch using Logstash, and then analyze the data in Kibana.

Installing Java

The ELK Stack requires Java 7 and higher (only Oracle’s Java and the OpenJDK are supported), so as an initial step, update your system and run the following:

sudo apt-get install default-jre

Installing ELK

There are numerous ways of installing the ELK Stack — you can use Docker, Ansible, Vagrant, Microsoft Azure, AWS, or a hosted ELK solution — just take your pick. There is a vast number of tutorials and guides that will help you along the way, one being this ELK Stack guide that we at Logz.io put together.

Installing Elasticsearch

We’re going to start the installation process with installing Elasticsearch. There are various ways of setting up Elasticsearch but we will use Apt.

First, download and install Elastic’s public signing key:

wget -qO - https://packages.elastic.co/GPG-KEY-elasticsearch | sudo apt-key add -

Next, save the repository definition to /etc/apt/sources.list.d/elasticsearch-2.x.list:

echo "deb http://packages.elastic.co/elasticsearch/2.x/debian stable main" | sudo tee -a /etc/apt/sources.list.d/elasticsearch-2.x.list

Last but not least, update the repository cache and install Elasticsearch:

sudo apt-get update && sudo apt-get install elasticsearch

Elasticsearch is now installed. Before we continue to the next components, we’re going to tweak the configuration file a bit:

sudo nano /etc/elasticsearch/elasticsearch.yml

Some common configurations involve the restriction of external access to Elasticsearch, so data cannot be hacked or deleted via HTTP API:

network.host: localhost

You can now restart Elasticsearch:

sudo service elasticsearch restart

To verify that Elasticsearch is running properly, query the following URL using the cURL command:

sudo curl 'http://localhost:9200'

You should see the following output in your terminal:

{
  "name" : "Jebediah Guthrie",
  "cluster_name" : "elasticsearch",
  "version" : {
    "number" : "2.3.1",
    "build_hash" : "bd980929010aef404e7cb0843e61d0665269fc39",
    "build_timestamp" : "2016-04-04T12:25:05Z",
    "build_snapshot" : false,
    "lucene_version" : "5.5.0"
  },
  "tagline" : "You Know, for Search"
}

To make the service start on boot, run:

sudo update-rc.d elasticsearch defaults 95 10

Installing Logstash

Logstash, the “L” in the “ELK Stack”, is used at the beginning of the log pipeline, ingesting and collecting data before sending it on to Elasticsearch.




To install Logstash, add the repository definition to your /etc/apt/sources.list file:

echo "deb http://packages.elastic.co/logstash/2.2/debian stable main" | sudo tee -a /etc/apt/sources.list

Update your system so that the repository will be ready for use and then install Logstash:

sudo apt-get update && sudo apt-get install logstash

We’ll be returning to Logstash later to configure log shipping into Elasticsearch.

Installing Kibana

The final piece of the puzzle is Kibana – the ELK Stack’s pretty face. First, create the Kibana source list:

echo "deb http://packages.elastic.co/kibana/4.5/debian stable main" | sudo tee -a /etc/apt/sources.list

Then, update and install Kibana:

sudo apt-get update && apt-get install kibana

Configure the Kibana configuration file at /opt/kibana/config/kibana.yml:

sudo vi /opt/kibana/config/kibana.yml

Uncomment the following lines:

server.port: 5601
server.host: “0.0.0.0”

Last but not least, start Kibana:

sudo service kibana start

You can access Kibana in your browser at http://localhost:5601/ (change the URL if you’re using a VM like Homestead Improved to whichever host/port you configured):

Kibana interface

To start analyzing logs in Kibana, at least one index pattern needs to be defined. An index is how Elasticsearch organizes data, and it can be compared to a database in the world of RDBMS, with mapping defining multiple types.

You will notice that since we have not yet shipped any logs, Kibana is unable to fetch mapping (as indicated by the grey button at the bottom of the page). We will take care of this in the next few steps.

Tip: By default, Kibana connects to the Elasticsearch instance running on localhost, but you can connect to a different Elasticsearch instance. Simply modify the Elasticsearch URL in the Kibana configuration file that you had edited earlier and then restart Kibana.

Shipping Logs

Our next step is to set up a log pipeline into Elasticsearch for indexing and analysis using Kibana. There are various ways of forwarding data into Elasticsearch, but we’re going to use Logstash.

Logstash configuration files are written in JSON format and reside in /etc/logstash/conf.d. The configuration consists of three plugin sections: input, filter, and output.

Create a configuration file called apache-logs.conf:

sudo vi /etc/logstash/conf.d/apache-logs.conf

Our first task is to configure the input section, which defines where data is being pulled from.

In this case, we’re going to define the path to our Apache access log, but you could enter a path to any other set of log files (e.g. the path to your PHP error logs).

Before doing so, however, I recommend doing some research into supported input plugins and how to define them. In some cases, other log forwarders such as Filebeat and Fluentd are recommended.




The input configuration:

input {
    file {
        path => "/var/log/apache2/access.log"
        type => "apache-access"
    }
}

Our next task is to configure a filter.

Filter plugins allow us to take our raw data and try to make sense of it. One of these plugins is grok — a plugin used to derive structure out of unstructured data. Using grok, you can define a search and extract part of your log lines into structured fields.

filter {
  if [type] == "apache-access" {
    grok {
      match => { "message" => "%{COMBINEDAPACHELOG}" }
    }
  }
}

The last section of the Logstash configuration file is the Output section, which defines the location to where the logs are sent. In our case, it is our local Elasticsearch instance on our localhost:

output {
    elasticsearch {}
}

That’s it. Once you’re done, start Logstash with the new configuration:

/opt/logstash/bin/logstash -f /etc/logstash/conf.d/apache-logs.conf

You should see the following JSON output from Logstash indicating that all is in order:

{
        "message" => "127.0.0.1 - - [24/Apr/2016:11:41:59 +0000] \"GET / HTTP/1.1\" 200 11764 \"-\" \"curl/7.35.0\"",
       "@version" => "1",
     "@timestamp" => "2016-04-24T11:43:34.245Z",
           "path" => "/var/log/apache2/access.log",
           "host" => "ip-172-31-46-40",
           "type" => "apache-access",
       "clientip" => "127.0.0.1",
          "ident" => "-",
           "auth" => "-",
      "timestamp" => "24/Apr/2016:11:41:59 +0000",
           "verb" => "GET",
        "request" => "/",
    "httpversion" => "1.1",
       "response" => "200",
          "bytes" => "11764",
       "referrer" => "\"-\"",
          "agent" => "\"curl/7.35.0\""
}

Refresh Kibana in your browser, and you’ll notice that the index pattern for our Apache logs was identified:

Kibana interface

Click the Create button, and then select the Discover tab:

Kibana interface

From this point onwards, Logstash is tailing the Apache access log for messages so that any new entries will be forwarded into Elasticsearch.

Analyzing Logs

Now that our pipeline is up and running, it’s time to have some fun.

To make things a bit more interesting, let’s simulate some noise on our web server. To do this I’m going to download some sample Apache logs and insert them into the Apache access log. Logstash is already tailing this log, so these messages will be indexed into Elasticsearch and displayed in Kibana:

wget http://logz.io/sample-data
sudo -i 
cat /home/ubuntu/sample-data >> /var/log/apache2/access.log
exit

Kibana interface

Searching

Searching is the bread and butter of the ELK Stack, and it’s an art unto itself. There is a large amount of documentation available online, but I thought I’d cover the essentials so that you will have a solid base from which to start your exploration work.

Let’s start with some simple searches.

The most basic search is the “free text” search that is performed against all indexed fields. For example, if you’re analyzing web server logs, you could search for a specific browser type (searching is performed using the wide search box at the top of the page):

Chrome

It’s important to note that free text searches are NOT case-sensitive unless you use double quotes, in which case the search results show exact matches to your query.

“Chrome”

Next up are the field-level searches.

To search for a value in a specific field, you need to add the name of the field as a prefix to the value:

type:apache-access

Say, for example, that you’re looking for a specific web server response. Enter response:200 to limit results to those containing that response.

You can also search for a range within a field. If you use brackets [], the results will be inclusive. If you use curly braces {}, the results will exclude the specified values in the query.

Now, it’s time to take it up a notch.

The next types of searches involve using logical statements. These are quite intuitive but require some finesse because they are extremely syntax-sensitive.

These statements include the use of the Boolean operators AND, OR, and NOT:

type:apache-access AND (response:400 OR response:500)

In the above search, I’m looking for Apache access logs with only a 400 or 500 response. Note the use of parentheses as an example of how more complex queries can be constructed.

There are many more search options available (I recommend referring to Logz.io’s Kibana tutorial for more information) such as regular expressions, fuzzy searches, and proximity searches, but once you’ve pinpointed the required data, you can save the search for future reference and as the basis to create Kibana visualizations.

Visualizing

One of the most prominent features in the ELK Stack in general and Kibana in particular is the ability to create beautiful visualizations with the ingested data. These visualizations can then be aggregated into a dashboard that you can use to get a comprehensive view of all the various log files coming into Elasticsearch.

To create a visualization, select the Visualize tab in Kibana:

Create a visualization

There are a number of visualization types that you can select, and which type you will choose will greatly depend on the purpose and end-result you are trying to achieve. In this case, I’m going to select the good ol’ pie chart.

We then have another choice — we can create the visualization from either a saved search or a new search. In this case, we’re going with the latter.

Our next step is to configure the various metrics and aggregations for the graph’s X and Y axes. In this case, we’re going to use the entire index as our search base (by not entering a search query in the search box) and then cross reference the data with browser type: Chrome, Firefox, Internet Explorer, and Safari:

Pie chart visualization

Once you are finished, save the visualization. You can then add it to a custom dashboard in the Dashboard tab in Kibana.

Visualizations are incredibly rich tools to have, and they are the best way to understand the trends within your data.

Conclusion

The ELK Stack is becoming THE way to analyze and manage logs. The fact that the stack is open source and that it’s backed by a strong community and a fast growing ecosystem is driving its popularity.

DevOps is not the sole realm of log analysis, and ELK is being used by developers, sysadmins, SEO experts, and marketers as well. Log-driven development — the development process in which code is monitored using metrics, alerts, and logs — is gaining traction within more and more R&D teams, and it would not be a stretch of the imagination to tie this to the growing popularity of ELK.

Of course, no system is perfect and there are pitfalls that users need to avoid, especially when handling big production operations. But this should not deter you from trying it out, especially because there are numerous sources of information that will guide you through the process.

Good luck, and happy indexing!

Source Sitepoint

great_html5_tools_prime

15 HTML5 tools to make your life easier

HTML5 seems to have been around forever but it was in fact only finalised in October 2014 – although it has been implemented for around five years prior. More and more of the web’s legacy sites are switching to this markup language due to its functionality and ability to create responsive web design, and HTML5’s involvement in new sites is virtually taken for granted – have a look at these great HTML5 examples.great_html5_tools_prime

However, HTML5 implementation is not as straightforward as it may seem, especially for new and inexperienced web designers. Neither skilled nor amateur web developers or designers can operate effectively without good HTML5 tools. Here we’ve provided a list of the most essential and best HTML5 tools to help create amazing modern websites.



01. Adobe Dreamweaver

Dreamweaver is still a great HTML5 tool

This is the most used HTML authoring tool for responsive website design. It combines a visual design surface and a code editor. Together with free HTML5 Pack extension, this tool provides more options, allowing web developers to easily create, deliver and optimize HTML5 content for diverse desktop and mobile platforms. Dreamweaver is available as a part of Adobe Creative Cloud2015, with plans starting from US$19.99 per month.

02. Bootstrap

Bootstrap is free and open-source

Bootstrap is a free and open-source tool kit and framework for creating websites and web applications. It offers HTML and CSS-based design templates which you can tailor to your needs. Another alternative is HTML5 Boilerplate, which is along similar lines.

The tool provides web designers with a great deal typography elements, forms, buttons, navigation, as well as optional JavaScript extensions. To switch to HTML5 doctype, you just need to include it at the beginning of all your projects.

03. Freemake Video Converter

Create HTML5 video out of virtually any format

This free video converter will help web developers create HTML5-ready video. It may turn any desktop video or DVD to three HTML5 compatible formats: MP4/H.264, Theora/OGG, VP8/WebM. All you will need is to upload the resulted videos to your server and copy-paste the embed code the tool provides onto your webpage. That is an ideal solution for websites owners who prefer in-house video hosting to public video services like YouTube or Vimeo.

04. Sublime Text

Sublime Text is a great multi-purpose text editor

This is a simple yet powerful advanced text editor for code and markup. But its simplicity is only on the surface. If you dig in just a bit, and you’ll be able to find built-in plugins, clever auto-completion tricks, and more. To add HTML5 syntax and snippets to it, you need to install HTML5 bundle. Sublime Text may be downloaded and evaluated for free, however a $70 license must be purchased for a continued use.

05. HTML5 Maker

Add interactive elements with HTML5 Maker

This tool makes it easy for web developers and designers to add interactive elements to their website with the help of HTML, CSS3 animation and JavaScript. With this tool, you may create stunning interactive banners, animations, slideshows.




There are many ready templates of all topics and sizes and an awesome clipart collection. With a free account, you can create one animation with a watermark on it. Premium plans start from $4.99 per month.

06. Google Swiffy

Convert your SWF to HTML5 in a jiffy with Swiffy

This is a simple Flash to HTML5 converter available free on Google Developers site. You can upload your SWF file and Swiffy will convert it, and send back with a preview and a link to download the new HTML5 file. With this tool, web developers can reach users on mobile devices, where Flash isn’t supported.

07. BlueGriffon

A decent free alternative to Dreamweaver

This is a good free WYSIWYG content editor for HTML5, which lets switch between source code and WYSIWYG preview. Even if your web document is created with another editor, BlueGriffon will import, recognize and help modify it in an easy way. The tool also allows you to embed HTML5 audio or video elements directly into the code.

08. WebStorm

WebStorm is a reasonably-priced lightweight IDE

WebStorm is a lightweight integrated development environment (IDE). It provides full support for HTML5, JavaScript, Node.js and many modern frameworks, advanced debugging, and all the tools you need for productive web development. A personal license costs $49 and a commercial one $99.

09. W3 Validator

Ensure your markup is valid with this essential tool

Once your web document is almost ready, you need to check its markup validity. Choose HTML5 as a document type and insert your webpage URL. The tool will test your code and show all errors and warnings in it if any. It’s absolutely free.

10. HTML5 Reset

This tool is a handy markup rewriter

This tool lets web developers and designers to rewrite their old website designs in HTML5 coding. The package is hosted on GitHub as well as HTML5 Reset WordPress theme, which includes semantic HTML5 markup, CSS declarations for the basic WordPress elements, a widget-ready sidebar, iQuery, and built-in analytics.

11. CreateJS

Create rich interactive content with these tools

This is a suite of open source libraries and tools to create rich interactive content. The suit comprises four main libraries which can work completely independently, or matched, and some related tools. For example, EaselJS lets work with graphics and interactivity using HTML5 Canvas. SoundJS provides HTML5 audio playback on different browsers and devices.


12. LiterallyCanvas

This drawing board can be embedded in HTML5

Literally Canvas is an open source HTML5 drawing widget. It’s kind of like an extensible MS Paint in JavaScript. You can use it to embed drawing boards on your web pages, so that your users could sketch drawings. The tool uses React.js for its GUI.

13. HTML5 Please

HTML5 Please helps you to search for a feature that you want to use and find out how to do so. For instance, type video and you’ll see the full list of useful resources about supporting browsers and devices, syntax peculiarities, general recommendations how to use this tag. If you think that the recommendation is incorrect, you may edit it and send a pull request.

14. Font dragr

This tool allows web designers to easily test custom fonts without the need for any CSS. All you have to to do is drag and drop the font. The bookmarklet button provided by the tool lets test any font from your file system, in the gallery or on any website.

15. Chrome Console

One of the simplest solutions for HTML5 coding is Google Chrome console. Go to a website, hit F12 and start coding straight away. The console lets customize any web elements on the webpage and immediately preview the changes. The device emulator is also indispensable for testing designs on various gadgets.

I hope this toolkit list will help you create stunning HTML5-based websites. Please share in the comments your favorite apps and software which do the same.

Source Creative bloq

logo-design-trends-2016_zpsmu0ezehh

5 Hot Logo Design Trends of 2016

Web designer folk often discuss new year web trend predictions but what about logo trends? As the saying goes, ‘the devil is in the details’ and even seemingly small changes to your logo can make a big impact on the growth of your brand.logo-design-trends-2016_zpsmu0ezehh

While few of these forecasted trends are entirely new, here are 5 specific looks that we’re already seeing more of in 2016.

The Monoline

Monolines

Last year we started seeing line art take shape thanks to designers still embracing flat design and it looks like that will be carrying over to logo design.




Monoline logos are exactly how they sound. They are logos crafted from a single line that doesn’t deviate in weight – it looks like it could be fabricated from a single strand of wire. The monoline provides a stripped down, bare bones look while giving a nod to the popular iconography of the web.

La Vacaciones

Single line work is usually monotone too, so it gives your design a crisp, artisanal look without the clutter. The monoline lends itself beautifully to helping you create intricate design work that can really make your brand pop yet remain legible.

Of course, the monoline isn’t for everyone, some niches can work this look in better than some. There are always limitations to how small you are able to scale these fine-lined designs. The piece above is not going to work on a button.

I’ve noticed the food and beverage trade and small boutiques and salons adopting this look, but it’s versatile enough to fit a much wider market.

Wordmarks

Coke - the most famous workmark

As the 100-year old design above attests, creating your logo as a wordmark is nothing new. Besides Coca-Cola, notable examples include CNN, McDonalds, and Disney.

Los Angeles Rams

Los Angeles Rams wordmark – Unveiled January 2016.

Mule

Mule: by Xalion

Wordmarks are typographical in design that works as a visual symbol for your brand. They are minimalistic by nature but are typically creative when it comes to placement, type shape, color and other design factors.

The great thing about wordmarks is that even if every single company decides to adopt the trend, each look will be uniquely different as they are designed to present a visual identity.

Ziphub - Stanislav Levin - Brandcut.com

ZipHub by Stanislav Levin – Brandcut.com

Compared to traditional graphical logos, the wordmark can help increase brand recall by keeping the design content within the text. This reduction in focal points diminishes the chances of clutter.

The wordmark can be used for most niches but it requires a lot of thought and creativity to pull off due to its type only format. If the above-mentioned examples are anything to go off of, the wordmark is virtually timeless.

Negative Space: Don’t be Afraid to be Negative

Cloak & Dagger logo

The use of negative space has been in trend for some years now especially when it comes to web design as a whole so it isn’t a surprise that it is in trend for logos.




Using negative space in design helps establish balance and sets harmony between your used elements which is especially helpful in logos that use multiple shapes and type. Negative space adds “more” to your design even though you are actually using less.

Paint the City logo

It can also help create cool optical illusions.The experienced designer can use negative space to not only keep their logo clean but also to design a memorable look that can set their brand apart from the next guy.

Like wordmarks, your brand doesn’t really matter when it comes to utilizing the negative space trend. It is all about your creativity and willingness to experiment that will make this trend work for you.

Duotones

Duotone

For 2016’s web design trends, duotones was on the list and is now crossing over to this year’s logos, even though we have seen some popular companies already do this.

Originally dual coloring was predominately seen used on sites that featured large photographic backgrounds but that soon moved over to colorful branding identities. Using two colors allows you to really let your logo “speak” for you and with bold colors being in trend now there is no better time to try your hand at dual coloring your logos.

Web Factory 'W' two-tone logo

Web Factory By Bojan Stefanovic – logoholik.com

While your logo design will play a factor, keeping your logo at two colors will keep it from getting too busy. Targeted markets will be able to identify with the design quicker, plus the unique look is a nice refresher compared to monotone logos.

Aside from the color limit there really isn’t a real downside to dual coloring as far as your brand is concerned. Businesses that have compound names or even have a logo composed of two shapes can really take advantage of this trend.

Handmade Look

The Vector Lab - Garage Collection

With this year seemingly focusing on more unique and authentic designs for a better user experience, it comes to no shock that logos will also be hit with this as well.

Yes, technically logos are sketched out in concept but instead of going for the sleek, clean sophisticated end result, designers will be embracing a more playful dynamic and with reason. The handmade or hand-drawn look makes your designs seem more personable which is always a good thing.

Robin's Nest

There are lots of options as far as how you want your logo to look. You can go for a rough illustration with jagged edges. Perhaps whimsical soft lines – like the ‘Robin’s Nest’ example above – or variable brushstrokes are also some other options that you might want to consider. You can even experiment with mono coloring, dual coloring or add multiple colors along with textures for a creative final look.

Paperbridge

Paperbridge logo by Goran Vujinovic

Opting for the handmade look can potentially give your brand some flare with a quasi-vintage look without going overboard with the bells and whistles we often attribute with digital art.




The Handmade approach has the ability to create a strongly masculine or feminine aesthetic depending on how you draw them out which makes it an accessible option for experimenting designers. There is also the bonus of being able to implement more than one trend with your handmade logo allowing it to look artistically intentional instead of too busy.

Mirra - Rita Konik

Mirra – Rita Konik

The handmade look needs to be used with some discretion. It is best suited for those more artistic fields and blogs. Formal businesses may want to stay away from this trend to avoid brand miscommunication with their targeted audience.

The Wrap Up

Of course, sometimes the best way to get a memorable design is to take the hottest design trends and then do the exact opposite. Even then, it’s important to understand what is ‘on-trend’ first, and today I have presented you five options that I’m seeing more and more consistently.

If you are in the process of updating your logo or even designing a new one for yourself or a client you may want to take one of these (or mix them up) for a spin. Who knows what you might create as the possibilities are endless.

Do you have a favorite logo trend for this year? Will be using any of these or another one?

Source Sitepopint

21

10 UX design trends to follow in 2016

It is important to have a good-looking, top quality website as it attracts audience. But it is equally essential to have a a user experience design so that people are able to interact with the site or app conveniently and comfortably. The audience should enjoy while interacting with your site, applications, products etc.

In simple words, make sure that the methods used to design a website is according to the need and taste of your target audience. A site should appeal to it’s users for instance, it should be well organized, easy to navigate, and offer the audience some benefit in order to succeed. According to an article published on blog.invisionapp.com, 88% of online consumers are less likely to return to a site after a bad experience.

Therefore, if your are startup or have a small business then having a user experience design is key for growing your company. Your site is the first thing users see and therefore a good user experience will only increase the traffic on your site and make them come back to your site.




Now, as the technology changes so fast, so does the user experience design trends. Let’s have a look at the top 10 UX design trends & predictions for this year.

1. Anticipatory design will become common

Anticipatory design is a way of simplifying the processes as much as possible for the audience, reducing difficulty by taking decisions on their behalf. Some basic features of anticipatory design that are being used for long include pop-up boxes, in-app notifications, recommendations and geolocation. These days, there are other tools as well that act as a personal assistant for the users. For instance, Google Now provides information to the user based on the search results. If you have a restaurant reservation, it suggests you about traffic conditions on that route.

ux trend 1

2. User-centered design will rule

User-centred design (UCD) refers to creation of a design after talking to and taking views of the users so that what they see and experience is their taste and preferences. There will be more emphasis on how a user would like using the product than how you want the user to use it. At every level, business owners should consult people before developing the site or product further. According to Growthhackers, ESPN.com revenues jumped 35% after they listened to their community and incorporated suggestions into their homepage redesign.

ux trend 2

3. Being persuasive is a must

Having an easy-to-use interface of your website or product is not enough. Being persuasive is a must these days. It is important that the designers know about how to use psychology techniques so that people are encouraged enough to take actions. I mean, if you understand the working of a human mind, it will be easier for you to grab their attention and retain it. For instance, by giving a free shipping offer can persuade your customers to buy from your site.

4. Wearable devices are in

Wearable devices are the latest things, especially after the launch of Apple Watch and Google Glass. An article published in Forbes reveals that 245 million wearable devices will be sold in 2019. Therefore, marketers should also keep in mind these devices while developing designs for their apps or site. The content should be optimized in such a way that it takes only a few seconds to open it. Also, colour, texture and font are crucial to people visiting your site or app.

wearable-devices

5. Embrace interactive prototyping

It has become essential for all small businesses and startups to create interactive prototypes for validating user experience. An interactive prototype helps designers to set up the final designs with minimal efforts without any further help of developers. It will let you know where a user might face a problem.

For instance, companies such as Invisionapp, Marvelapp, Flinto and CanvasFlip create interactive prototypes in minutes. Your prototype will display what you think about user experience.

ux trend 5

6. Power of swipe

This is an era of touchscreen. There is not even a single youth who has not experienced touchscreen. In fact understanding a smartphone comes very naturally to them. This itself shows that these types of gesture interactions make working on mobile devices quite easy and fun. Such interactions add value to the user experience as they are intuitive. With a ‘swiping’ interface, you can offer best possible experience to your users. So, don’t shy away from doing an experiment.


7. The potential of layered flat design

These days, designers and users prefer flat designs because of their simplicity and user-friendliness. An article published in webinsation.com states that every designer is adopting the trend of “flat design” and applying it to their work. There are no added features such as 3D effects or shadows but just a flat design which is simple yet elegant. If you haven’t embraced flat as yet, do it NOW! For instance, the website Space Needlehas truly captured the flat design trend. However, make sure that important design elements such as your custom logo design and contact details aren’t buried under the fold.

ux trend 7

8. UX for smart TVs

With smart TVs being taking a place in our houses, marketers are thinking to launch apps that will connect consumers to TV. However, it is quite visible that TVs are not such big buzzwords as smartwatches were. But you should not commit this mistake as TVs can help you reach a large part of audience and sell more products.

ux trend 8

9. Enigma of design animations

Design animations make user experience better in a way that it helps in concentrating on one item, it can guide the user of the further action and it will help you manage time efficiently by giving a message (your friend is writing). Animations let you interact with your customers and not let them get bored. For instance, you are urged to wait at the interface when you see a message that your friend is typing a response whether on Facebook, Whatsapp or Slack.

9


10. The rise of storytelling

Having good quality, authentic content is not enough. Content in the form of a story will add x factor to your business as users find it easy and fun to consume content that way. And this, let us tell you in advance, won’t be an easy task. You will need to tell the information about your product or service in the form of a story. For the content to be effective, you need to make users a character in the story, make all your visuals react, gamify your product, decide on the beginning, middle and the end. For instance, check out an amazing example of photo-storytelling by Housing.com in their app. After using the storytelling technique, conversions and engagement on Housing.com’s new App doubled.

Conclusion

So, there you have it! We are sure that after reading these 10 UX design trends and predictions, you must have been convinced to design your site according to the taste and preferences of your consumer. This will be the key priority for many companies in 2016 and it will be better if you embrace it too!

20160217_php

20 Tips you need to learn to become a better PHP Programmer

PHP is a very versatile programming language that can achieve the same objective in multiple ways. You can read more about that in my ‘The Art of Programming‘ post. Below are a few tips I’ve picked up from past projects that can improve your code readability and maintainability and make you a neater, more organized PHP programmer.

20160217_php

Here you go:

Use <?php and ?>

To start your script, avoid using <? ?>. While these may work on your server, they might not work on another server if you ever decide to run your script elsewhere.




Similarly, when echoing a variable, try to avoid using the shortcut tags as they might not be supported everywhere. I found it pretty hard to stop using them since they save so much space but at the end of day, they do make your code more portable.

1
2
3
4
5
<? ... ?> // Incorrect
<?php ... ?> // Correct
<?=$Var?> // Incorrect
<?php echo $Var ?> // Correct

Separate Configuration Files

There’s no reason you should be adding configuration settings to your script file. Always create a separate file and include that file at the top of your script. The last thing you want is to have to edit each and every page because of a little configuration change. Including a file is super easy:

1
2
3
include("<span class="skimlinks-unlinked">config.php</span>");
// code goes here ...

Comments are your Friend

Yep, I bet you saw this one coming? It’s amazing how hard we find it to understand our own code that has been written a while ago. Comments will help you figure out certain things which seemed obvious at the time. Here’s the syntax:

1
2
3
4
5
6
// Line One Comment
// Line Two Comment
/** Paragraph Comment
Paragraph Comment
Paragraph Comment **/

Easy, huh?

Use Indentation and Spacing

There’s nothing much worse than having to modify somebody’s code and realizing nothing has been indented properly. Having well indented code with the right spacing immediately says a lot about you as a programmer. Ideally, you should be able to immediately figure out whether a loop has ended or not by just quickly looking through your code. Here’s an example of badly indented code:

1
2
3
4
5
function  dothisformula($a,$b) { $c = $b+$a;
     $e=3;
while ($c < 20) {
$e = $e - 1; $c = $c + 1; }
     return $e; }

And here’s the same code, properly formatted:

1
2
3
4
5
6
7
8
9
function dothisformula($a, $b) {
     $c = $b + $a;
     $e = 3;
     while ($c < 20) {
          $e = $e - 1;
          $c = $c + 1;
     }
     return $e;
}

See what a difference some spacing makes?

Give your Variables Meaningful Names

Always give your variables name that mean something to you. Take this one step further by also including some details about what type of data they store. For instance, if we were using a variable as an integer, you could add an i to the beginning of the name. This especially important since we do not specify a type when declaring a variable in PHP.

Choosing whether to have caps or not in your variable name is up to you but it is often recommended to capitalize the first letter of every word in your variable. This makes it easy to read and understand.

Here’s what I use:

1
2
3
4
5
6
7
8
9
10
11
$iNumber = 10; // For Integers
$sName = "Marc"; // For Strings
$fPi = 3.14159265; // For Floats
$aNames = array(); // For Arrays
$oUser = new User(); // For Objects
$bIsMember = false; // For Booleans

Initialize your Variables

Although PHP will automatically create a variable the moment you try to assign a value to it, it is always good practice to initialize your variables before using them. This will make your code much cleaner and make sure your variables are always the type you want them to be:

1
2
3
$aArray = array();
$iInteger = 0;
$bBoolean = false;

Boolean is False, unless True

If you’re checking whether something is a specific value and storing the result in a boolean value, always start off assuming it’s false. For instance, the following code should be avoided:

1
2
3
4
5
function getStatus() {
    $bReturn = true;
    if ($i != 2) $bReturn = false;
    return $bReturn;
}

Instead, you should use:

1
2
3
4
5
function getStatus() {
    $bReturn = false;
    if ($i == 2) $bReturn = true;
    return $bReturn;
}

The second is the ideal solution for when you’re just checking one item. Why? Well, imagine you’re validating some data for a database – If, for whatever reason, your if statement is completely missed, your return value will still be false, therefore avoiding the input of invalid data. Since we frequently deal with sensitive data in PHP scripts, it’s better assuming something should not run until proven otherwise, rather than the other way round. I learned this the hard way.

Ideally, your validation should check what your data should be like, not what it shouldn’t be like.

Using Quotes when accessing Array Keys

When accessing arrays, you might find that the following two lines both work:

1
2
$sName = $aNames['marc'];
$sName = $aNames[marc];

In the second line, PHP is actually first trying to find a constant called “marc” and then converting “marc” to a string once no constant is found. Even though it works, you should avoid using no quotes as if you ever create a constant with the same name, your script would stop working.

Use commas to echo different strings

If you want to output both text and variables in the same string, you can use commas instead of dots. Why? Because it is marginally faster (based on this test).

1
echo "Hello, my name is ", $sName;

Instead of…

1
echo "Hello, my name is " . $sName;

Use Ternary Operators

If you have a simple IF statement, you can use a ternary operator which allows you to do the same thing in one line. Here’s an IF statement:

1
2
if ($a == 1) $b = 2;
else $b = 3;

You can do the same thing using a ternary operator as shown below:

1
$b = ($a == 1) ? 2 : 3;

Easy, right? The ternary operation is basically doing this:

1
$variable = (CONDITION) ? IFTRUE : IFFALSE;

Use === for Boolean Checks

If you’re checking whether a variable is true or false, use === rather than the usual == which we use for comparisons. The three equal signs tell PHP to also check the variable type.

1
2
if ($bIsMember == true) { ... } // Incorrect
if ($bIsMember === true) { ... } // Correct

Use ++ and — Operators

If you want to increase or decrease an integer by 1, you can easily use incrementing and decrementing operators. If you have the following code:

1
2
$iNumber = $iNumber  + 1;
$iNumber2 = $iNumber2 - 1;

This should be converted to:

1
2
$iNumber++;
$iNumber2--;

The great thing about these operators is the way you can use them while completing other actions (for instance, in an if or while statement). Depending on whether you put the or ++ before the variable or after, the operator will run before or after the action is complete. The examples below are all valid uses and will help you understand what I mean:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$iNumber = 10;
while ($iNumber++ == 10) { ... }
// This will run once as the increment operator
// is run after the comparison
$iNumber = 10;
if (--$iNumber == 10) { ... }
// This will not run as the decrement operator
// is run before the comparison
$iNumber = 10;
$iTotal = $iNumber++;
// $iTotal will be 10.
$iNumber = 10;
$iTotal = --$iNumber;
// $iTotal will be 9.

Use Assignment Operators

If you wanted to increase or decrease a variable by more than one, you can easily use assignment operators. Here’s how your code might look:

1
2
3
4
$a = $a + $b;
$a = $a * 5;
$a = $a - $d;
$a = $a / 3;

Using assignment operators, you can instead write:

1
2
3
4
$a += $b;
$a *= 5;
$a -= $d;
$a /= 3;

You can also use this for strings. The following two lines do the same thing:

1
2
$sString = $sString . "hello";
$sString .= "hello";

Create a Variable Dump Function

We’re all familiar with print_r which we constantly use as we’re testing our script and figuring out what value our variables currently have. To make this even simpler, you can create a function such as:

1
2
3
4
5
function p($var) {
    echo "<pre>";
    print_r($var);
    echo "</pre>";
}





This will make sure your variable dump is always enclosed by <pre> tags which are used to make your output much more readable. Additionally, since we can give our function a one letter name, it will be even faster and easier to use.

Use Constants

If you have a variable which never changes, there’s no point constantly re-writing the same thing over and over again. Use constants to define data which you access often like directory paths, error messages etc. I’d recommended giving your constants names which are fully capitalized to help you realize immediately when you’re using them.

1
2
3
define ("DIRECTORY","/path/to/site/");
echo DIRECTORY;

Use $_GET and $_POST

Avoid using $_REQUEST which gets both POST and GET variables. Use $_GET to get parameters from your URL and use $_POST to get variables submitted from a form:

1
2
3
$sAction = $_GET['actions'];
$sName = $_POST['name'];

This will avoid users manually overwriting variables in the URL which you are expecting to receive from a form.

Use Objects instead of Functions

If you function has lots of parameters, it’s time to move over to objects. I’ve worked on projects that got too complex to maintain after a few of the functions ended up having over 20 parameters! The moment you realize you need to modify the way the function is called, you will need to change each and every function call. So, instead of this:

1
2
3
4
function getProducts($iParameter1, $iParameter2,
$iParameter3, $iParameter4, $iParameter5,
$iParameter6, $iParameter7, $iParameter8,
 $iParameter9) { ... }

You can use:

1
2
3
4
5
$oProducts->setParameter1(...);
$oProducts->setParameter3(...);
$oProducts->setParameter5(...);
$oProducts->setParameter6(...);
$oProducts->getProducts();

Use Method Chaining

If you’re doing multiple object method calls that set variables instead your object, you can use method chaining to make your code simpler. To do this, just end each method with return $this; as shown below:

1
2
3
4
5
6
7
8
9
10
11
12
13
class User {
    function setThis($iVar) {
        ....
        return $this;
    }
    function setThis2($iVar2) {
        ....
        return $this;
    }
}

You will then be able to do method chaining:

1
2
3
$oUser = new User();
$oUser->setThis(...)
      ->setThis2();

That will make your code smaller and neater.

Stop Repeating Code

Don’t repeat any code – If you have a few lines that do the exact same thing, turn them into one function. Or better yet, turn them into an object. Although this might seem like extra work, it will pay off once your application gets bigger and bigger. As a simple example, if you had:

1
2
3
4
5
6
7
8
$a = 1;
while ($a < 10) {
    $b = $a * 10;
    $c = $b * 2;
    $d = $c * $b;
    echo $d;
    $a++;
}

You could write this like this:

1
2
3
4
5
6
7
8
9
10
11
12
function multiply($iVar, $iVar2) {
     return ($iVar*$iVar2);
}
$a = 1;
while ($a < 10) {
    $b = multiply($a, 10);
    $c = multiply($b, 2);
    $d = multiply($c, $b);
    echo $d;
    $a++;
}





This is, of course, a super simple example. This will be especially useful for when you have big portions of code that are repeated.

Aim for Loose Coupling, Strong Cohesion

Coupling is the degree in which the change in one component requires a change in another. In other words, if you change one function, will you need to change another? The looser the coupling, the more you will be able to modify components without affecting others. Cohesion, on the other hand, is the degree in which different parts form a meaningful unit. Does your main function do practically everything or do you have many functions which each do very specific jobs? If you do, then you have a strong cohesion. Strong Cohesion happens when your components have clearly defined responsibilities and call other functions for processing which does not form part of their objective.

As a PHP Programmer, you should always aim to create components (functions, classes…) that are both loosely coupled and have a strong cohesion to increase code maintainability and extensibility. Whenever creating a function, try to keep in mind that you might have to use it in other scenarios. Avoid adding code which is highly dependent on other components being set up correctly. Ideally, you should be able to change a system and any other systems depending on it will continue to work without modification.

If we apply this to code, here’s a simple example:

1
2
3
4
5
6
7
8
9
10
11
12
13
// We want to add two numbers
// only if the first number is
// lower than 5
function add($iVar, $iVar2) {
    if ($iVar < 5) return false;
    else $iResult = $iVar+$iVar2;
    echo "The Result is ", $iResult;
}
$iVar = 3;
$iVar2 = 2;
add($iVar, $iVar2);

The example above is tightly coupled and has weak cohesion since we are doing validation inside the function itself. We are also putting the result output inside the function itself which will be a problem once we have many functions doing the same and we decide to change the text for it.

Here’s a much better version:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// We want to add two numbers
// only if the first number is
// lower than 5
function add($iVar, $iVar2) {
    return $iVar + $iVar2;
}
function result($sMessage) {
    return "The Result is " . $sMessage;
}
$iVar = 3;
$iVar2 = 2;
if ($iVar < 5) {
    echo result(add($iVar, $iVar2));
}

We can now re-use both add and result functions anywhere in the code. We can also easily modify their functionality without having to modify any other part of the program.

In Summary

The tips above should help you write neater, shorter and more organized code. The examples above were very simple but should help you understand the basics of each concept. If you do not agree with me on any one of them, please go ahead and comment below. We’re all here to learn. :)

Bonus Tip

If you’re a PHP Programmer, the official PHP documentation should be your bible. I would recommend going through the different sections and discovering what each function does. You’ll be amazed at just how much you can achieve with ready-made functions.

Hope you found this post helpful. Leave any comments below. Thanks!

Source webgeekly

How-HTML5-And-CSS3-Will-Change-Web-Design

How HTML5 And CSS3 Will Change Web Design

Although not fully operational, HTML5 in combination with CSS3, will be a significant upgrade from how websites are currently being constructed. The majority of websites today are based on HTML4, which was released in 1999, over 12 years ago. Since its release, there have only be small adjustments made to HTML4, but HTML5 has been in the processing pipeline since 2001.How-HTML5-And-CSS3-Will-Change-Web-Design

HTML5 was originally predicted to be released in 2022, but the release date has since been adjusted to 2014. The rate-limiting step in the release process has of course been Microsoft. Since the company is so huge, it takes a long process to make alterations to anything. The biggest change is the adaptation of Internet Explorer to allow the use of HTML5, and for some time Microsoft wasn’t making any changes to allow this. But, it’s now clear that Internet Explorer 9 will be able to use some of the new features.

Some browsers are currently not accepting all of the complex features of HTML5 and CSS3, but developers are working to implement these features on all browsers as quickly as possible. With that said, there are a number of available elements that include a variety of great features available now, and the rest of the features can be added to a website’s code without the use of any 3rd party applications.

Anyone who has had an iPhone or any type of device running on the iOS platform knows the trouble they face when trying to run a Flash application. These apps simply will not function properly. This has established the idea that developers need an alternative to Flash. The combination of HTML5 and CSS3 not only resolves this problem for developers, it makes it even simpler for the development of other apps for different types of mobile devices, which opens the doors for a number of new designs and website formats.

Often the transition from one platform to another requires learning how to design a page all over again. One of the biggest positive aspects surrounding HTML5 is the fact that it is based on HTML4. This means integrating code from HTML4-based pages is simple and easy. This also means a number of the attributes in HTML4 are also accessible in HTML5, but these attributes have been adjusted to make the new platform easier to use. In some cases, older code can remain in place while the new attributes are utilized. There are number of new elements found in HTML5 and CSS3, almost too many to list, which is why this article will cover some of the main features people are most excited about.

The Latest With HTML5

1. One of the biggest features developers are looking forward to is the audiovisual support that HTML5 has. Although it is not totally functional yet, the completion of the feature has more than a positive outlook. Upon its completion, developers will not require 3rd party plugins in order to stream audio and video on the their websites.

2. The application cache feature makes it possible for developers to utilize web applications without being connected to the Internet. This is done by creating a cache manifest file on a web server. The necessary resources to operate offline can then be retrieved through the manifest element of HTML tag. The code is simple and the resources can reached with the command: <html manifest=”/cache.manifest”>, and an AddType directive in the .htaccess file found in the root web directory: AddType text/cache-manifest .manifest. The syntax for this command will vary slightly depending on the type of server that is being utilized.

3. HTML5 is a taking a page of Apple’s book by utilizing the canvas element, which is already supported in Safari and Firefox. With this feature, developers can produce flat graphics straight through the code utilizing the Draw function. This makes it possible to bypass the use of Photoshop in order to make a 2D image, and instead place the image directly in the code.

4. Declarations have also been simplified in the new HTML5. All HTML5 syntax requires that a doctype be specified in order for the browser to render the page in standards mode. In the past, this declaration was extremely long and took a relatively large amount of code to make the declaration. With HTML5, the new doctype declaration is simply: <!DOCTYPE html>, which eliminates a lot of coding for the developer.

CSS3’s Improvements

There are also a number of new features being implemented in CSS3 that work in conjunction with HTML5 in order to simplify the life of developers. Although not completely finished, CSS3 has been separated into different levels of completion. There are some features that are complete, while there are other features that are still being tested for completion. The layout and text formatting features are ready for use by developers, with some other features still in the works. Much like HTML5, there are some browser compatibility issues, and Internet Explorer compatibility is behind as well.

CSS3 provides a number of features for developers that may not be totally necessary for the functionality of the website, but provide aesthetic beauty. With the increasing demands of users for a clean-cut website, these features within CSS3 are being welcomed with open arms by developers. Using CSS3 in conjunction with HTML5 makes it much easier to create a website that will leave visitors “oohing and aahing” over the design.

CSS3 Box Shadows

TypeFaces makes elegant use of CSS3 box shadows by outlining photos.

1. One of the best new features available in CSS3 is the ability to create box-shadows with ease. This is a feature that makes the main content of the website slide beneath or on top of another object in order to create depth within the web page. With CSS3, developers can create this illusion without the use of a new image or a JavaScript plugin. In addition, this feature can also make the shadow appear when the pointer hovers above an image.

CSS3 Rounded Corners

Just Made My Day uses CSS3 rounded corners for speech bubbles.

2. Another great feature in CSS3 is the ability to create rounded corners in a much easier manner. Instead of using images, CSS3 utilizes a div tag and a border-radius element. Currently, this requires a bit of adjustment depending on the type of browser being utilized, but once the feature is complete, it will be universal throughout all browsers.

CSS3 RGBA

WeGraphics uses the RGBA coloring to fade the opacity of images on hover.

3. Coloring in CSS3 has never been easier with the implementation of RGBA coloring. Instead of having to know hex coloring or utilizing a cheat sheet, developers can now choose the amount of red, green, blue, and opacity that will be present within the design. Another bonus to this new feature is that it does not require any browser extensions in order function properly.

Ironing Out The Kinks In CSS3 & HTML5

As mentioned before, the main concern with CSS3 is cross browser compatibility. Although a large number of features in both HTML5 and CSS3 are ready and available to use, not all browsers are capable of utilizing them yet. One of the best browsers for these new features is the recently released Firefox 5. Opera 9.5 is also a contender as a new browser able to run these features as well, but it’s not quite perfect and still shows some inability to run a few of the features. Safari, Chrome and Kindle, which are all based on WebKit technology, can all run most of these features without any problems.

Although there are a number of individuals counting down the days until an alternative is put in place of Flash for iOS devices, HTML5 is not quite ready to take its place in the audio/video playing or animation department for a conventional browser. However, it does appear that in the near future, HTML5 will eventurally overtake Flash.

With the continued development of HTML5 and CSS3, websites will be created in a new and efficient manner. JavaScripts and plugins will no longer be necessary in order to format or handle images placed in the website, in addition to many other awesome developments. With that said, with the many features available for HTML5 and CSS3 that can be implemented into established code now, getting a head start will not only make websites look better, it will also make them work faster and more efficient as well. There are a number of websites available that provide guides for HTML5 and CSS3. Get to one now and starting learning about developing for the future.

HTML5 Resources

  • Dive Into HTML5 – An online book by Mark Pilgrim detailing the differences between HTML5 and HTML4 and giving excellent examples for how to use each HTML5 feature.
  • HTML5 Rocks – Use their demos and labs for a great way to begin experimenting with the new features HTML5 has to offer.
  • HTML5 W3C Official Spec – Read the original docs for yourself.

CSS3 Resources

  • CSS3.info – A massive collection of CSS3-related tutorials and information.
  • CSS3.com – A reference guide for CSS3 properties.
  • Quirksmode – See the latest browser support for CSS3 properties.
  • CSS3 Generator – Need to generate some CSS3 code and tired of writing out all the browser prefixes? Use this generator for almost every CSS3 property.
  • CSS3 W3C Working Group – See the official current snapshot of CSS3.

Tags

download

15 Logo Design Mistakes to Avoid

First impressions are everything, especially for a startup business. With a split second to grab viewers attention, your logo can make or break your business. Do not have the business with excellent products or services no one will see because of poor design.

I want to help you make that great first impression. Better yet, how to not make the wrong impression. Design a great logo and look out for the common logo design mistakes.download

1. No Research




Just looking at a logo, it may appear it was put together quick and easy, which is far from the truth. Before even touching a computer, hours of research should be the first step. Without research, the design may not connect with the desired audience. It is very tempting to get the idea you have on the computer. Slow down a little and create a design brief.

2. Designed By An Amateur

A lot of start-ups have a limited budget for branding. I totally get it. Business owners are turning to crowdsourcing sites or hiring a low-cost amateur.

The old saying “You get what you pay for” definitely applies when it comes to your logo. A large number of armature designs are stolen or designed poorly. Try to stay clear of Fiverr and crowdsourcing websites.

3. Designing in a Bubble




I often heard this phrase in design school. “Do not design in a bubble” which simply means, do not try to create the design all by yourself. You need fresh eyes on the logo. When you are the only one looking at the work there could be some things you do not see. It is always nice to have an unbias opinion.

4. Its Too Complicated

You like all of the bells and the whistles, so you try to cram them all into one logo. Major no no! Do not get caught up in all of the pretty elements. In reality, some of the best logos are simplistic such as; Nike, Fedex, and Apple.

5. Using Stock Art

Logos are supposed to be memorable and tailored to your business. Stock art will make your logo look very generic and similar to many others. If you purchased the stock art, who’s to say one hundred other people did not buy the same artwork.

6. Poor Font Choice

Font families and styles carry a unique personality. Pairing an elegant script font with a sports brand can cause a major disconnect. The best way to choose a great font for a logo is understanding the psychology of font.

There are great websites to purchase professional fonts such as; MyFonts, Font Squirrel, and Creative Market.

7. Designs Based on Personal Preference




“I really like this shade of pink” << Not an acceptable reason to choose a color, unless you are designing for only yourself. Basing decisions on personal preference will get you nowhere. What does your audience want? What make sense for the brand?

8. Too Literal

Choosing a burger icon for a burger bar or house for a real estate company are obvious solutions. I am sure these images are the first things that pop into your head. An excellent example of why you must brainstorm and push the thought processes. The logo will blend in with the rest of the burger joints.

9. Relying on Effects

If a logo needs to have gradients, drop shadows, or other effects, you have a big problem. A strong logo stands alone without all of the bells and whistles. One practice many designers uses when designing a logo is creating in black and white. If the logo has a strong appearance in black and white, then you are on to something.

10. Poor Color Choice




Color evokes a reaction and emotion. Have you ever notice the number of restaurants using the color red? One of the characteristics of red is encouraging an appetite. The color of your logo says a lot about your brand.

11. Not Receiving Proper Feedback

If you have a medical question, chances are you are going to consult with some in the medical field. The same applies with your logo. For the most useful feedback, be sure a professional designer is one of the people you are consulting with before releasing the logo.

Posting your logo randomly on social media waiting for that one person to give you a green light is not beneficial.

12. Using Raster Images

Have you ever seen an image with a pixelated look? Not very appealing. A raster image consists of pixels which are typical designing in Photoshop. Industry standard programs for logo design are Adobe Illustrator or Corel Draw, which are vector software. Vector software uses points instead of pixels which make a very noticeable difference.

13. Not Versatile




Your logo looks good on the computer but not printed on a sign. Big problem! Your logo needs to have the ability to hold its integrity at all times. A solution to this issue is to create logo variations for different situations. Be aware of how the logo behaves in different elements and make adjustments accordingly.

14. Too Many Fonts

Use no more than two fonts in a logo design. Keep it straightforward and clean. Overloading on font can cause confusion and a loss of interest.

15. Copying Others

Copying is becoming very common in the design industry. With search engines at our fingertips, it is very easy to find an image, save, and try to pass the design off as our own. Now instead of having a unique logo, your brand looks identical to another.

LET THE DESIGNING BEGIN!

25-brands-that-made-it-big-with-content-marketing

25 Brands That Made it Big with Content Marketing

Content marketing is one of the newest forms of marketing, but it’s proving to be one of the most effective. According to a survey from the Custom Content Council, 72% of marketers feel that content marketing offers a better ROI than magazine advertising, while 69% feel that it’s more effective than direct mail and PR.25-brands-that-made-it-big-with-content-marketing

Despite these statistics, some marketers are still a bit skeptical about the benefits of content marketing. Below, we’ve profiled 25 companies that made it big through the effective use of content marketing. If you’re still on the fence about this powerful new strategy, these success stories are sure to make a believer out of you.

1.   ADP

ADP

Image by Digital Ralph

ADP is a leading business outsourcing solution provider. The company leveraged their expertise in human capital management to create white papers, which have proven to be highly valuable to their customers. They also developed a search engine to help brands find white papers on human capital management topics for their respective industries.

These efforts are highly effective for generating new leads. According to Rob Peterson of Biznology, these new leads translated into $1 million worth of new sales opportunities for ADP within the first three months alone.

One of the reasons that ADP’s content marketing strategy has been so effective is that the company provides detailed estimates of the amount of money that readers can save using ADP’s solutions. For example, their search engines estimate that a human resources coordinator in a firm with 50 employees would save $13,370 by employing ADP’s solutions and strategies, giving brands a compelling reason to download the firm’s white papers.

Key takeaway: White papers are an often-overlooked resource for content marketing. But if you create a large number of them, you would be wise to create the necessary functionality on your site to make it easy for viewers to search through them.

2.   Cisco

Cisco

Image by Leonardo Rizzi

Cisco has always actively used content marketing and social media to scale its marketing campaigns. However, the brand’s marketing team wasn’t sure how effective these strategies were until it promoted a new product solely on social media.

Cisco launched a new router a couple years ago and decided to use it as a case study to measure the ROI of its content marketing and social media strategies. Executives were stunned to discover that their digital campaign allowed them to reach their lead goals for $100,000 less than anticipated. LaSandra Brill, senior manager of global social media at Cisco, said that the company will use these results as the basis for future product launches:

“It was classified as one of the top five launches in company history. It was the crossing the chasm point for us in the adoption phase of social media, and helped us get over the hump of internal acceptance.”

Key takeaway: Social media is a great way to draw attention to your content marketing efforts, but it’s always important to quantify your ROI. Learn from Cisco’s example and develop a system to measure the effectiveness of your own campaigns.

3.   DemandBase

DemandBase is a marketing technology provider that specializes in serving B2B brands. Recently, the firm used white papers, infographics, SlideShare, and webinars to source new leads for one of their campaigns. According to Top Rank Blog, the company generated 1,700 new leads and connected with 125 webinar viewers, helping them to generate over $1 million in new revenue through content marketing.

As a marketing technology company, DemandBase has invested a lot of time trying to optimize their content marketing strategy. Rachel Balik, the senior content marketing manager, has provided an overview of the evolution of DemandBase’s content marketing strategy on the company blog. Balik also says that she attends Content Marketing World regularly to learn more about best practices in the industry to improve their overall strategy.

Key takeaway: Results from content marketing can vary significantly. Companies that stay on top of the best practices will have a clear edge over their competition.

4.   Cox Media Group

Cox Media Group is one of the largest publishing, broadcasting and digital media companies in the world. While most of its exposure occurs through television, radio and newspaper, Cox still uses content marketing to help build its brand online.

Recently, Cox Media used an online “Success Kit,” which provides valuable information to help other businesses succeed, to engage with the small- and medium-sized businesses that their advertisers were trying to reach. The content was available in several different formats, such as e-books and video, which helped them connect with many previously untapped leads. According to this report from G3 Solutions, the Success Kit received 5,000 downloads over the past year, helping Cox to generate more than 2,000 leads.

Key takeaway: You’ll generate more leads by creating a detailed and valuable piece of content for your customers than you will cranking out several lower quality pieces. It’ll take more time and resources to develop, but the ROI will be worth it in the long run.

5.   Virgin Mobile

Virgin Mobile

Image by James Cridland

Virgin Mobile was one of the first wireless communications and VoIP providers toadopt social media and content marketing. Since then, they’ve used these digital marketing services to provide better service to their customers. Virgin Mobile Live, for example, is a new social newsroom that the company uses to promote apps, music and other digital content throughout the day.

Ron Faris, Head of Brand Marketing at Virgin Mobile, told Forbes that these online marketing strategies have played a key role in building the Virgin Mobile brand and generating new leads. Faris claims that Virgin Mobile has been more successful than its competitors because the company focuses on improving social engagement, rather than merely expanding social reach:

“Scaling our content efforts isn’t just about expanding the size of our social reach across new platforms. It’s also about deepening the level of engagement we have with our fans in the social communities they hang out in. We’ve been successful so far in rewarding our fans with Virgin experiences on Facebook and Twitter. The next step is to evolve our social platform to allow fans to reward one another with special moments.”

Key takeaway: Your follower count isn’t nearly as important as the engagement you build with these followers. Taking the time to engage with your followers will pay off in the long run.

6.   Toshiba

Though content marketing is typically viewed as a B2C marketing strategy, Toshiba has proven that it can also help B2B brands generate new clients from across the globe.

In 2011, the brand created a “Smart Community” in an effort to promote awareness of its renewable energy solutions. They optimized their platform for the keyword “smart community” and invested in a massive SEO campaign to boost their rankings. Their campaign proved to be remarkably effective, helping to generate 160,000 global followers on LinkedIn through the Smart Community campaign.

Toshiba has had other forays into content marketing that have been beneficial in generating new leads. Recently, Toshiba Medical collaborated with a renowned economist to use content marketing to educate customers about the complexities of the Affordable Care Act and other medical issues, helping the brand to stand out among its competitors.

Key takeaway: Targeting a competitive, high-traffic keyword can be a great way to boost the ROI of your content marketing strategy. You may need to invest a lot of resources in your SEO, but the results will likely pay for themselves.

7.   Crowe Horwath

Crowe Horwath

Image by Martin Van Hoeller

Crowe Horwath is a leading accounting and consulting firm. In 2013, the companylaunched a content marketing process for reaching financial institutions with $1 billion or more in assets. Their strategy consisted of generating nearly 50 different pieces of content centered around several topics of interest to their target customers, using all the following formats:

  • Case studies
  • Infographics
  • Video
  • Executive briefs

 

The results of their entire content marketing strategy have been spectacular, but one infographic in particular was especially effective. According to the Content Marketing Institute, this infographic generated nearly 800 new contacts, two of whom paid $250,000 for Crowe Horwath’s services.

Key takeaway: Content marketing isn’t just effective for B2C companies. Brands that are trying to reach large institutional customers should also utilize these techniques.

8.   Marriott

Many hotel companies use content marketing to grow their brands, but Marriott intends to take it to the next level. They recently created a new global creative studio, which will publish a variety of entertaining content pieces for the travel industry. According to David Beebe, Marriott’s vice-president of Creative, Content Marketing and Global Marketing, Marriott strives to become the number one travel content publisher in the world:

“We view this as the opportunity to be the world’s largest producer of travel-related content.”

Content marketing has always been a great strategy for Marriott to build its brand, and the company is encouraged that this new initiative will help even more.

Key takeaway: The benefits of content marketing can be virtually limitless, but you need to set the bar high to keep seeing better results.

9.   American Express

American Express

Image by Matt_Weibo

Celine Roque of Contently recently wrote a very insightful piece about American Express and its longstanding commitment to content marketing. Roque points out that the world’s largest travel company has been using content for brand building for the past 100 years, beginning with a series of engaging travel guides in 1915 that played a prominent role in growing the company.

American Express took their content marketing strategy digital in 2007, when they launched the OPEN Forum. Since then, this forum has become a place for customers to congregate with experts to help them solve many of their pressing business challenges, while, at the same time connecting them with American Express’s brand messages.

Key takeaway: When carried out effectively in the long run, content marketing—whether online or offline—can generate significant results for forward-thinking businesses.

10.   Live Person

Live Person is an online voice and chat solutions provider that also uses content marketing to connect with new customers. The company is currently pioneering the realm of digital engagement, which is helping them to rapidly grow their brand. Their new technology has also inspired some remarkably innovative content, which is accelerating their growth even further.

Last year, Valerie-Ann Leary, Marketing Manager, Client Marketing and Demand Generation, wrote about the reception of a new e-book that they created—The Future of Digital Engagement: 10 Thought Leaders Share Predictions for 2014. Leary said that Live Pearson generated enough exposure to win the Killer Content award from Demand Gen Report for the Best Influencer Campaign. However, while winning an award was a nice affirmation of the success of their content marketing strategy, the real reward was all the new exposure that they generated, which presumably translated into many new leads.

Key takeaway: There are a number of ways that your company can benefit from content marketing. If your efforts earn brand mentions from other organizations, you’ll generate even more visibility—so take pride in every piece of content that you create.

11.   Intelligentsia

Intelligentsia is a coffee company that produces roast coffee blends from German vintages. Their business model may not be high tech, but content marketing has been instrumental in helping them grow their brand. The company has engaged in a variety of content marketing practices, but many content marketing experts argue that their brew guides are what really set them apart.

What is so special about the Intelligentsia brew guides? It sounds simple, but what makes them stand out is their amazing photographs and detailed instructions for their readers. As a result, these guides have been shared on Reddit, Vimeo, and a variety of other platforms.

Key takeaway: Creating a valuable line of content that differentiates you from your competitors can help take your brand viral on social media.

12.   Callaway Golf

 

Callaway Golf

Image by Dan Perry

One of the reasons that brands fail with content marketing is that they try to sell, rather than provide genuine value to their followers. Callaway Golf has been successful with its content marketing efforts, simply because they focus more on engagement and educating their fans than on pitching their products.

Callaway has been particularly successful with video marketing. Salesforce reports that some of their videos are among the most popular golf videos on YouTube. One of them, “How To Hit a Bump and Run,” has generated nearly 30,000 views in less than a year.

Key takeaway: Content marketing is about providing value to your customers. Stop selling to them and you’ll immediately see better results.

13.   IBM

IBM has been on the forefront of electronic technology since World War II. They’ve capitalized on their decades of knowledge by developing highly-educational content marketing strategies, which has helped them maintain their edge as a digital solutions company.

IBM has utilized many different forms of content to generate leads and nurture relationships with their customers. Here are some of the approaches they’ve taken to content marketing:

  • Offering educational videos through multiple video sharing sites
  • Reaching out to key influencers in their industry
  • Aggregating blog posts and other content through their Voices page

 

All of IBM’s content marketing strategies have helped them build the brand. However, Leslie Reiser, the Program Director for Digital Marketing Worldwide, says that the most important lesson we can learn from IBM is to take advantage of influencers:

“We’re identifying the right influencers that align with our business priorities. Those priorities align with our product and service portfolio. For example, we have identified and nurtured relationships with bloggers who specifically focus on cloud computing, or business analytics, or data security in that mid-size business space.

Those particular people are influencers within the marketplace. They have credibility. They are authentic. They have independent followings and a network.”

Key takeaway: You can’t ignore the value of leveraging leading voices outside your company. Industry experts, bloggers, and critics can all help your brand tremendously if you take the time to reach out to them and build relationships.

14.   Intel

Intel

Image by Henry Muhlphordt

Intel is another one of the world’s leading digital technology brands. It should, therefore, come as no surprise to you that they’d leverage this expertise to take advantage of the power of content marketing.

Currently, Intel manages a blog called IQ. Most of the content comes from employees, but they publish anything that supports the company’s brand image. The blog includes a number of great posts that have drawn a substantial number of viewers, including an article called Could High-Tech Vertical Farming Feed the Future?

Here is a quote from Bryan Rhoads, the editor of the blog:

“We developed an algorithm to curate social content in a way that leverages our employees. We want to publish what they’re sharing and what’s grabbing their attention. It’s a combination of a social algorithm, plus an employee filter that crowdsources what they are saying and sharing, and uses that as a discovery tool.”

Key takeaway: Creating a specialized hub for the kinds of content your customers are looking for is a great way to draw them to your brand. Come up with some ideas for unique content and publish it on your blog to differentiate your brand in your industry.

15.   Lana Del Rey

Many celebrities have utilized content marketing to grow their fan base, but few have been as successful as singer Lana Del Rey. Del Rey’s content marketing strategy isn’t overly complex, but it has proven to be very effective nonetheless.

Most of her content marketing strategy has been coordinated through Tumblr. She created a post about her upcoming album “West Coast”, which featured several beautiful pictures of herself and Kylie Jenner. Within a year, the post received over 27,000 likes and shares on Tumblr. While her celebrity status and strong fan base undoubtedly played a role in her blog’s success, the posts she’s created have definitely helped to build her brand.

Key takeaway: Brands with a well-known reputation have a huge advantage over their competitors. If you’re an established company, leverage your reputation to its fullest potential through your content marketing strategy.

16.   Random House

Random House

Image by hiroaki maeda

Random House’s marketing strategies have certainly evolved over the past 90 years. Most recently, the global publisher has been actively using content marketing to reach new followers through social media. They’ve tested a variety of different strategies, all of which appear to have helped boost their brand reach.

But one of the newest and most successful strategies Random House has embraced has been using Medium to aggregate content from their active publishers. They alsolaunched a new consumer discovery website to help people find relevant content. Random House CEO Markus Dohle says that content marketing has played an important role in maintaining and growing Random House’s brand image:

“Digital presence is an important part of strengthening this connection that we are building: one author, one book, and one reader at a time.”

Key takeaway: No matter who you are, you already have a network that you can utilize to boost the results of your content marketing strategy. Collaborate with your employees, customers, and affiliates to generate and share unique content.

17.   Workiva

Workiva offers a real-time cloud service to help clients collect report and analyze data. Due to the sophistication of their service, the company needs to diligently educate customers in order to attract new buyers and grow their business. Thus far, the company has used a variety of content marketing techniques to boost their brand reach and improve customer retention.

Workiva collaborated with Kapost to develop its content marketing strategy. Here are some of the metrics that prove their efforts were successful:

  • 84% increase in average blog views
  • 21% increase in referral traffic
  • 37% increase in social media backlinks

 

Erin Wall, Director of Marketing at Workiva, feels that the campaign went very smoothly:

“Our initial metrics were a validation for all teams involved that our content was headed in the right direction. We’re excited to adjust and refine our strategy and Kapost processes in 2015. We know there is a lot more we can do to provide helpful, relevant information to our audience.”

Key takeaway: Your content strategy will be much more successful if you define your success metrics in advance and then use them to optimize your campaigns.

18.   LinkedIn

While it initially struggled to compete with Facebook, LinkedIn has become a popular content sharing platform, particularly for B2B companies. Much of this success derives from its use of content marketing best practices.

To date, LinkedIn has used tools such as Sales Navigator and TeamLink to improve the performance of its content marketing strategies. Ralf VonSosen, the Head of Marketing, Sales Solutions for LinkedIn, says the results have been astounding:

“We started seeing a 50% increase in leads to meeting conversion rates.”

Key takeaway: Generating valuable tools can be a great way to create more value for your customers.

19.  Optum

Optum is a healthcare technology company that provides resources to help clients improve the quality of their decision-making processes. They operate in 140 different countries, which means that they must constantly develop new leads in order to scale their business.

Recently, Optum released an e-book called Moneyball Analytics which provided a big boost to their lead generation campaign. According to Top Rank Blog, the e-book was downloaded over 500 times in the first month, and Optum eventually generated nearly 20,000 leads through the campaign.

Key takeaway: e-books may be an older form of content, but they remain highly effective for generating new leads. Take the time to create a unique e-book that answers the questions your potential customers will have.

20.  Autotask

Autotask is a leading software as a service (SaaS) company that specializes in serving other IT firms. They serve over 5,000 clients all over the world, but are always looking for new sources of leads. Content marketing has been one of the best opportunities for them to drive new leads.

One of the company’s most successful campaigns included a number of different content forms, including infographics, e-books and videos. While the campaign represented a large investment, it generated enough revenue to pay for itself after six months. In total, it was responsible for 20% of the inquiries the company received for two whole months.

Key takeaway: Don’t be afraid to invest a large portion of your marketing budget in content marketing. When executed correctly, you can see very noticeable results.

21.   Xerox

Xerox

Image by Zack Seward

Xerox is the world’s leading photocopying company. While that sounds like something to brag about, it has, ironically, created some branding problems for the company. Since Xerox is so widely known for its photocopiers, many customers don’t know anything about its other services, such as IT outsourcing. Xerox solved this problem by rebranding itself with content, which played a huge role in boosting business in its other verticals.

One of the biggest components of Xerox’s content marketing strategy is its digital magazine, Real Business. Since the magazine is incredibly popular, many brands pitch Xerox to get coverage. Xerox content marketing manager Ben Rand says that Real Business plays a big role in reshaping the way the company’s customers act:

“We’ll be looking to inform and educate our customers as they tackle these large shifts in how they do business. The goal is to change perceptions around the Xerox brand so people understand that we’re a global leader in technology-driven services.”

Key takeaway: As mentioned earlier, creating a unique blog can be a great way to distinguish yourself in your industry. Xerox shows that it can also be a great way to change customer perceptions of your brand and to educate them about any overlooked services.

22.   Expedia

Expedia is a well-known travel brand that relies heavily on content marketing. Currently, their strategy involves a variety of different content channels, but they also strive to earn a presence in high-authority publications whenever possible. The company hired a firm called Quad Digital to place a number of well-designedinfographics on such sites. They also publish guest articles on many authority websites.

Another great example of Expedia’s content marketing success is its series of travel videos, which they labeled Find Yours. Adage points out that the reason these videos earn so much traction on social media is that they focus on customer engagement,rather than simply being promotional.

Key takeaway: Brands that create a diversified content strategy will see stronger results than those who focus on a single content marketing technique.

23.   Red Bull

Red Bull is infamous for using content marketing to extend its lead in the energy drink business. The company reportedly generated over three times as much revenue as Monster in 2013, which can be largely attributed to its use of Red Bull TV to improve its branding.

Red Bull TV is a website that provides videos and live streaming of events from across the world. According to Target Marketing Magazine, Red Bull was one of the first companies to create content that its customers actively sought out. As a result, it drew a large number of people who were interested in the adventurous activities that Red Bull drinkers often participate in, instantly setting it apart from others in its industry.

Key takeaway: Your content strategy doesn’t need to be centered solely around your industry. It can also be successful by focusing on the activities that your customers are interested in.

24.   Coca Cola

Coca Cola is another classic brand that’s taking advantage of the power of content marketing to boost its market share. Improving its branding strategy is crucial, since soft drink sales have been declining for the past decade.

Of particular note is Coca Cola’s new content strategy, called “Content 2020,” which the Content Marketing Institute praised for its originality. Coca Cola has publicly stated that it’s committed to using content to boost its brand as much as possible. Jonathan Mildenhall, VP Global Advertising Strategy and Creative Excellence, believes content is instrumental in boosting the company’s brand:

“All advertisers need a lot more content so that they can keep the engagement with consumers fresh and relevant, because of the 24/7 connectivity. If you’re going to be successful around the world, you have to have fat and fertile ideas at the core.”

Content marketing has helped the company reposition itself. It still faces challenges as industry revenue continues to falter, but the company has weathered the storm better than PepsiCo, Cott, and other producers. Sales have started to pick up this year, and Business 2 Community author Hephzy Asaolu has said that there’s strong data proving that growth in revenue is strongly associated with content marketing efforts, which have helped Coca Cola to engage with customers all over the world.

Key takeaway: Companies that compete in crowded or struggling industries need to reshape their customers’ perceptions. Coca Cola’s success proves that content marketing can be a great way to accomplish this.

Follow the Lead of Successful Content Leaders

Some of the brands covered here are newcomers to the market, while others are household names that have been around for more than a century. However, they all have one thing in common: they recognize the value of creating great content to engage their audience and generate new leads. Get inspired by their examples and use their success to fuel your own content marketing efforts.

Have these brands inspired you to scale or revamp your content strategy? Share your opinion in the comments below:

htmlcssjava

Web-based Mobile Apps of the Future Using HTML 5, CSS and JavaScript

The rise in the use of mobile devices has led many a developer to throw up their hands in frustration. Should a business require both a website and a mobile application? This report discusses why the future may be lie in HTML 5, CSS and JavaScript applications that work equally well on all mobile platforms.htmlcssjava

Many developers have come to the conclusion that they need to focus on a particular mobile platform, such as the iPhone, Windows 7 or Android. Others have begun to realize that there are already many development tools which allow them to take advantage of their current skillsets, whether it is HTML, CSS and JavaScript, or actual programming languages such as C or C++. These mobile application tools, as we discussed in our Special iPhone Report for Developers, are used to create native applications which can utilize the majority of the native features of mobile devices, such as the GPS, camera, contacts, accelerometer, etc.


Mobile Web App Development Tools

PhoneGap is an open source development framework for building cross-platform mobile apps using HTML, CSS and JavaScript. It enables developers to utilize the core features of the iPhone, Android, Palm, Symbian and Blackberry smartphones, including geolocation, accelerometer, contacts, sound and vibration. PhoneGap is free, however it requires additional software specific to the platform that is being developed, such as the iPhone SDK for the iPhone, Android SDK for Android, etc. The use of PhoneGap is only a bit better than creating an app for each platform, as you will still need to compile each app for each specific platform, even if the basic code is the same.



Some, such as Rhodes, allow developers to create native apps for almost all mobile platforms, including the iPhone, Windows Mobile, BlackBerry, Symbian and Android. Similar to PhoneGap, you will have to compile the code for each platform separately. It also supports the native features of most smartphones, including geolocation, contacts, and camera image capture. Rhodes is free under the MIT License. A cloud computing service called RhoHubenables developers to develop applications online using the Rhodes framework, with no need for them to have the latest SDK for each platform on their computer. Apps are created using HTML and Ruby, and are actually built in the cloud.

What About Truly Portable HTML 5 Web Apps?




Recently developers have been excited by the prospect of application development using technologies that work across all platforms. One such tool, iUI, the iPhone User Interface Framework, uses JavaScript, HTML and CSS, and is utilized to create web applications that work on any browser with HTML 5 support. Although it was designed to create apps with the look and feel of a native application built with the iPhone SDK, web apps created using iUI will work on almost all smartphones that include a standards-compliant web browser. iUI is still relatively new, and doesn’t have a User Interface, so it does require some patience and skill to use. Other, similar frameworks include iWebKit and JQTouch.



Another mobile development tool is Sencha Touch, an HTML5 Mobile App Framework. Like iUI, Sencha Touch is powered by HTML5, CSS3, and JavaScript, and works on the Android, iPhone and iPad platforms, as well as other HTML 5-compliant web browsers. It supports touch events, such as pinching and stretching, and can be web-based or wrapped in an Objective-C layer for distribution on mobile app stores. Sencha Touch is open source software, so if you are developing an open source application with a license compatible with the GNU GPL license v3, it is free to use. Sencha even has a Getting Started with Sencha Touch tutorial which features geolocation, uses the Sencha Touch API and Google Maps to display a map of the user’s location.

Chrome App Store: HTML 5 Apps on Stage




In May of 2010, Google announced the creation of its Chrome Web Store, a marketplace for web applications that are built with standard web technologies (HTML 5, CSS and JavaScript) that can be accessed and used by anyone using a web browser that supports these web technologies (such as Chrome, Safari, Opera or MSIE9). When users “install” a web application from the Chrome Web Store, a shortcut is added for which allows them to access the app, which opens in the web browser. Google hasn’t given a date when the store will officially open, but once it is open, there will be no approval process for developers to wade through, and no fee is required in order to submit an application.

Will Web Apps Eventually Become the Standard?

The World Wide Web Consortium (W3C) recently returned to work on the HTML 5 specification after years of absence. Their return has produced tensions with the Web Hypertext Application Working Group (WHATWG), a group of browser makers (including Opera Software, Mozilla, and Apple) who began work on the standard in June 2004. Ian Hickson, who is the editor of the HTML5 specification, expects the specification to reach the Candidate Recommendation stage during 2012, but doesn’t expect it to become an official W3C Recommendation until the year 2022 or later–that’s right, over 12 years from now. And now for the good news…


 All the major mobile platforms, including Apple’s iOS, Google’s Android and Palm’s WebOS, use similar WebKit-based browsers, so technologies like HTML5 and CSS 3 will continue to be improved and supported. Even Microsoft is coming to the plate with support for HTML 5 forthcoming in MSIE 9. Though it may not become an official standard for a decade, it is increasingly being supported by the major browser vendors, and more sites and services, such as YouTube Mobile, Google Gmail, Scribd, and Apple’s iPhone and iPad are using HTML 5 instead of plugins such as Adobe’s Flash. HTML 5 is here to stay.

There will always be businesses who feel that they must have a native mobile application for each major platform, however many are starting to be more inclined to work smarter, not harder. The emerging web standards can be used to create compelling applications, as demos from Apple, Google and Sencha show. In the future, a web application should work for the majority of mobile platforms, if not all of them, and it should work on any HTML 5-compliant web browser, whether that browser is on a mobile device or a desktop PC.

How to Cut Your Bounce Rate in Half with Interactive Content

How to Cut Your Bounce Rate in Half with Interactive Content

image32

You can grow your blog in two ways:

  1. Get more traffic.
  2. Do more with the traffic you have.

In my opinion, you should do both even though most people focus on the first option.

Those bloggers don’t realize they’re losing a large chunk of their traffic before it even has a chance to convert.

One of the best ways to see how well you’re using your traffic is to look at your bounce rate.

The average bounce rate across all industries is about 45%. Bounce rates just for blogs are usually higher as illustrated in the image above.

But that’s just the average. Some sites have bounce rates in the 20s, while others have bounce rates in the 80s.

If 4 out of 5 visitors leave your site immediately, there’s a problem—likely multiple problems.

Want to reduce your bounce rate? Then download this cheat sheet to learn how with interactive content.

Compare that to a 20% bounce rate (1 in 5 visitors leaving without interacting). This lower bounce rate means that you would only need a quarter of the traffic of the other site to get the same engagement results.

There are many ways to improve your bounce rate, but in this article, I want to show you an underutilized way of reducing your website’s bounce rate and increasing all aspects of engagement.

The main problem is that you need visitors to take action to reduce your bounce rate. But people are notoriously passive on the Internet.

The 1% rule states that only 1% of forum users will actually post on a forum, while the rest willpassively lurk:

image00

We see the same kind of behavior on blogs, where typically about one visitor out of 100 will comment (depends on subject and article).

In fact, people behave like this in many settings, especially on the web:

News consumption is actually really passive, unless there’s some sort of virus going online, because it’s just whatever appeals to you in the fishbowl.” – Choire Sicha, The Awl

And it’s this behavior that marketers struggle to change. According to one survey, 58% of B2B marketers struggle to produce engaging content:

How to Cut Your Bounce Rate in Half with Interactive Content

The reason why they struggle so much is that the Internet is a very different medium than other forms of entertainment, and most marketers are stuck in mentality of the past.

People have always consumed news passively on TV, but they had no choice in most cases other than to watch a show or even a commercial. With the Internet, there are always 100 other sites just a click away.

If you want engagement, you need to create an engrossing experience for your visitors. That sounds hard, doesn’t it?

It can be hard, but I’m about to show you how you can easily use interactive content to make your content much more engaging. If you put the tactics in this article into action, you can probably drop your bounce rate by 10-15% in most cases, or even more.

The psychology and science behind interactive content

Engagement and interactive content go hand in hand, and we’ve known it for quite a while.

Interactive education was originally studied at home and schools even before the Internet was a thing.

Let me define interactive education: Interactive education is teaching that requires participation from students.

Interactive content, as we’ll soon see, is the same thing—just swap out students for readers.

At first, researchers found that interactive teaching was effective at engaging students who were raised in hyper-stimulated environments. Hyper-stimulated environments? Does that sound like something else you know? (Hint: the Internet).

The reason that interactive teaching was studied in the first place is because the researchers determined that it led to higher engagement levels. To take it further, studies showed that higher levels of engagement led to deep learning.

Deep learning means that you’re actually understanding concepts and can use that knowledge later. Surface learning means that you’re just memorizing facts to pass a test.

Anyone who has ever studied for a test knows that surface learning doesn’t last. As soon as you finish writing the test—whoosh—that information evaporates from your brain.

When it comes to your blog posts, you want your visitors to gain a deep understanding of the topics you write about. For one, this makes you and your website more memorable. More importantly, your visitors will actually be able to apply this information and make their lives better. Guess with whom they’ll associate those benefits? That’s right—you.

Other studies of high school and university students have confirmed that interactive-engagement methods lead to better grades and retention.

One study looked at how clickers (those multiple-choice polling remotes) given to students and used during class affected students. It was found that frequent use led to deeper learning. I’ll be showing you soon how to use similar polls to boost engagement in your posts.

But interactive learning goes far beyond quizzes and polls. Studies have found that other types of interactive learning deepens learning just as much or more:

  • creating case studies
  • doing experiments
  • student research
  • team learning

Do you know what’s even more interesting? Games can be a form of interactive learning, and they work well.

Let’s get to the results, however, because that’s what you’re probably wondering about. A recent study on university students found that professors who use interactive teaching methods haddouble the engagement rate of other professors and had a 20% higher attendance rate.

Having a higher attendance rate in class corresponds directly to having your blog subscribers read your articles more often. Wouldn’t you want a 20% boost in your email update click-through rate?

Teaching on the web is finally being implemented, and it’s catching up with traditional interactive learning. But bloggers and marketers are adopting it slowly, so you have a chance toget ahead of the curve.

One example is Codecademy. Every lesson involves you learning a programming technique bycompleting a task. It is incredibly engaging and effective at teaching beginner programmers:

image10

The reason leading blogs are sold on interactive content

Like I said, blogs are playing catch-up here, but some have already recognized the potential of interactive content.

In general, audiences can either be active or passive.

image01

The Internet is a bit weird because users actively choose what content they’ll consume, but most of that content is set up for passive consumption.

This is why visitors don’t get as much from your content as they should and why very few ever take action.

You need to create a situation where your visitors both actively choose to read your content and also actively consume it, meaning they take some kind of action.

We’ve talked about the main benefits: your readers will learn more, and you’ll become more memorable.

That alone should be sufficient motivation, but there’s actually more to it.

You can use interactive content to learn about your readers.

For example, if you embed a tweet somewhere in your content, you can see which of your readers not only read that far into your posts but also liked it enough to share it. These are your best readers.

In addition, if you take some sort of a poll, you can use the results to learn more about what your audience thinks.

Or what about a short pop quiz? See if the majority of your audience understands what you’re teaching. If they’re not, how could it possibly help them? It gives you a chance to refine and improve your writing.

That’s enough about why you should be using interactive content. Now I’m going to show you 7 different ways to implement it on your website.

1. Social media is for lazy busy people

People love to share content as long as it doesn’t take much effort.

Every day, over 500 million tweets are being created. They are a maximum of 140 characters and don’t take much effort.

The more you can remove friction by integrating sharing functions with your content, the higher your engagement rates will be.

At first, there were browser plugins that made it so that you didn’t even have to visit the social network to share something.

After that, came share widgets, which are still pretty effective.

image26

But sharing widgets are still a bit disconnected from the content and require people to both choose which social network they want to share the content on and craft a description.

But there’s a way to erase the border between content and sharing to make it extremely easy for readers to share: embedded social media.

Look at this embedded tweet on a Crazy Egg blog post:

image27

It actually improves the look of the content. In addition, it’s at an appropriate point in the content, and readers can tweet the pre-filled message with one click.

I’m going to show you how to embed social media content from the biggest social media networks. However, if you use a smaller network heavily, there is probably a way to embed that content as well if you dig around a bit.

How to embed tweets

The simplest way to do it is to use Twitter’s embed function. This is a perfect way to showcase your tweet. It allows readers to follow you or engage with that particular tweet without leaving your website.

image11

To start with, find the tweet you want to share. Click on the “…” button.

Once you click “Embed Tweet,” a pop-up will give you the embed code. Copy the HTML, and paste it on your website. Once you do, it will show up in your article like this:

image07

The drawback of that method is that you’re limited to one tweet. What I prefer to do is use a plugin like TweetDis (which we use on Crazy Egg) to create beautiful custom tweets.

You can create any message and use the plugin to highlight it. A reader can then click on it to tweet it. I like to include a relevant username (e.g., @neilpatel) in the message so that I can track them.

You can also create multiple tweetable bits throughout your article.

Once you have the plugin installed, highlight some text in your article that you would like to use as a tweet, and click the icon in the text editor bar:

image06

A window will pop up with your options:

image02

Under the “Add” dropdown menu, pick which kind of embedded tweet you want. A “Box” will give you a full box like I showed you at the start of this section. In addition, you can also pick a “Hint,” which highlights the full sentence instead:

image13

How to embed Facebook posts

For niches dominated by Facebook, embedding a post can get you extra comments, likes, and shares.

I haven’t found a good plugin for WordPress, so you’ll have to stick with the default method that Facebook gives you.

Find a post that you’d like to embed, then click the little down arrow in the top right corner:

image24

Once you click the embed option, a window will pop up that gives you the HTML code you need to embed the post.

Once you put that code on your site, this is what it will look like to your visitors:

image21

They can like, comment, or share the post, and they can also like your page without leaving your site.

You’ll notice that this procedure is very similar to embedding content from Twitter on your site. In fact, almost all social networks are the same, so just look for an embed option in a dropdown menu on a post on any other network you’re interested in.

2. Pop quiz time

Quizzes are one of the oldest forms of interactive content, right up there with simple calculators.

While some marketers may feel that quizzes have been overdone, they still work really well.

In a study of 100 million articles in 2013-2014, it was found that eight out of the top 10 most popular pieces of content were quizzes.

This was number one: “What Career Should You Actually Have?”:

image30

Not only do people like quizzes, they also love to share them to show their friends who they are, what they care about, and, of course, how cool they are.

Coding a quiz from scratch would be fairly time consuming, but there are many quiz tools you can use.

For example, you can use Qzzr to design a quiz, which will give you an HTML code to copy and paste in your article—that’s it.

Here’s what the backend looks like:

image04

You have a ton of options: you can create text or image answers for each question. Your quiz can have as many questions as you like.

Once you’ve set all your questions and results, you’ll get an embed code to paste on your site. Then it will look something like this to the visitor (“Which Iron Man armor suit are you?”):

image14

To make it even easier for many of you, there are also quiz plugins for WordPress such as SlickQuiz, which is also free.

You can make the quizzes right in your admin panel:

image16

You won’t have quite as many options, but you can still get started with testing your quizzes. When you’re done, you just use a shortcode to embed the quiz on your site:

image03

Once your visitor completes the quiz with either tool, they will see their result and have a chance to share it on popular social networks such as Facebook and Twitter.

Now, Iron Man suits are fun but not very useful from a teaching perspective, which is what you want.

I recommend putting quizzes in the middle or near the end of the post, and using them to test your readers’ knowledge. It’s a great opportunity to reinforce a key teaching point.

Secondly, make the question and result useful. Don’t ask a basic or irrelevant question. Ask something that will force your reader to think about and apply the information in your article.

For example, let me ask you a question. Which one of these would be the most appropriate question if I were to include a quiz right now?

  1. Is interactive content good?
  2. Which of the following is not a benefit of using interactive content in blog posts? (multiple choice answer)
  3. Is Iron Man cool?

Question 1 is too basic—you could answer it just based on the title of this post.

Question 3 is irrelevant to the overall teaching points.

Question 2, however, forces you to think about what engagement leads to. The sample answers might be:

  • more return visitors
  • more comments
  • better search rankings
  • higher time spent on page

If you’ve read and understood everything up to this point, you’d be able to figure out that “better search rankings” is not a benefit of using interactive content.

3. How to lower your form abandonment rate

At one point or another, I am sure, you’ve filled out a long form, clicked “submit,” and then gotten an error saying you missed something. What’s worse is when you have to re-enter your data.

Most forms are terrible. They fulfill the basic functional requirements and nothing else.

That’s why I really liked Typeform when I first came across it.

This tool allows you to create highly customized forms. You can ask questions or request information and incorporate all sorts of form elements. They look great and function perfectly.

Additionally, you can create forms that are engaging because you can insert them in the middle of a sentence.

Put all these features together, and you get highly interactive content whether it’s on your blog or somewhere else on your website.

Over the course of a month, Typeform records 5 million form submissions with a completion rate of 59%. In comparison, other form tools get between 3% and 28% completion rate.

Let’s look at how you can create a form.

Start by creating an account and clicking on the “create new form” button.

You can either start from scratch or choose one of the many templates:

image18

Once you’re inside, drag and drop different elements to your form. You can include text, questions, scales, pictures, or ask for answers from your visitor.

image33

Your next step is to pick a design and some simple settings. Once you embed it on your site, your visitors will see something like this:

image23

You can walk through actual examples here.

As as bonus, you can even use Typeform to make quizzes if you didn’t like the other options I gave you earlier:

image22

4. Make your content fun with polls

Polls are highly related to quizzes.

You ask a question, typically with a few definite answers, and results are tallied based on input by visitors.

Polls are great when you’re trying to find out what your audience cares about or thinks about a specific topic.

The most attractive poll tool I’ve seen is ContentTools Poll. What your visitors will see is a simple poll, and when they click on an answer, they will see the results and buttons to share the results:

image15

It is a paid tool, but you can start with a free trial.

Alternatively, there are many other poll tools out there. Two of the most popular options (both work with WordPress) are PollDaddy and Wedgies.

Almost all of them work the same. You simply type in your question and answers, and drop whichever elements you’d like into place:

image12

After you do that, you’ll just need to copy and paste the HTML code to your website, or use the shortcode that the WordPress plugin gives you.

When your visitor clicks on an answer, they’ll see the results and share buttons as expected.

image19

There are lots of options to create polls—that’s the easy part. The harder part is using them effectively.

Don’t just create polls for the sake of engagement. Create them so that you can learn about your audience.

For example, I could create a poll for this post that would ask you which type of interactive content you are most likely to use on your website. Based on your most popular answers, I could create further content. If 77% chose quizzes, I would create a step-by-step guide to creating quizzes. Alternatively, I could write an in-depth post about the psychology behind quizzes and engagement.

You could also use the answers to monetize your site. Once you learn which topics your audience is most interested in, you can create products around those topics.

5. Which is better: long or short content?

If you’ve ever been to Quick Sprout before, you’d notice that I like long content.

Writing longer content helps get extra search traffic, but more importantly, it allows me to go into great detail on a particular topic and include lots of examples.

It works for me, but it doesn’t work for everyone. In fact, the top two reasons why people don’t read content are related to content being too long:

image29

Even some of my readers complain that my posts are too long sometimes.

If you want to give your readers more control over your content, you can use hypotext.Essentially, you create links in your content, but instead of opening a new window or tab, they open a hidden section in your content.

image31

Hypotext allows you to hide extra information that only a portion of your readers might want.

When that text is compressed or hidden, only essential text will be visible on the page.

image25

Here’s what happens when someone clicks a hypotext link:

image05

A section expands just below the paragraph of the link clicked with all the content that you’ve hidden. You can hide:

  • detailed explanations
  • more examples
  • more research
  • pictures

The other bonus, in addition to giving readers more control, is that it also engages them. They decide for themselves if they want to learn more or explore the content deeper.

If you want to try hypotext, start by installing this WordPress plugin.

Then, when writing your article, wrap the text you want to serve as the link with shortcodes, e.g,:

[hypotext target=”your-target-id”]your link text[/hypotext]

Then, wrap another shortcode around the text you want to be hidden:

[hypotext id=”your-target-id”]the hidden text[/hypotext]

Make sure that the target name and id name are the same, or it won’t work.

6. Take infographics to a whole new level

Another type of content I love is infographics. They can still be used to drive over 60,000 visitors per year to your website.

I’m not the only one who likes them. Just under 80% of marketers use and share infographics sometimes or frequently.

Infographics are great, but there are two minor problems with them. First, they’ve saturated the web. Even high quality infographics don’t produce the results they used to. Secondly, they aren’t engaging. Infographics are typically skimmed, and then some viewers might share them or leave a comment.

But what if you could make infographics into a story that involved user interaction?

Here’s a screenshot of an interactive infographic that was created by GOOD and Deeplocal:

image17

It shows the number of small businesses each state has. When you move the mouse across the picture of the United States, different states are highlighted, and their stats come to life.

In addition, the “home” page of the interactive infographic allows you to choose what you’re most interested in. The first option takes you to the map, but there are several other interactive screens you can choose.

image08

This type of infographic forces people to read and explore rather than scan. I shouldn’t really use the word “force” because most people will find this fun.

Here are nine more such infographics if you would like more examples.

The catch is that interactive infographics are not easy to make, which is part of the reason they won’t be widespread anytime soon.

There’s no easy tool that lets you make them (although if you could make a good one, you could make a killing).

You can create them yourself using software like Adobe Edge Animate, but it’s far beyond my design skills.

If you’re interested in creating one, I suggest posting a job on Dribbble or a freelance platform like Upwork (formerly oDesk).

7. Choose your own adventure with videos

Video marketing is getting more popular.

People love videos because it’s just like watching TV.

The problem, as we’ve seen, is that passive viewers don’t take nearly enough action.

If you use video ads or incorporate videos in your content, you might want to think about making them interactive to improve engagement.

Most of us are familiar with those “choose your own adventure” books we read as kids—they were fun. You had a choice of two pages at the end of each page to customize your story as you saw fit.

Similarly, you can let your viewers choose their own adventure.

In a Philips video (the shaving company), there’s a short intro of a guy who had a wild night that, he says, “started with shaving.” You get to pick the style of his facial hair at the beginning of the night and see a different video depending on your choice.

image34

For a product video, you could let your viewers choose which aspect of the product they care about (features, manufacturing, company background, etc.).

If you have a video editor (an actual human), he or she will probably already know how to create a video like this. For regular marketers, it’s not exactly easy. You’ll need to use a tool such as Vidzor or Rapt Media to create videos like the example above.

image28

One simple option is to simply use YouTube annotations. You can use these to let viewers navigate to other videos. Sure, it won’t be as fancy as a professional option, but it’s a good way to test if you’d like to start creating interactive videos in the future.

Here is a complete tutorial on creating annotations on YouTube videos:

Your viewers should see clickable annotations pop up on the video at specified times:

image20

It’s up to you where those annotations direct them to.

Conclusion

Interactive content is a huge opportunity that’s still in its infancy. If you ever wished you discovered something before everyone else adopted it, this is it.

You probably noticed that not all types of interactive content is easy to create. I don’t recommend you try to create all of the types at the same time. Pick one or two that fit well with your audience and website, and focus on perfecting those.

What you should see, once you start creating interactive content your readers are interested in, is a much lower bounce rate, higher time on page, and a significant bump in the number of shares and comments you get.

Now, I have a challenge for you: pick one type of interactive content, and brainstorm a few different ways you could create content for your website with it. Then leave me a comment below, letting me know how you plan to use interactive content in your content strategy.

10 Logo Design Trends to Look Out for in 2016

Logo design trends are important for web designers to stay on top. After all, maintaining this knowledge ensures your portfolio remains relevant and up-to-date. These trends are also something you need to pay attention to if you wants to wow every client that requests your services. And since logos help brands tell their stories in the simplest visual way possible, this is pretty vital.logo-design-trends

Every client has a different set of tastes, and every project requires a different style. Knowing what styles are in and what styles are working–as well as having the skills to utilize those styles–are all things you can use to keep your designs ahead of the pack.




It’s also important to remind yourself of the way businesses use logos in the digital era as you approach the design process. Customer reach is achieved through social media and other digital channels, which are places where a recognizable logo from a reputable brand can catch someone’s attention in an instant. This, too, is pretty important.

We hope this list helps you design beautiful, eye-catching logos throughout 2016. We’re offering up plenty of inspiration and maybe even a heads up on a few styles you may not be aware of. Some of these trends aren’t new, but they’re definitely relevant.

1. Flat

flat-logo

This style isn’t new but it’s definitely a hot trend. The more companies that use this style, the more others will take notice and be influenced to use it in their logos.

A few major examples include the logos for such brands as IHOP, Microsoft, Windows, and Netflix. All of these brands had bold, 3-D logos in the 2000s as those were the styles that were trending at the time. However, as flat styles began to hit the world of web design, these companies took advantage of the trend by creating simple designs that portray the brands in a fresh, minimal way.

Style isn’t the only reason this type of design became a trend. Its simplicity allows these types of logos to scale well, making them compatible with numerous browsers and mobile devices. This is especially important as the entire world of web design is in the middle of an epic shift  to responsive and mobile design in an attempt to improve compatibility with smartphones and tablets.

2. UI-Friendly Typography

typography-logo

More and more people are choosing mobile devices over desktops/laptops these days. This is increasingly the case every year and brands are finally beginning to take notice. More and more brands will redesign their logos with sans-serif typefaces that scale well and look great no matter what size screen they’re on.

One major example of this is Google’s recent font change in September 2015.  The company had been using a serif font since 1999 but switched to a sans-serif font designed by its own team of web designers to modernize its font in a way that makes it scalable at any size.

The company tested the font at many sizes and designed and redesigned as many times as they needed to reach the right size and spacing. It also created an animated version featuring four dots in Google’s colors that’s meant to be used for transitions in Google apps and products as well as a compact “G” version.

3. Minimalism

minimalist-logo

Minimalism isn’t new. It’s been gaining traction in every area of design throughout the last few years, from interior design to web design. It became a hit in site designs beginning in 2014 and its continued relevance makes it a hot choice for logos this year.

Minimalism emphasizes flat designs that use as few colors as possible in an attempt to influence where a potential customer or site visitor focuses his attention.

In e-commerce, this might mean designing your site against a white background with your homepage featuring nothing but a plain black text version of your logo, a transparent navigation menu featuring black text, and stunning images of your products displayed as a gallery. This cuts out prices, product titles, product descriptions, sidebars and any other objects that may draw customer attention away from what really matters — your products.

This works the same with logos. By using this simple style, you can create a straight-to-the-point design that cuts down on clutter to draw potential customers’ attention right where they need to be, which is–of course–your client’s brand and overall message.

4. Line Art

line-art-logos

Image source Dreamstale / Creative Market

Yep. This 2015 design trend is here to stay, and it’s even made its way into logos. Monolines get their name due to the single, thin lines that comprise their designs. This line is typically the same thickness throughout the logo, and the logo is most often one solid color. That color is usually black.

You’ll typically find this logo being used in the coffee and food industries. They’re simple, but they contain some type of graphic that makes them playful as well. While these logos are often accompanied by a graphic, they can appear without them as well.

5. Hand-Drawn

hand-drawn-logos

Image source: MakeMediaCo. / Creative Market

The digital era is in full swing, but many still love the look and appeal of hand-drawn fonts and logos. That’s why this hand-drawn style is likely to remain a trend in 2016.It relies on semi-connected and connected script fonts in combination with cute, cartoonish graphics to portray a more personal feeling.

This is most useful for brands that don’t require the serious sophistication of many minimalist styles and instead prefer to use a lighter approach when it comes to branding. This style also allows designers to add more color to their logos, creating freer tones in designs.

6. Negative Space

negative-space-logo

This isn’t a new trend, but it’s picking back up in 2016. A negative space design uses what’s typically unused white space and incorporates it into a logo as a “subliminal message.” A popular example of this is the NBC logo. This logo features a peacock spreading its feathers, displayed as vibrant colors. NBC adopted a peacock logo in 1956 to advertise its use of color programming, which was still new at the time. A variation of the logo we know now was adopted in 1979.

7. Stacked Text

stacked-text-logo

Web designers like to use plain text with one solid color in minimalist designs, but some find this approach tired and overused. So, they make a compromise by stacking the text vertically in a way that may catch your eye much more effectively than horizontal text.




This design can also be paired with horizontal text to create more style possibilities while still relying on one primary style. It’s a new and simple approach to an already simple design. Again, it’s nothing new, but it’s still a contender for our list of logo design trends of 2016 because it continues to be relevant.

8. Modern Retro/Vintage

modern-retro

Image source: Decade Type Foundry / Creative Market

This style began appearing a few years back but picked up in 2015 and will definitely continue 2016. It combines the flat styles of today with the shapes and styles that appeared in older logos. It’s a fresh take on a traditional style, which can always be a great way to combine things you already know and turn them into something no else has seen.

The best part about these types of logo design trends is how striking their appearances can be when you see them for the first time. They may not look as sleek as the minimalist styles do, but they certainly get the job done when it comes capturing a customer’s attention and portraying everything a brand represents, especially when that means portraying a brand’s silly personality!

9. Mixing Things Up

mixing-things-up
This one kind of relates to the stacked text style. It uses varying fonts to create contrast within a text-based logo, which is similar to how you would place black text against a white background. Like the stacked text style, it’s a great way to use the basic styles you were already using and spruce things up a bit.

How you mix the fonts up can be done in various ways. You can use a different font for each word. You can use a different font for certain letters in a word, such as the “o’s” in Moot if that was my brand name. The only thing that remains the same with each variation of this style is that whichever way you choose to mix things up, one font is always in plain format while the other one is a little more fun and vibrant.

10. Dynamic

dynamic-logo

This is one of those decades-old styles that has probably appeared on many lists of logo design trends, perhaps even in print. But it’s been used by more and more companies in recent years, which has earned it a spot in this logo design trends list. What is a dynamic logo exactly? In basic terms, it’s a logo that changes regularly but remains the same in some way so you can always identify the brand.




A great example of this logo can be found at USA TODAY. The company keeps the same logo and with primary brand name and a circle for each different branch of its network, but changes the sub-text and color to identify these sub-categories will still making it recognizable as a part of USA TODAY.

What is the Recurring Theme?

With Google’s Material design, the matured form of flat design, set to become a top web design trend in 2016, flat designs are set to be a recurring theme in logos this year. Almost all logos will have some form of flat design, whether it be true flat or variations similar to Google’s Material design. It may even be Flat 2.0, a variation of flat design that features subtle shadows.

Flat designs have a simplicity that allow simple colors and shapes to become bold and vibrant. These styles can be transferred over to logos easily to create striking brand identities using very few elements. Many companies transferred over to simple, flat logo designs in 2015, and this will continue in 2016.

Logo Design Trends of 2016 – Final Thoughts

Winning a consumer over with a well-designed logo may be one of the most strategic moves a brand makes in the modern era. Consumers have more distractions now than ever, making it increasingly hard for brands to get noticed, especially as online business continues to grow. But with a solid grasp on the logo trends, you’re certain to get a leg up on the competition.

What are your picks for logo design trends of 2016? Let us know in the comments!

Article thumbnail image by piickz / shutterstock.com

hh2

HTML Introduction & Tutorial

hh2HTML Tutorial

 

HTML Stands for Hyper text markup language. HTML is the client side scripting language
i.e used to design static web page.




HTML : HYPER TEXT MARKUP LANGUAGE
1. IT IS TAG DRIVEN LANGUAGE. <>
2. INTERPRETED LANGUAGE
3. IT IS THE MOTHER LANGUAGE OF WEB
–> HTML IS NOT CASE SENSITIVE, THOUGH WE SHOULD WRITE IN SMALL LETTER

HTML Introduction

HTML stands for Hyper text mark-up language.
HTML is the client side scripting language i.e, used to design static web page.

Here every single word has its own meaning i.e. Hyper means reference link, text means data, mark-up means predefined, language means something that needs to communicate.

Every web page designed is HTML has an extension “.html or .htm”.

Editor used to design the HTML static web page are notepad or notepad++.




Every HTML script will be executed in any web browser.

HTML Section

 

Basically HTML is divided into two sections i.e. Head section and Body section.

Head part contains the title of the page.

Body part contains other tags of the web page like title, headings, image, table,etc.

Head section :HTML include pair of tags,andto identify the heading and title of a document .the tag appear in this section.

Body section : The body of HTML contains the text that will show up on web page.The Body section enclosed within and tags. It gives document layout and structure.

HTML Introduction

With HTML, you can create your own Web site. HTML is the core technology in which all Web pages are written. This tutorial teaches you everything about HTML. HTML is easy to learn—you will enjoy it.

  • HTML stands for HyperText Markup Language.
  • HTML is not a programming language.
  • HTML is a markup language.
  • A markup language is a collection of markup tags.
  • HTML uses markup tags to describe Web pages.

What are Tags

  • HTML markup Tags are called HTML tags or just tags.
  • HTML tags are keywords surrounded by angle brackets e.g <html>
  • These tags normally come in pairs e.g <em> and </em>
  • first tag in pair is called starting tag, the second tag is called ending tag.

Attributes

The start tag may contain additional information. Such information is called an attribute. Attributes usually consist of 2 parts:

  • An attribute name
  • An attribute value
    example:




    <img src="smileyface.jpg" alt="Smiley face" />
  •  “alt” is name and “smiley face” is a value.

Comments and doctype

HTML has a mechanism for embedding comments that are not displayed when the page is rendered in a browser. This is useful for explaining a section of markup, leaving notes for other people who might work on the page, or for leaving reminders for yourself. HTML comments are enclosed in symbols as follows:

    example
 <!-- This is comment text -->

web pages

  • HTML documents describe web pages.
  • these documents contain html tags and plain text.

The  purpose of web browser is to read html documents and display them into web pages. the browser does not display the tags but use these tags for the content of page.

Example

<html>

<body>

<h1>My First Heading</h1>

 

<p>My First Paragraph</p>

 

</body>

</html>

Result

my first html program

Explanation

  • In the Previous example <html> and </html> describe the web page.
  • The text between <body> and </body> is visible page content.
  • Between <h1> and </h1> is displayed as Heading.
  • The text between <p> and </p> is displayed as Paragraph.

 

 

Tip:

<HTML> is a tag. Tags are instructions to a web browser. This Particular instruction Let the web browser know that what follow up a web page written in HTML.

Tags can be written in upper-case or lower-case. it doesn’t matter. <html><HTML> or <Html> are all same.

“Markup” now means something slightly different: a language with specific syntax that instructs a Web browser how to display a page

MTI5MDI1Mjc4NzAwODY1NTQ2

Top 45 Google Logo Designs

Being the number one most visited site in the world, Google is used by us multiple times a day. Whether you are searching for something new, or just looking up a website Google always gets the job done. To spice things up Google has hired a doodle designer that just designs Google logos for special occasions, holidays, and birthdays. They also have a Doodle for Google contest every year, this is where kids from around the country(kindergarten and all the way up to 12-k) design a logo. All logos get looked over and the winner receives a trip to google and scholarship money.MTI5MDI1Mjc4NzAwODY1NTQ2

Now that you got a little background on the Google Logo, we would like to present to you this amazing roundup of some of the best Google logo’s we have ever seen. We have searched through all the logos designed from 1999-2010 and found the best. This collection includes famous birthdays, holidays, events, and Doogle for Google winner logos.

1. The Flintstones’ 50th Anniversary

2. Oktoberfest – (Germany)

3. Agatha Christie’s 120th Birthday

4. 71st Anniversary of The Wizard of Oz

5. Jacques Cousteau’s 100th Birthday

6.  PAC-MAN’s 30th Anniversary Doodle ( made me waste a few hours or productivity)

7.  Patios Cordobeses – (Spain)

8. Hubble Space Telescope’s 20th Anniversary – (Global)

9. St. Patrick’s Day – (Selected Countries)

10.  Pi Day

11. Chinese Lantern Festiva

12. Doodle4Google: My Hero by Sophie Redford

13. NASA finds water on the moon

14. Loy Krathong

15. Day of the Dead

16. Mahatma Gandhi’s Birthday

17. Brazil Wins 2016 Olympics

18. H.G. Wells’ Birthday

19. Crop Circles

20. Michael Jackson’s Birthday

21. Perseid Meteor Shower

22. Comic-Con® 2009 – Design and pencil Jim Lee, ink by Scott Williams, and color by Alex Sinclair

23. 40th Anniversary of the Moon Landing

24.  Scientists unveil fossil of Darwinius masillae

25. Alexander Popov’s Invention of the Radio

26. Earth Day

27. Shinkansen

28. Thanksgiving Day

29. Happy Halloween! Doodle designed by Wes Craven

30. Mid-Autumn Festival

31. Large Hadron Collider

32. Independence Day

33. Anniversary of the first ascent of Mount Everest

34. Astro Boy

35. 50th Anniversary of the LEGO Brick

36. Veteran’s Day

37. Bastille Day

38. Persian New Year

39. Google’s 7th Birthday

40. Leonardo Da Vinci’s Birthday

41. Gaston Julia’s Birthday

42. Michelangelo’s Birthday

43. Mexico’s Independence Day

44. Singapore’s National Day

45. Nam June Paik

We would like some feedback, so please tell us which one you liked by comment below.

google-logo-change

20 Biggest Logo Changes of 2015

We have seen many companies change their logos this year. We have covered many of these changes. While some of these changes were flashy and blingy some of them were minimal and subtle. Changes we did not notice at all. It takes a keen eye to notice such changes. People think that changing a logo is all great but it is an important step for a company. The brand want to change the logo but the new logo needs to be recognizable and needs to have an association with the brand. That is why so much thought goes into a logo design change. Here are some biggest logo changes of 2015.




These logos belong to big players in the market. Great minds work on their logos and special team of business creatives gather around to create the next best thing. A logo that people will remember, a logo that the customer will associate the brand with. A logo that screams the brand’s name and makes it easier to recall. Brands try to achieve top of the mind recognition with the customer so that it encourages impulse buying.

A logo is not something to be taken lightly. It has the power to make or break a brand. There have been some clever logo ideas in the past and some terrible ones that did not go through with the consumers and critics. Design critics have had their fair share of criticizing logos. Check out these corporate logo changes and decide for yourself whether the change was better or worse.

BEST WESTERN LOGO CHANGE

Best western logo change

COORS LIGHT LOGO CHANGE

coors light logo before and after

ELECTROLUX LOGO CHANGE

electrolux old and new logo

EMERALD LOGO CHANGE

emerald logo change

FACEBOOK LOGO CHANGE

facebook logo change

GOOGLE LOGO CHANGE

google logo change

HONEST TEA LOGO CHANGE

honest tea old and new logo

IHOP LOGO CHANGE

IHOP logo change

KFC LOGO CHANGE

KFC logo before and after

LENOVO LOGO CHANGE

lenovo change logo

LOGITECH LOGO CHANGE

logitech logo evolution

MR. COFFEE LOGO CHANGE

Mr coffee logo change

DAILYMOTION LOGO CHANGE





new dailymotion logo

SPOTIFY LOGO CHANGE

spotify logo change

TRANSUNION LOGO CHANGE

Transunion logo change

UFC LOGO CHANGE





UFC logo change

VERIZON LOGO CHANGE

Verizon Logo change
In this article we covered 20 Biggest Logo Changes of 2015. How many did you notice? Im sure you might have missed out a few of them but that is not your fault. They are designed to be subtle and go unnoticed.

Original article has been published at creativeglobalideas