Feedback UI/UX for i-Learn Portal – UiTM e-Learning Portal.

i-Learn Portal – UiTM e-Learning Portal

i-Learn Portal – UiTM e-Learning Portal

The reason why we need this repo because we can send issues, complains (ex UI/UX) and feature requests that can improve this portal more better using our feedbacks from time to time. It’s very painful for us especially in terms of lack of UI/UX because difficult for us to use it and confusing navigation (user experience). With this feedbacks, this portal can increase user engagement among the students and lecturers.

Send your issues here: https://github.com/datomnurdin/UiTMStudentPortal

IBM has open contract positions for Bluemix

IBM has open contract positions for Bluemix in all of ASEAN (SG, MY, TH, ID, PH) for fresh graduates.

IBM Bluemix

IBM Bluemix

Candidate should fit 2-3 of the minimum requirements:
1. Minimum of 2 years in Web Application Development using NodeJS, Java or Go
2. Minimum of 2 years in Android or iOS application development
3. Familiar with Web stack – HTML, CSS and JavaScript.
4. Familiar with MongoDB or other NoSQL (Document-based)
5. Familiar with Relational Database
6. Familiar with Web Services (REST or SOAP) and OOP concept
7. Familiar with cloud environment (IaaS or PaaS)
Bonus points for:
1. Experience or knowledge in data analytics – especially social media analytics
2. Experience in web development framework – Angular JS, jQuery, Bootstrap
3. Skill in other programming language (Ruby, Python, Scala, C#, etc)
4. Conceptual knowledge in MVC or microservices
5. Past experience in using PaaS
6. Experience in IoT related development (Raspberry Pi, Arduino, etc)
7. Degree in Computer Science / Computer Engineer / AI
8. Experience in DevOps – i.e. Continuous Integration, Continuous Deployment is a plus
9. Experience or knowledge in Docker container technology.

To those interested, can send your resume to st.wissel@sg.ibm.com.

Looking for Universities or Colleges to Train iOS SWIFT 5 days full courses for FREE

Looking for Universities or Colleges to Train iOS SWIFT 5 days full courses for FREE. Macbooks will be provided during training. Only 20 Seats per University. NO strings attached. We will train for FREE ONLY.

Requirements:
Participants must be Malaysian 18 and above (Student or Staff). Local Universities eligible only (All over Malaysia, including Sabah & Sarawak)

Training Dates: Will be decide by each University. This training program ends Dec 2015.

Location: Your Universiti or College. Just provide us a room and if you can provide meals that would be great!

What Participants will Learn in 5 days

  1. Swift Language programming Foundation
  2. Creating iOS apps Foundation
  3. UI/UX programming
  4. Wire framing for an iOS app
  5. IOS Database programming
  6. IOS Sensors programming
  7. Apple Watch Programming using REAL Device
  8. How to port to Apple App Store

Be the First to Train and Develop for Apple Watch in Malaysia!!!

Please contact caspian training@caspian.my

Learning Three.js and WebGL part 1

In this tutorial you will learn how to create 3d animation using WebGL and Three.js framework.

Overview

WebGL (Web Graphics Library) is a JavaScript API for rendering interactive 3D graphics and 2D graphics within any compatible web browser without the use of plug-ins. WebGL is integrated completely into all the web standards of the browser allowing GPU accelerated usage of physics and image processing and effects as part of the web page canvas. WebGL elements can be mixed with other HTML elements and composited with other parts of the page or page background. WebGL programs consist of control code written in JavaScript and shader code that is executed on a computer’s Graphics Processing Unit (GPU). WebGL is designed and maintained by the non-profit Khronos Group. http://en.wikipedia.org/wiki/WebGL

WebGL

WebGL

Three.js is a lightweight cross-browser JavaScript library/API used to create and display animated 3D computer graphics on a Web browser. Three.js scripts may be used in conjunction with the HTML5 canvas element, SVG or WebGL. http://en.wikipedia.org/wiki/Three.js

<html>

<head>
<title>WebGL Up And Running &mdash; Example 1</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

<script type="text/javascript">

    function initWebGL(canvas) {

        var gl;
        try 
        {
            gl = canvas.getContext("experimental-webgl");
        } 
        catch (e)
        {
            var msg = "Error creating WebGL Context!: " + e.toString();
            alert(msg);
            throw Error(msg);
        }

        return gl;        
     }

    function initViewport(gl, canvas)
    {
        gl.viewport(0, 0, canvas.width, canvas.height);
    }

    var projectionMatrix, modelViewMatrix;

    function initMatrices()
    {
	   // The transform matrix for the square - translate back in Z for the camera
	   modelViewMatrix = new Float32Array(
	           [1, 0, 0, 0,
	            0, 1, 0, 0, 
	            0, 0, 1, 0, 
	            0, 0, -3.333, 1]);
       
	   // The projection matrix (for a 45 degree field of view)
	   projectionMatrix = new Float32Array(
	           [2.41421, 0, 0, 0,
	            0, 2.41421, 0, 0,
	            0, 0, -1.002002, -1, 
	            0, 0, -0.2002002, 0]);
	
    }

    // Create the vertex data for a square to be drawn
    function createSquare(gl) {
        var vertexBuffer;
    	vertexBuffer = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
        var verts = [
             .5,  .5,  0.0,
            -.5,  .5,  0.0,
             .5, -.5,  0.0,
            -.5, -.5,  0.0
        ];
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(verts), gl.STATIC_DRAW);
        var square = {buffer:vertexBuffer, vertSize:3, nVerts:4, primtype:gl.TRIANGLE_STRIP};
        return square;
    }

    function createShader(gl, str, type) {
        var shader;
        if (type == "fragment") {
            shader = gl.createShader(gl.FRAGMENT_SHADER);
        } else if (type == "vertex") {
            shader = gl.createShader(gl.VERTEX_SHADER);
        } else {
            return null;
        }

        gl.shaderSource(shader, str);
        gl.compileShader(shader);

        if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
            alert(gl.getShaderInfoLog(shader));
            return null;
        }

        return shader;
    }
    
	var vertexShaderSource =
		
		"    attribute vec3 vertexPos;\n" +
		"    uniform mat4 modelViewMatrix;\n" +
		"    uniform mat4 projectionMatrix;\n" +
		"    void main(void) {\n" +
		"		// Return the transformed and projected vertex value\n" +
		"        gl_Position = projectionMatrix * modelViewMatrix * \n" +
		"            vec4(vertexPos, 1.0);\n" +
		"    }\n";

	var fragmentShaderSource = 
		"    void main(void) {\n" +
		"    // Return the pixel color: always output white\n" +
        "    gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);\n" +
    	"}\n";


    var shaderProgram, shaderVertexPositionAttribute, shaderProjectionMatrixUniform, shaderModelViewMatrixUniform;

    function initShader(gl) {

    	// load and compile the fragment and vertex shader
        //var fragmentShader = getShader(gl, "fragmentShader");
        //var vertexShader = getShader(gl, "vertexShader");
        var fragmentShader = createShader(gl, fragmentShaderSource, "fragment");
        var vertexShader = createShader(gl, vertexShaderSource, "vertex");

        // link them together into a new program
        shaderProgram = gl.createProgram();
        gl.attachShader(shaderProgram, vertexShader);
        gl.attachShader(shaderProgram, fragmentShader);
        gl.linkProgram(shaderProgram);

        // get pointers to the shader params
        shaderVertexPositionAttribute = gl.getAttribLocation(shaderProgram, "vertexPos");
        gl.enableVertexAttribArray(shaderVertexPositionAttribute);
        
        shaderProjectionMatrixUniform = gl.getUniformLocation(shaderProgram, "projectionMatrix");
        shaderModelViewMatrixUniform = gl.getUniformLocation(shaderProgram, "modelViewMatrix");

        
        if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
            alert("Could not initialise shaders");
        }
    }

     function draw(gl, obj) {

         // clear the background (with black)
         gl.clearColor(0.0, 0.0, 0.0, 1.0);
         gl.clear(gl.COLOR_BUFFER_BIT);

    	 // set the vertex buffer to be drawn
         gl.bindBuffer(gl.ARRAY_BUFFER, obj.buffer);

         // set the shader to use
         gl.useProgram(shaderProgram);

 		// connect up the shader parameters: vertex position and projection/model matrices
         gl.vertexAttribPointer(shaderVertexPositionAttribute, obj.vertSize, gl.FLOAT, false, 0, 0);
         gl.uniformMatrix4fv(shaderProjectionMatrixUniform, false, projectionMatrix);
         gl.uniformMatrix4fv(shaderModelViewMatrixUniform, false, modelViewMatrix);

         // draw the object
         gl.drawArrays(obj.primtype, 0, obj.nVerts);
      }
          
    function onLoad() {
        var canvas = document.getElementById("webglcanvas");
        var gl = initWebGL(canvas);
        initViewport(gl, canvas);
        initMatrices();
        var square = createSquare(gl);
        initShader(gl);
        draw(gl, square);
    }


</script>


</head>


<body onload="onLoad();">

    <canvas id="webglcanvas" style="border: none;" width="500" height="500"></canvas>

</body>

</html>

Original source code: https://github.com/tparisi/WebGLBook/blob/master/Chapter%201/example1-1.html