Web Layout

LAYOUT WEB

Layout situs adalah tata letak komponen halaman situs web. Ø Layout situs yang baik akan menjadikan situs baik juga. Layout situs yang baik harus mendukung tujuan pembuatan situs itu sendiri.

Layout diperlukan untuk menunjukkan ukuran yang tepat, posisi, desain, dan lokasi dari segala sesuatu disetiap adegan. Ada dua jenis layout, yaitu:

  1. layout latar belakang/tata letak background mendefinisikan pengaturan dan desain hanya latar belakang (segala sesuatu yang tidak bergerak);
  2. layout karakter (satu atau lebih tiap adegan) menunjukkan semua key-pose karakter pada latar belakang itu.

Tujuan :

  • Layout Web harus didasarkan dengan tema dan isi dari web § Layout dibuat simple, menarik dan interaktif.
  • Layout berhubungan dengan tema, target pengunjung (range), jenis huruf, warna, halaman apa saja, gambar atau video

DESAIN :

Desain layout suatu halaman web meliputi penyusunan:

  • pembagian tempat pada halaman (whitespace)
  • pengaturan jarak spasi
  • pengelompokan teks dan grafik
  • serta penekanan pada suatu bagian tertentu

Materi lanjut dapat dilihat pada elearning : https://elearning.uma.ac.id/mod/resource/view.php?id=141707

Pengenalan Unsur Visual Desain Website

Unsur Visual pada Desain Website dapat di kelompokkan dalam konsep hierarki visual dan struktur layout :

Hierarki Visual

Tujuan dari Hierarki Visual?

Hierarki Visual memberikan fokus untuk menonjolkan elemen-elemen yang menarik perhatian mata. So, Website yang terstruktur dengan baik dapat menyampaikan informasi secara lebih efektif. Pengunjung website dapat dengan mudah mengerti apa yang harus dilihat dan dibaca berikutnya.

Contoh Hierarki Visual

Ini adalah contoh penulisan dalam poster tanpa penggunaan prinsip hierarki. Bagaimana? Pasti kalian bingung harus membaca dari bagian yang mana dulu, ini dikarenakan semua ukuran tulisan nya sama.

Tidak adanya titik fokus atau penekanan pada tulisan dapat menyebabkan audiens kebingungan dalam memahami tulisan mana yang harus dibaca pertama kali dan mana yang harus dibaca selanjutnya.

Contoh Non Hierarki Visual

Ini adalah contoh yang sudah menggunakan prinsip hierarki dalam tulisannya. Bagaimana? pasti sudah lebih enak untuk dilihat kan. Audiens pun akan lebih mudah mengerti apa yang harus dilihat pertama kali dan dibaca berikutnya, seperti dimulai dari judul dan pelaksanaan workshop, lalu lanjut ke pembicara, hingga seterusnya ke narahubung.

Konsep Dasar Web

Perkembangan Web

Pengertian Situs Web

ž Situs web merupakan kumpulan dari halaman web yang sudah di publikasikan di jaringan internet dan memiliki domain/URL yang dapat di akses semua pengguna Internet dengan cara mengetikkan alamatnya.

HTTP

ž HTTP (HyperTextTransfer Protocol) adalah protokol yang dipergunakan untuk mentransfer dokumen dalam World Wide Web(WWW).

WWW

ž World Wide Web adalah halaman-halaman website yang dapat saling terkoneksi satu dengan lainnya (hyperlink) yang membentuk samudra belantara informasi

Perkembangan Web

Web 1.0, yaitu teknologi Web generasi pertama yang merupakan revolusi baru di dunia Internet karena telah mengubah cara kerja dunia industri dan media. Contoh : Situs berita “cnn.com” atau situs belanja “Bhinneka.com”.

ž Web 2.0, yaitu pertama kalinya diperkenalkan oleh O’Reilly Media pada tahun 2004 sebagai teknologi Web generasi kedua yang mengedepankan kolaborasi dan sharing informasi secara online. Contoh : Situs jejaring sosial facebook.com

ž Web 3.0, yaitu teknologi web lebih ke arah Web Cerdas atau Web dengan Engine Kecerdasan Buatan, yang lebih memudahkan user dalam berinteraksi. Contoh : Web Semantik dan Cloud Computing.

ž Web 4.0, yaitu private secretary dalam bentuk organisme buatan. Sebuah alat dimana aplikasi merekam rutinitas yang kita lakukan yang seluruh rutinitas tersebut bisa diketahui oleh aplikasi komputer/program/tools/device yang kita miliki yang dijalankan secara online. Web 4.0 juga bisa digunakan untuk membantu dalam pencarian informasi, penyimpanan histori pencarian, ataupun mempertemukan orang orang yang mencari informasi sama. AI Web

Web Semantic : SIOC ( http://sioc-project.org/ ) Adalah komunitas yang berusaha mewujudkan semantic website yang tengah berjuang membantu kita menciptakan web cerdas yang mana kelak pencarian info di internet menjadi jauh – jauh sangat mudah

Cloud Computing : https://cloud.google.com/

Materi bisa dilihat pada elearning : https://elearning.uma.ac.id/mod/resource/view.php?id=138094

Materi 2 : OOP dengan Pemrograman Web II

OOP adalah singkatan dari Pemrograman Berorientasi Objek.

Pemrograman prosedural adalah tentang menulis prosedur atau fungsi yang melakukan operasi pada data, sedangkan pemrograman berorientasi objek adalah tentang membuat objek yang berisi data dan fungsi.

Pemrograman berorientasi objek memiliki beberapa keunggulan dibandingkan pemrograman prosedural:

  • OOP lebih cepat dan lebih mudah dijalankan
  • OOP memberikan struktur yang jelas untuk program
  • OOP membantu menjaga kode PHP KERING “Don’t Repeat Yourself”, dan membuat kode lebih mudah untuk dipelihara, dimodifikasi, dan di-debug
  • OOP memungkinkan untuk membuat aplikasi yang dapat digunakan kembali secara penuh dengan kode yang lebih sedikit dan waktu pengembangan yang lebih singkat

Materi lengkap silahkan klik UNDUH

Materi 1 : Pengenalan Web II – Aplikasi Berbasis Web II

MVC (MODEL-VIEW-CONTROLLER) DALAM PEMBANGUNAN APLIKASI WEB  Pembangunan sesebuah aplikasi web tidak kira aplikasi yang ringkas, sederhana mahupun rumit perlu melalui fasa-fasa pembangunan sistem agar aplikasi yang dibangunkan adalah mengikut kehendak pengguna. Pada kebiasaanya, carta gantt akan diwujudkan dalam fasa perancangan pembangunan aplikasi. Selain daripada itu, modulmodul dalam aplikasi perlu dikenalpasti dahulu agar tidak tersasar dari objektif pembangunan aplikasi. Oleh yang demikian, kertas kerja ini menerangkan kaedah dan panduan membina MVC (Model-ViewController) dengan menggunakan perisian Gantt Excel dalam pembangunan sesebuah aplikasi…

Materi dapat di download di : unduh

Pengertian Etika dan Profesi

Tujuan dari mata kuliah etika profesi adalah memperkenalkan pentingnya etika dalam kehidupan, terutama dalam dunia kerja yang berhubungan dengan Teknologi Informasi.

Bahan kajian :

Profesi-profesi IT, profesional IT, Etika berprofesi dalam bidang IT, Cyber Crime, UU ITE, HAKI, pendirian badan usaha IT, sertifikasi di bidang IT

Donwload Materi Pertemuan 1 Etika Profesi

Web Development Trends For 2021 You Should Know About

Web development is one of those things that everyone notices, but so few people actually see. The process of creating a website that people want to visit, can navigate easily, and want to come back to is both science and art. So, web developers are always looking for ways to push their field forward, driving page views and engagement.

To create a website that gets a lot of traffic, it’s important to have a site that people remember and want to go back to. Here are some of the key trends coming to web development in 2021.

  • Machine learning will improve AI programmes

Machine learning is expected to see a lot of growth in the coming year, covering many applications. When they hear about artificial artificial intelligence, most people imagine Apple’s Siri or Amazon’s Alexa. Those aren’t the only two though! There are a lot of AIs behind the scenes, especially analytical AIs. Programmes like Google Analytics will use ever-improving machine learning to optimise how users interact with websites. Many web users have interacted with customer service through a chatbot, in which case they have also met an AI. Loads of sites are now using AI helpers that can navigate FAQs and provide specialised assistance to users. More of these are sure to come in 2021, and chances are they’ll be more interactive and even more helpful than before.

  • Voice recognition will expand and improve

Speaking of virtual assistants, it’s hard to find a household that doesn’t have at least one these days. Smartphones usually come with Google or Siri for easy searching. Plus, they make it possible to send text messages hands-free with speech-to-text. Since voice recognition is the province of mega corporations like Google and Amazon, they may be hard to develop independently. But web developers can capitalise on their hard work by making sure their sites are easy to search for using these innovations.

  • Progressive web apps will edge out mobile apps

Nothing is worse than having to download an app for a site only to visit once per month – or less. Luckily progressive web apps (or PWAs) are coming to help. PWAs are great for both users and developers in a number of ways. PWAs run faster and give app-like capabilities while remaining on the web. Since there’s no app to download or update, companies save money on the development cycle too. Lower data usage, faster speeds and better performance are all bonuses of PWAs. You can see PWAs everywhere, from major news sources like The Guardian to online casino operators like Betway, which offer a wide range of technologies to facilitate payment and improve overall user experience.

  • Cybersecurity developments will keep your data safe

Internet usage is only growing and that means more people are trying to exploit it for their own gain. Hackers are everywhere, trying to get into anything from the smallest companies to government networks. Fortunately, there’s no shortage of people working to create secure web systems. Developers are increasingly aware of how to lock down sites against hackers. This means they are always looking for updates and new methods, like web access firewalls and SSL certificates. These kinds of techniques are important for every website, especially ecommerce retailers who want to create secure payment gateways for their users.

  • User interfaces will be simpler and more interactive

Even users who don’t understand things like machine learning or PWAs will get the major changes coming to user interface design. One of the most prominent is the single-page site. With the majority of people navigating via mobile phone, developers are creating simple and intuitive sites that don’t require much work to navigate. At the same time, Motion UI is creating a new library for developers to use. Where once before they had to create any animated site elements on their own, Motion UI changes that. Now, interactive elements can be pulled from the library, creating engaging sites with far less work. How about an elevator website that moves like an elevator? This kind of slick web design is closer to common use than ever, and independent web developers will be driving innovation.

These are just a few of the major trends coming to web development this year. We’re excited to see how these and others make the internet a more engaging, useful, and safe place to communicate and do business.

Pemrograman Web I : Pengenalan Web Dasar #1

Pemrograman Web I : Pengenalan Web Dasar Pertemuan #1

Video :

Assalamu’alaikum warahmatullahi wabarakatuh

السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ

Berikut adalah penjelasan tentang materi pemrograman web I, pada pertemuan 1 menjelaskan dasar pengenalan sejarah web, teknologi dan arsitechture web saat ini.

Mata kuliah ini diajarkan untuk mencapai kompetensi pembuatan dan pengembangan aplikasi berbasis web melalui pemahaman teknologi jaringan, internet, bahasa pemrograman dan berbagai kolaborasi teknologi sehingga mahasiswa akan mampu menciptakan/membuat dan mengembangkan aplikasi berbasis web yang bermanfaat di berbagai bidang dengan teknologi terkini mampu memahami Teknologi Jaringan Komputer dan Web, Front End, Backend  dan FullStack Programming , Jenis Inplementasi dari Bahasa pemrograman dan Arsitektur Web, model struktur HTML dan CSS, konsep Web Dinamis, Client Side Scripting, Javascript, Server Side Scripting, PHP :  Database MySQL, Operasi Database pada PHP, Framework Pemrograman Web : MVC, CMS (Content Management System).