Pages

24 November 2019

Membuat poster iklan


Assalamualaikum wr. wb., Halo internet, pada artikel ini saya akan membuat poster iklan untuk jasa fiksional 3d printing bernama geometri. Disini saya menggunakan adobe photoshop cc 2019 untuk membuat poster ini, namun banyak alternatif yang kalian bisa gunakan seperti gimp, inkscape, atau photopea. Baik langsung saja ke tutorial pembuatannya


Persiapan


Sebelum membuat poster siapkan gambar yang akan digunakan pada poster, gambar pertama adalah wireframe objek 3D yang dibuat di blender, gambar kedua adalah foto 3D printer prusa i3 mk2 dengan background transparan, dan gambar ketiga adalah logo geometri yang saya buat pada artikel sebelumnya


Gambar objek 3D dibuat menggunakan objek dasar seperti kerucut, silinder, dan kubus. Semua objek ini menggunakan modifier wireframe dan menggunakan material emmision warna putih. Pengaturan yang digunakan adalah kamera mode ortografik, render engine cycles, dan background transparan agar mudah saat mengimpor hasil render di photoshop


Langkah membuat poster di photoshop


Pertama-tama buat file baru di photoshop menggunakan ukuran kertas A3 yaitu lebar 29.7 cm, tinggi 42 cm, resolusi 100 pixels/cm, dan backgroud awal berwarna putih. klik create


Ubah mode gambar menjadi grayscale pada image, mode, klik grayscale, tujuannya untuk membuat background gradien dot / halftone tanpa berwarna. Lalu buat gradien hitam putih seperti gambar


Selanjutnya buat gradien halftone. Pada filter, pixelate, pilih color halftone, masukkan radius 80 pixels dan nilai di semua channel 0. klik ok, hasilnya gradien yang dibuat menjadi gradien dot / halftone


Kembalikan mode gambar menjadi berwarna pada menu image, mode, klik RGB color. cara mewarnai nya dengan memilih dulu bagian warna putih dengan magic wand tool lalu beri warna tua dengan brush, tekan ctrl + shift + i untuk bagian lainnya dan warnai dengan biru muda


Masukkan gambar 3d printer dan objek 3d wireframe yang dibuat sebelumnya pada blender, gunakan blending options soft light pada layer objek 3d wireframe


Tambahkan logo dan kotak teks menggunakan rectangle tool dengan corner radius 100px, dan berikan teks logo, slogan, dan informasi kontak pada kotak teks yang telah dibuat. Semua teks pada poster menggunkan font ubuntu

Hasil

27 Oktober 2019

Membuat logo

Assalamualaikum wr. wb., pada artikel ini saya akan membuat logo untuk jasa fiksional yaitu geometri. jasa ini menyediakan layanan untuk mencetak objek 3 dimensi untuk berbagai macam mulai dari case untuk prototype hobi hingga objek massal untuk komersil. Langsung saja ke tutorial pembuatan logonya, disini saya menggunakan adobe photoshop cc untuk membuat logo


Cara membuat logo

Pertama-tama buat kanvas baru dengan resolusi 1024x1024, lalu gunakan rounded rectangle tool dengan warna biru tua untuk membuat bentuk persegi luar dan dua persegi bertumpuk seperti gambar
Buat bentuk jajar genjang dengan menggunakan line tool berwarna biru muda


Gunakan line tool berwarna sama dengan persegi untuk menghubungkan kedua persegi agar terlihat seperti kubus

Hapus garis pada objek kubus seperti gambar agar terlihat menjadi objek 3 dimensi
Langkah terakhir yaitu menambahkan teks pada bawah logo, disini saya menggunakan font ubuntu medium dengan ukuran 36 pt berwarna biru muda

Filosofi logo
- Bentuk logo persegi dan bentuk jajar genjang menyerupai alat 3D Printer
- Bentuk kubus menggambarkan jasa ini dapat membuat objek dengan ukuran bersar
- Geometri menurut bahasa cabang matematika yang menerangkan sifat-sifat garis, sudut, bidang, dan ruang. Istilah ini berhubungan dengan objek 3 dimensi dan mudah diingat oleh pengguna
- warna biru muda dipilih karena bersinonim dengan kepercayaan dan professional

12 Juli 2019

Menganalisis website


Pada artikel ini penulis akan menganalisis struktur dan tampilan website blog saya yang bernama alif's personal blog. analisa ini terbagi menjadi tiga bagian yaitu analisa pada tampilan website, jenis web dan struktur web

Tampilan Website
Tema pada blog ini menggunakan tema blogger "Kelembutan" dengan warna biru, walaupun desain tampilannya menurut beberapa orang sudah usang, menurut saya tampilan ini adalah tampilan sederhana yang mudah dimengerti struktur navigasinya dan tidak membingungkan pengunjung.
Saat pengguna mengunjungi blog ini, pengunjung ditampilkan dengan artikel terbaru, pencarian artikel berdasarkan beberapa kategori, dan link website universitas gunadarma

Karena blog ini terdapat banyak artikel yang berisi tugas mata kuliah softskill, pada bagian atas terdapat pengelompokan artikel berdasarkan mata kuliah softskill, pengunjung dengan mudah dapat mencari arsip artikel blog yang diinginkan. Selain itu pengunjung juga dapat mencari artikel berdasarkan tanggal terbit atau label pada bagian kanan website

Latar belakang yang digunakan adalah hasil karya dari penulis menggunakan program 3D modelling blender terinspirasi dari dunia "outrun" dan "cyberpunk". Penulis menggunakan latar belakang ini karena memiliki desain yang keren dan mempunyai latar gelap agar website mudah dibaca pada malam hari. link download latar belakang

Tampilan viewport 3D pada perspektif berbeda

Jenis Web
Dengan kompleksitas dan tingkat interaksi pengguna dengan website yang tinggi, khususnya website layanan blog yang penulis sedang gunakan yaitu blogger, semua website pada jaman sekarang bisa dikategorikan dalam jenis website dinamis berdasarkan bentuknya. Penulis dengan mudah dapat membuat dan mempublikasikan artikel, mengubah tata letak dan tampilan website blog, mengatur komentar pengunjung dan artikel yang sudah dipublikasikan, dsb. Dibandingkan dengan website statis yang membutuhkan tenaga ahli khusus untuk melakukan perubahan pada website.
Berdasarkan fungsi, website ini termasuk dalam kategori blog, menurut definisi website blog adalah website untuk suatu individu membuat artikel opini, topik, tutorial, dll. dan dipublikasikan secara publik ke internet

Struktur Web
Struktur navigasi web ini termasuk kategori linear. saat mengunjungi website ini pengguna disajikan dengan artikel terbaru, pengguna juga dapat mencari artikel berdasarkan beberapa kategori, dan membuka link website universitas gunadarma, semua dapat dilakukan dari halaman utama website

15 Juni 2019

Struktur web dan jenis jenis web

Struktur web

Struktur web merupakan alur dari sebuah situs web yang merupakan hubungan dari beberapa halaman situs yang berbeda dan dapat membantu mengorganisasikan seluruh pembuatan website. Tujuan struktur web yaitu membuat navigasi situs menjadi lebih baik dan agar pengguna tidak kesulitan dalam mengunjungi situs. Struktur web dibagi menjadi 4 yaitu :

1. Struktur linier
Struktur linier hanya mempunyai satu rangkaian cerita yang berurut, yang menampilkan satu demi satu tampilan menurut urutannya. Biasanya struktur ini digunakan pada situs yang sederhana yaitu situs personal

2. Struktur non linier
Struktur non linier adalah pengembangan dari struktur navigasi linier, pada struktur ini diperkenankan membuat navigasi bercabang. Berbeda dengan struktur hirarki, struktur navigasi non linier mempunyai kedudukan yang sama dan tidak mempunyai master page dan slave page

3. Struktur hirarki
Struktur hirarki biasa disebut struktur bercabang, merupakan suatu struktur yang yang mengandalkan percabangan untuk menampilkan data berdasarkan kriteria tertentu. Tampilan pada menu pertama disebut master page (halaman utama), dan halaman percabangan yang disebut slave page (halaman pendukung)

4. Struktur campuran
Struktur campuran merupakan gabungan dari ketiga struktur sebelumnya, struktur navigasi ini juga biasa disebut dengan struktur navigasi bebas. Struktur navigasi ini banyak digunakan karena mempunyai tingkat interaksi pengguna yang tinggi, salah satu contoh situs navigasi campuran yaitu forum

(sumber)
 

Jenis Jenis Web

Berdasarkan bentuknya

Website statis
Halaman website ini tidak mengalami perubahan konten dan tampilannya bersifat statis, halaman hanya akan berubah jika pengelola melakukan perubahan konten website secara manual. Perubahan hanya dilakukan dengan teks editor atau program desain website sehingga perubahan hanya dapat dilakukan oleh web designer atau web programmer. Halaman website statis jauh lebih sederhana dan tidak rentan dari kesalahan teknis, dan lebih mudah dibaca oleh mesin pencari seperti google

Kelebihan :
- Cepat dan efisien untuk dikembangkan
- Efisien saat disimpan pada web hosting

Kekurangan :
- Membutuhkan tenaga ahli khusus untuk melakukan perubahan
- Konten website yang usang

Website dinamis
Halaman website ini memiliki konten yang bisa beradaptasi menyesuaikan interaksi dari pengunjung. Perubahan tersebut dapat dilakukan dengan teknik client-side scripting (javascript, actionscript, dhtml) dan server-side scripting (php, asp, python). Website dinamis memiliki fitur yang banyak seperti penambahan konten yang mudah dan pengalaman yang baik bagi pengunjung website

Kelebihan :
- Memiliki banyak fitur tambahan
- Lebih mudah untuk menambahkan konten baru yang menarik pengunjung dari search engine

Kekurangan :
- Membutuhkan waktu lama dan dana lebih untuk pengembangan
- Membutuhkan biaya hosting lebih mahal

Berdasarkan fungsi

Selain jenis - jenis web berdasarkan bentuk, jenis web juga dapat dikategorikan berdasarkan fungsi. Seiring berkembangnya teknologi untuk internet, jenis web yang menyediakan konten dan layanan baru juga semakin banyak, berikut adalah jenis - jenis web berdasarkan fungsi yang sering ditemui :

- Company Profile : Suatu situs untuk memberi informasi mengenai perusahaannya, mempromosikan barang dan jasa yang ditawarkan. jika perusahaan menjual barang biasanya situs juga menyediakan dukungan untuk barang seperti informasi garansi, driver sistem operasi (barang untuk komputer), dan customer support
contoh : EKWB, Corsair, dan Indofood

- E-Commerce : Situs untuk memfasilitasi jual beli barang secara online, barang tersebut bisa tersedia dari bisnis (B2C) maupun customer (C2C)
contoh : Tokopedia, Bukalapak, dan  Lazada

- Archive : Situs yang mengumpulkan data untuk duplikasi, arsip, dan berbagi arsip data untuk publik. Tujuannya untuk menjaga sumber jika hilang, dan menduplikasikan suatu situs pada waktu tertentu (misalnya tampilan situs google pada tahun 2007)
contoh : Archive.org, Wayback Machine, dan archive.today

- Government : Situs yang disediakan dari pemerintah nasional menyediakan informasi mengenai layanan masyarakat
contoh: Beacukai, Jakarta, dan BPJS Kesehatan

- Entertainment : Situs yang menyediakan konten hiburan, memberikan informasi mengenai hiburan (misalnya jadwal film), dan memberikan layanan digital hiburan
contoh : Netflix, YouTube, dan Cinema 21

- News Portal : Situs yang memuat berita, informasi, dan peristiwa yang terjadi. Situs ini sebagai alternatif media televisi, koran, dan radio
contoh : detik.com, kompas, dan liputan6

- Blog : situs untuk suatu individual membuat artikel opini, topik, tutorial, dll. dan dipublikasikan secara publik ke internet
contoh : Blogger, Wordpress, dan Medium

- Community : Situs untuk berkumpulnya orang - orang yang ingin  mendiskusikan suatu topik. Pengguna dapat membuat, membicarakan, dan berbagi informasi pada situs komunitas tersebut
contoh : Stackoverflow, Instructables, dan Kaskus

- Educational : Situs yang menyediakan konten edukasi secara digital, pengguna dapat mempelajari hal yang baru pada situs ini
contoh : Lynda, Brilliant.org, dan Codecademy

- Search Engine : Situs untuk mencari informasi atau konten yang tersedia pada situs lain. Situs ini bertugas mengumpulkan daftar website kedalam database dan pengguna dapat mencarinya dengan memasukkan kata kunci (keyword)
contoh : Google, Bing, dan DuckDuckGo

- Gallery : Situs yang menyediakan jasa mempublikasikan gambar ke internet, biasanya semua orang dapat menggunakan situs ini dan bersifat non komersil
contoh : Unsplash, Imgur, dan Flickr

- Social Media : Situs yang dibuat untuk berkomunikasi dengan kenalan, menceritakan peristiwa kejadian sehari hari, berbagi konten yang ditemukan di internet, dll. berbeda dengan komunitas, situs ini dibuat khusus untuk personal dan biasanya bersifat privat
contoh : Twitter, Facebook, dan Instagram

(sumber)

30 April 2019

Interaksi Manusia dan komputer dan hubungan dengan web science



IMK (Interaksi manusia dan komputer) adalah ilmu yang mempelajari hubungan atara manusia dan komputer, ilmu ini meliputi desain visual, perancangan, dan implementasi agar komputer mudah digunakan oleh manusia

Jadi interaksi manusia dan komputer mempelajari tentang bagaimana caranya agar manusia dapat menggunakan komputer, seperti membuat dan mendesain perangkat seperti keyboard untuk memasukkan huruf dan kalimat, menggunakan mouse untuk menunjuk pilihan pada layar monitor, dan mendesain tampilan antarmuka grafis yang mudah dimengerti oleh pengguna

Seiring berkembangnya teknologi pada komputer, interaksi manusia dan komputer juga berkembang, salah satu contoh yaitu pada tahun 1980-an diciptakan sistem operasi dengan antarmuka grafis dari berbagai perusahaan seperti microsoft dan apple, sistem operasi ini menggunakan perangkat keras baru yang diberi nama mouse membuat interaski manusia dan komputer menjadi lebih mudah dan efisien dibandingkan menggunakan keyboard saja

Tujuan utama dari ilmu interaksi manusia dan komputer yaitu memudahkan pengguna menggunakan komputer, contohnya seperti
  • Desain mouse yang ergonomis agar mudah dipegang oleh tangan
  • Susunan tombol QWERTY pada keyboard agar pengguna dapat mengetik lebih cepat dibandingkan dengan susunan tombol secara abjad (ABCDEF)
  • Tampilan antarmuka sistem operasi pada jaman sekarang yang mudah dimengerti
Media antarmuka manusia dan komputer dibagi menjadi dua, yaitu
  1. Media tekstual, adalah bentuk sederhana antarmuka dengan menggunakan teks saja, media ini sering digunakan pada tahun 1970-an sebelum antarmuka grafis menjadi media yang populer
  2. Media GUI (Graphical user interface, atau antarmuka pengguna grafis), media ini adalah pilihan yang populer karena menarik secara visual dan mudah dimengerti dibandingkan dengan media tekstual

Hubungan IMK dengan web science

Salah satu dari pembuatan situs web yaitu membutuhkan desain yang user friendly, jelas, dan baik. web design membutuhkan perencanaan yang bagus, desain web yang baik menguntungkan user dan tidak membuat keliru pengguna dalam berinteraksi dengan situs web yang dituju
 Image result for bad web design download button
tombol downloadnya yang mana? 

Contoh diatas adalah pengunaan ilmu interaksi manusia dan komputer yang tidak baik, pengguna pada situs web ini akan kebingungan saat ingin mendownload sesuatu dari web, hasilnya pengguna tidak sengaja memilih iklan karena keliru. Implementasi IMK pada contoh ini adalah implementasi yang merugikan pengguna.

Jadi inplementasi ilmu IMK pada web science yaitu pembuatan desain web untuk digunakan oleh manusia. IMK dapat menguntungkan user, namun jika digunakan untuk hal buruk IMK dapat merugikan user, sebaiknya saran penulis gunakan ilmu IMK untuk mendesain antarmuka yang menguntungkan pengguna

31 Maret 2019

Sejarah web dan tujuan mata kuliah web science

Sejarah Web

Pada tahun 1989 Tim Berners-Lee, seorang programmer computer berkebangasaan Inggris yang bekerja pada European Physics Laboratory (CERN) di Genewa, Swiss. membuat proposal pada maret 1989 berjudul "information management: a proposal" kepada dewan managemen CERN. "Bayangkan semua referensi dokumen ini tertaut dengan alamat jaringan halaman yang dikandungnya. Jadi, saat membaca dokumen ini, Anda bisa mengakses referensinya dengan sekali klik." sebutan tersebut adalah istilah hypertext yang diciptakan pada 1950-an. Berners Lee menemukan pendukungnya Robert Cailliau, mereka mengajukan idenya kepada konferensi eropa tentang teknologi hypertext, tetapi tidak ada yang mengapreasisasi ide dia menggabungkan hypertext dan internet.

Pada hari natal tahun 1900, Berners Lee sudah membuat peralatan yang dibutuhkan untuk membuat web: Protokol HTTP (Hyper Text Transfer Protocol), HTML (HyperText Markup Language), web browser pertama (WorldWideWeb), software server http pertama, web server pertama, dan halaman web pertama. namun hanya bisa diakses pada komputer NeXT, Nicola Pellow membuat browser teks bernama line mode browser yang bisa dijalankan pada semua komputer. Berners Lee juga membuat web di rumahnya prancis dan swiss. pada januari 1991 web server pertama diluar CERN dihidupkan

Pengguna world wide web pada awalnya departemen ilmiah universitas dan laboratorium fisika. dengan CERN merilis world wide web bebas royalti pada april 1993, pengguna web bertumbuh banyak setiap tahunnya

Teknologi web pada jaman sekarang mempunyai fitur yang banyak, seiring perkembangan web dibuat komponen baru yang mendampingi HTML seperti CSS untuk mengatur tampilan dan tata letak situs web, PHP untuk menjalankan skrip server dan mengakses database sebelum diterima oleh klien, Javascript bahasa pemrograman untuk web browser memanipulasi tampilan situs web secara langsung dan interaktif, Database seperti Mysql menyimpan informasi sensitif seperti username dan password dengan aman. semua komponen tersebut membuat website yang selalu diakses setiap hari seperti google, youtube, dan twitter


Apa itu web science?

Web (atau lebih dikenal situs web) adalah suatu halaman digital yang berisi informasi. halaman tersebut bisa berupa teks, gambar, suara, video, atau gabungan dari semuanya. halaman digital itu disediakan oleh server yang terbuhung oleh jaringan lokal atau internet dan dapat diakses dengan mesin pencari atau dengan mengetik alamat URL (Uniform Resource Locator)

Science adalah pengetahuan sistematis yang diperoleh dari suatu observasi, penelitian, dan uji coba yang mengarah pada penentuan sifat dasar atau prinsip sesuatu yang sedang diselidiki, dipelajari, dan sebagainya

Jadi mata kuliah web science ini mempelajari tentang sejarah dan perkembangan web, teknologi yang digunakan untuk membuat web, dan manfaat yang dapat diperoleh menggunakan web dalam kehidupan sehari hari