Multimedia on the Web

Silibus/proforma: https://drive.google.com/file/d/0B5_Hw_xzXWcXR3Y0MmNkMWtFeFE/view?usp=sharing

LECTURE SLIDES
Slide 1: Designing for the WEB - https://drive.google.com/file/d/0B5_Hw_xzXWcXbENUdU5xTUtKVkE/view?usp=sharing

Slide 2: Websites Design Issues
 
 Web_Design_Issues.url

Slide 3: Website Navigation
 Website_Navigation.pdf


Slide 4: Search Engine Optimization
SEO.pdf 


Slide 5: Content Management System
  Content_Management_System.url 

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

Web_Hosting_and_FTP.url

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




LAB NOTES

HTML Editor - http://www.sublimetext.com/
Lab 1: HTML Basics - http://www.w3schools.com/html/
Lab 2: Responsive Design: http://www.w3schools.com/html/html_responsive.asp

Example of Responsive Layout

 responsive-aics2015-1 responsive-aics2015-mobile

Code below…

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case 2-Columns</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script><script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>

<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>

<div class="row">

<div class="col-md-9">
<h1>Main Content</h1>
<p><strong>
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>
<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>
<p>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</p>
</div><!-- end main menu -->
</div>

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


</body>
</html>




Lab 3: HTML Forms http://www.w3schools.com/html/html_forms.asp
Lab 4: HTML 5 http://www.w3schools.com/html/html5_intro.asp
Lab 5: HTML5 Media





Responsive Web Design 
Lab 6 & 7: Bootstrap for responsive Web - http://www.w3schools.com/bootstrap/


Assignment 1: Mini-site Project.
Download instructions and materials here - https://drive.google.com/file/d/0B5_Hw_xzXWcXbU5oWWthcjFTajQ/view?usp=sharing







getBootStrap.com

 
Mobile Web Design 
Lab 7 & 8: jquerymobile




 

 

 

Restful API and Development Tools for Applications Developer


Register at: NASRULHAZIM.com/tt-session

Schedule:
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
- DEMO

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

Trainer: blog.NasrulHazim.com
Venue: Makmal Komputer 5, Blok IT, KUIS ( 2.891400, 101.789328 )

Register at: NASRULHAZIM.com/tt-session

BootStrap & Flat UI – a new venture

image

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. (http://www.w3schools.com/bootstrap/)

Available here - http://getbootstrap.com/

image

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 http://bootstraphero.com/the-big-badass-list-of-twitter-bootstrap-resources/

Flat-UI is from DesignModo - http://designmodo.com/flat/

What Flat-UI from DesignModo have to offer you?

Buttons

image

Dropdown (SELECT)

image

Inputs

image

Alerts

image

Top menus

image

Flat UI Pro

Mobile Apps using HTML interface with jQueryMobile

image

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 BUILD.PHONEGAP.com
  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 http://demos.jquerymobile.com/

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.

image

 

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.

image

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.

image

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.

Screenshot_2015-04-24-07-58-03

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

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

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

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

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

<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">
Search</button>

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

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



THE BACK-END (SERVER)


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


Popular Posts

WorldConferences.net