Nasrul Hazim Bin Mohamad

Training: Mobile Apps Development with Ionic Framework – Batch 1

Apr
10

Registration Open Now!

Please register at Mobile Apps Development with Ionic Framework

Course Details

Date: 24th April 2016

Location: http://bit.ly/cc-training-location

Fee: RM 100

Syllabus Details

Introduction

Level 0
Installation
– NodeJS: https://nodejs.org/en/ (need to be done before coming to the class)
– Ionic: Just run step 1 at http://ionicframework.com/getting-started/ (need to be done before coming to the class)

Level 1
Ionic Creator
– Sign Up (need to be done before coming to the class)
– Creating Project
– Export Project

Level 2
Development
– Using Google Chrome Developer Tools
– app.js
– route.js
– controller.js
– Templates

Level 3
– ngCordova (Geo Location & Camera)
– services.js (Factory & Service)

Level 4
– Preview App on Device using Ionic View app (need to be done before coming to the class)

Website Development – Front-end

Dec
20

I’ve been working recently on what’s the basic / features used in most websites in 2015. Here is the list:

  1. Parallax
  2. Carousel
  3. Animate
  4. Smooth Scrolling
  5. Flat UI Design
  6. Nice & Clean Icons
  7. UI Framework
  8. JavaScript Library with their extensions
  9. Slider

From all of features above can be achieve by using following plugins/extension/library:

  1. Carousel – Owl Carousel
  2. Parallax – Parallax.js
  3. Animate – Animate.css
  4. Smooth Scroll – see my post here
  5. Fontello – include Font Awesome, Fontellico, etc.
  6. Ui Framework – Bootstrap, Foundation
  7. Slider – Light Slider

In 2016, I think most of the above still remain use.

A bit of reading just now – probably my next project will use Angular Material.

HTML5 & CSS3: Sticky Footer

Oct
27
Sticky Footer

Sticky Footer

<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>kklw</title>
    <link rel="stylesheet" href="./embed/bootstrap/default/bootstrap.min.css" />
    <link rel="stylesheet" href="./embed/bootstrap/fonts/font-awesome.min.css" />
</head>

<body>

<div id="wrapper">

<header></header>


<div id="content"></div>


<div id="footer"></div>

    </div>

</body>

</html>
div#wrapper{
  min-height:100%;
  position:relative;
  background-color:blue;
}

body{
  padding:0;
  height:100%;
  background-color:grey;
}

div#content{
  padding-bottom:200px;
}

div#footer{
  width:100%;
  height:100px;
  position:absolute;
  bottom:0;
  left:0;
  background-color:black;
}

header{
  width:100%;
  min-height:200px;
  background-color:red;
}

html{
  height:100%;
  margin:0;
}

Source code: <a href=”https://github.com/nasrulhazim/bootstrap-studio-samples/tree/master/sticky-footer”>Sticky Footer</a>

Bootstrap Studio: Demos

Oct
26

Bootstrap Studio, is a powerful web design tool for creating responsive websites using the Bootstrap framework.

Here are some screen shots that I have when working with it. An awesome desktop application, recommended for frond-end developer, reducing time spent for front-end development.

Carousel

Carousel

Columns Sizing

Columns Sizing

Options for Columns

Options for Columns

CSS Panel

Similar to Chrome Developer Tools CSS Panel

For Dekstop

For Dekstop

The Files

The Files

The Files

The Files

For Desktop

For Desktop

For Mobile

For Mobile

Source Code

Clean Source Code Generated

Here are some samples that I’m able to create with Bootstrap Studios. Hope you guys enjoy it.

Source code available here

  1. Carousel (component available in BS 1.0.9)
  2. Simple Login

Here are the summary from my experience using Bootstrap Studio:

      Reducing time spent for front-end development
      Doing two job at one time – design & write codes
      Lightweight and easy-going UI

Anyways, before you consider to buy Bootstrap Studio, please make sure that you’re understand how HTML5, CSS3, JavaScript works, and of course Twitter Bootstrap itself, else, you might get confusing or too dependent with the tool.

Happy Bootstrapping!

Training: Web Mobile Application Development (Basic / Intermediate) – INTIM – August 2015

Aug
16

Training: Web Mobile Application Development (Basic / Intermediate)

Location: INTAN Kampus Wilayah Timur (INTIM), Kemaman, Terengganu

Date: 17th – 20th August 2015

Slide: http://bit.ly/training-web-mobile-application-development

Training Materials:

  1. Web Mobile Application Starter Kit – https://bit.ly/training-mobile-app-starter-kit
  2. Basic Android Configuration – https://bit.ly/training-mobile-app-android-config
  3. API Template – https://bit.ly/training-api-template

Important Articles:

  1. HTTP Methods for Restful Services – http://bit.ly/htpp-nethods-for-restful-services
  2. Android Configuration – http://bit.ly/android-config-xml
  3. Chrome Device Mode – http://bit.ly/chrome-device-mode

 

Training – PHP & MySQL: Basic to Advanced

Jan
02

HTML5: Get Current Position

Sep
12
(function($) {
	 
    var methods = {
        current : function()
        {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(position, error);
            }

            function position(pos) {
                var latitude = pos.coords.latitude;
                var longitude = pos.coords.longitude;

                alert('Latitude: ' + latitude + ', Longitude: ' + longitude);
            }

            function error(err) {
                alert('ERROR(' + err.code + '): ' + err.message);
            };
        },
    };
     
    $.fn.Location = function(method) {
        if (methods[method])
        {
            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        }
        else if (typeof method === 'object' || !method)
        {
            return methods.init.apply(this, arguments);
        }
        else
        {
            $.error('Method ' + method + ' does not exist on jQuery.Ika');
        }
    };
     
})(jQuery);

$(document).ready(function(){
    $(document).Location('current');
});

Refererences:

  1. https://developer.mozilla.org/en-US/docs/Web/API/Geolocation.getCurrentPosition
  2. http://dev.w3.org/geo/api/spec-source.html

UI – Bootstrap

Jan
30

An easy way to setup a nice & clean UI, and responsive UI.

Bootsrap use HTML5 & CSS3. Please ensure you have the following:

&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
  ...
&lt;/html&gt;

Include the following in head

&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
&lt;link href=&quot;css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot; media=&quot;screen&quot;&gt;
&lt;link href=&quot;css/bootstrap-responsive.min.css&quot; rel=&quot;stylesheet&quot;&gt;

Include the following at the bottom – before end of body tag – to make sure the page load fast.

&lt;!-- I use jQuery 1.9.0 --&gt;
&lt;script src=&quot;js/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;js/bootstrap.min.js&quot;&gt;&lt;/script&gt;

Here is the screen shot of my test. 🙂

Bootstrap Test

Bootstrap Test