Pembangunan Blog dan Laman Web



Kursus ini membincangkan konsep asas, isu dan teknik pembangunan dan pembahagian laman web dan blog. Penekanan diberikan kepada mereka bentuk laman Web dan blog menggunakan perisian pengarangan multimedia, bahasa pengaturcaraan asas dan memuat naik hasil laman Web dan blog.
  • 1
    Pengenalan Kursus

SINOPSIS KURSUS:  

Kursus ini membincangkan konsep asas, isu dan teknik  pembangunan dan pembahagian laman web dan blog. Penekanan diberikan kepada mereka bentuk laman Web dan blog menggunakan perisian pengarangan multimedia, bahasa pengaturcaraan asas dan memuat naik hasil laman Web dan blog.

RASIONAL KURSUS:

Memberi nilai tambah pengetahuan dan keterampilan ICT kepada para pelajar di semua fakulti UPSI.

HASIL PEMBELAJARAN:

Di akhir kursus ini,  pelajar dapat :
1. Menerangkan konsep dan reka bentuk pembangunan blog dan laman web.
2. Menganalisis ciri-ciri blog dan laman web yang baik dan berkualiti.
3. Membangunkan blog dan laman web berasaskan metodologi yang bersesuaian.
4. Melaksanakan tugasan yang dipertanggungjawabkan secara berkumpulan.

KEMAHIRAN YANG DIPINDAHKAN:

Kemahiran membangun Blog dan Laman Web mengikut kaedah pembangunan dan pengisian kandungan terkini.

RUJUKAN:

Iskandar Ab Rashid, Zaitun Ismail (2001). Membina Laman Web Pertama. Kuala Lumpur. Venton Publishing
Aizam Hussin (2009). Blog: Bawa Pemikiran Anda Ketengah. Kuala Lumpur. Venton Publishing

RUJUKAN TAMBAHAN :

Sosinsky, B. & Hilley, V. (2004). Programming the web: An introduction. New York: McGraw-Hill.
Willard, W. (2003). HTML a beginner’s guide, (2nd) California: McGraw-Hill.
Untuk maklumat lanjut sila layari laman web: http://open4learn.my/new/course-status/

      • 2
        Pengenalan Penggunaan Internet

      • Secara amnya, Internet (singkatan perkataan bahasa Inggeris; inter-network) ialah rangkaian komputer yang berhubung menerusi beberapa rangkaian. Manakala Internet (huruf ‘I’ besar) ialah sistem komputer umum, yang berhubung secara sejagat dan menggunakan TCP/IP sebagai protokol pertukaran paket (packet switching communication protocol). Rangkaian internet yang terbesar dinamakan Internet. Cara menghubungkan rangkaian dengan kaedah ini dinamakaninternetworking.

          • 3
            Istilah-istilah Internet

          • 1. WWW
            Salah satu perkhidmatan yang terdapat di internet. Ianya merupakan satu jalinan maklumat berasaskan hyperteks yang mempunyai ciri-ciri friendly user, grafik, video, audio dll. Koleksi maklumat-maklumat yang besar yang boleh didapati di internet.
            2. Web server
            merupakan komputer untuk tujuan khas – untuk gabungkan laman-laman web melalui hyperlinks
            3. Web browser
            Program yang digunakan untuk melihat/membuka laman web contohnya Netscape Navigator, Microsoft Internet Explorer,Mosaic,NeoPlanet, dan OPERA. Web browser membenarkan pengguna melayari web dengan klik pada perkataan/gambar tertentu pada laman web.
            4. HTML – HyperText Markup Language
            Semua laman web dipapar dengan HTML. Ianya satu cara standard utk masukkan tags ke dalam dokumen/fail untuk tunjukkan bagaimana teks tersebut dipaparkan pada skrin di browser. Fail HTML mesti disimpan dalam teks file dengan extension *.htm atau *.html. Ditulis dalam format ASCII dan boleh dibaca oleh semua platform (UNIX, SimpleText pada
            Macintosh dan Notepad pada Windows)
            5. URL – Uniform Resource locators
            Merupakan alamat dalam web.alamat internet anda, ini bertujuan memudahkan pengunjung lain untuk melihat laman web anda dengan hanya menaip alamat internet anda. Terdapat dua jenis iaitu, domain name (cth: www.upsi.edu.my) dan IP address (cth: 202. 190.201.62).
            6. Hyperlink
            Merupakan pautan yang menghubungkan laman web
            7. Web pages
            www mempunyai jutaan web pages (dokumen web) yang ditulis dalam kod HTML. setiap web pages adalah fail komputer. Suatu halaman tunggal yg mengandungi teks dan grafik yang telah dilabelkan dgn kod-kod HTML
            yang bersesuaian untuk web
            8. Web site
            Tempat dalam komputer di internet kita simpan web pages. Suatu himpunan halaman web yang berkait dan mempunyai pelbagai kandungan yang boleh diterokai dengan mudah menggunakan pelayar web.
            9. Home page
            Laman mula bagi web site seperti jadual kandungan
            10. Search engine
            Alatan / tool yang digunakan untuk mengesan laman web di seluruh dunia dan mencari maklumat yang diperlukan
            11. ISP – Internet Service Provider
            Perniagaan yang berhubung kepada individu atau syarikat dengan percuma atau bayaran. Cth : di Malaysia – Jaring oleh MIMOS dan TMnet oleh Telekom.

            Untuk maklumat lanjut sila layari laman web:




                • 4
                  Penggunaan Media Sosial



                • 5
                  Tutorial Pembangunan Blog

                1. Blog, apa itu Blog? 

                Blog pada mulanya dikenali sebagai  "weblog" namun ianya diringkaskan menjadi blog. Istilah weblog  diperkenalkan oleh Jorn Barger pada bulan Desember 1998. Beliau menamakan weblog untuk orang yang memiliki website pribadi dan sering mengemaskininya. 

                Media blog pertama kali dipopularkan oleh pengasas blog, iaitu: blogger.com yang dimiliki oleh PyraLab, dan perniagaan ini akhirnya dimiliki oleh raja enjin carian: Google.com pada akhir tahun 2002 lalu. 

                Ramai orang mengatakan bahawa blog merupakan catatan harian dari si empunya blog tersebut, tetapi kini blog mempunyai fungsi yang pelbagai ,kini blog dijadikan tapak perniagaan, mencari jaringan kenalan, media penerbitan, iklan, politik dan pelbagai lagi. 

                Laman web yang saling berkait dengan weblog, atau secara keseluruhannya merupakan kumpulan weblog sering disebut sebagai blogosphere. Apabila munculnya sesuatu aktiviti, maklumat dan pendapat yang sangat kontroversi terjadi dalam blogosphere, maka ianya disebut sebagai blogstorm atau badai blog. 

                berikut jenis blog yang terdapat dari wikipedia: 

                *   Blog Politik 
                *   Personal Blog : Disebut juga buku harian online yang menceritakan tentang aktiviti seharian seseorang,      keluhan, puisi atau syair.
                *   Blog bertopik : Blog yang membahas tentang sesuatu, dan fokus pada bahasan tertentu 
                *   Blog kesihatan : Lebih spesifik tentang kesihatan. Blog kesihatan kebanyakan berkisar tentang keluhan       pesakit, berita kesihatan terbaru, keterangan-ketarangan tentang kesihatan, dll. 
                *   Blog sastera : Lebih dikenal sebagai litblog (Literary blog). 
                *   Blog perjalanan : Fokus pada cerita perjalanan yang menceritakan pengalaman  tentang     perjalanan/traveling. 
                *   Blog hukum : Persoalan tentang hukum atau undang-undang; disebut juga dengan blawgs (Blog Laws). 
                *   Blog media : Berfokus pada perbahasan kebohongan atau ketidakkonsistensi media massa
                *   Blog agama : Membahas tentang agama 
                *   Blog pendidikan : Biasanya ditulis oleh pelajar atau guru. 
                *   Blog kebersamaan : Topik lebih spesifik ditulis oleh kelompok tertentu. 
                *   Blog petunjuk (directory) : Berisi ratusan link halaman website. 
                *   Blog perniagaan : Digunakan oleh usahawan untuk kegiatan promosi bisnes mereka 
                *   Blog haiwan : Fokus tentang objek diluar manusia; seperti anjing  * Blog pengganggu (spam) : Digunakan untuk promosi bisnes affiliate; juga dikenal sebagai splogs 
                   (Spam Blog)

                2. Bagaimana membuat blog? 

                Akaun emel diperlukan untuk membuat akaun blog.  Terdapat banya penyedia blog percuma di internet  seperti http://www.blogger.com, http://www.wordpress.com atau http://www.blogsome. com.
                Pada kali ini kita akan belajar tentang membuat blog di http://www.blogger.com.  
                Ikuti langkah-langkah di bawah untuk mendaftar blog secara percuma.  















                Click Setting and then click Basic. Several form that must in the contents to the menu basic:

                      Title : Content with your blog title. Example : Blog Tutorial.

                      Description : Content with your description blog. Example : All about blogging can find here. 

                      Add your blog to our listing : chose Yes, so that every time posting always entered the Blogger.com list.

                      Show Quick Editing on your blog : Chose Yes

                      Show Email post link : It is best to chose Yes, but if you chose No also it's allright.

                      Show compose Mode for all your blog : Chose Yes.

                      Show transliteration button for your post : chose Yes if the you wanted to be button to change normally alphabet to hindi (India) alphabet, Chose No if being the reverse.

                      Click Save Settings.
                Click Publishing to arrange the publishing menu.

                      Blog’Spot Address : Content with your blog address. Example : kolomtutorial.

                      Word Verification : type in the word(s) given.

                      Click Save Settings.
                 Click Formatting to arrange the formatting menu.

                      Show at most : Chose the number of post want you to display in your blog.
                Example : Show : 6 post, it's means your posting will display in your page Totally six posting. Chose Post (don't days) at pulldown menu

                      Date header Format : Chose the style of date/month what you wanted, this date/month will display above your post.

                      Archive Index Date Format : Chose the style for your archive

                      Timestamp Format : Chose the style of the time, what you wanted.

                      Time Zone : Chose the matching zone with your place. Example for WIB : [UTC+8.00] Singapore.

                      Language : Chose language what you wanted.

                      Convert line break : Chose Yes, but if you chose No it's allright.

                      Show Link Field : Chose No, but if you chose Yes it's allright.

                      Enable Float aligment : Chose Yes, but if you chose No it's allright. 

                      Click Save Settings
                Click Comment to arrange the Comment menu. 

                      Comments : Chose Show.

                      Who Comment? Chose Anyone. It's means anyone can comment to your post.

                      Comments Default for Post : Chose New post Have Comments

                      Back links : Chose Show. It's means you will know if another people has linked to your post.

                      Backlinks default for Posts : Chose New post have Backlinks.

                      Show comments in a popup window? : Chose Yes. It's means when the people click Comment link your blog not lost.

                      Show word verification for comments? : It's better to chose Yes

                      Enable comment moderation? : Chose No, but if you wanted chose Yes it's allright.

                      Show profile images on comments? : Chose Yes. It's means the photo of commentator of blogger member can display.

                      Comment Notification Address : Content with your email address.

                      Click SAVE SETTINGS.
                 
                Click ARCHIVING to arrange the archiving menu.

                      Archive Frequency : Chose monthly.

                      enable Post Pages? : Chose Yes.

                      Click SAVE SETTINGS.


                If you were interested to replace new template or want to redesign your template, It is best to backup your template before you changing any code. this step was as prevented to reduce the fatal risk if the mistake happening in redesign or changing your template.
                 
                      After entering the dasboard page , click Layout. 
                      Then click edit HTML tab. 
                Click the Download full template link. 
                      After you click Download full template link, then will emerge new window just to download. Click the Save button. 
                      You could choose this data would in kept where and with what file name what, Afterwards ended with click of the Save button. Please saw the picture
                      Finish.


                This tips is about every your visitor give a comment at your blog automatically sending to your @mail inbox. So that every the comment entering in blog direct in sending automatically to your @mail, hence you have to do setting at setting tab. This is the steps : 
                      Click Settings.
                      Click Comments.
                      Scroll to underside and you will find a box near the article Comment Notification Address, write your email address inside the box. for example :
                jalupapang2000@yahoo.com
                 
                  •Click Finish

                Do you know what is Yahoo! messenger? Yahoo! messenger is one of yahoo.com service very popular in the world. Then what his relation with blog? some blogger wish to be in his blog attached yahoo ! messenger icon , hence if him online in yahoo! messenger can in knowing by his blog visitor and also can easy to in contacting for chatting. If you ask to me, can yahoo! messenger icon add at blog? the answer is can, and not only that, we can choose icon what is will add. The choice is differentiated in 10 choice, you remain to choose style ID which which is compatible according to your : 
                 Allright, to placed the yahoo! messenger icon just place this code at your sidebar :  <a href="ymsgr:addfriend?YOURID"><img
                src="http://opi.yahoo.com/online?u=YourID&m=g&t=StyleID" border="0"></a>  

                For example. If your yahoo ID is balakasadut24@yahoo.com, your ID is balakasadut24, So the code for yahoo! messenger icon with choice Style ID 9 is as follows : 

                <a href="ymsgr:addfriend?balakasadut24"><img
                src="http://opi.yahoo.com/online?u=balakasadut24&m=g&t=9" border="0"></a> 

                Now, how to place the code to your blog. Follow the teps : 
                      click Layout
                      Click at Page Element tab   Click at Add a Page element.
                      After emerging pop up window , click add to blog button for the things HTML/JavaScript. See the picture following :
                      Copy and paste the code below into available column.

                      Change YOURID with your yahoo ID and StyleID with number of your choice.
                      Click       
                      Finish

                Step #1 
                ü Please check out http://www.clocklink.com.

                ü Click at "Gallery" tab.

                ü Click at the categories of clock which you want, there is AnalogAnimalAnimationCount Down & UpDark BackgroundDigitalHolidaysLogo & CustomSeasonsSportTransparent, and Wallpaper.

                ü If you have found the clock you wish, click at "View HTML tag" below of the clock.

                ü Click at "Accept" button.

                ü Choose the time which match with your zone beside "Timezone" text. Example : for Singapore, choose GMT+8:00.

                ü Set the measure of the clock beside "Size" text.

                ü Copy the code and then paste at Notepad or other text editor. Save into your computer.

                ü Close your browser.
                Step #2 
                      Login to blogger with your ID. 
                      After entering the dasboard page , click Layout.  
                      Click at Page Element tab. See the picture below :
                      Click at Add a Page element.
                      After emerging pop up window , Klik add to blog button for the things HTML/JavaScript. See the picture following :
                 
                      Open your Clock code, copy and then paste into available column.

                      Click   
                      Done. 

                Untuk maklumat lanjut sila layari laman web:

                5 comments: