Skip to main content

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
CMS & Installation – Wordpress

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

Slide 7: Promoting your Website through Social Media
https://drive.google.com/file/d/0B5_Hw_xzXWcXWklPZEhidWZnTVk/view?usp=sharing
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 -8: Bootstrap for responsive Web - http://www.w3schools.com/bootstrap/






getBootStrap.com



Incorporating UI enhancement in BootStrapEg: FLAT-UI - http://blog.kerul.net/2015/05/bootstrap-flat-ui-new-venture.html

Mobile Web Design 
Lab 9 - 11: jquerymobile
http://blog.kerul.net/2015/04/mobile-apps-using-html-interface-with.html
Slide - https://drive.google.com/file/d/0B5_Hw_xzXWcXNnQ4RnR1Q0R2WDg/view?usp=sharing



Mid Sem Assignment - Download here https://drive.google.com/file/d/0B5_Hw_xzXWcXVmxfdld4dXlvRm8/view?usp=sharing
Write the answers in Word document (*.doc), and send to my email.
Email address: khirulnizam@gmail.com
Subject : Mid Sem Test Multimedia on the Web
              with your name and Matrix number.


Labels:

Comments

Post a Comment

Popular posts from this blog

Simple search – result appears in the same page

This PHP code is a simple search example. It needs the user to enter a name and the PHP script will to the searching by the name provided by the user in the text box. <form name='search' method='get' action=''> Insert the firstname <input type='text' name='txtname'> <input type='submit' value='search name'> </form> <?php //database connect $db=mysqli_connect("localhost","root","","mycompanyhr"); //checking database connection if ($db==false) { echo "Connect failed: ". mysqli_connect_error($db); exit(); } else { echo "Connection successful"; } $n=$_GET['txtname']; $sql="select EMPNO, FIRSTNAME, LASTNAME, WORKDEPT, PHONENO from employee where FIRSTNAME like '%$n%' "; $rs=mysqli_query($db,$sql); if($rs==false){ echo ("Query cannot be executed!<br>"); echo ("SQL Error : ".mysqli_error($db)); } else...
1 comment
Click here to read the complete article ...

Several English proverbs and the Malay pair

Or you could download here for the Malay proverbs app – https://play.google.com/store/apps/details?id=net.kerul.peribahasa English proverbs and the Malay pair Corpus Reference: Amir Muslim, 2009. Peribahasa dan ungkapan Inggeris-Melayu. DBP, Kuala Lumpur http://books.google.com.my/books/about/Peribahasa_dan_ungkapan_Inggeris_Melayu.html?id=bgwwQwAACAAJ CTRL+F to search Proverbs in English Definition in English Similar Malay Proverbs Definition in Malay 1 Where there is a country, there are people. A country must have people. Ada air adalah ikan. Ada negeri adalah rakyatnya. 2 Dry bread at home is better than roast meat home's the best hujan emas di negeri orang,hujan batu di negeri sendiri Betapa baik pun tempat orang, baik lagi tempat sendiri. 3 There's no accounting for tastes We can't assume that every people have a same feel Kepala sama hitam hati lain-lain. Dalam kehidupan ini, setiap insan berbeza cara, kesukaan, perangai, tabia...
Post a Comment
Click here to read the complete article ...

Bootstrap Template for PHP database system - MyCompanyHR

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/ 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/ Web Programming MyCompanyHR – PHP & MySQL mini project (with Boostrap HTML framework) Template 1: Template for the Lab Exercise. This is a project sample of a staff record management system. It h...
Post a Comment
Click here to read the complete article ...

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 Mobile Apps using HTML interface with JQUERYMOBILE (this page) Complete code sample of Mobile Web Apps with FRONT-END and BACK-END Using AJAX to populate data from mobile web interface Generating APK using BUILD.PHONEGAP.com Generating Android Project using CORDOVA Publishing to Google Play Store Mobile Web Apps development TRAINING 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 na...
Post a Comment
Click here to read the complete article ...

The Challenges of Handling Proverbs in Malay-English Machine Translation – a research paper

*This paper was presented in the 14th International Conference on Translation 2013 ( http://ppa14atf.usm.my/ ). 27 – 29 August 2013, Universiti Sains Malaysia, Penang. The PDF version is here: www.scribd.com/doc/163669571/Khirulnizam-The-Challenges-of-Automated-Detection-and-Translation-of-Malay-Proverb The test data is here: http://www.scribd.com/doc/163669588/Test-Data-for-the-Research-Paper-the-Challenges-of-Handling-Proverbs-in-Malay-English-Machine-Translation Khirulnizam Abd Rahman, Faculty of Information Science & Technology, KUIS Abstract: Proverb is a unique feature of Malay language in which a message or advice is not communicated indirectly through metaphoric phrases. However, the use of proverb will cause confusion or misinterpretation if one does not familiar with the phrases since they cannot be translated literally. This paper will discuss the process of automated filtering of Malay proverb in Malay text. The next process is translation. In machine translatio...
Post a Comment
Click here to read the complete article ...