Posts

How To Get the User’s Current Location in Android? – GPS Example Help

Today I'm sharing you a working code on how to get the user's current location in Android. There are many popular apps using this feature such as Google Maps and Facebook. Remember when you checked in a place?

Knowing exactly where your users are located is really cool, but you always have to let them know you are doing it. Asking permission to get user's location is an ethical way.

One advantage of getting user's current location is customizing their experience, just like what Twitter does. If you let twitter know your location, it will show top trends or news near you, how cool is that?

how to get user's current location in android?

DOWNLOAD SOURCE CODE

Read more

Saying Goodbye to Google Blogger

Hey guys! How are you? I'm so happy today. I'm almost done re-creating this website. Why? I switched from Blogger to WordPress! Yes, you read it right.

I love WordPress!

Some of you may know that I'm a Google fan. I love Google. There was a time when I worked with a product manager from Google Singapore to improve Google Maps. But you know, everyone has imperfections. I don't have love for all Google products and services.

This is my very first post using a self-hosted WordPress blog. It feels like I'm in heaven. I'm loving it so much and have a million reasons why. I'll list some of them below but first, I want to tell you...

Why I left Blogger?

I know, i know, it sound like breaking up. It's almost the same anyway. Here are some reasons I had in mind.

  1. It is very simple and boring. Simplicity is really good but a time will come when you will want to achieve simplicity with a little bit complexity. It is fun and you'll be thrilled. In this case, I'm learning more about SEO and social media, Blogger does not have enough tools for me to do that. I can't control URLs, meta data, and other factors that may contribute for our site to rank higher.
  2. I don't enjoy programming in the Blogger platform. I understand how the template can be done or modified in Blogger. I even made a responsive blogger template. But it's still very limited. It feels like I cannot unleash the true Ninja within me when I stay. Blogger is not PHP, it is not Android. WordPress allows me to enjoy more of PHP programming or Web development.
  3. Blogger does not have a large community I can relate to. WordPress is made with PHP and other web development technologies that I can absolutely relate to such as HTML, CSS, jQuery and JavaScript.
  4. I'm disappointed with Blogger themes, tools or plugins. I think this is because programming with the blogger platform is something developers hate. WordPress plugins and WordPress themes has thousands of useful items you can choose and developers are actively contributing to it because of this little thing called love.
  5. I forgot some of the reasons why I left blogger, but I'll add it here once I thought of it. You might also want to add yours, just drop it in the comments section below!

Blogger is the very first blogging platform I love. It is very easy to set up, free, hosted by Google and can get you started really well! It is the reason why my Google Adsense account was approved.

But when are learning really well and achieving some levels of success, you will have to upgrade with something you have

Why I love WordPress?

Seriously, do I really even need to have a list for this? Okay, I'll just make it quick since I feel like my brain is shutting down right now.

  1. Really easy to manage posts. Writing features are really great especially the distraction free writing mode.
  2. Makes your site a lot faster. Well, it depends on your hosting server, if you have a high traffic site, a VPS might suit you well.
  3. Themes and plugins. I'm really amazed with a lot of beautiful themes (free or paid), and very useful plugins WordPress can offer - for your site's visual design, SEO, and more!
  4. More control. With a self-hosted WordPress site, you have more control over your data and how they can be used.
  5. Enjoyment. Developing a website or any app with a programming technology or language you know is such a joy. You can do more and feel more productive in everyday of your life.
  6. Add your reason here.

Even though switching to WordPress cost me few bucks, that's really okay. It was covered by my income from my Adsense account, speaking engagements and private tutor services which I was able to do through the discovery of my blog.

So that's it for now guys! If you want to add something to my list, feel free to drop it in the comments section below, I'm willing to update this post for you! I'm shutting down and need some sleep now, Good night!

4th TIP Student Congress with the Alumni – 2014

Hey guys! I'm sorry to disappoint you but I'm not going to publish some codes today. I was invited to be a guest speaker at our institute's student congress with the alumni - for the second time. It was held yesterday, January 23, 2014 in the Technological Institute of the Philippines, QC.

I was with my batch-mate/schoolmate Mark Kevin and Jasmine for the Information Technology student program. It's good to see them, the students, my college and professors!

Here are some of the things I remember telling our students or audience.IntroductionGood day everyone!First, I wanna thank all the organizers of this event (OSA, the Alumni Office, etc.) for inviting me here (especially Ms. Isip!) for the second time (I was invited last January 2011) to see and speak to you guys. I hope everyone is having a great day so far.We were invited here to speak to you about “where are we now?” - since the time we graduated from this institution. In my case, I will talk about the things I experienced after college, not during our college. But if you have some questions during my college life, that's really fine too.Who am I?

I want to introduce myself. My name is John Michael Vincent D. Dalisay. Such a long name right? My parents make it hard for me to write it during my elementary days.

You can call me “Mike”. I’m 23 years old, from Antipolo City. A graduate of Bachelor of Science in Information Technology batch 2010, April.Current Position and CompanyI’m currently working as a Senior Software Developer for an IT solutions provider here in Quezon City. Our company is called “Eacomm Corporation”. I have been with the company for almost three and a half years now - and I’m glad that everything is still doing great in our company.

Eacomm corporation has be around since 2001. Our company is not that big. But it is stable. We always have cool projects that you can be excited to work on.

Since I joined the company, I personally worked with  government agencies (DOLE), educational institutions (UP, Ateneo), and dozens of small and medium scale businesses (Canadian Hospitality Institute, Cafe Sweet, Calleza Grill). Business is good.

Junior Years

During my Junior years in the company, I worked mostly on client (such as the above) and company owned websites - philippinecompanies.com, eforuli.com, eacomm.com. I mostly worked with the back-end stuff such as database and web programming.I’m not a graphic or web designer. I worked with a graphic designer for every website’s visual design. I was a Junior Software Developer for over two years, from August 2010 up to December 2012.

Promotion and high pay is not in my mind. The pay is just fine for me (it increases every 3 or 6 months anyway, depending on your performance). I know I have lot to learn in my field and being a Junior Software Developer for more than two years seems so fit.

I’m happy acquiring new knowledge, improving my skills in programming and software development and everything in the real-life learning process.One Step Forward

On December 2012, I signed some new papers. I was promoted as a Software Developer. I’m not a Junior anymore. This was effective January 2013.

It was the year when I almost stopped working with client and company websites (although sometimes they need some support).2013Year 2013 was an awesome year for me. Good thing that the 2012 judgement day was cancelled. Just kidding.

It was the year when we signed with a big project - from being an experimental project. Our client is in the sales and marketing industry. He wanted to change the way we think about sales people, making them more technical and cope up with the digital age.

The project is “Software as a Service” or Saas, we are, of course, using the cloud, web and mobile technologies for this project.  I can’t tell you more about this project due to some legal issues.

I also worked with Google Singapore. I developed a data collection app to improve Google Maps. The final demo came and a product manager from Google came to the Philippines.

Her name is Ms. Autumn Zhang. She was also a former Software Engineer at Google - worked on Google Maps features like "My Maps".

You can look at her LinkedIn profile.

Below are some pictures taken during our presentation. I was the one in gray shirt, holding the Android device. Ms. Zhang is the one in pink.

Also this year, our company joined an app development contest hosted by DOTC with some sponsors like Smart communications.

Our app is called Trip Barker. Here's a preview of our app, in case you're interested.

https://youtube.com/watch?v=mmTbp77G5CE%3Fwmode%3Dopaque%26rel%3D0

We won as the champion. Below are some pictures taken during the event.

The Trip Barker Development Team and EACOMM Management along with DOTC Secretary Joseph Emilio Abaya and other organizers and sponsors of the event.

Me holding our 100K check and trophy.

We were also featured in the news, here are some.

We were also nominated to the 2014 Mobile Premier Awards at the Mobile World Congress in Barcelona, Spain this February 2014.Another Beautiful StepJust recently (December 2013), I signed some new papers again. I was promoted to a Senior Developer level effective this January 2014. I’m so happy that something good is happening in my career. I want to be a better leader and software developer.

Future Career Plans

Like what most people say, I want to have my own company, my own business. Maybe after some few more years, I’ll step into this stage of my life. The reality is, I don’t want to be an employee my whole life.

I want to build something awesome, useful to people and make my own money from it. I want to be an entrepreneur. My primary business will be in the IT field and after that, I will venture into food and real estate.

Good Advise

Be humble. If you're humble, you'll be like a sponge, absorbing lessons not only from school but also from life. If you're humble, you can always learn new things and it will make you a better person. You'll be smarter. You'll be happier. If you're humble, you will receive more, and so you can give more - it feels wonderful.

Just do it. Start doing what you have to do. You'll always figure it out. Most of us procrastinate thinking we can't do it. This is also your chance to hone your skills and sharpen you mind for the real life, or in the industry after your college studies.Good Quotes

Aside from my very inspirational and interesting story, I also want to present some awesome words from some well-known names in the tech industry. You can use it for your career.

"Your work is going to fill a large part of you life, and the only way to be truly satisfied is to do what you believe is great work." ~ Steve Jobs, Apple

"Always deliver more than expected." ~ Larry Page, Google

"When you innovate, you've go to be prepared for everyone telling you you're nuts." ~ Larry Ellison, Oracle

"What really motivates people at Facebook is building stuff they're proud of." ~ Mark Zuckerberg, Facebook

"Success is a lousy teacher. It seduces smart people into thinking they can't lose." ~ Bill Gates, Microsoft

"A brand for a company is like a reputation for a person. You earn reputation by trying to do hard things well." ~ Jeff Bezos, Amazon

Industry Testimonials

End.

Below is the power-point version of my presentation.

https://onedrive.live.com/embed?resid=C4871CC26D7FF69%21144

Alright, that was my short talk! I didn't have enough time to tell them something more since it's already 6:15 PM and 6:00 PM was the dismissal. I saw in their eyes that they want more, but the time is up.Funny moments include their interest in my love life. My power-point presentation was web based, sometimes, the internet connection is really slow so we wait for some slides to load. While loading, they wanted me to say something about my love life. I was just smiling at them and saying something else. Haha! I said we were there to encourage and tell them about the IT industry.It feels so good knowing that you have a positive impact to the lives of others. Those students, I know they listened carefully. The asked questions. I feel their interest. They are amazed. It feels like I'm giving them something to look forward too and so they will keep on moving forward!

After the talk, I was assisted by a student officer to the dining room and have a dinner with our professors, student officers, and colleagues. The food was good.

Here are some more pictures from the event.

Student officer Jason and Jasmine.

On our dinner table.

Me and Jasmine.

They also gave the alumnus some TIP stuff...

...and a certificate of appreciation.

Thanks for reading! If you're one of the students there, I hope I inspired you. Again, thanks for listening.

Generating JSON String with PHP

Today I'm going to share this code I used to generate a JSON string with data from MySQL database.

For those not yet familiar, JSON is a lightweight data interchange format (like XML but it is lightweight).

It has been used by companies like Google and Facebook in their APIs.

Recently, I needed a JSON string to get data from the web to the Android app I'm working on.

The PHP file gets a parameter company_id to select few data related to a company.

Please note that this is not a production ready code, but is very useful to get you started and can serve as quick reference.

PHP Code

Here's a short PHP code to generate JSON string. It is really easy compared to using XML.

<?php
// connection to the database
$host = "your_host";
$username = "your_username";
$password = "your_password";
$db_name = "your_database_name";

try {
    $con = new PDO("mysql:host={$host};dbname={$db_name}", $username, $password);
}catch(PDOException $exception){
    echo "Connection error: " . $exception->getMessage();
}

// parameter
$company_id = isset($_GET['company_id']) ? $_GET['company_id'] : die();

// SQL query and prepared statement
$stmt = $con->prepare("SELECT id, name, description FROM document_sequences WHERE company_id = :company_id");
$stmt->bindParam(':company_id', $company_id);
$stmt->execute();

// get the results in array
$results = $stmt->fetchAll(PDO::FETCH_ASSOC);

// you can remove this line if you want
$results = array('DocumentSequence' => $results);

// now show the json tring
echo json_encode($results);
?>

Viewing JSON String

The PHP code above generates JSON string that may cause real pain in your heart, it looks like this:

{"DocumentSequence":[{"id":"4","name":"Store two","description":"Document sequence for store 2."},{"id":"5","name":"Store One","description":"Document Sequence for store 1."},{"id":"6","name":"Store 3","description":"Document sequence for store three."}]}

But the good news is, there's an excellent JSON viewer online that we can use for a better JSON vieweing. It is called Online JSON Viewer.

You just have to copy your JSON string (or load via URL) to the "Text" tab and then click the "Viewer" tab. JSON string above will now look like this:

generate-json-string-with-php

Working with Geolocation watchPosition() API

I’m going to share a working navigator.geolocation.watchPosition() code I used when I wanted the user to know his current location in real time (while he is walking or riding a vehicle).

This works while the user is using his Android device or any device with a browser that supports the Geolocation API.

We made this code with the help of Google Maps and jQuery.

Working with Geolocation watchPosition() API

Live Demo

Recommended to use a mobile device, you must allow it to get your current location, don’t worry, I’m not tracking you.

Code Example

Now here’s our index.html code.

<!DOCTYPE HTML>
<html>
<head>
    <title>Geolocation watchPosition() by The Code of a Ninja</title>
     
    <!-- for mobile view -->
    <meta content='width=device-width, initial-scale=1' name='viewport'/>
     
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"></script>
    <script type="text/javascript">
 
        // you can specify the default lat long
        var map,
            currentPositionMarker,
            mapCenter = new google.maps.LatLng(14.668626, 121.24295),
            map;
 
        // change the zoom if you want
        function initializeMap()
        {
            map = new google.maps.Map(document.getElementById('map_canvas'), {
               zoom: 18,
               center: mapCenter,
               mapTypeId: google.maps.MapTypeId.ROADMAP
             });
        }
 
        function locError(error) {
            // tell the user if the current position could not be located
            alert("The current position could not be found!");
        }
 
        // current position of the user
        function setCurrentPosition(pos) {
            currentPositionMarker = new google.maps.Marker({
                map: map,
                position: new google.maps.LatLng(
                    pos.coords.latitude,
                    pos.coords.longitude
                ),
                title: "Current Position"
            });
            map.panTo(new google.maps.LatLng(
                    pos.coords.latitude,
                    pos.coords.longitude
                ));
        }
 
        function displayAndWatch(position) {
         
            // set current position
            setCurrentPosition(position);
             
            // watch position
            watchCurrentPosition();
        }
 
        function watchCurrentPosition() {
            var positionTimer = navigator.geolocation.watchPosition(
                function (position) {
                    setMarkerPosition(
                        currentPositionMarker,
                        position
                    );
                });
        }
 
        function setMarkerPosition(marker, position) {
            marker.setPosition(
                new google.maps.LatLng(
                    position.coords.latitude,
                    position.coords.longitude)
            );
        }
 
        function initLocationProcedure() {
            initializeMap();
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(displayAndWatch, locError);
            } else {
                // tell the user if a browser doesn't support this amazing API
                alert("Your browser does not support the Geolocation API!");
            }
        }
 
        // initialize with a little help of jQuery
        $(document).ready(function() {
            initLocationProcedure();
        });
    </script>
</head>
 
<body style="margin:0; padding:0;">
     
    <!-- display the map here, you can changed the height or style -->
    <div id="map_canvas" style="height:25em; margin:0; padding:0;"></div>
</body>
 
</html>

In my case, I used this code with an Android WebView since it should be seen inside an app I’m working on, but as I said, this will work with any device with a browser.

If you have the same case as mine, you can also use this piece of android WebView code.

Just add:

webSettings.setGeolocationEnabled(true);

and inside your setWebChromeClient()…

@Override
public void onGeolocationPermissionsShowPrompt(String origin, GeolocationPermissions.Callback callback) {
     
    super.onGeolocationPermissionsShowPrompt(origin, callback);
    callback.invoke(origin, true, false);
}

Download Source Code

You can download all the code used in this tutorial for only $9.99 $5.55!

Issues Encountered

If you were testing it with an Adroid Webview or Chrome Browser and seemed like it is not working, don’t lose hope. There is always hope. :)

Here’s the solution, uninstall the Chrome browser and then re-install it.

Related Source Code

Google Maps Geocoding Example with PHP - This tutorial is about a Google Maps geocoding example with PHP. We used some Google Maps JavaScript to show the geo-coded data on the map as well.

Further Reading

Geolocation API Specification
Geolocation.watchPosition() from Mozilla Developer Network

Don’t hesitate to post your comments regarding this Geolocation watchPosition() API example code.

CakePHP 2.x Pagination Tutorial: Helper, Conditions, Limit, Sorting and More!

CakePHP Pagination is one of the fastest thing you can code with this amazing framework. In this post I’m gonna show you how you can create a pagination script in matter of few minutes, or even seconds! Cool? Let’s get started.

This post is part of my CakePHP tutorial series, before you proceed to this, make sure you already installed your CakePHP poperly, know the CakePHP classes and naming conventions, and much better if you can code the CakePHP CRUD operations.

Video Demo

Here’s a video demo of what will be our code ouput.

Controller Code

On our controller, we are going to have a query the cakePHP way, we are going to have the following conditions:

  • Won’t include the record with an ID of 6 (‘conditions’ => array(‘User.id !=’ => ’6′))
  • We will limit to 3 records per page (‘limit’ => 3)
  • Order the result by ID (‘order’ => array(‘id’ => ‘desc’)) in descending order

So here’s the code that will be added in our UsersController.php

public function view() {
 
    // we prepare our query, the cakephp way!
    $this->paginate = array(
        'conditions' => array('User.id !=' => '6'),
        'limit' => 3,
        'order' => array('id' => 'desc')
    );
     
    // we are using the 'User' model
    $users = $this->paginate('User');
     
    // pass the value to our view.ctp
    $this->set('users', $users);
     
}

The $users variable gives us an array that look like this:

cakephp-pagination

View Code

On our view.ctp, our data is presented with a table. The table header contains the paginator sort() method for sorting the data using any fields you want (and you won’t have to create another query!)

The $this->Paginator object (pagination helper) also has lots of methods for paging, please see the ‘pagination section’ on the code block below.

Also we used the <div class=’paging’> which uses the CakePHP generic CSS. You can change that if you want and be creative with your paging UI design.

<?php
// so we use the paginator object the shorter way.
// instead of using '$this->Paginator' everytime, we'll use '$paginator'
$paginator = $this->Paginator;
 
if($users){
 
    //creating our table
    echo "<table>";
 
        // our table header, we can sort the data user the paginator sort() method!
        echo "<tr>";
         
            // in the sort method, ther first parameter is the same as the column name in our table
            // the second parameter is the header label we want to display in the view
            echo "<th>" . $paginator->sort('id', 'ID') . "</th>";
            echo "<th>" . $paginator->sort('firstname', 'Firstname') . "</th>";
            echo "<th>" . $paginator->sort('lastname', 'Lastname') . "</th>";
            echo "<th>" . $paginator->sort('username', 'Username') . "</th>";
        echo "</tr>";
         
        // loop through the user's records
        foreach( $users as $user ){
            echo "<tr>";
                echo "<td>{$user['User']['id']}</td>";
                echo "<td>{$user['User']['firstname']}</td>";
                echo "<td>{$user['User']['lastname']}</td>";
                echo "<td>{$user['User']['username']}</td>";
            echo "</tr>";
        }
         
    echo "</table>";
 
    // pagination section
    echo "<div class='paging'>";
 
        // the 'first' page button
        echo $paginator->first("First");
         
        // 'prev' page button, 
        // we can check using the paginator hasPrev() method if there's a previous page
        // save with the 'next' page button
        if($paginator->hasPrev()){
            echo $paginator->prev("Prev");
        }
         
        // the 'number' page buttons
        echo $paginator->numbers(array('modulus' => 2));
         
        // for the 'next' button
        if($paginator->hasNext()){
            echo $paginator->next("Next");
        }
         
        // the 'last' page button
        echo $paginator->last("Last");
     
    echo "</div>";
     
}
 
// tell the user there's no records found
else{
    echo "No users found.";
}
?>

Thanks for reading this tutorial code for pagination in CakePHP!

Resposive Web Design Testing Tools

Hi guys! Today we have a guest post from Marykris de Leon, you can find more about her at the end of the post, please read below!
Hello geeks! This is a quick guide on how you can test your responsive website without actual gadgets or devices. I personally recommend these tools for testing on devices such as smartphones, laptops, tablets, and TVs. We are going to have two categories: Browser Extensions and Online Tools.

Resposive Web Design Testing Tools

Browser Extensions

1. Internet Explorer – You should have Microsoft Internet Explorer Developer Toolbar which can be downloaded on this link: Internet Explorer Developer Toolbar. After installing, you have to press F12 on your keyboard to use this tool.

EI Developer Toolbar.
EI Developer Toolbar.

2. Firefox - For Firefox users, you may use Firesizer which can be downloaded on this link: Firesizer. To use this, you have to enable your addon bar:

Enable Add-on bar for Firesizer.
Enable Add-on bar for Firesizer.

Then on the add-on bar look for the Firesizer function which is located on the lower right corner of Firefox, you have to right click to customize the sizes.

Using Firesizer.
Using Firesizer.

You may also try Responsive Design View on Firefox > Web Developer > Responsive Web Design or Ctrl + Shift + M for keyboard shortcut.

Firefox Responsive Web Design View.
Firefox Responsive Web Design View.

3. Google Chrome – Chrome has Window Resizer, you can install this awesome Chrome extension from this link: Window Resizer

Google Chrome Window Resizer.
Google Chrome Window Resizer.

Online Tools

1. Screenfly – Allows you to enter your website URL and gives you many view options for testing such as Netbooks, Desktop, Kindle Fire, iPad 1-3/Mini, Nexus 7, Motorola Razr, Blackberry, LG optimus, Galaxy SIII, iPhones, and Television views (480p, 720p, 1080p). It also allows you to specify custom screen size and rotate the screen view. This is my favorite online testing tool.

Screenfly.
Screenfly.

2. Responsinator – Also allows you to enter your website URL (located on the upper left corner) and gives you the available views in one load which is kinda fast and convenient, you just have to scroll down. The available views is limited to iPhone (3,4,5), iPad, Kindle, and Samsung Galaxy. All has portrait and landscape mode.

Responsinator.
Responsinator.

3. Responsivetest- Also allows you to enter your responsive website URL (located on the upper left corner) and loads the view one at a time, depends on your device selection. Screens are limited to XGA, WXGA, iPad, Kindle Fire, iPhone and Android phones (320 x 240 and 515 x 295), also has landscape and portrait mode.

responsivetest.net
responsivetest.net

By the way, the example website we used in this post is this responsive web design live demo. The tutorial for coding a responsive website can be found here: Coding A Responsive Website Design.

Let us know in the comments what testing tools do you use? :)

About Marykris

Marykris De Leon is a professional Systems Analyst and Web Developer for the past three years. You can follow her on Facebook, Twitter and Google+

How To Make Responsive Web Design CSS Code?

In today’s tutorial, I’m going to show you a systematic and very simple way to create a responsive website with CSS3 media queries and HTML5.

Responsive web design has been around for few years now and is widely accepted as a new standard when building a modern website.

Coding A Responsive Website Design

For the “live demo”, please try to resize your browser to see the page’s responsiveness.

I want to give you a brief definition of what a responsive web design is, if you already know what it is, you may skip this part and jump to the “Let’s code” section below. Well, for me, responsive web design is a way to show your web site’s content in an easy-to-understand manner regardless of what device views it.

For example, a visitor of your website must feel comfortable when viewing the same website for any type of devices (with different screen sizes) he has. Example of those devices include:

  • Android phones
  • iPhones
  • 7″ tablets
  • 10″ tablets
  • iPads
  • Desktop computers
  • and many more devices that can view a web page.

Other points to consider…

  • Your website should not have a horizontal scrollbar.
  • Users must not use the zoom tool to view your site’s contents.

By the way, if you want to test the live demo on different devices easily, you can use the tools described on this link: Responsive Web Design Testing Tools.

Let’s code.

Step 1: It is important to build your website for the smallest device possible first. Build the website for smart phones. You can view a live demo of our step 1 here.

<!DOCTYPE HTML>
<html>
     <head>
          <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
          <meta name="viewport" content="width=device-width">
          
          <title>Your Website</title>
          
          <style>
               
          /* misc start */
          *{
               margin:0px;
               padding:0px
          }
          
          body{
               font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
          }
          
          .media1140px{
               background-color:#CE9429;
          }
          
          .media768px{
               background-color:#EDD49A;
          }
          
          .media480px{
               background-color:#EFEF34;
          }
          
          .media300px{
               background-color:#82EAFF;
          }
          
          .media1140px, .media768px, .media480px, .media300px{
               padding:15px;
          }
          
          p{
               margin:0 0 20px 0;
          }
          
          .clearb{
               clear:both;
          }
          /* misc end */
          
          
          
          
          
          
          /* header start */
          #mainHeader{
               background-color:#82EAFF;
               padding:0.5em;
               overflow:auto;
          }
           
          /* to make our logo resize automatically */
          #responsiveLogo{
               width:100%;
          }
          
          #responsiveLogo img{
               max-height: 100%;
               max-width: 100%;
          }
          /* header end */
          
          
          
          
          
          /* navigation start */
          nav{
               float:left;
               width:100%;
          }
          
          nav ul{
               list-style-type:none;
               padding:0;
          }
 
          nav ul li{
          
          }
 
          nav ul li a{
               background-color:green;
               border:thin solid #fff;
               color:#fff;
               display:block;
               height:3em;
               line-height:3em;
               text-align:center;
               text-decoration:none;
               width:100%;
          }
          
          nav ul li a:hover{
               background-color:yellow;
               color:#000;
          }
          /* navigation end */
          
          
          
          
          
          /* middle section start */
          #mainSection{
               background-color: #D9F8F2;
               float: left;
               width: 96%;
          }
          
          #sideBox1{
               background-color: #C9A449;
               width: 96%;
          }
          
          #mainSection, #sideBox1{
               overflow: auto;
               padding:2%;
          }
          /* middle section end */
          
          
          
          /* footer start */
          footer{
               background-color:orange;
               height:50px;
               line-height:50px;
               text-align:center;
               width:100%;
          }
          /* footer end */
               
          </style>
          
     </head>
<body>
 
     <header id='mainHeader'>
     
          <div id='responsiveLogo'>
               <img src='images/logo4.png' />
          </div>
          <nav>
               <ul>
                    <li><a href="#home">Home</a></li>
                    <li><a href="#news">News</a></li>
                    <li><a href="#contact">Contact</a></li>
                    <li><a href="#about">About</a></li>
               </ul>
          </nav>
     </header>
     
     <section id='mainSection'>
 
          <article>
               <header>
                    <h2>About The Code Of A Ninja</h2>
                    <p>Posted on <time datetime="2003-01-01T16:31:24+02:00">January 1st, 2013</time> by <a href="#">Mike</a> - <a href="#comments">173 comments</a></p>
               </header>
               <p>
                    <div class='media1140px'>@media 1140px</div>
                    <div class='media768px'>@media 768px</div>
                    <div class='media480px'>@media 480px</div>
                    <div class='media300px'>@media 300px</div>
               </p>
               <p>
                    My name is Mike Dalisay, a 22 year old Software Developer (<a href="http://en.wikipedia.org/wiki/Web_developer">Web</a> and
                    <a href="http://developer.android.com/index.html">Android</a>) from The Philippines.
                    My posts here are mainly notes to self and for <i>anyone else</i> that may find them useful.
               </p>
               <p>
                    This blog contains programming tutorials, codes, demos, scripts, how-to's, tips, tricks, code downloads and other fun stuff
                    related to web and android apps <a href="http://en.wikipedia.org/wiki/Software_development">development</a>.
               </p>
               <p>
                    Most of my time is spent with PHP, MySQL, AJAX, HTML, CSS, jQuery, JavaScript, XML, Web Design, Android, JAVA and some
                    other Open source software projects related to Web and Android apps development.
               </p>
               <p>
                    You can leave a comment, <a href="http://twitter.com/ninjazhai">follow</a> or <a href="https://www.facebook.com/pages/the-code-of-a-ninja/107786425949934">subscribe</a>
                    to this blog. Take care. :) 
               </p>
          </article>
 
     </section>
 
     <aside id='sideBox1'>
          <h2>The Blogger</h2>
          <p>This is your side bar. You can add your information or links here.</p>
     </aside>
 
     <div class='clearb'></div>
     
     <footer>
          <p>Copyright 2013 - Game Note</p>
     </footer>
 
</body>
</html>

After doing the code above, our webpage is not yet responsive. You won’t see the magic even if you resize your browser. By the way, you can also include the CSS code as external file.

Step 2: Now let’s create the website layout for a type of device next to a smart phone, maybe we can consider a 7″ tablets as one. You can view a live demo of your step 2 here.

We’ll just add the following CSS:

/* 
-can be for 7 inch tablets
-This CSS will apply for devices with the minimum width of 480 pixels
 */
@media only screen and (min-width: 480px) {
     #mainHeader {
          background-color:#EFEF34;
     }
     
     nav ul li{
          float:left;
          width:25%;
     }
}

Now if you’ll resize your browser, you can see that your website is already responsive in two ways.

Step 3: Now we will create the website layout for another type of screen next to 7″ tablets, we can consider the iPad or 10″ tablets in portrait mode. Our step 3 live demo is here.

Please add the following CSS:

/*
-10 inch tablets
-This CSS will apply for devices with the minimum width of 768 pixels
*/
@media only screen and (min-width: 768px) {
     #mainHeader {
          background-color:#EDD49A;
     }
     
     #mainSection{
          float: left;
          width: 61%;
     }
     
     #sideBox1{
          float: right;
          width: 30%;
     }
     
}

Now our website is responsive in three ways. Try to re-size your browser again.

Step 4: Now we will create the website for desktop computers, laptops or 10″ tablets in landscape mode.

/*
-Desktop computers
-This CSS will apply for devices with the minimum width of 1140 pixels
*/
@media only screen and (min-width: 1140px) {
     #mainHeader {
          background-color:#CE9429;
     }
     
     #responsiveLogo{
          float:left;
          width:30%;
     }
     
     nav{
          float:left;
          width:70%;
     }
     
     nav ul{
          margin:1.5em 0 0 0;
     }
}

Complete web page code:

<!DOCTYPE HTML>
<html>
     <head>
          <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
          <meta name="viewport" content="width=device-width">
          
          <title>Your Website</title>
          
          <style>
               
          /* misc start */
          *{
               margin:0px;
               padding:0px
          }
          
          body{
               font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
          }
          
          .media1140px{
               background-color:#CE9429;
          }
          
          .media768px{
               background-color:#EDD49A;
          }
          
          .media480px{
               background-color:#EFEF34;
          }
          
          .media300px{
               background-color:#82EAFF;
          }
          
          .media1140px, .media768px, .media480px, .media300px{
               padding:15px;
          }
          
          p{
               margin:0 0 20px 0;
          }
          
          .clearb{
               clear:both;
          }
          /* misc end */
          
          
          
          
          
          
          /* header start */
          #mainHeader{
               background-color:#82EAFF;
               padding:0.5em;
               overflow:auto;
          }
          
          #responsiveLogo{
               width:100%;
          }
          
          #responsiveLogo img{
               max-height: 100%;
               max-width: 100%;
          }
          /* header end */
          
          
          
          
          
          /* navigation start */
          nav{
               float:left;
               width:100%;
          }
          
          nav ul{
               list-style-type:none;
               padding:0;
          }
 
          nav ul li{
          
          }
 
          nav ul li a{
               background-color:green;
               border:thin solid #fff;
               color:#fff;
               display:block;
               height:3em;
               line-height:3em;
               text-align:center;
               text-decoration:none;
               width:100%;
          }
          
          nav ul li a:hover{
               background-color:yellow;
               color:#000;
          }
          /* navigation end */
          
          
          
          
          
          /* middle section start */
          #mainSection{
               background-color: #D9F8F2;
               float: left;
               width: 96%;
          }
          
          #sideBox1{
               background-color: #C9A449;
               width: 96%;
          }
          
          #mainSection, #sideBox1{
               overflow: auto;
               padding:2%;
          }
          /* middle section end */
          
          
          
          /* footer start */
          footer{
               background-color:orange;
               height:50px;
               line-height:50px;
               text-align:center;
               width:100%;
          }
          /* footer end */
          
          
          
          
          
          
          
          /* @media start */
          
          /* we don't need to specify for smartphones, that's our default layout */
          
          /*
          -7 inch tablets
          -This CSS will apply for devices with the minimum width of 480 pixels
          */
          @media only screen and (min-width: 480px) {
               #mainHeader {
                    background-color:#EFEF34;
               }
               
               nav ul li{
                    float:left;
                    width:25%;
               }
          }
          
          /*
          -10 inch tablets
          -This CSS will apply for devices with the minimum width of 768 pixels
          */
          @media only screen and (min-width: 768px) {
               #mainHeader {
                    background-color:#EDD49A;
               }
               
               #mainSection{
                    float: left;
                    width: 61%;
               }
               
               #sideBox1{
                    float: right;
                    width: 30%;
               }
               
               
          }
          
          /*
          -Desktop computers
          -This CSS will apply for devices with the minimum width of 1140 pixels
          */
          @media only screen and (min-width: 1140px) {
               #mainHeader {
                    background-color:#CE9429;
               }
               
               #responsiveLogo{
                    float:left;
                    width:30%;
               }
               
               nav{
                    float:left;
                    width:70%;
               }
               
               nav ul{
                    margin:1.5em 0 0 0;
               }
          }
          
          /* @media end */
               
          </style>
          
     </head>
<body>
 
     <header id='mainHeader'>
     
          <div id='responsiveLogo'>
               <img src='images/logo4.png' />
          </div>
          <nav>
               <ul>
                    <li><a href="#home">Home</a></li>
                    <li><a href="#news">News</a></li>
                    <li><a href="#contact">Contact</a></li>
                    <li><a href="#about">About</a></li>
               </ul>
          </nav>
     </header>
     
     <section id='mainSection'>
 
          <article>
               <header>
                    <h2>About The Code Of A Ninja</h2>
                    <p>Posted on <time datetime="2003-01-01T16:31:24+02:00">January 1st, 2013</time> by <a href="#">Mike</a> - <a href="#comments">173 comments</a></p>
               </header>
               <p>
                    <div class='media1140px'>@media 1140px</div>
                    <div class='media768px'>@media 768px</div>
                    <div class='media480px'>@media 480px</div>
                    <div class='media300px'>@media 300px</div>
               </p>
               <p>
                    My name is Mike Dalisay, a 22 year old Software Developer (<a href="http://en.wikipedia.org/wiki/Web_developer">Web</a> and
                    <a href="http://developer.android.com/index.html">Android</a>) from The Philippines.
                    My posts here are mainly notes to self and for <i>anyone else</i> that may find them useful.
               </p>
               <p>
                    This blog contains programming tutorials, codes, demos, scripts, how-to's, tips, tricks, code downloads and other fun stuff
                    related to web and android apps <a href="http://en.wikipedia.org/wiki/Software_development">development</a>.
               </p>
               <p>
                    Most of my time is spent with PHP, MySQL, AJAX, HTML, CSS, jQuery, JavaScript, XML, Web Design, Android, JAVA and some
                    other Open source software projects related to Web and Android apps development.
               </p>
               <p>
                    You can leave a comment, <a href="http://twitter.com/ninjazhai">follow</a> or <a href="https://www.facebook.com/pages/the-code-of-a-ninja/107786425949934">subscribe</a>
                    to this blog. Take care. :) 
               </p>
          </article>
 
     </section>
 
     <aside id='sideBox1'>
          <h2>The Blogger</h2>
          <p>This is your side bar. You can add your information or links here.</p>
     </aside>
 
     <div class='clearb'></div>
     
     <footer>
          <p>Copyright 2013 - Game Note</p>
     </footer>
 
</body>
</html>

Download Source Code

You can download all the code used in this tutorial for only $9.99 $5.55!

Some screenshots of our output:

Page header smartphone screenshot – landscape mode
Page header smartphone screenshot – landscape mode
Footer screenshot from my smartphone in landscape mode.
Footer screenshot from my smartphone in landscape mode.
Header screenshot from my smartphone  in portrait mode.
Header screenshot from my smartphone
in portrait mode.
Body section screenshot from my Smartphone in  portrait mode.
Body section screenshot from
my Smartphone in portrait mode.
Footer screenshot from  my smartphone in portrait mode.
Footer screenshot from
my smartphone in portrait mode.
Screenshot from my 10.1 Android tablet in portrait mode.
Screenshot from my 10.1 Android tablet in portrait mode.

Credits: Image from Game Note.