Saturday, November 19, 2016
Multimedia on the Web
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.urlSlide 3: Website Navigation
Website_Navigation.pdf Slide 4: Search Engine Optimization
SEO.pdf Slide 5: Content Management System
CMS & Installation – WordpressSlide 6: Deploying Your Website (Web hosting & FTP)
Web_Hosting_and_FTP.urlSlide 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
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
- Media - http://www.w3schools.com/html/html_media.asp
- Audio - http://www.w3schools.com/html/html5_audio.asp
- Video - http://www.w3schools.com/html/html5_video.asp
- Youtube - http://www.w3schools.com/html/html_youtube.asp
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
- jquerymobile website - http://jquerymobile.com/
- jquerymobile complete demos - http://demos.jquerymobile.com/1.4.5/
- Tutorial - http://www.w3schools.com/jquerymobile/default.asp
- jquerymobile on kerul.net - http://bit.ly/mobilewebkerul
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.
Go to link Download
