6 CSS Web Editor Untuk Linux (Free)

6 CSS Web Editor Untuk Linux (Free)

Web Design Blogger user   1:31 AM

CSS Web Editor Untuk Linux (Free) — Biasanya desainer web identik dengan penggunaan sistem operasi Mac OS X untuk urusan pembuatan desain web, namun tidak sepenuhnya harus seperti itu karena sistem operasi apapun bisa digunakan untuk melakukan pekerjaan sebagai seorang desainer web. Termasuk bisa menggunakan Windows bahkan Linux sekalipun, bahkan pengguna windows sangat banyak yang berprofesi sebagai desainer web.

Jika Anda adalah seorang frontend designer yang menggunakan linux, berikut ini adalah beberapa aplikasi css editor yang bisa Anda gunakan.

1. Sublime Text

Editor pertama yang bisa digunakan adalah Sublime Text, editor ini bisa Anda gunakan secara gratis dan tentu saja memiliki banyak sekali kelebihan. Editor ini juga dilengkapi dengan berbagai plugin tambahan yang biasa disebut package.

2. jEdit

jEdit dikenal oleh kalangan programmer yang sudah mature. jEdit memiliki antarmuka yang akan mengingatkan Anda tentang DOS, namun bicara soal fungsi, jEdit mampu mengalahkan alat pengembangan yang berbayar.

3. Bluefish

Bluefish adalah editor yang bagus untuk pengembang web. Tools ini sudah sejak lama terkenal sebagai editor web, dan dengan editor ini tentu saja bisa digunakan untuk mengedit file css juga. Selain di Linux, Bluefish ini juga bisa digunakan di Windows dan Mac.

4. Scintilla

Scintilla adalah kode editor CSS untuk para pengembang web. Ini adalah salah satu editor yang sangat berguna yang bisa digunakan untuk membuat dan menjalankan program. Aplikasi ini hanya tersedia di Windows dan Linux. SciTE tersedia hanya untuk sistem Linux dan Windows yang berbasis intel. Dokumentasi SciTE cukup bagus untuk dikonfigurasi dengan barbgai bahasa dan API.

5. Quanta

Quanta adalah CSS editor yang ringan. Versi plus dari alat ini memiliki banyak fitur tambahan, diantaranya adalah interface dokumen multi template dan bisa mengedit dengan WYSIWYG. Aplikasi ini terus dikembangkan dan memiliki plugin tambahan serta ada PHP debugger.-

6. cssed

cssed adalah css editor ringan untuk Linux. Alat ini dilengkapi berbagai kelengkapan untuk membuat web dengan css seperti, tampilan MDI, validasi sintak dan ada highlighting. Anda bisa menggunakan cssed untuk mengedit HTML, XML, Perl, Phyton, SQL dan berberapa bahasa lainnya.

Itulah beberapa css editor yang bisa jadi referensi yang bagus untuk para pengembang web.

Tutorial Cara Membuat Kalender Dengan PHP, HTML dan CSS

Tutorial Cara Membuat Kalender Dengan PHP, HTML dan CSS

Web Design Blogger user   9:26 PM

Cara membuat kalender dengan PHP, HTML dan CSS — Kalender / Calendar sering kita jumpai di halaman website, bahkan di CMS wordpress pun ada widget untuk menampilkan kalendar. Segitu pentingnya fungsi kalendar di sebuah website?  kalendar juga sering kita temui di website portal yang memiliki banyak sekali berita, untuk mempermudah pengunjung mengakses berita pada tanggal tertentu biasanya di sediakan kalendar.
Pertanyaannya bagaimanakan cara membuat kalendar itu agar dinamis? agar sistem tabel nya sesuai dengan jumlah hari pada bulan tersebut (29, 30 atau 31 hari dalam sebulan). Mari kita coba saja langsung.

Membut Fungsi di PHP

Pertama kita perlu untuk membuat sebuah fungsi dengan script PHP berdasarkan bulan dan tahun tertentu. Diawali dengan menentukan hari-hari dalam seminggu, table header, dll.

function draw_calendar($month,$year){

 // Draw table for Calendar 
 $calendar = '
<table cellpadding="0" cellspacing="0" class="calendar">';

 // Draw Calendar table headings 
 $headings = array('Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday');
 $calendar.= '
<tr class="calendar-row">
<td class="calendar-day-head">'.implode('</td>
<td class="calendar-day-head">',$headings).'</td>
</tr>
';

 //days and weeks variable for now ... 
 $running_day = date('w',mktime(0,0,0,$month,1,$year));
 $days_in_month = date('t',mktime(0,0,0,$month,1,$year));
 $days_in_this_week = 1;
 $day_counter = 0;
 $dates_array = array();

 // row for week one 
 $calendar.= '
<tr class="calendar-row">';

 // Display "blank" days until the first of the current week 
 for($x = 0; $x < $running_day; $x++):
  $calendar.= '
<td class="calendar-day-np"> </td>
';
  $days_in_this_week++;
 endfor;

 // Show days.... 
 for($list_day = 1; $list_day <= $days_in_month; $list_day++):
  if($list_day==date('d') && $month==date('n'))
  {
   $currentday='currentday';
  }else
  {
   $currentday='';
  }
  $calendar.= '
<td class="calendar-day '.$currentday.'">';
  
   // Add in the day number
   if($list_day<date('d') && $month==date('n'))
   {
    $showtoday='<strong class="overday">'.$list_day.'</strong>';
   }else
   {
    $showtoday=$list_day;
   }
   $calendar.= '
<div class="day-number">'.$showtoday.'</div>
';

  // Draw table end
  $calendar.= '</td>
';
  if($running_day == 6):
   $calendar.= '</tr>
';
   if(($day_counter+1) != $days_in_month):
    $calendar.= '
<tr class="calendar-row">';
   endif;
   $running_day = -1;
   $days_in_this_week = 0;
  endif;
  $days_in_this_week++; $running_day++; $day_counter++;
 endfor;

 // Finish the rest of the days in the week
 if($days_in_this_week < 8):
  for($x = 1; $x <= (8 - $days_in_this_week); $x++):
   $calendar.= '
<td class="calendar-day-np"> </td>
';
  endfor;
 endif;

 // Draw table final row
 $calendar.= '</tr>
';

 // Draw table end the table 
 $calendar.= '</table>
';
 
 // Finally all done, return result 
 return $calendar;
}

Fungsi diatas digunakan untuk meng-generate tabel pada bulan tertentu sesuai dengan yang kita inginkan.
Cara Menggunakan Fungsi tersebut adalah seperti berikut

echo '
<h2>Juli 2013</h2>
';
echo draw_calendar(7,2013); 

Jika dijalankan maka akan terbentuk kalender seperti berikut (bulan juni, 2014)
Cara membuat kalender dengan PHP, HTML dan CSS — Kalender / Calendar sering kita jumpai di halaman website, bahkan di CMS wordpress pun ada widget untuk menampilkan kalendar. Segitu pentingnya fungsi kalendar di sebuah website?  kalendar juga sering kita temui di website portal yang memiliki banyak sekali berita, untuk mempermudah pengunjung mengakses berita pada tanggal tertentu biasanya di sediakan kalendar.
Pertanyaannya bagaimanakan cara membuat kalendar itu agar dinamis? agar sistem tabel nya sesuai dengan jumlah hari pada bulan tersebut (29, 30 atau 31 hari dalam sebulan). Mari kita coba saja langsung.

Membut Fungsi di PHP

Pertama kita perlu untuk membuat sebuah fungsi dengan script PHP berdasarkan bulan dan tahun tertentu. Diawali dengan menentukan hari-hari dalam seminggu, table header, dll.

function draw_calendar($month,$year){

 // Draw table for Calendar 
 $calendar = '
<table cellpadding="0" cellspacing="0" class="calendar">';

 // Draw Calendar table headings 
 $headings = array('Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday');
 $calendar.= '
<tr class="calendar-row">
<td class="calendar-day-head">'.implode('</td>
<td class="calendar-day-head">',$headings).'</td>
</tr>
';

 //days and weeks variable for now ... 
 $running_day = date('w',mktime(0,0,0,$month,1,$year));
 $days_in_month = date('t',mktime(0,0,0,$month,1,$year));
 $days_in_this_week = 1;
 $day_counter = 0;
 $dates_array = array();

 // row for week one 
 $calendar.= '
<tr class="calendar-row">';

 // Display "blank" days until the first of the current week 
 for($x = 0; $x < $running_day; $x++):
  $calendar.= '
<td class="calendar-day-np"> </td>
';
  $days_in_this_week++;
 endfor;

 // Show days.... 
 for($list_day = 1; $list_day <= $days_in_month; $list_day++):
  if($list_day==date('d') && $month==date('n'))
  {
   $currentday='currentday';
  }else
  {
   $currentday='';
  }
  $calendar.= '
<td class="calendar-day '.$currentday.'">';
  
   // Add in the day number
   if($list_day<date('d') && $month==date('n'))
   {
    $showtoday='<strong class="overday">'.$list_day.'</strong>';
   }else
   {
    $showtoday=$list_day;
   }
   $calendar.= '
<div class="day-number">'.$showtoday.'</div>
';

  // Draw table end
  $calendar.= '</td>
';
  if($running_day == 6):
   $calendar.= '</tr>
';
   if(($day_counter+1) != $days_in_month):
    $calendar.= '
<tr class="calendar-row">';
   endif;
   $running_day = -1;
   $days_in_this_week = 0;
  endif;
  $days_in_this_week++; $running_day++; $day_counter++;
 endfor;

 // Finish the rest of the days in the week
 if($days_in_this_week < 8):
  for($x = 1; $x <= (8 - $days_in_this_week); $x++):
   $calendar.= '
<td class="calendar-day-np"> </td>
';
  endfor;
 endif;

 // Draw table final row
 $calendar.= '</tr>
';

 // Draw table end the table 
 $calendar.= '</table>
';
 
 // Finally all done, return result 
 return $calendar;
}

Fungsi diatas digunakan untuk meng-generate tabel pada bulan tertentu sesuai dengan yang kita inginkan.
Cara Menggunakan Fungsi tersebut adalah seperti berikut

echo '
<h2>Juli 2013</h2>
';
echo draw_calendar(7,2013); 

Jika dijalankan maka akan terbentuk kalender seperti berikut (bulan juni, 2014)

1001 Tutorial dan Contoh Menu Responsive Dengan CSS, Js & Jquery

1001 Tutorial dan Contoh Menu Responsive Dengan CSS, Js & Jquery

Web Design Blogger user   9:24 PM

Dengan semakin banyaknya pengguna smartphone maka website yang responsive saat ini adalah sebuah keharusan. Website yang responsive tentu butuh sebuah navigasi menu responsive juga agar bisa terlihat bagus ketika dibuka dengan berbagai perangkat yang tentu memiliki berbagai ukuran layar.
Berbicara tentang menu yang responsive, terdapat berbagai macam teknik dan model atau bentuk yang bisa diterapkan pada website.
Baik menu yang tadinya vertical atau horizontal, ketika dibuka dengan layar yang lebih kecil maka harus bisa menyesuaikan, baik itu dengan merubah cssnya, atau dengan merubah bentuknya menjadi tag select.
Berikut ini adalah beberapa contoh menu responsive yang bisa jadi inspirasi untuk Anda yang sedang mendesain website.

CSS Mega Dropdown

Secondary Sliding Navigation

Multi-Level CSS Push Only Menu

Off-Canvas Layout

Mega-Site Navigation

Pushy – Off-Canvas Navigation Menu

Ratusan Menu Lainnya

Untuk ratusan contoh menu CSS, JS + Jquery lainnya, Anda bisa mengunjungi website NavNav.co yang saat ini sudah mengumpulkan lebih dari seratus bentuk dan model menu responsive baik itu yang dibuat dengan css, js atau ditambah dengan js framework jquery.
Contoh menu yang dikumpulkan website NavNav kemungkinan akan semakin bertambah seiring waktu dan mungkin akan mencapai 1001 suatu saat nanti. Kita tunggu saja hasil kerja dari pemilik website nya.