HOBI ELEKTRONIKA: Design Web

Tampilkan postingan dengan label Design Web. Tampilkan semua postingan

Rabu, 21 Januari 2015

HAML – Markup Indah Pengganti HTML

HAML – Markup Indah Pengganti HTML

Haml adalah markup seperti Html, tetapi lebih indah, human-readable (enak dibaca) dan dapat memangkas banyak waktu. Haml sendiri adalah library dari bahasa pemprograman Ruby (atau biasa disebut Gem) yang meng-compile file .haml ke file .html jadi kita tidak perlu menginstall ruby di server karena proses compile dapat dilakukan di komputer lokal. Tapi kita tetap harus menginstall Ruby di komputer lokal kita.

Haml

Untuk menginstall ruby, jika anda menggunakan sistem Window$, anda bisa mengunduh installernya di http://rubyinstaller.org/downloads/ dan pilih versi 1.9.2 untuk kestabilan. Di Linux dan Mac anda bisa menggunakan RVM, Ruby Version Manager di http://beginrescueend.com/. Untuk mengetes apa ruby sudah terinstall, buka command-line atau terminal (di Windows, Start > run > ketik ‘cmd’, atau Start > accesscories > command line)

Setelah menginstall ruby, sekarang kita perlu menginstall library dari Haml itu sendiri. Mudah kok, cukup dengan perintah pada command-line:

gem install haml

atau diawali dengan kata `sudo’ pada Linux atau Mac OS X.
Baiklah kini Haml (dan Ruby) sudah ter-install, saatnya kita belajar Haml dari contoh file:

!!!

%html

    %head

        %title Judul Halaman

        %link{:rel => 'stylesheet', :href => 'style.css'}

    %body

        %h1 Heading 1


        %p

            Lorem ipsum dolor sit amet,

            %strong consectetur

            adipiscing
 elit. Praesent pretium justo non nibh commodo iaculis. Maecenas rhoncus
 varius egestas. Quisque vulputate quam eget augue rhoncus semper.


        .container

            Lorem
 ipsum dolor sit amet, consectetur adipiscing elit. Praesent pretium 
justo non nibh commodo iaculis. Maecenas rhoncus varius egestas. Quisque
 vulputate quam eget augue rhoncus semper.

        #wrapper

            Lorem
 ipsum dolor sit amet, consectetur adipiscing elit. Praesent pretium 
justo non nibh commodo iaculis. Maecenas rhoncus varius egestas. Quisque
 vulputate quam eget augue rhoncus semper.

        %div{ :class => 'container', :id => 'wrapper'}

            Lorem
 ipsum dolor sit amet, consectetur adipiscing elit. Praesent pretium 
justo non nibh commodo iaculis. Maecenas rhoncus varius egestas. Quisque
 vulputate quam eget augue rhoncus semper.

Simpan file diatas dengan nama index.haml (atau nama lain) lalu ketikkan di command line/terminal perintah:

haml index.haml index.html

Dimana ‘haml’ adalah nama perintah untuk meng-compile file haml, ‘index.haml’ adalah nama dari file input berupa Haml yang kita buat diatas, sedang ‘index.html’ adalah file output hasil kompilasi dari file haml. Saya sarankan file output dan file input namanya sama, misal index.haml untuk index.html, view.haml untuk view.html, dan seterusnya.

Hasilnya dalam index.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

  <head>

    <title>Judul Halaman</title>

    <link href='style.css' rel='stylesheet' />

  </head>

  <body>

    <h1>Heading 1</h1>

    <p>

      Lorem ipsum dolor sit amet,

      <strong>consectetur</strong>

      adipiscing
 elit. Praesent pretium justo non nibh commodo iaculis. Maecenas rhoncus
 varius egestas. Quisque vulputate quam eget augue rhoncus semper.

    </p>

    <div class='container'>

      Lorem
 ipsum dolor sit amet, consectetur adipiscing elit. Praesent pretium 
justo non nibh commodo iaculis. Maecenas rhoncus varius egestas. Quisque
 vulputate quam eget augue rhoncus semper.

    </div>

    <div id='wrapper'>

      Lorem
 ipsum dolor sit amet, consectetur adipiscing elit. Praesent pretium 
justo non nibh commodo iaculis. Maecenas rhoncus varius egestas. Quisque
 vulputate quam eget augue rhoncus semper.

    </div>

    <div class='container' id='wrapper'>

      Lorem
 ipsum dolor sit amet, consectetur adipiscing elit. Praesent pretium 
justo non nibh commodo iaculis. Maecenas rhoncus varius egestas. Quisque
 vulputate quam eget augue rhoncus semper.

    </div>

  </body>

</html>

Tag dalam Haml, seperti dalam file Haml diatas cukup dengan tanda % di depan nama tag. Misal %html, %title, dan sebagainya.

Sedangkan untuk Tag yang berada di dalam tag lain, Haml menggunakan konsep indentasi. Biasanya indentasi dalam Haml adalah 1 tab atau 2 spasi (ala Ruby), untuk lebih jelasnya apa maksud penggunaan indentasi dalam Haml, lihat contoh berikut ini:

%body

     %p

         Lorem ipsum dolor sit amet, consectetur adipiscing elit.

         %strong

             Praesent pretium justo

             %em

                 non nibh commodo iaculis.

         Maecenas rhoncus varius egestas. Quisque vulputate quam eget augue rhoncus semper.

Dan jika di-compile maka hasilnya:

<body>

  <p>

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    <strong>

      Praesent pretium justo

      <em>

        non nibh commodo iaculis.

      </em>

    </strong>

    Maecenas rhoncus varius egestas. Quisque vulputate quam eget augue rhoncus semper.

  </p>

</body>

Bagaimana? Sudah jelas maksud indentasinya?

Ya, Indentasi Haml berfungsi sebagai pengganti tag nesting pada Html. Sebuah indentasi bisa berupa 1 tab atau beberapa spasi. Syaratnya, jumlahnya harus sama dan konsisten.

Sedangkan tanda !!! diawal dokumen adalah doctype dari html. !!! melambangkan xhtml 1, dan !!! 5 adalah html 5.

Bagaimana dengan atribut Html seperti href dan title pada tag a (anchor), description dan content pada tag meta? Untuk memberikan atribut html, bisa dilakukan dengan memberi tanda kurung kurawal setelah nama tag tanpa spasi. Contohnya:

%a{ :href => '/page.html', :title => 'Link ke sebuah halaman'} Link

dituliskan dalam bentuk haml seperti ini:

<a href='/page.html' title='Link ke sebuah halaman'>Link</a>

Contoh-contoh diatas adalah sebagian kecil dari fitur Haml. Haml tidak hanya memperindah kode (dan lebih human-readable), tapi juga memangkas waktu penulisan tag-tag Html biasa. Haml banyak digunakan oleh developer Rails sebagai pengganti Erb atau developer PHP sebagai pengganti tag Html biasa.

Selamat Mencoba

Rabu, 14 Januari 2015

Cara Membuat Layout (Tata Letak) Halaman Website dengan HTML

Layout pada halaman web sangat penting untuk membuat website supaya terlihat lebih bagus. Dalam merancang Layout untuk halaman web, harus ekstra hati-hati. Pada umumnya website berisikan berbagai kolom (seperti format pada majalah atau koran), untuk membuat berbagai kolom dibutuhkan tag <table> atau tag <div>.

CSS juga sering ditambahkan untuk merubah posisi elemen atau membuat background, bisa juga untuk mempercantik tampilan halaman web. Dibawah ini adalah contoh dari pembuatan Layout menggunakan tag <table> dan tag <div>.

Contoh pembuatan Layout dengan menggunakan tag <table>
Cara sederhana untuk membuat Layout dengan menggunakan tag <table> pada HTML adalah sebagai berikut :

        <html>
        <body>
        <table width = "500" border = "0">
        <tr>
        <td colspan = "2" style = "background-color:#00ffff;">
        <h1>Judul Pada Halaman Web</h1>
        </td>
        </tr>
        <tr>
        <tr valign = "top"><td style = "background-color:#680000; width:100px; text-align:top;">
        <b>Daftar Isi</b><br/>
        HTML<br/>
        XHTML<br/>
        CSS<br/>
        Java Script</td>
        <td style = "background-color:#b0b0b0; height:200px; width:400px; text-align:top;">
        Masukan Artikel nya Disini</td>
        </tr>
        <tr>
        <td colspan = "2" style = "background-color:#33cccc; text-align:center;">created by @ mm-stm webdesign</td>
        </tr>
        </body>
        </html>

Maka tampilan untuk contoh diatas adalah seperti tampilan dibawah ini :

Judul Pada Halaman Web
Daftar Isi HTML XHTML CSS Java Script	Masukan Artikel nya Disini
created by @ mm-stm webdesign

Contoh pembuatan Layout dengan menggunakan elemen <div>
elemen div adalah elemenblock level yang digunakan untuk mengelompokan elemen-elemen HTML. Perhatikan contoh penggunaan elemen <div> dibawah ini:

    <html>
    <body>
    <div id = "container" style = "width:500px">
    <div id = "header" style = "background-color:#00ffff;">
    <h1 style = "margin-bottom:0;">Judul Pada Halaman Web</h1>
    </div>
    <div id = "menu" style = "background-color:#680000; height:200px; width:100px; float:left;">
    <b>Daftar Isi</b><br/>
    HTML<br/>
    XHTML<br/>
    CSS<br/>
    Java Script</div>
    <div id = "content" style = "background-color:#B0B0B0; height:200px; width:400px; float:left;">Masukan Artikel nya Disini</div>
    <div id = "footer" style = "background-color:33cccc; clear:both; text-align:center;">created by @ mm-stm webdesign
    </div>
    </body>
    </html>

Maka tampilan untuk contoh diatas adalah seperti tampilan dibawah ini :

Masukan Artikel nya Disini

Sampai disini dulu postingan saya untuk kali ini

Sumber: http://beyblogdesign.blogspot.com/2013/04/cara-membuat-layout-tata-letak-website.html

Kamis, 22 Mei 2014

Best Free Web Design Software: 10 Programs to Get the Job Done

Updated Build the website you need with these free web design programs

Simple WYSIWYG (What You See Is What You Get) web design programs make creating basic sites as easy as using a word processor.
The next step up combines a WYSIWYG approach with more detailed low-level control of what you're doing, very useful when you're looking to create a more impressive site (although you may have to spend some time learning the basics).
There are plenty of high level applications aimed at the more experienced users, who like to be able to focus on the HTML, CSS or scripting code.
And of course you may also need tools to create your graphics, analyze the finished site and diagnose any problems.
Whatever you're looking for, though, we've found a free tool which can help - just keep reading to discover our pick of the best free software for web design.

1. CoffeeCup Free HTML Editor

CoffeeCup Free HTML Editor is the free version of a commercial product, and so missing a few tools (CSS menu design, FTP upload and so on)If you're a beginner, though, this probably won't matter too much. You can use the Open From Web option to open an existing web page, for instance, and tweak this to add your own content.

There are plenty of powerful editing tools, a local Help file to walk you through the more complicated parts, and you can also upload your page to CoffeeCup's S-Drive platform, where it will host it for free.
------------------------------------------------------------------------------------------------

2. Notepad++

Notepad++ is an amazingly powerful source code editor with a vast number of features. Syntax highlighting makes it immediately easier to read and understand your code, for instance.
Code folding allows you to collapse some areas while you focus on others. Auto-completion helps you enter code more quickly (and accurately).

There's also a powerful search tool, easy document navigation, bookmarking, macro support, and more, all of which is presented in a highly configurable, easy-to-use interface. Go grab a copy immediately.
------------------------------------------------------------------------------------------------

3. PageBreeze

Experienced web designers won't be impressed by the PageBreeze - it's based on old technology, and distinctly short of features - but if you're just looking to create something very simple then it's a different story.

This WYSIWYG editor comes with simple templates to help you get started (they're fairly ugly, but you can add your own later).
You can add links, images, tables and forms in a click or two. It's easy to see and edit all your site pages, and when you're done a built-in FTP client puts your work online. So while the end results may be basic, the program's simplicity makes it worth a look for the novice.
------------------------------------------------------------------------------------------------

4. Firebug

You've designed your website, but it doesn't quite look or work as you'd expect - and that's where Firebug comes in. This powerful Firefox extension helps you to view HTML and CSS code; adjust your styles and see the results immediately; understand your page layouts; debug and log JavaScript; manage cookies, analyze page load times, examine error messages and more.

Clearly there's a lot of power here, but Firebug isn't just for web experts. At first you might only use it for a few basic things, just viewing code perhaps. It'll still be very useful, though, and you can begin to explore other functions at your own pace.
------------------------------------------------------------------------------------------------

5. Bluefish Editor

Bluefish is a programmer's editor which also includes plenty of web-related tools and options.
This starts with the usual editing tricks: syntax highlighting (ASP.NET, CSS, HTML, JavaScript, PHP and more are supported), code folding, powerful find and search and replace tools, autocompletion, and more.

The program also supports document templates; has wizards to add CSS, forms, tables, forms, audio and video objects; quick tag editing and easy previewing of the current document, amongst many other goodies.
------------------------------------------------------------------------------------------------

6. Brackets

Brackets is an interesting open-source HTML, CSS and JavaScript-based code editor, created and maintained by Adobe.
The program deliberately avoids cluttering your workspace with floating toolbars and large icons, instead allowing you to work directly on your code, with plenty of shortcuts to help.

Click in an HTML tag, say, press Ctrl+E and you'll see a Quick Edit box with any related CSS rules, just select the one you need and you'll be able to edit it right away.
It's just as easy to edit JavaScript code. And a Live Preview feature means that there's no need to refresh your browser each time to see the changes - they're updated right away.
Add the growing list of extensions and, while it's still early days, Brackets is looking like an interesting tool for experienced web developers.
------------------------------------------------------------------------------------------------

7. KompoZer

It's not been updated for some time, but KompoZer can still be a useful web editor for beginners. The program works like a simple word processor, so you don't have to know about HTML, CSS, scripting or anything else: just enter your text, format it, and click the various buttons to add links, insert tables, images and more.

If you're a little more experienced than KompoZer does have further tools which may help, including an HTML editor. The program is beginning to show its age, though, so more experienced web designers would probably be better off elsewhere.
------------------------------------------------------------------------------------------------

8. OpenBEXI

OpenBEXI is an interesting WYSIWYG HTML editor which allows you to create pages just by dragging and dropping "widgets" - everything from text, links and images, to forms, graphs and flowcharts - and tweaking them to suit your needs.
It's also possible to tweak CSS or add scripts to the page, and a built-in FTP client will upload everything when it's done.

While this sounds great, there are problems. It's easy to add objects to a page, for instance, but getting them to work as you'd like can take a little while.
The browser-based interface has some issues, and the need to use a server might confuse beginners, too. It's still a quality tool, but you'll need some PC (though not web design) experience to make the most of it.
------------------------------------------------------------------------------------------------

9. GIMP

Every web designer needs great graphics tools, and GIMP is one of the best free image editors around. It has impressive photo retouching features, lots of useful special effects, a range of powerful paint tools and more.

Strong colour management ensures your images always look at their best. Layer support helps you control which parts of your images are tweaked, and which remain untouched. And it's then easy to save your images for the web.
The interface isn't always the best, and with so many options GIMP can seem intimidating at first. Once you've learned the basics, though, you'll find there's very little the program can't do.
------------------------------------------------------------------------------------------------

10. BlueGriffon

BlueGriffon takes a straightforward WYSIWYG approach to web editing, but also manages to include plenty of more powerful features.
You could just use it to type text, insert images, tables, audio files, videos and so on. But there's also an SVG editor, form design tools, some CSS support, an accessibility checker, DOM Explorer, and more.

One annoying aspect of the program is that several options (even that manual) require commercial add-ons, which means clicking the wrong button will take you to the BlueGriffon site to find out more.
You soon learn which options are available, though, and on balance BlueGriffon is a capable and generally easy-to-use tool.

By Mike Williams
http://www.techradar.com/news/software/applications/best-free-web-design-software-10-programs-to-get-the-job-done-1138669