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
Code below…
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/
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.
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
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
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.
Comments
Post a Comment