Mau belajar/ngobrolin web? Mulai aja dengan masuk ke sini.

First topic message reminder :

Sesekali, yang dishare di forum Voca Sharing ini tu ilmu laaaa.

Saya membuat thread ini di Voca Sharing soalnya ga ada forum atau subforum yang benar-benar didedikasikan untuk developer, dan ya, ini berhubungan dengan sharing, jadi ya paling pantes emang masuk di sini.

Gw sebenernya udah feeling ni thread bakal kosong, sepi parah, kering dan berjaring laba-laba... Tapi ya apa salahnya kalo gw menyediakan sarana??
Dan salah satu alesan kenapa saya ngebuat ini, soalnya saya merasa ngebuat web (terutama yang ngedesain) itu asik, jadi saya merasa sungguh disayangkan kalo ada member di sini yang tertarik tapi selalu mentok gara2 ngga tau mau mulai dari mana. :O



------------------------------

Mungkin dari kalian ada yang sebenernya udah tertarik dengan develop web dari jaman baheula, tapi masih bingung-bingung mulainya dari mana, atau nggak punya temen yang bisa ditanya-tanya tentang ini, atau mungkin malu bertanya langsung di forum web developer yang bener2 legit. Ya, berhubung saya sudah sedikit berpengalaman di bidang web ini, mau sedikit berbagi ilmu saja... :3
Saya juga masih belajar kok sebenernya. :3

Tidak ada batasan apapun dalam membuat web, tua muda, cewe cowo, semua boleh, asalkan mau.
Jadi, anda SILAHKAN BERTANYA apapun yang mengenai web, gak usah takut atau malu...
Pertanyaan sebodoh dan se-n00b apapun kayak "Cara bikin file .html gimana?" atau "Maksudnya text editor tu apaan sih?", akan tetep saya ladenin.

Kaum-kaum developer selain saya juga welcome untuk sharing ilmu... nyantai ajalah pokoknya di thread ini.
O iya, maaf kalo penjelasan saya kurang bisa dimengerti ya, naturalnya saya emang gak bisa bisa amat ngajarin orang.
Saya akan berusaha membantu semaksimal mungkin.

------------------------------

Ultimate reference for web development

Untuk memulai, ketika kalian ingin belajar web... link ini udah referensi terluarbiasa deh pokoknya.
[You must be registered and logged in to see this link.]

Bener-bener all about web itu, dan buat kalian yang demen baca, ngebaca apa yang disampaikan di web itu udah lebih dari cukup untuk ngebuat anda jadi expert. Tapi ya tentu harus disertai dengan praktek, soalnya kalo dibaca doang ga akan kemana-mana kau.
Kerennya lagi, di link tadi, kamu juga bisa praktek langsung loh, tinggal liat examplenya aja, dan examplenya bisa diedit2 dan hasilnya bisa diliat langsung juga.

Guideline buat yang pingin baca dari web itu, bisa masuk aja ke link ini.
[You must be registered and logged in to see this link.]

Untuk yang blom pernah nyentuh web sama sekali, bisa masuk ke link ini.
[You must be registered and logged in to see this link.]

------------------------------

What type are you?

Ketika ngomongin web, menurut pengalaman, intinya terbagi 2, web bikin tampilan atau yang pure web development.
Intinya, web bikin tampilan tu web design, kalo yang web development itu udah (kurang lebih) jadi programming total.

------------------------------

Some quick basics about web designing

Ketika ngomongin web designing, anda biasanya akan (kurang lebih) dibelit-belit oleh hal-hal ini :
- HTML
- CSS
- Script

Singkat kata saja, HTML itu yang mengatur layout web.
CSS adalah styling untuk web, "menghias" istilah gampangnya.
dan Script untuk membuat fungsi-fungsi khusus pada web, biasanya sih orang pake Javascript buat scripting.

------------------------------

Some quick basics about web development

Sedangkan ketika ngomongin web development, anda akan dibelit-belit oleh apapun yang tertulis di [You must be registered and logged in to see this link.] bergantung dari apa yang ingin kau buat.

Yang ini rada ribet ngejelasinnya, biasanya ini yang udah model-model 'mau nampilin data dari database', dll.
Saya juga masih kurang mahir di yang ini, tapi kalo ada yang mau nanya, akan saya coba bantu semaksimal mungkin.

Biasanya kisarannya di PHP, databasenya pake MySQL.

------------------------------

Tools?

Mesti pake software apa buat bikin web???
Percayalah, untuk bisa bikin web, sebuah text editor SAJA sudah cukup.
Contoh text editor itu notepad.
Tapi mungkin kamu perlu Notepad++ ditimbang notepad, karena Notepad++...... ya jauh lebih baguslah pokoknya.

Download Notepad++ : [You must be registered and logged in to see this link.]

Dan untuk melihat hasilnya, cuma perlu web browser. Sudah.

Tools lain yang mungkin kamu pernah dengar tu Adobe Dreamweaver, ini untuk web designing.
Tapi saya seumur-umur, blom pernah make ini, keseringan pake Notepad++, malah jadi gak ngerti Dreamweaver.

Dreamweaver itu udah kayak Microsoft FrontPage gitu (bagi yang pernah merasakan jamannya FrontPage).
Jadi lebih GUI based, kalo bikin tabel ya ke menu "Insert -> Table", terus disulap, tiba2 ada... udah diketikin ama softwarenya.
Di satu sisi, ini praktis, tapi menurut saya pribadi, tidak membuat anda menjadi lebih pintar.

Kalo emang pengen belajar yang baik, gw sih nyaraninnya pake Notepad++ aja, diketik manual semuanya...
Tapi nggak seribet itu kok. Nyantai aja.

Kalo yang web development toolsnya apa?
Wah, yang satu ini udah rada beda dunia sebenernya.
Biasanya pake XAMPP, itu pokoknya udah paketan untuk web hosting di lokal, soalnya kalo pake PHP ama MySQL, musti diinstall dulu, gak kayak HTML ama CSS yang langsung diproses ama web browser.
Nah, XAMPP intinya udah ngepaketin apa aja yang dibutuhin untuk web development....

Download XAMPP : [You must be registered and logged in to see this link.]

------------------------------

Tutorials

Ditunggu saja.

------------------------------

Untuk sementara, segini dulu aja ya isinya, nanti mungkin gw update-update dikit.
Berisi tutorial ataupun CSS trick untuk ngebuat sesuatu.

Btw, kalo ada yang mau nanya, langsung aja reply thread ini.
Saya akan selalu menunggu kok.

Semoga thread ini bisa bermanfaat. >_<

saizen wrote:

asikk diajarin pake notepad++ lol
justru gw ngga ada base sama skali pake DW..

DW butuh bimbingan guru :v
Dulu pas gw jaman kuliah semuanya harus liat layar dan catet semua step by step biar ga bingung.
Kalo yang udah ngerti mah gampang, tapi buat pemula perlu guru pembimbing.

Ato ga setidaknya harus tau cara ngetik kode-nya pake notepad [kayak jaman pelajaran komputer masa dulu].

Ethervain wrote:

DW butuh bimbingan guru :v
Dulu pas gw jaman kuliah semuanya harus liat layar dan catet semua step by step biar ga bingung.
Kalo yang udah ngerti mah gampang, tapi buat pemula perlu guru pembimbing.

Ato ga setidaknya harus tau cara ngetik kode-nya pake notepad [kayak jaman pelajaran komputer masa dulu].

Apa itu artinya DW ibarat "pelengkap dan pemercantik" dalam Web Design seperti ini?


Waduh, kalau begitu ya pakai Notepad dan ++ dulu deh. Belajar Dasar-dasarnya dulu.
Mau nanya soal DW ke Dosen...
Jarang kelihatan dan juga killer, takut kenapa-kenapa nantinya.

Nightraven wrote:

Apa itu artinya DW ibarat "pelengkap dan pemercantik" dalam Web Design seperti ini?

Bukan. Bukan total.
Tapi sebagai salah satu tools pembuatan web.

Pernah denger istilah "Banyak jalan menuju Roma" kan?
Ya, jadi seperti itu ibaratnya, DW atau Notepad++ itu adalah "jalan", dan Web adalah "Roma".

Ya mungkin lebih gampangnya gini,
Kalo mau gambar, apa harus pake pensil?? Nggak kan?
Bisa juga pake pulpen, kapur, cat air, cat minyak, atau sebagainya.
Dan pastinya, teknik tiap2 media gambar itu lain-lain kan?

Nah, itu.
DW dan Notepad++ tu mirip gitulah.
Sama-sama untuk/bisa bikin web, tapi ya lewat media yang berbeda.

Terus juga...
Belajar dasar web ya belajar dasar web,
ngebuat web pake notepad++ ya ngebuat web pake notepad++,
Dua hal ini adalah dua hal berbeda.

Inget, tools itu cuma alat bantu, bukan yang ngebuat kamu miraculously jadi bisa.
Mo megang DW ato Notepad++, tapi kalo gak tau mau ngapain ya gak jadi apa2 kan?

Jadi, yang sempet gw omongin tentang Notepad++ itu lebih bagus untuk pembelajaran daripada DW itu BUKAN gara2 Kalo di Notepad++ itu belajarnya konsep, kalo di DW itu cuma memperindah doang. BUKAN DAN BUKAN SAMA SEKALI.

Kalo belajar di Notepad++, semua akan loe ketik manual.
Dengan ngetik manual, loe pasti lama kelamaan akan mendarah daging sendiri, gara2 sering dilakukan apalagi yang diketik tu hampir itu itu melulu sebenernya, nanti ngerasain sendiri dah.
Dan waktu ada salah ketik, atau salah struktur pengkodean, ya loe artinya harus mengkoreksi manual juga...
Nah ini loe bakal jadi lebih paham salahnya dimana, kenapa, dan terus harus diapain.

KALO DI DW,
tinggal milih2 menu doang, semua diketikin otomatis dan bisa dibilang ada jaminan gak ada error...
La? ya terus belajarnya darimana dong? xDD

Tapi biarpun gini, gw akan tetep coba mengcover tutorial dari segi DW biar kalian juga bisa membandingkan antara 2...
Apa yang jadi enak banget dilakukan di DW atau malah jadi terlalu menjengkelkan kalo dibuat di DW,
begitu juga buat yang Notepad++.

Tapi buat gw yang blom pernah nyentuh DW sebelumnya, gw rada ragu bisa ngecover bagian DW dengan benar sebenernya... ^^"a

NOTE!!!
Perlu diingat kalo Notepad++ itu bukan cuma alat bikin web ya.
Dia itu text editor yang udah didesain sedemikian rupa supaya nyaman jika dipakai untuk coding, salah satunya ya ngoding web.
Jadi jangan salah kaprah.

@ijen
Begitu gw pikir2, loe ma sebenernya gampang jen.
Tinggal ke rumah gw juga beres, wkwkwkwkwkwkwkw.

@ether
Anggap aja gw guru kalo gitu. :3
Selesaikan masalahnya. :3

Bedanya gw bukan guru aja...
Guru itu profesi... yang artinya $$$$.
Gw ma gak nuntut apa2, palingan cuma nuntut loe untuk bersabar waktu nungguin rilisan tutorial aja. :3

PS. Yang menunggu tutorial, mohon bersabar ya... Waktunya gw rada lagi gak tepat nih. Gw gak mikir bakal cukup rame soalnya. xDD
Dan yang gw cover pertama tu lebih ke yang designing dulu deh ya, kecuali banyak demand yang pake PHP, MySQL, dll. @_@

Jadi seperti itu yah? Entah mengapa aku jadi "ngeh" setelah kata "Tools" itu, syukurlah.
Tapi, untuk saat ini cukup sampai disini dulu deh. Diterusin besok lagi...
Mengistirahatkan Otak dulu selama beberapa jam. Thx untuk penjelasannya, Prov.

provoltion wrote:

@ether
Anggap aja gw guru kalo gitu. :3
Selesaikan masalahnya. :3

Bedanya gw bukan guru aja...
Guru itu profesi... yang artinya $$$$.
Gw ma gak nuntut apa2, palingan cuma nuntut loe untuk bersabar waktu nungguin rilisan tutorial aja. :3

Ngga nuntut apa2 tapi berharap oleh2 ya Prov :3
Oke, ditunggu tutorialnya :d

Baru tau saya ada trit ini :'D

Ini tutorialnya cuma web design kah? Terima rikues tutorial PHP ngga kak? (/w\)

Terima kok, tapi sori, waktu gw lagi terlalu sempit nih, jadi mungkin gak akan ada tutorial dari gw sementara ini.

Maaf ya, semuanya. m(_ _)m

wew bang provo... *A*)
ada forum ini toh wwwwww
salam kenal, saya ryan.... o/
dan saya memang kerja jadi web & desktop software programmer (sayang belum masuk ke mobile app programming)

ikutan daftar jadi tutor yah o/

provoltion wrote:

Terima kok, tapi sori, waktu gw lagi terlalu sempit nih, jadi mungkin gak akan ada tutorial dari gw sementara ini.

Maaf ya, semuanya. m(_ _)m

It's okay, Prov...
Info yang sebelumnya juga sudah sangat membantu kok. Jangan terlalu dipaksakan, nanti bisa-bisa "Error" seperti aku loh.
Kita "Learn n Fun" disini yah.

Oh ya, tanya dong. Saya masih nggak paham perbedaan antara HTML biasa dan HTML5, ada yang bisa jelasin nggak? Buat tugas sekolah nih :'3

HTML biasa maksudnya HTML4... bedanya ya banyak fitur baru, tag-tag baru, dan tentunya HTML5 hanya disupport oleh browser-browser baru :3
contohnya di HTML4 kalau mau taruh video harus pake flash, artinya pakai tag

^ ebuset ini forum kita bisa nulis HTML kagak di-escape... wah bahaya donk *tulis script aaah~ #plak*

ralat, HTML4 kalo mau taruh video pakai flash player caranya <object> terus isinya <param> dan <embed>, kalo HTML5 langsung aja <video src="hehehe.mp4"></video>, itu udah bawaan native-nya HTML5

saya web designer+developer juga hlo
walau masi kuliah, tapi udah kerjain beberapa web..
ini adalah beberapa contoh, untuk lihat codenya view source/inspect element...



sementara itu dulu saja...

nih forum, bisa nulis html-css, bahaya hlo kk...
saya nyoba tadi bisa ngrubah tampilan disini..

ah untunglah script masih diblokir....
yaudah deh ga jadi bikin game teka teki silang disini wwwwww o/

yusufat: tapi tetep aja, dengan css saja, semua ini bisa amburadul... haha

damaera wrote:

yusufat: tapi tetep aja, dengan css saja, semua ini bisa amburadul... haha

bener kk, parah banget masa tinggal tulis begini
<div style="position:absolute; left:0; top:0; width:100%; height:100%; background-color:black; z-index:100; display:block;">
<p style="vertical-align:middle; text-align:center; font-size:xx-large; color:white;">You have been pwned trololol</p>
</div>
dan rusaklah forum kita =_=a

saya percaya disini ga ada yang gitu2 kok..
hehehe

duh jadi ajang crashtest forum gini lol
- -
sabar ya, tunggu hosting dulu biar bisa oprek2 lebih dalam buat menghindari hal2 yang tidak di inginkan :p

buat sementara ini tag2 css, js dll gw masukin censorlist aja kalo di abuse terus :p

wakakkak jadi tempat sharing cara ngerusak forum...

~~~~\\\~~~~\\\~~~~\\\~~~~\\\
dari liat contoh2 di atas... brarti style itu buat bikin bentuk tulisan (sak border2 sak begron2) baru ya? trus div itu buat bikin tulisan gitu? trus pake div bisa manggil style yang dibikin tadi gitu ya?

trus punya bang provo dan bang damaera aku liat satu pake div class satu pake div id bedanya?

sori.. baru belajar dari nol nih... dari dulu design web cuma edit2 dari script yang udah ada jadi segampang udel... LOL

btw... bedanya notepad++ sama notepad biasa apaan ya? aku dari dulu makenya notepad biasa...

notepad++ itu notepad tapi ada code colouringnya, jadi buat pemrograman enak.

div untuk membuat satu blok konten (anggap aja ada satu kotak invisible buat ngegrup isinya jadi satu kesatuan)

iya style (CSS) buat ngeformat tampilan... anggap itu kosmetik lah. Hampir semua elemen presentasional (body, p, div, span, ul-ol-li, table, tr, td, img, form, input, ruby, rb, rt, h123456, hr, ...) bisa dikasi style. Yang nggak bisa itu kayak tag script, meta, title, head, html.

class selector gunanya buat melakukan formatting ke semua elemen yang memanggil kelas itu. Ada banyak elmen bisa pakai formatting yang sama.
Kalau ID selector hanya elemen yang ID-nya itu yang kena formatting. jadi hanya satu itu, udah pasti.

crashtest : js nya g bisa, bisane cuma css...
btw yang buat web ini siapa?
kamu kk??

KazukiKobayashi:
anu bro, saya saranin pake SublimeText.. itu editor paling keren di bumi kita

[You must be registered and logged in to see this link.]

Sublime Text keren nih, tapi kok agak bingung ya?

Saya lebih suka Notepad++ IMO.

Halo, masih blom jadi nih, tutorial dari gw.
Tapi pertama-tama, thx banget buat yusufat ama damaera yang udah ikut ngebantu temen2 yang lain.

O iya, itu css jangan disalahgunakan ya, pake ketika perlu aja. xDD
Ya kalo mau disalahgunakan terserah sih, tapi jangan kaget kalo tiba2 kena ban ato dsb dsb.

SublimeText ya, jadi itu toh namanya. xDD
Gw pakenya Notepad++ terus tapi banyak temen yang pake itu tapi gw gak pernah nanyain itu nama softwarenya apa, aye kira cuma Notepad++ di kasih plugin bejibun.

---------------

KazukiKobayashi wrote:

trus punya bang provo dan bang damaera aku liat satu pake div class satu pake div id bedanya?

Garis besarnya udah dijelasin yusufat, tapi gw mo nambahin, yang rada banyak dan rada advance.

Jadi, ya ID itu semacam identitas, sedangkan class tu kayak klasifikasi.
Dan ketika ngomongin identitas, pastinya unik kan? maksudnya unik tu, tiap komponen punya identitasnya masing2, kayak KTP gitu lah.

Jadi "gak bisa" komponen punya id yang sama, misalkan ada dua <div id="halo">, ya walaupun ketika itu dilakukan gak akan berdampak apa2 ke tampilan web. Tapi ketika dilakukan scripting, script akan bingung ketika mengambil elemen berdasarkan ID tersebut, dia gak tau mana yang musti diambil. Dan error itu ditanggapi dengan script memilih komponen terakhir dengan id tersebut, bukan mengambil dua-duanya. Jadi dalam kasus di atas, hanya <div id="halo"> yang kedua yang akan diambil, yang pertama akan diabaikan.

ID itu lebih bakal dipake ketika scripting, bukan ketika styling. Karena javascript bisa ngambil komponen via ID komponen, contoh commandnya adalah getElementById().

Jadi javascript gak ngambil komponen via Class karena gak ada getElementByClass(), dan sempet ada yang bilang bisa, tapi itu perlu scripting lebih lanjut lagi, karena biasanya orang ngebuat modul getElementByClass sendiri (bukan bawaan dari Javascriptnya).

Emang sebenernya bisa aja sih kita styling berdasarkan ID, dengan div#halo (maksudnya div dengan ID = halo) di CSS, tapi itu terhitung "tidak layak" sih, dan kurang efisien, soalnya contohnya kayak gini :



---------------------------

Nah, kalo class,
ya kalsifikasi, dan klasifikasi itu kan bisa :

1. Banyak komponen masuk dalam klasifikasi yang sama,
atau kebalikannya,
2. Banyak klasifikasi untuk satu komponen yang sama.

Jadi bisa aja kayak gini <div id="halo1" class="kotak title">, jadi div halo1 itu classnya class kotak dan class title.
Jadi nanti ketika mau styling bisa makin khusus, misalkan :