Multimedia on the Web


Slide 1: Designing for the WEB -

Slide 2: Websites Design Issues

Slide 3: Website Navigation

Slide 4: Search Engine Optimization

Slide 5: Content Management System

Slide 6: Deploying Your Website (Web hosting & FTP)


Slide 7: Promoting the Website through Social Media
Slide 8: Maintaining the Website


HTML Editor -
Lab 1: HTML Basics -
Lab 2: Responsive Design:

Example of Responsive Layout

 responsive-aics2015-1 responsive-aics2015-mobile

Code below…

<!DOCTYPE html>
<html lang="en">
<title>Bootstrap Case 2-Columns</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
<script src=""></script><script src=""></script>

<div class="container">
<div class="jumbotron">
<h1>My first Bootstrap webpage!</h1>
<p>This page will grow as we add more and more components from Bootstrap...</p>
<a href="#" class="btn btn-info btn-lg"><span class="glyphicon glyphicon-search"></span> Search</a>

<div class="row">

<div class="col-md-9">
<h1>Main Content</h1>
Note 1: On a large screen the content will be displayed as a three-column layout. (Just enlarge the browser window to see the effect). However, the content will automatically adjust itself into a single-column layout on a small screen. So, with Bootstrap, our page is now responsive to the screen size and adjusts itself accordingly.</strong></p>
Note 2: On a large screen the content will be displayed as a three-column layout. (Just enlarge the browser window to see the effect). However, the content will automatically adjust itself into a single-column layout on a small screen. So, with Bootstrap, our page is now responsive to the screen size and adjusts itself accordingly.</p>

</div><!-- end main content -->
<div class="col-md-3">
<h3>Main Menu Widget</h3>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</div><!-- end main menu -->

</div><!-- end container -->


Lab 3: HTML Forms
Lab 4: HTML 5
Lab 5: HTML5 Media

Responsive Web Design 
Lab 6 & 7: Bootstrap for responsive Web -

Assignment 1: Mini-site Project.
Download instructions and materials here -

Mobile Web Design 
Lab 7 & 8: jquerymobile




Restful API and Development Tools for Applications Developer

Register at:

9.00am Registration

9.15am Session 1
Development Tools for Applications Developer
- Understanding your Development Environment
- Project Route Map
- Know your ENd-Users
- Team Members
- Minimalist, Simplicity and Fast
- The Tools & The Decision
10.15am Break

10.30am Session 2
Restful API- What & Why Restful API
- Benefits of Restful API
- Do you really need Restful API?
- Micro Framework
- Slime Framework

12.30 noon Lunch Break & Solat
2.00pm Q&A / Discussion / Consultation
3.30pm END

Venue: Makmal Komputer 5, Blok IT, KUIS ( 2.891400, 101.789328 )

Register at:

BootStrap & Flat UI – a new venture


HTML without framework is dull. Doing hard-coded CSS and JS are quite difficult with no promising result on cross platform compatibility. So I decided to explore BootStrap as they said it is the most popular web framework.

What is BootStrap? - Bootstrap is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first web sites. (

Available here -


Why you need Flat-UI? Seems like a beautiful theme to make my site look professional.
Anyway you could get variety of BootStrap theme out there, feel free to select here

Flat-UI is from DesignModo -

What Flat-UI from DesignModo have to offer you?



Dropdown (SELECT)






Top menus


Flat UI Pro

Mobile Apps using HTML interface with jQueryMobile


This is the main tutorial for developing a mobile web app using the HTML  interface with jQueryMobile. The series contains tutorial on how to use HTML and jQueryMobile to construct the app’s interface, PHP+MySQL to run the back-end, AJAX, using phoneGap/Cordova to generate Android APK, and lastly to upload to Google Play Store.

These are the link of completed tutorials related to Mobile Web Apps Development

  1. Mobile Apps using HTML interface with JQUERYMOBILE (this page)
  2. Complete code sample of Mobile Web Apps with FRONT-END and BACK-END
  3. Using AJAX to populate data from mobile web interface
  4. Generating APK using
  5. Generating Android Project using CORDOVA
  6. Publishing to Google Play Store
  7. Mobile Web Apps development TRAINING
  8. The sample app published in Google Play Store

jQueryMobile is a JavaScript + CSS framework born from jQuery. The best place to learn jQueryMobile is by accessing the official website at

As the name framework, there suppose to have library of codes ready to use. In the jQueryMobile case, you need to download both the jQuery framework, and the jQueryMobile framework in order for this tutorial to proceed as we intent.



STEP 1: Preparing the project folder with the jquery & jquerymobile library.

We’d like to recommend the following folder and sub-folders for your HTML app project. Prepare them first.


Open the jquerymobile zip files you just downloaded previously. Copy all the Cascading Style Sheet (*.css)files and the images to the css folder you created. You can do this by selecting the images folder and the css, clicking and dragging them to your css folder. *The images folder in the jquerymobile zip file contains the icons for your css interface.


imageThe css files copied to your css folder.

AJAX to populate data from mobile web interface

This tutorial is to demonstrate how a mobile web interface could use AJAX facility to populate data from online database. In this tutorial, we need to have the front-end (HTML interface) and the backend (PHP+MySQL). We are going to show the xampp to prepare the backend facilities (localhost).

THE FRONT-END (mobile web client)

In the front-end, AJAX is implemented to be able to call the backend page (PHP script). This is done via JavaScript.


Though the interface looks plain, the code lies on the JavaScript.

<!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/themes/test-theme2.css" />
<link rel="stylesheet" href="css/themes/" />
<script src="js/jquery-1.11.2.min.js"></script>
<script src="js/"></script>

<!-- AJAX proces -->
$( document ).ready(function(){//check if the document/browser ready to run JavaScript
$('#btncari').click(function(){//the btncari as the trigger.
var namacarian=$('#txtcari').val();//capture the content of the textbox.
//write to the div named displayresult
$("#displayresult").html("Searching for "+namacarian).enhanceWithin();
//change your web-server here
//in this case, the file search.php is to handle the online database connection
var urlcarian="http://localhost/jpa_dir_backend/search.php";

//AJAX configuration
url:urlcarian,//the URL
type:'post',//method used
crossDomain : 'true',
data:{txtcari:namacarian},//the data parameter to transfer
success:function(result){//if the connection success
//display the record in div displayresult
error:function(request,error){//if the connection fail
alert("Network error!!!");//display error message
$("#displayresult").html("Network error!!!").enhanceWithin();
});//btncari click
});//end document ready

</script><!-- end AJAX proces -->

<div data-role="page" id="search-ajax">
<div data-role="header" data-position="fixed">
<h1>JPA app</h1>

<div role="main" class="ui-content">
<h1>Search using AJAX</h1>
<input id="txtcari" name="txtcari" type="text">
<button id="btncari" name="btncari" data-icon="search">

<div id="displayresult"> <!-- DIV to display the content from server page -->
Result will be displayed here...

<!-- footer -->
<div data-role="footer" data-position="fixed">
<h2>Copyright @2015 JPA</h2>
</div><!-- end footer -->
</div> <!-- end of page -->


These server pages will communicate to the database to display the search result.

Popular Posts