tomfreakz blog: Web Technology

Showing posts with label Web Technology. Show all posts

Boston Big Picture's Like blog layout in blogspot

Mungkin abray asist (bebas banget gw bikin istilah) pernah liat http://www.boston.com/bigpicture/. Sebuah situs berita yang lebih banyak bercerita melalui gambar-gambar besarnya?

Untuk bikin Boston Big Picture's-like blog layout di blogspot, cara enaknya mungkin salah satunya gini:

Login ke blogger.com
Create new blog di blogspot kan tuh
Coba langsung ke menu Design > template designer
Pilih template > simple
Adjust width > 990px
Layout > pilih body layout yang kirit atas,
Advanced > cari add css, isi CSS dibawah ini:

/* Width Layout Hacks */

.content-inner {
    padding: 10px 0px;
}
.tr-caption-container {
padding: 0px
}
.main-inner .column-center-inner .section {
    margin: 0 0em;
}

/* Image Layout Hacks */
.post-body img, .post-body .tr-caption-container {
    padding: 1px;
}
td.tr-caption {
padding: 5px 0;
font-size: 100%;
}

Prerequisite. Sebelum anda bisa posting image dengan width 990px ke blog:

Pastikan image tersebut dengan width 990px. Bisa resize dengan software pengolah image seperti photoshop, atau irfanview, Xnview dll.
Pastikan anda menggunakan new editor. Cara ceknya, masuk ke menu settings > basic > select post editor. Pastikan terpilih yang Updated editor (Recommended) kemudian save settings.

Jika prerequisite diatas sudah terpenuhi, berikut ini adalah cara upload image 990px anda:

Masuk ke menu Posting > New Post.
Klik icon Insert Image, kemudian browse file gambar yang ingin diupload
Setelah itu add images
Blogspot akan secara otomatis melakukan resize image menjadi kecil. Jangan khawatir, setelah image terload dengan sempurna, coba klik satu kali image tersebut, sehingga muncul title menu pada gambar tersebut, kemudian pilih original size dan Left (untuk merata kanan-kan imagenya)

Kira-kira hasilnya akan seperti ini:

http://tomfreakzbigpictures.blogspot.com/

Ya ini mungkin salah satu cara aja, dan masih jauh dari sempurna.. Silahkan abray asist sempurnakan

Di bawah ini adalah beberapa photoblog big pictures temen-temen:

Belajar Web Design

Hidup itu penuh ilmu, contohnya ilmu Web Design. Dalam bidang web design masih dibagi-bagi menjadi beberapa cabang keahlian. Ya wajar sih, teknologi web adalah salah satu teknologi yang bisa dibilang cukup cepat perkembangannya. Terutama karna semua orang di dunia yang terhubung ke internet dapat berperan di dalamnya. Disini mungkin saya coba sedikit memberikan link-link yang perlu dilirik oleh seorang web designer dalam menjalankan ibadahnya :D.

Untuk belajar web design, ada baiknya jika kita tau mulai belajar dari mana, baik teorinya maupun prakteknya. Kalo saya sih, lebih suka penjelasan yang singkat dan langsung praktek. Selanjutnya yang lebih penting adalah sering latihan. Pasti anda semua setuju kan? Dalam latihan ini kadang kita butuh contekan atau kamus atau reference, nah kita juga perlu tau tuh dimana kita bisa mendapatkan contekan itu. Contekan berisi penjelasan singkat dan ada baiknya jika terdapat contoh penggunaannya. Kondisi disini bisa dibilang sama dengan kondisi kita waktu masih sekolah/kuliah/training. Kita diberi hal-hal dasar/fundamental, disertai latian seadanya yang menunjang dengan bab yang sedang dibahas dalam waktu tertentu.

Setelah kita dapat mengerjakan kasus-kasus standard, biasanya kita nagih tantangan yang lebih berat. Hal ini dapat kita lakukan dengan langsung bekerja di industri web dan sejenisnya. Kita berhadapan dengan kasus nyata di lapangan sesuai permintaan dari kustomer atau kebutuhan tim. Dalam kondisi ini kita akan banyak menjumpai hal baru dan menantang. Ada kalanya kita butuh solusi terhadap permasalahan tertentu dan spesifik. Untungnya jaman sekarang sudah ada internet, kita dapat menjumpai berbagai jawaban atas kesulitan kita. Tinggal search gi search engine seperti google.com, dalam beberapa saat kita sudah menemukan berbagai jalan menuju jawaban kita. Seiring berjalannya waktu, terkadang teknologi baru bermunculan, trend baru bermunculan, trick baru bermunculan. Nah pada kesempatan ini, ada baiknya saya coba mendokumentasikan beberapa hal terkait web design yang sepertinya perlu di lirik oleh seorang web designer.

Menurut saya, belajar web design ada baiknya jika kita tau dulu lingkungannya. Lingkungan www adalah lingkungan internet. Anda dapat sekilas membaca mengenai jaringan internet TCP/IP disini. Gampangannya, melalui internet kita dapat melihat website, kita dapat menemukan informasi atas sesuatu yang kita cari, baik berupa artikel, tulisan, gambar, music, video. Makanya ada istilah "Teknologi Informasi" atau Information Technology. Nah darimanakah informasi-informasi tersebut mucul? Siapa yang menaruh artikel disana sehingga dapat dibaca semua orang di dunia? Siapa yang menaruh gambar/lagu/video disana?

Sekarang kita coba pindahkan pandangan kita. Anggaplah jika kita yang berada pada posisi si pemberi jawaban. Apa yang perlu kita sediakan sehingga kita dapat memberikan informasi kepada orang lain? Salah satu jawabannya adalah "kita membuat web site".

Sebuah situs web (sering pula disingkat menjadi situs saja; web site, site) adalah sebutan bagi sekelompok halaman web (web page), yang umumnya merupakan bagian dari suatu nama domain (domain name) atau subdomain di World Wide Web (WWW) di Internet.

[Wikipedia bahasa indonesia] [English Wikipedia]

Best Practice Belajar Web Design
Untuk belajar web design jaman sekarang, menurut saya lebih baik jika dimulai dari HTML, kemudian lanjut ke CSS, dan terakhir web design graphic layout dan integrasinya dengan HTML dan CSS.

Setelah anda belajar hal diatas, anda dapat langsung loncat ke materi-materi di bawah ini. Dibawah ini merupakan link yang saya kumpulkan hasil jalan-jalan yang dibuat oleh para master yang mau menshare ilmunya kepada kita semua. Ketika saya menemukan link bagus lainnya, saya akan coba untuk selalu update posting blog ini. Silahkan menikmati.

CSS (Cascading Style Sheet)

Web Graphic & Layout Design

Web Design References

Web Technologies you may want to read

W3 Consortium
Web Standards Organization
Semantic Web oleh W3 Schools
Web Browser Trend
Mofuse.com membuat blog anda dapat dilihat melalui mobile device dengan memanfaatkan RSS feed pada blog anda

Web browser gw begini, Internet explorer, Netscape, Firefox, Konqueror, Lynx, Flocks, Opera, Safari, Chrome

Setelah mencoba beberapa rasa web browser:

Internet Explorer versi 1 sampe 8 di win
Netscape 7 sampai 9 di win
Firefox versi 1 sampai 3 di win & 2 dan 3 di linux & 3 di mac
Konqueror di linux, entah versinya
Lynx entah versi berapa
Flocks versi 1 dan 2 di win
Opera versi 6 sampai 9 di win & 7 sampai 9 di linux
Safari versi 3 dan 4 di win & versi 3 di mac
Chrome versi 1 di win

Dulu, jaman web browser cuma ada IE dan Netscape, gw suka IE karena lebih kenceng dari Netscape. Itu kayanya cuma sugesti aja deh, paling beda seperberapa detik aja. Tapi yah.. kondisinya kaya perang antara IE dan Firefox di tahun 2000an sekarang ini. Berarti IE itu udah hidup dari generasi awal2 dan sampai sekarang, dan tetap menjadi browser yang selalu menjadi perhatian. Sayang netscape udah tidak melakukan inovasi lagi. Netscape sudah terhenti di versi 9, mungkin kalah pamor dengan beberapa browser muda.

Ketika mencoba sistem operasi linux, pertama kali saya melihat web browser selain internet explorer & netscape. Namanya Konqueror, awalnya malah saya pikir itu tools untuk exploring direktori di linux, seperti windows explorer di windows. Ternyata konqueror juga menjadi web browser bawaannya. Ya kalo dipikir-pikir sih windows explorer juga bisa berubah menjadi internet explorer kan. Intinya konqueror tidak menjadi favorit bagi saya. Gatau kenapa ya, segala aplikasi di linux gw kurang nyaman makenya, apalagi yang GUI, hiiiii ga enjoy deh eikeeh. Emang sih tampilan bisa bagus, malah kadang lebih bagus dan keren dari windows / mac. Tapi aduh.... ga bisa kerja gw hihi. Linux mah paling enak cuma di console based aja. Oiya gw pernah browsing pake lynx. Tapi dalam kondisi tertentu aja, misalnya untuk ngeliat kondisi accessibility suatu website. Lucu deh.

Selanjutnya Flocks, nah flocks ini cocok banget untuk elo yang "gaul". Cyaaah gaul, maksud gw untuk orang yang punya banyak account di beberapa situs social networking. Elo bisa memanage account2 lo pake flocks dengan lebih enak. Mau nulis blog tinggal ini, buka ini tinggal ini, upload foto tinggal ini, upload video tinggal itu.. ya gitu deh... gaul.

Kalo Opera, pertama kali make di lingkungan linux. Awalnya gw pikir opera adalah aplikasi yang lebih fokus menjadi web browser ketimbang konquer. Opera mulai gw suka setelah versi 8.

Karena dia doang yang punya multi tab save session.
Dia juga bisa dibilang paling kenceng untuk browsing waktu itu.
Download juga jadi kenceng dan lebih jarang putus dibanding web browser lain.
Opera juga bisa melakukan save web page beserta CSSnya. Jadi web yang kita buka, bisa terlihat sama seperti kita buka di internet. Dulu cuma opera doang lho yang bisa gini.
Dari sisi aplikasi, dia juga paling cepet enginenya, mau save, mau open browser, close browser, lebih kenceng dibanding lainnya.
Yang versi 9, tampilannya lebih ganteng, banyak inovasi-inovasi.
Sekarang gw pake Opera cuma untuk testing kerjaan gw masalah xhtml/css web browser compatibility dan kalo kepaksa browsing di tube gw.

Safari, pertama kali nyobain di safari versi 3 nya windows. Maklum bang, aye kaga perna punya mac, baru nyobain safari di mac juga setelah nyobain safari 3 di windows. Safari ga bisa memenuhi kebutuhan teknis gw. Tapi memang ada taste tersendiri ketika menggunakan safari. Elo udah nyobain yang versi 4 belum? Cobain deh.. Lebih ganteng lagi tu. Tadinya gw pake safari untuk bacain RSS, tapi eh.. waktu untuk mbaca2 udah berkurang. Tadinya juga gw testing browser compatibility pake safari, terus akhir2 ini safari dalam beberapa kondisi sudah sama dengan firefox.

Chrome, browser termuda kita. Inovasi enginenya bagus banget. Apalagi kalo udah ada addons, bakalan ganteng banget tu kayanya. Untuk sekarang chrome belum bisa memenuhi kebutuhan teknis gw. Chrome cuma gw pake untuk browsing aja.

Akhirnya, dari semua sisi kenyamanan, keampuhan, gw masih tetep megang firefox yang disertai beberapa add ons yang udah gw customize. Firefox sebenarnya mirip dengan netscape, mozila, chrome, safari, flocks. Bedanya sekaligus kelebihannya, firefox punya addons. Addons inilah yang membuat gw jatuh cinta ke firefox. Ini gw latin addons yang berguna bagi gw:

Gw coba ngasih penjelasan ke beberapa addons yang penting banget bagi gw:

Download Helper, untuk download content2 video / mp3 yang sering nongol di web tapi ga bisa di download otomatis.
CSS Viewer, kalo ini lebih ke teknis sih, kita bisa ngeliat di area tertentu, CSS seperti apa yang diterapkan
Web Developer, ini teknis juga, kita bisa nelanjangin web page yang lagi kita liat. Misalnya kita lepas CSS nya, kita disable images, kita hapus cookies, kita resize browsernya dll
HTML Validator, wah ini penting banget kerjaan gw. Untuk ngeliat (x)html yang gw bikin udah valid atau belum secara localy real time.
MeasureIt, kalo ini untuk ngukur2 sesuatu di area web page
flashblock, ini untuk ngeblock content2 flash yang kadang otomatis langsung load dan bikin browsing terasa berat.
Session Manager. Gw tipe orang yang multitasking, jadi gw suka buka tab banyak banget. Ketika laptop mati dan gw nyalain lagi, gw pengen apa yang sebelumnya gw buka masih bisa diliat. Nah session manager ini bisa melakukan hal itu.

Itu aja yang paling penting.

Barusan gw ketemu browser baru hehe..
Browser ini dibuka melalui SAP GUI.
Tampilannya kaya gini:

lucu ya.. bisa browsing internet melalui SAP GUI.
Tapi ini bisa begini karna SAP GUI "minjem" enginenya internet explorer yang kepasang di tempat gw.

Lo pernah denger engine Webkit ga?

WebKit is an open source web browser engine. WebKit is also the name of the Mac OS X system framework version of the engine that's used by Safari, Dashboard, Mail, and many other OS X applications. WebKit's HTML and JavaScript code began as a branch of the KHTML and KJS libraries from KDE. This website is also the home of S60's S60 WebKit development.

Kali aja lo ga suka dengan semua browser yang ada dan punya inovasi untuk bikin browser versi lo sendiri dan punya segala sesuatu yang lo butuhkan.

Penggunaan web browser bagi gw sangat penting. Karena terkait aktifitas gw, gaya hidup gw, dan yang tak kalah penting adalah pekerjaan gw. Gw masih bisa nulis di blog atau bisa belajar dan bekerja karna gw pake web browser yang ada koneksi internet, koneksi gw dapet karna gw ada duit, duit gw dapet karna gw kerja... kerja bisa ada duitnya karena ada sistem bisnis atau ketertarikan antara halah..... ya kira-kira begitulah perputaran duitnya. *loh kok jadi ngomongin duit.

Web browser punya kelebihan dan kekurangan masing-masing. Gw ga punya browser favorit, tapi kalo dari kebutuhan, gw masih make Firefox, Internet Explorer, Opera dan kadang Safari.

Gimana dengan elo?
Punya web browser favorit?
Kelebihannya apa?

Syntax highlighter untuk blogspot

Inget postingan gw yang sok-sokan ngeluh karena blogspot ga bisa syntax highligting?

Akhirnya gw dapet solusi masalah syntax highligter!!
Seneng gw cuy!!

Jadinya coding2 kita di blog bisa terlihat lebih cantik.
Liat ke sini deh.

Sekarang gw coba java code:


public void printHello(){
Haha.javacode.kayagini("Tapi masih ada satu ni yang kurang");
WRITE 'ABAP CODE ga ada sih, tapi bisa diganti Java'.
}

Gw cobain ABAP code:

Asik kan cuy...
Mau blogspot atau lo di server manapun,
sekarang udah bisa syntax highligting.

Thanks to alex.gorbatchev for make it happend.
Menurut gw ini tools wajib banget bagi programmer yang suka share ilmu codingnya..

Gimana menurut lo pada?

Regards,
tomfreakz

Tutorial Streaming Online Radio Jazz KLCBS 100,4 FM Bandung

KLCBS 100,4 FM Bandung merupakan stasiun radio di Bandung yang bergenre Jazz. Pertama kali kenal kira-kira tahun 2002, pada saat itu saya masih kuliah tingkat 2 di IT Telkom Bandung. Jazz yang diputar di KLCBS cukup bervariasi, mulai dari swing, sampai subgenre jaman sekarang yang sudah sangat variatif. Ada latin jazz, soul funk & groove, fusion, pop jazz, acid dll.

Mendengarkan siaran KLCBS membuat saya sangat senang. Saya merasa teduh, bersemangat, soulfull, terharu, merinding dll tergantung lagu / komposisi yang dimainkan. Saya cukup bertahan lama dengan KLCBS salah satunya karna jazz yang disajikan banyak yang berasal dari musisi jazz tempoe doloe, baik yang sudah legend, maupun masih berkiprah. Jujur saja, saya lebih suka jazz dengan genre swing, big band, bebop, blues, funk, soul & groove. Namun begitu bukan berarti saya menutup diri terhadap pop jazz, acid jazz dan sub genre lainnya. Dengan adanya variasi tersebut, hal itu justru memperkaya musik jazz dan menjadikan jazz lebih komersil dan tidak terkesan eksklusif.

Menanggapi comment dari Bung Berry Laksana di Rancaekek di situsnya KLCBS

Salam kenal…
Ini yang saya cari selama ini, saya sudah cukup lama tidak mendengarkan siaran dari KLCBS, karena di daerah saya (rancaekek) sinyalnya kurang jernih..
Tolong kasih tahu dong gimana caranya dengerin lewat internet..? saya pake Speedy apakah bisa..? thank’s ya

Berry Laksana - June 27, 2008 at 10:22 pm

Saya jadi terinspirasi untuk membuat tutorial tentang bagaimana mendengarkan radio KLCBS melalui internet, lewat web browser. Atau istilah umum yang sering digunakan internet adalah steaming online radio secara realtime. Secara realtime, maksudnya apa yang sedang diputar / didengar di radio, juga sama dengan yang dapat didengar melalui internet. Dalam melakukan streaming radio ini ada software & kondisi yang kita perlukan, berikut yang saya gunakan:

Sistem Operasi: Windows XP Profesional Edition
Web Browser: Firefox 3.0
Audio Player: WinAmp 5.5
Koneksi internet: Speedy Regional Bandung

Versi dan jenis kondisi diatas tidak mutlak, anda tetap dapat menggunakan misalnya winamp versi 2, firefox versi 1, koneksi internet dengan provider lain, sistem operasi linux.

Oke langsung aja:
Dengan web browser anda, pergi ke alamat http://klcbs.net. Nanti di sebelah kanan sidebar website tersebut ada tulisan NOW LIVE!!

Selanjutnya klik kanan dan pilih copy link location pada text now live tersebut.

Kemudian buka winamp, dan pilih button yang berada di pojok kiri playlist anda, ADD kemudian pilih lagi ADD URL

Paste yang kita copy tadi ke window Add URL tersebut.

Selanjutnya di playlist winamp kita muncul satu baris baru.

Pilih dan play baris baru tersebut. Baris tersebut akan berubah nama menjadi (KLCBS THE JAZZ WAVE). Kemudian akan ada proses buffering sampai 100% dan radio KLCBS sudah dapat kita nikmati :) HOREEE

PERHATIAN
Tutorial ini mungkin dapat tidak relevan lagi jika situs yang bersangkutan merubah konfigurasinya, misal URL online streamingnya.

Pada prinsipnya, cara melakukan Streaming online radio cukup mudah:

Copy URL online radio streamingnya. Tidak semua radio menyediakan, silahkan tanyakan kepada radio yang bersangkutan.
Pastekan URL tadi ke audio player anda. (Winamp, Windows Media Player, Amarok)
Coba play. Biasanya akan terjadi proses buffering sampai 100%, barulah anda dapat mendengarkan suaranya.
Jika ternyata suaranya putus-putus, kemungkinan besar karena koneksi internet anda kurang / sedang tidak baik.

Berikut screenshootnya untuk memasukan URL online radionya jika saya gunakan windows media player 11:

Tutorial, eh apa untungnya Plurk?

Enaknya ngeplurk:

Ngabisin waktu kosong

Ga enaknya ngeplurk:

Ngabisin waktu doang
Pusing ngeliat timeline kalo friend udah banyak
Lo dikira orang gila gara-gara ngakak sendiri ngliat post/comment temenlo
Email lo / temen lo bakal penuh invitean untuk join plurk.
Elo / temen lo bakal sering nanya, "eh tau plurk ga?" trus klo blom join diajakin join.
Temen lo bakal nanya, "Plurk apaan sih?"
Kerjaan lo bakal terbengkalai sepanjang hari dan bahkan minggu
Jadi males ngapa-ngapain.
Ada tuh temen gw cewe, gw invite di plurk, trus dia di add friend ama cowo. Trus tu orang kesannya kaya ngejar, frontal, dan "mengganggu". Trus akhirnya temen gw ini jadi ga pernah ngeplurk lagi gara-gara tu orang.
Jadi males kemana-mana
Kalo pas bisa ngenet, selain (mungkin) buka YM/friendster/facebook pasti juga buka plurk.com. Trus melakukan posting "lagi ngenet gretongan di mall inilah / mall itulah" dan sejenisnya
Kerjaanlo cuma nunggu postingan lo di kasih comment sama orang,
Kerjaanlo cuma nunggu postingan baru dari orang yang SEMAKIN bikin penasaran
Ada lagi orang yang tergila-gila dengan karma. Akibatnya dia melakukan banyak plurk-plurk ga penting, ngejunk, dan membuat penuh timeline.
Memindahkan behaviour di forum lain (such as:kaskus) ke plurk.
Kalo internet lagi loyo nih, padahal lo udah ngebet banget pingin ngeplurk, waaah lo bisa bete seharian
Lo jadi lupa makan,
Kalo pun makan, pasti sambil ngeplurk
Pas nonton film pun setengah-setengah, sering dipause hanya untuk memberi / melihat comment.
Lo jadi males mandi
Kalo pun diniatin udah "mau" mandi, pasti ngeplurk dulu, "mandi dulu aah" trus akhirnya malah ga jadi mandi dan lanjut plurking

Kesimpulan gw:
Jangan ngeplurk!!

Oiya ini sedikit tutorial tentang plurk.com

Posting gambar di plurk: Langsung aja copy URL gambar di internet. Misal:
http://tastyblogsnack.com/images/plurk_ijustine.jpg
Posting video youtube di plurk. Langsung juga tulis URL youtube videonya. Misal:
http://youtube.com/watch?v=On-WagjCZVA
Cara nulis text agar bold: beri tanda bintang dua kali di sebelum dan sesudah textnya. Seperti ini: **tulisan bold**. Efeknya agak aneh, tulisan menjadi bold, tapi tanda bintang tetap muncul. Seperti ini **tulisan bold**
Cara nulis text agar italic: beri tanda bintang satu kali di sebelum dan sesudah textnya. Seperti ini: *tulisan italic*. Efeknya agak aneh, tulisan menjadi bold, tapi tanda bintang tetap muncul. Seperti ini *tulisan italic*
Ada 2 lagi, yaitu: underline dan code font style
Cara ngerubah background plurk jadi gambar yang sesuai kita inginkan: tingkatkan karma anda menjadi lebih dari 25. Kemudian edit CSS pada menu edit profile & customize
Anda tidak puas dengan emoticon yang anda punya? Hehe anda akalin aja dengan memasukan gambar emoticon2 gratis dari internet. Search di google deh, banyak kok. Salah satunya disini.
Pernah nyobain ngeplurk dari mobile device? handphone / PDA? Jangan deh... ga seasik versi webnya. Mau liat? Jangan deh.. ga enak.. beneran
Plurk juga ada widget, yang bisa di pasang di blog / website kita.
Kita juga bisa ngeplurk dengan satu orang, dua orang atau beberapa orang dalam group (disebutnya clique).
Boss.. sebenernya beberapa bullshit yang gw tulis disini adalah ilmu-ilmu yang pernah gw baca di FAQ & helpnya serta beberapa situs plurkers.

Hehe, kalo ini gw bikin beberapa percoban ngubah2 background timeline.
Kalo mau ngambil sebagai background plurk kamu, silahkan.

Bagi gw, plurk merupakan salah satu killer web2.0 application. Dahsyat banget ni aplikasi. Bisa bikin orang ketagihan, penasaran dan pingin lagi-pingin lagi. Plurk bentuknya microblogging. Sebelumnya udah pernah ada web application sejenis bernama twitter. Seperti biasa, keduanya punya kelebihan dan kekurangan masing-masing. Mereka punya fans masing-masing. User interactionnya juga agak berbeda. Intinya sih balik selera aja. Dan inget pesan gw, jangan lupain yah, yaitu:

Jangan ngeplurk!!

http://www.plurk.com/user/tomfreakz

Div share rada rasis haha

Waktu itu gw upload file gambar di divshare,
gambarnya juga cuma gambar ini:

Eh terus waktu mau di view malah tampil webpage kaya diatas

This file is not available to free users in China and Southeast Asia.

huekekekekek kenapa yah kira-kira?

Web designer

Kebetulan ada rekan di salah satu milis yang saya ikuti (komputer teknologi)

mengutarakan niatnya:

Selamat siang..

Saya berniat atau tertarik untuk belajar web design tapi karena bermacam2
software / program yang dipergunakan saat ini, maka saya mohon saran untuk
pemula seperti saya ini program apa yang cocok dipergunakan dan didownload
dimana???

Terima kasih

Salam,

Adhy.

Kemudian sebagai anggota milis yang bertanggung jawab, saya berniat sedikit memberi pencerahan kepada mas Adhy, saya coba share pengalaman saya. Berikut jawaban saya:

Halo mas Adhy...

sekedar sharing dari saya semoga dapat memberi sedikit pencerahan,

Untuk belajar web design saat ini sudah cukup banyak resourcenya di internet yang bisa diambil gratis.

Suatu website biasanya ada yang sifatnya:

Statis (Content tidak berubah. Tidak ada interaksi dengan user / database seperti input komentar)
Dynamic (Biasanya content dapat berubah otomatis/manual, terdapat engine untuk berinteraksi dengan user / database dll)

Web application development secara umum dibagi menjadi 2 bagian tim implementasi (ini tergantung scope aplikasi yang ingin dibangun ya).

Tim Web Designer (art/creative director, web designer sediri, animator, illustrator, multimedia designer) yang bertanggung jawab atas hubungan suatu websitenya dengan usernya
Tim Web Developer (software/web architect, web developer/programmer, database developer) yang bertanggung jawab atas hubungan suatu website dengan content, database, system dll

Umumnya,

Untuk website static, dapat dihandle oleh web designer saja.

Untuk website application yang dynamic butuh web developer.

Sedikit cerita,

pada jaman sekarang, web designer sudah mengalami evolosi yang cukup signifikan. Pada jaman dulu modal web designer adalah bisa photoshop dan html. Ada kasus web designer yang hanya memberikan mockup berupa file jpg yang merupakan tampilan web yang sangat bagus dan artistik kepada web developernya. File tersebut membuat sang web developer bingung, karena dimana ia akan mengintegrasikan program yang telah ia buat. Akibatnya ia harus memotong-motong dulu image yang diperlukan dan dibuat halaman htmlnya.

Hal itu kurang baik, karena pekerjaan web designer seperti itu tidak beda dengan graphic designer. Web designer diharapkan dapat menghasilkan sesuatu yang dapat langsung digunakan oleh web developer. Oleh karena itu hasil akhir suatu web designer adalah sebuah halaman web html yang sebaiknya terlihat sama pada beberapa web browser (firefox, internet explorer dll). Sehingga web developer langsung dapat mengintegrasikan engine web yang telah didevelop dengan cara menyisipkan kode-kode pemrogramannya pada html yang telah dibuat web designer.

Kemudian evolusi mulai berlanjut dengan munculnya istilah seperti web2.0, web standard accessibility & usabillity, css, microformat, SEO, online validator, web browser compatibility, machine readable, xhtml, doctype version, tableless web layout dll

Nah, untuk tim web designer.

Biasanya yang dilakukan pada saat implementasi adalah:

Membuat mockup web page design sesuai arahan art directornya (termasuk halaman apa saja, logonya seperti apa, color pallete, typography, layout tiap halaman, document version dll)
Implementasi semua kebutuhan multimedia seperti still image, icon, animation, audio, video.
Membuat (x)html + css sesuai standard spesifikasi dari mockup halaman yang telah dibuat
Validasi dokumen sesuai standarisasi dari W3C
Menerapkan web accessibility sesuai kebutuhan
Menerapkan semantik web dengan SEO (Search Engine Optimization)
Selanjutnya dapat diserahkan ke web developer untuk diintegrasikan dengan engine / database dll. Disini web designer perlu mendampingi web developer agar integrasi dapat berlangsung dengan baik, dan jika ada penyesuaian terhadap engine dari web developer juga dapat langsung ditangani

Sekali lagi saya ingatkan, hal ini disesuaikan dengan kondisi proyeknya, SDM, finansial, cakupan system, dll. Tidak semua projek dapat diberlakukan seperti hal diatas.

Tools umumnya:

Membuat mockup dapat dibantu dengan adobe photoshop / fireworks / gimp
Untuk bantuan membuat vector image bisa dengan adobe illustrator / corel draw / freehand
Untuk membuat animasi bisa menggunakan adobe flash / Xara 3D / Adobe photoshop - image ready.
Untuk membuat html, css, javascript dapat dengan text editor manapun, seperti adobe dreamweaver, editplus, bluefish, notepad
Untuk validasi dokumen secara online ada di site validator w3

Untuk mendownload beberapa tools dapat dilihat disini::

Web authoring tool1
Web authoring tool2

Open source web design toolbox

Nah ini, untuk best practicenya.

Mas Adhy dapat memulai dengan mempelajari web graphic design dan HTML.

Materi selanjutnya (web standard,css,javascript,SEO,ajax) dapat mas Adhy pelajari pelan-pelan sambil jalan.

Mas Adhy bisa mulai belajar HTML.

Materi yang saya lihat cukup baik untuk belajar

ada disini http://www.w3schools.com/

(toolsnya saya sarankan adobe dreamweaver / editplus)

dan tentunya web browser (Firefox, Internet Explorer, Opera, Safari)

Untuk mendalami graphic design pada media web,

(toolsnya saya sarankan adobe photoshop)

ada beberapa situs yang dapat memberi inspirasi.

Salah satunya ini:

http://bestwebgallery.com/

Jika dua ini sudah beres, anda bisa memperdalamnya dengan melihat

ebook html/web design atau tutorial di internet yang lebih praktis

seperti http://www.photoshopsupport.com/tutorials/jennifer/web-template.html

dan http://www.pegaweb.com/tutorials/aurora/aurora.htm

Untuk bacaan beberapa tulisan saya diatas dapat dilihat disini:

Web Standard

Web Standard Project

Web Accessibility

SEO.

HTML 4.01 specification by W3C

terima kasih, semoga dapat memeberi sedikit pencerahan.

Mohon koreksi dari rekan-rekan yang lain jika tulisan saya ada yang salah,

Selamat Belajar mas Adhy :)

regards,

Thomas Satrio

Safari RSS Reader

RSS reader gw selama ini adalah Google Reader, tapi kadang kok males banget nungguin mesin ajaxnya ngeload semua post yang perlu ditampilkan. Gw butuh yang lebih cepat!

Kebetulan akhir2 ini gw lagi suka pake Safari 3 Betanya windows. Browser tersebut jadi primary browser di komputer gw. Kenapa? karena cepat!!!! yap itu aja intinya.. Gw pernah nyobain opera 9xx, firefox dari yang 1 - versi 3 beta, ie dari yang versi 3 sampe versi 7, maxthon browser.... Semuanya ga ada yang lebih cepet dari safari ini. Liat aja di situsnya safari, mereka melakukan benchmark terhadap 4 browser terkenal.

RSS merupakan hal yang penting bagi gw sekarang. Kenapa?? Karena gw bisa subscribe untu ngambil berita-berita dari beberapa situs sekaligus dan kesemuanya itu bisa gw kumpulin di satu aplikasi bernama RSS Reader, Feed Reader atau Aggregator, terserah elo deh enaknya nyebutnya apa.

Nah ternyata, Safari punya RSS reader yang terintegrasi dengan browser tersebut, dan ternyata cepat. Jadi kebutuhan akan RSS reader yang cepat sudah bisa diatasi dengan safari.

Ya sebenernya banyak juga sih RSS reader yang cepet lainnya. firefox, dan opera juga punya. Dari dulu gw suka nyari RSS Reader offline / desktop application tapi ga pernah ketemu yang dapat memuaskan. Yang punya safari sebenernya masih blum puas juga sih... heleh gantung

zʞɐǝɹɟɯoʇ

Ada yang keren ni: zʞɐǝɹɟɯoʇ

huehehe keren kan?
dapetnya dari blognya Pak Rahard

Idenya ada aja ni orang - orang
(hehe ada 2 orang)

Kalo dilihat, scriptnya seperti ini:
(sengaja tidak saya berikan secara lengkap)

function flipString(aString) {
var last = aString.length - 1;
//Thanks to Brook Monroe for the
//suggestion to use Array.join
var result = new Array(aString.length)
for (var i = last; i >= 0; --i) {
var c = aString.charAt(i)
var r = flipTable[c]
result[last - i] = r != undefined ? r : c
}
return result.join('')
}

var flipTable = {
a : '\u0250',
b : 'q',
c : '\u0254', //open o -- from pne
d : 'p',
e : '\u01DD',
f : '\u025F', //from pne
g : '\u0183',
h : '\u0265',
i : '\u0131', //from pne
j : '\u027E',
k : '\u029E',
//l : '\u0283',
m : '\u026F',
n : 'u',
r : '\u0279',
t : '\u0287',
v : '\u028C',
w : '\u028D',
y : '\u028E',
'.' : '\u02D9',
'[' : ']',
'(' : ')',
'{' : '}',
'?' : '\u00BF', //from pne
'!' : '\u00A1',
"\'" : ',',
'<' : '>',
'_' : '\u203E',
'\\' : '/',
';' : '\u061B',
'\u203F' : '\u2040',
'\u2045' : '\u2046',
'\u2234' : '\u2235'
}

for (i in flipTable) {
flipTable[flipTable[i]] = i
}

Mantep banget dah ah...
kita tinggal call functionnya.. yoi kan!!

Thanx Mr. Rahard & David Faden

My 4 Web Browser and the new Safari 3 Beta For Windows

Akhirnya...

Seneng juga gw si safari teman kita itu udah ngga rasis lagi..

Gw dapet kabar pertama kali dari om ncus.

hehe sebenernya safari siapa sih?

nama jenis baju?

ato nama sebuah taman di jakarta?

well.. safari yang asya maksud disini adalah safari web browser..

Nah kenapa tadi gw bilang rasis?

Karena safari itu dari dulu cuma ada di apple

Tau apple kan? Buah yang kadang warna merah/orange/ijo?

Nah para pemeluk agama windows / *nix ga bisa tuh

nyobain safari di mesin mereka..

Nah kalo disambungin ke dunia web design & development

Web Browser adalah sesuatu yang penting sekali,

karena dengan web browser,

para user dapat melihat/ menjalankan aplikasi dari web yang dibuat.

Nah... Dalam dunia web design..

sering sekali terjadi masalah design layout.

Apa yang designer buat dan ditest di misalnya opera,

ternyata berbeda bentuknya jika ditampilkan

menggunakan mozilla, firefox, Internet Explorer, Safari...

Nah.. (kebanyakan nah kayanya gw)

Berhubung agama saya windows..

karena saya ga mampu beli buah apple

dan males banget make yang namanya linux Solaris BSD Unix auah blebeg *nix ituh

Jadinya saya sangat berterima kasih ketika

safari direlease di windows..

Dengan kata lain..

Ketika saya melakukan tes layout web design,

saya bisa mencobanya di 4 top web browser di dunia.

Saat ini versi yang saya pake adalah:

Firefox 1.5.11
Internet Explorer 6.0
Opera 9.20
Safari 3Beta

Yieeaah .. noraaaaak

hehe untuk yang IE saya ga kasih linknya..

cari ndiri yak.. tinggal googling inih..

hehe jaman gini kan udah FF2 dan IE7 yah?

tapi saya masih cinta FF1.5 tuh..

banyak extention yang masih saya perlukan

Kalo ie7 kayanya ntar aja deh..

di IE6 aja design web saya ancur hihihi

Nah sekarang lagi asik2nya bersafari ria.

(ni nulis blog juga pake safari)

Di websitenya safari, ditunjukan grafik perbandingan

dengan 3 top browser lainnya

dan memang saya rasakan sendiri

safari menang. hahahaha

Cepet bo!!! saya demen dah.

Kalo firefox itu yah.. ketika kita akses gmail..

sering banget hang.. kadang bentar, kadang ga ada abisnya

tapi ketika pake safari, wuowww..

tetep stabil boss!!!

cinta deh ama safari

tapi gatau ya..

Kalo ditanya web browser yang paling saya suka.

Saya jawab opera masih paling saya suka.

kalo diurutin sih kayanya sekarang saya milih:

1. Opera, 2. Safari, 3. FF, 4.IE

Tapi bukan berarti IE jelek atau yang lainnya jelek

Tetep keempatnya masih saya butuhkan.

nah terus.. tiba2 saya melihat link ini

Tapi tetep bukan berarti terus safari jelek..

Sama deh semuanya tetep saya butuhkan

Riset Ajax 1

wew akhirnya gw sempet juga nulis tentang teknologi.
Kebetulan postingan kali ini, sebelumnya merupakan tulisan gw
di forum students kampus gw.. tepatnya disini.

Kebetulan akhir2 ini gw lagi sering browsing dan jarang nyetudent,
akhirnya dapet beberapa ide ..

ya.. kira-kira ini yang bisa gw share kali ini:

Ada permasalahan tentang Ajax yang bisa jadi penelitian TA (Tugas Akhir) untuk S1 Informatika (lebih nyambungnya kesitu sih, kalo jurusan lain boleh ya sok aja atuh):

1. Untuk yang suka Web Engineering kira-kira begini:
Ajax kata orang cepet, karena evolusi web engineering mau menjadikan web application menjadi secepat desktop application. Well... mungkin ga sih? Kira2 apa yang membuatnya jadi mungkin dan tidak mungkin? kira-kira bagimana cara kerja objek javascript yang mendukung ajax (XMLhttprequest) wew udah jadi latar belakang dan perumusan masalah nie Smile

2. Untuk yang suka web engineering, tapi rada suka multimedia juga, kira-kira begini:
Menurut gw.. konsep membuat web application menjadi secepat desktop application udah Kuno!!.. Ajax itu ribet!! lo mesti belajar html/xhtml, javascript, xml, object oriented programming, mungkin ditambah php, DOM, css, dbms, wew... sederatan coding yang bikin males kayanya. Tapi emang apa boleh dikata? Kalo mau ajax, ya harus gitu.. Effort untuk coding ajax juga lebih besar dibanding web application tanpa ajax.. coba lo test sendiri.. Dan anehnya lagi, konsep Ajax itu juga baru dateng taun 2006 ini yang dikenalkan pertama kali oleh adaptivepath. Padahal kan objek XMLhttprequest udah lama.
Jauh sebelum itu, kita sudah mengenal teknologi flash dari macromedia (sekarang adobe).
Flash mirip dengan ajax, temen-temen yang udah nyemplung di actionscript programming ga perlu lagi untuk belajar javascript xhtml css DOM demi ajax.. Karena dengan flash application mereka, konsep yang dibawa ajax sudah menyerupai konsep ajax
Namun mungkin tetap ada pro dan kontranya...
Nah... justru itu.. mahasiswa jadi bisa dapet topik kan?!
Kita teliti aja perbandingan ajax dan flash.... wew.. terbentuk judul, perumusan masalah, latar belakang, batasan dan hipotesa awal kan.. hehe Smile

3. Nah ini untuk yang suka web security:
isu yang ada di web security sekarang adalah SQL injection dan XSS (itu 2 web vulnerable yang paling sering terjadi menurut beberapa situs yang berfokus pada security). Kemudian banyak orang yang melakukan riset untuk melakukan pencegahannya.. Nah seiring dengan perkembangan waktu, Ajax menjadi fenomena baru dalam dunia web application.. Fenomena baru ini tentu saja membawa masalah baru.. pekerjaan baru paradigma pemrograman web yang baru dan user behaviour baru.. dan imbasnya juga mempengaruhi pada celah keamanan baru. hehehe.. Para developer ajax saat ini sedang memikirkan isu-isu seputar ajax security.. Nah sebagai mahasiswa stttelkom yang ga gaptek IT, tentu saja kemauan untuk ikutan ada dong.. apa lagi yang suka tantangan... ye ga sih?.. Nah.. mangga deh... coba diteliti ajax security dari berbagai aspek.

well.... kira2 segitu aja.. share gw kali ini
kira-kira keywordnya isu seputar web engineering, security, ajax

Karena tugas mahasiswa TA adalah bikin TA..
so... tips dari gw.. carilah masalah melalui isu yang ada di sekitarmu (bisa juga dari internet)
kemudian coba bandingkan dengan lingkungan yang mempengaruhinya
dan coba buat hipotesa sendiri... selanjutnya analisa.
Jangan terpatok bikin aplikasi aja meskipun coding di IF (informatika stttelkom) itu wajib, *he gimana sih?

Tapi tenang ada kok profesor di Universitas California of Santabarbara
yang Thesisnya cuma bikin firefox extension.... hehe tapi ga "cuma" nih..
Gw liat thesisnya buuhh... codiiing bosss!!! dan rada2 primitive gitu..
dia ngebongkar sourcenya firefox dan dia adaptasiin style codingnya
terus dia analisa cara kerja javascript engine.. dan jadi deh.. extension pencegah xss attack

well... my last word.. buat yang suka tantangan
Kerjakan TA mu dengan semangat..
Cari idealismemu tapi ya mikir waktu dan tenaga juga
mumpung masih mahasiswa... risetlah sebanyak-banyaknya.
Kalo udah kerja apalagi ga nyambung ama teknologi informasi
wew.. susah mo riset engineering gitu..

... tapi tergantung keadaan tiap orang sih..
santai aja lah brow..
choose ur life... positive thinking and always open minded
mohon maaf kalo ada kata-kata yang kurang berkenan
kalo mau menyanggah atau diskusi lebih lanjut.. sok wae atuh

Situs Pertemanan

Situs pertemanan hehe lucu namanya..
Tapi sejujurnya, situs-situs seperti itu tak dapat dipungkiri adalah suatu paradigma baru (saat ini) untuk bersosialisasi secara cyber di dunia internet dengan siapapun tak terbatas ruang dan waktu.
Contohnya:

Beberapa hanya tenar di bagian bumi tertentu namun beberapa lainnya dapat mengglobal. Kita dapat secara langsung berkomunikasi dengan musisi/artist yang bersangkutan. Well suatu ide yang cukup brilliant bukan? Bukankah hal tersebut merupakan impian para fans?

Satu kata yang merupakan inti dari ide dasar semua ini adalah "WEB TECHNOLOGY".
eh dua kata deng

tomfreakz blog