function draw() {
      var canvas = document.getElementById("canvas");
      canvas.height = document.height;
      canvas.width = document.width;
      if (canvas.getContext) {
        var ctx = canvas.getContext("2d");
        var i = 0;

        var t= setInterval(function() {
            ctx.fillStyle = "rgba(200," + i + "," + i + ",0.05)";
            ctx.fillRect (i, i, i, i);
            i++;
            if(i > document.height-i){clearInterval(t);}
        },10);

      }
    }
    window.onload = draw;

Bu bir kaç satırlık kod ile gayet hoş bir animasyon elde edilebiliyor, işte çıktısı:

Tabi bunu HTML5 destekleyen modern bir tarayıcıyla görebilirsiniz ancak.

If you want to use all corners with same radius this is the easy way:

.my_rounded_corners {
  border: 1px solid #ccc;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -khtml-border-radius: 5px;
  border-radius: 5px;
}

but if you want to control every corner this is good:

.my_rounded_corners {
  border: 1px solid #ccc;

  -moz-border-radius-topleft: 10px;
  -khtml-border-top-left-radius: 10px;
  -webkit-border-top-left-radius: 10px;
  border-top-left-radius: 10px;

  -moz-border-radius-topright: 0px;
  -khtml-border-top-right-radius: 0px;
  -webkit-border-top-right-radius: 0px;
  border-top-right-radius: 0px;

  -moz-border-radius-bottomleft: 4px;
  -khtml-border-bottom-left-radius: 4px;
  -webkit-border-bottom-left-radius: 4px;
  border-bottom-left-radius: 4px;

  -moz-border-radius-bottomright: 10px;
  -khtml-border-bottom-right-radius: 10px;
  -webkit-border-bottom-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

As you see in each set you have browser specific styles and on the fourth rows we declare in standard way by this we assume if in future the others (hopefully IE too) decide to implement the feature to have our style be ready for them too.

This works beautifully on Firefox, Safari, Camino, Chrome. For other browsers there are tons of other tweaks you can find by googleing.

Kodingen ile web üzerinde kodlamayı mümkün kılan bir yazılım geliştirme ortamı (Online Development Environment) hazırladık. Özetle neler yapılabileceğini aşağıdaki videoda anlatmaya çalıştık. Şimdilik sunduğumuz yazılım ortamı Apache/PHP/MySQL şeklinde, ileride RoR, Python, Perl ve birçok yazılım dilinin de oluşturulup test edilebilineceği bir yapıyı planlıyoruz.

İşte videosu: (İngilizce)

http://kodingen.com

Uzun yoldan:

if(yaşım > 50){
  var ben = "Yaşlanıyorum.";
}else{
  var ben = "Hala gencim.";
}

Kısa yoldan:

var ben = (yaşım > 50) ? "Yaşlanıyorum." : "Hala gencim.";

PHP için:

Aslında syntax aynı, php’de değişkenler $ kullanılarak tanımlanıyor sadece.

if($yaşım > 50){
  $ben = "Yaşlanıyorum.";
}else{
  $ben = "Hala gencim.";
}

Kısa yoldan:

$ben = ($yaşım > 50) ? "Yaşlanıyorum." : "Hala gencim.";

Bkz.


burada kullandiklarim:

jquery-1.2.6.min.js // jQuery core library (jquery cekirdek kutuphanesi demek pek hos gelmedi)
jquery.lavalamp.js // yukaridaki tablarin arkaplanlarini oynatan jquery eki

bundan sonrasi css ve biraz jquery…

Ilk basta html dosyasina DOM yüklendigi zaman($(document).ready) calisacak jQuery kod parcasini ekliyoruz.

$(document).ready(function() {

	//
	var sw = 450; //scroller width
	var sh = 300; //scroller height
	var sa = $(".scroll_item").length; //amount of total elements to be scrolled

	$(".scroll_item, .scroll_holder").css({'width': sw+'px', 'height': sh+'px'});
	$(".scrolling_box").css({'width': sw*sa+'px'});

	// create navigation
	for (i = 0; i < sa; i++){
			//alert(i);
			$(".menu").append("
Div "+i+"

");
		};

	// slider effect - easing plugin not included
	$("a").click(function () {
	  var x = $("li>a.scrollTrigger").index(this);
	  $(".scrolling_box").animate({ marginLeft : -sw*x}, {duration: 200, easing: "swing" });
	});

	// lava menu
	$(".menu").lavaLamp({
		fx: "swing",
		speed: 200,
		click: function() {return false;}
	});		

});

şimdilik tam aciklayici yazacak zamanim yok bir sonraki sefere biraz daha acik anlatmaya calisacagim, tum html kodu asagidaki gibidir.

				
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
				
			

				
				ate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
				
			

				
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in volupt, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in volupt, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
				
			

				
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
				
			

				
				ate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
				
			

				
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in volupt, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in volupt, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
				
			



	bi tane de oynak var burda!
	

	display: -moz-inline-block;
	display: inline-block;

This fixes the problem

In December 2007 switched to a Macbook Intel machine, i did not seriously think about a PowerPC machine  because of compatibility issues but when i heard that i could install also windows on a mac and use the both systems together i bought it. I don’t want to keep it long but it seems that i would not change back to Windows unless a miracle happens…

Briefly what i hate in Mac OS:

MAC : In Finder, it lists directories and folders together in selected order alpabetical, by type etc., which drives you crazy when browsing a folder among thousand files, not like in Windows Explorer which is a big minus for mac. There are work arounds and silly excuses of mac users which i can’t accept as a reasonable explanation. On most blogs they say proudly, a mac user is used to create a folder by a leading space to keep it on top of all files. As if it is a good thing to perform some extra work to achieve something really simple.

MAC: Maximize window, that is also silly that you can not make a window full screen with maximize (zoom) button. You have some tools to achieve that in mac but nothing is as good as os default behaviour.

And what i like about Mac OS:

MAC: Perfect visual experience. Very powerful graphics accelerator even with onboard intel graphics chipset. Another example about its power, on a windows PC with the same configuration you can never fast forward a movie smoother than a Mac does.

MAC: BEAUTY. After working on a Mac, if you switch to windows you feel like after using XP going back to Windows 98. I really do not even want to check something on my windows machine eventhough i really need it.

You can say that they had a good make up on Vista, but Vista loses already with its performance, unnecessary explanations everywhere, strange security warnings, by trying to make it user friendly they made it for use of grannies, i admit that a person who has not seen a computer before would use it better than any other system!

Actually i was planning to write more but i can’t recall everything now, maybe i will post later about this issue, and keeping short is sometimes better…

This here is Javascript that you should add on your page

  var myMooFlowPage = {
	  start: function(){
		/* MooFlow instance with the complete UI and Viewer */
		var mf = new MooFlow($('MooFlow'), {
			startIndex: 1,
			reflection: 0.4,
			bgColor: 'transparent',
			useSlider: false,
			useAutoPlay: true,
			useCaption: true,
			useResize: true,
			useMouseWheel: true,
			useKeyInput: true,
			useViewer: true
		});
  	 mf.attachViewer();
		$$('.loadremote').addEvent('click', function(){
			mf.loadHTML(this.get('href'), this.get('rel'));
			return false;
		});
	}
  };
  window.addEvent('domready', myMooFlowPage.start);

And that is HTML code

That easy to achieve that beautiful effect!!!

This Javascript Mootools SlideFX implementation is so far one of the best which i come across around web, i already used in one of my projects and client loved it. You can see it here. So i decided to put here my experience with it.

There are several requisites that you have to download to make this nice Javascript carousel image gallery work. For those please visit the site of author of this nice mootools slideFX implementation

To use that module you have to have a working installation of openengine and unfortunately a licensed SlideShowPro but it costed me 20usd, so no big deal.

for those who are not into details, here is the result of what this tutorial shows.

!!! IMPORTANT !!! Before you continue if you don’t know one of these components that i mentioned above, please download and play with them to get the best from tutorial below.

Assuming you know how to work on both of these components, i start to tell what i did:

Create following files and directories under your OE installation,

/html/script/swfobject.js
/html/sspXML/ (make it writable [0777] )
/html/modules/ssp/
/html/modules/ssp/description.php
/html/modules/ssp/main.php
/html/modules/ssp/ssp.swf

(swfobject.js can be found here put only swfobject.js file from the package)
More Importantly you have to have ssp.swf, you can download it for 14 days trial from slideshowpro.net

And make sure following have write permissions:

/html/img/pool/
/html/img/thumbs/

Edit the description.php file as following:

Edit main.php file as following:

 "No directory selected","value" => "");
while ($row = mysql_fetch_array($result))
   {
   $select[$count] = array("name" => $row["folder_name"],"value" => $row["folder_key"]);
   $count ++;
   }
closeDB($link);
editSelect("page_text6",$select,"Selcet filepool directory");
$filepool_key = outputBlock("page_text6");

/* IMPORTANT! Change the URL below to absolute root of your site, this is
   necessary to have a working slideshow when the site is exported    */

$site_root = "http://localhost/oe/"
?>


    
\n\t\n";
	fwrite($fh, $stringData);

	while ($row = mysql_fetch_array($files))
      {
      createThumb("../html/img/pool/".$row["asset_filename"],"../html/img/thumbs/".
      $row["asset_filename"],150,120);

      $stringData = "\t\t\n";
	  fwrite($fh, $stringData);
	  ?>
      

      \n";
	fwrite($fh, $stringData);
	fclose($fh);
   }
?>

Module is ready now, but we need to make a few extras for slideshowpro to make work with OE.

Assuming you have SSP (below is taken from SSP wiki)

Open the FLA containing SlideShowPro for Flash. Open the Properties panel (Windows > Properties) and give the component instance a unique variable name. For this tutorial, we’ll name it my_ssp.

Now we need to write some ActionScript. Create a new layer in your movie timeline, and click its first frame so it’s highlighted. Open the Actions panel. If you are using the ActionScript 2 version of SlideShowPro, enter the following:

if (xmlfile) { my_ssp.xmlFilePath=xmlfile; }
if (xmlfiletype) { my_ssp.xmlFileType=xmlfiletype; }

Moreover you need to add swfobect.swf to “head” section of your website, in our case to:

/cms/templates/_system/head.php

I think we’re done, it has been a long boring tutorial but the result is easy to use and charming

So we did all these, to get the functionality and end-result pictured below:

In OpenEngine admin you create your directories and put your pictures:

filepool

then on the page that your module is added, you select the folder that you want to have your slideshow on:

select folder

Then you get this slideshow appearing on your page:

SlideShowPro

Enjoy.

And add this link to have a visual element to click on the page that you put the code above.

View Source