AngularJS ile Uygulama Geliştirme


http://www.smashingmagazine.com/2014/11/17/creating-save-later-chrome-extension-modern-web-tools adresindeki bir yazıyı okurken daha önce Silverlight-PHP ve ASP.Net MVC uygulamalarından tanıdık bir konuyu gördüm. AngularJS ile JavaScript dilinden veritabanına bağlantı gibi işlemleri yapabiliyoruz. Google’ın desteklediği bu proje ile siteler, senkron bir şekilde tam sayfa güncellenmesi yerine asenkron olarak sadece gereken bölgedeki bilgiler güncellenir. JSON olarak bilgiler gelip gidiyor. Bu sayede internet sitelerinin her tıklanmada, kaynaklarını (css, resim, script dosyaları gibi) devamlı sunucudan tekrar indirmesi gerekmiyor, hem de site içinde istediğimiz yerde güncelleme gibi işlemleri yapabiliyoruz.

ScreenShot001

Tek sayfalık bir uygulama örneği yapalım. Kodları indirmek için tıklatınız: http://sourceforge.net/projects/yunus/files/%5B2%5D%20Other%20various%20projects/PHP/angularPHP.rar/download

AngularJS ana sitesi: https://angularjs.org/

Öğretici siteler:
http://www.w3schools.com/angular/
http://www.angularcode.com/simple-task-manager-application-using-angularjs-php-mysql/
http://campus.codeschool.com/courses/shaping-up-with-angular-js/level/1/section/1/video/1 (ilk ders)

Örnekte stabil sürüm olan 1.2.27 kullandım. Altyapı olarak veritabanında MySQL, ara dil olarak da PHP kullanıyoruz. Aslında ilk videosunu seyrederken PHP gibi diller gerekmeden çalıştığını zannetmiştim. Yani HTML ve JavaScript ile dinamik site yapılabilir gibi gözüküyor ama sunucu kısmı için mecburen ya PHP ya da ASP.Net gerekli.

Görüntü için Bootstrap (Twitter’ın desteklediği bir CSS kütüphanesi) kullanabilirdik şimdilik eski tablo yöntemi ile sade bir HTML istedim.

Küçük projemizde kayıt listeleme, ekleme, silme, arama ve sıralama çalışıyor. Internet Explorer 10′da sayfa yenilemede bir sorun var, Chrome’da ise tam olarak çalışıyor. Projeyi denemek için ister “http://localhost/angularPHP” isterseniz doğrudan “index.html”yi çift tıklatın. Doğrudan index’in çalışması garip gelebilir çünkü “js/my.js” içinde bir ayarımız var:

var pageData = "http://localhost/angularPHP/php/";

“index.html” dosyasını inceleyelim:

<!doctype html>
<html ng-app="myApp">
<head>
<meta charset="iso-8859-9">
<title>Tek Sayfa AngularJS - PHP Uygulamamız</title>
<link href="css/my.css" rel="stylesheet" type="text/css">
<script src="js/angular.min.js"></script>
<script src="js/my.js"></script>
</head>
<body ng-controller="urunKontrolcusu">
<h2>Tek Sayfa AngularJS - PHP Uygulamamız</h2>
<p><em>(Single Page AngularJS with PHP-MySQL)</em></p>
<div>
<table width="700" border="0" align="center" cellpadding="5" cellspacing="0">
<tr>
<td colspan="3" bgcolor="#FFFF99" align="left"><form id="newProductForm">
<input type="text" name="name" ng-model="nameInput" placeholder="Adı"/>
&nbsp;
<input type="text" name="price" ng-model="priceInput" placeholder="Fiyat"/>
&nbsp;
<button type="submit" ng-click="addProduct(nameInput, priceInput)">&nbsp;Ekle (Add)</button>
</form></td>
<td align="center"><img id="spinner" ng-src="img/spinner.gif" style="visibility:hidden;width:40px;"></td> 
</tr>
<tr>
<td colspan="3" bgcolor="#FFFF99" align="left"><input type="text" ng-model="filterProducts" placeholder="Filter">
Sort :
<select size="1" ng-model="orderProp">
<option value="id">Id</option>
<option value="name">Name</option>
<option value="price">Price</option>
<option value="date" selected="selected">Newest</option>
</select></td>
</tr>
<tr>
<th width="45%"><p>&Uuml;r&uuml;n Adı (Product Name)</p></th>
<th width="25%">Fiyat (Price)</th>
<th width="25%">Tarih (Date)</th>
<th width="5%">Sil (Delete)</th>
</tr>
<tr ng-repeat="x in products | filter : filterProducts | orderBy:orderProp">
<td>{{ x.id }}. {{ x.name }}</td>
<td align="right">{{ x.price}} TL</td>
<td align="right">{{ x.date }}</td>
<td align="center" bgcolor="#FFFF99"><a ng-click="deleteProduct(x.id)">X</a></td>
</tr>
</table>
</div>
<p><a href="https://angularjs.org/">AngularJS</a> ile yapılmıştır.</p>
<p><a href="http://www.w3schools.com/angular/">w3schools</a>, <a href="http://www.angularcode.com/simple-task-manager-application-using-angularjs-php-mysql/">angularcode</a>: Öğreticilerinden faydalanılmıştır.</p>
<p><a href="http://sourceforge.net/projects/yunus/files/%5B2%5D%20Other%20various%20projects/PHP/angularPHP.rar/download">Download</a>: Kaynak kodları indirebilirsiniz.</p>
</body>
</html>


Mavi olarak işaretlediğim yerler yani ng- ile başlayanlar AngularJS’nin tanıdığı otomatik kullandığı nesneler. {{}} içindeki yazılanlar ise veri bağlı nesnelerdir.

Galaxy S4 Mini ve Tab 4


Gürcistan’dan biraz daha uygun fiyata aldığımız pembe “Galaxy S4-i9192” ve Pendorya MediaMarkt’tan yeni aldığımız “Galaxy Tab 4-T230” ile ilgili görüşlerimi paylaşmak istedim.

https://www.samsung.com/latin_en/support/model/GT-I9192ZWLTPA : Çift hatlı S4 Mini (900 TL)

https://www.samsung.com/uk/consumer/mobile-devices/tablets/tab/SM-T230NZWABTU : Tab 4 (350 TL)

Galaxy S5 ve Tab S şu anki en yeni telefon ve tabletler. Biz de bir önceki nesilleri uygun fiyata alıyoruz. İlle de en son donanıma geçmek zorunda değiliz.

Her ikisin de en az 2 çekirdek ve 1 GB RAM sahibi. S4’de Android 4.2.2, Tab4’te Android 4.4.2 var. Yeni güncelleştirme şimdilik yok. Teknik detaylara fazla girmeden asıl seçim yaparken göz alıcı olan ekran canlılığı ve kullanım hızının çok iyi olduğunu söylemem gerekli.

Kamera olarak S4, 8 Megapixel ile yeterli, hatta flash desteği de var. Tab 4’ün kamerası ise 3 Megapixel ve maalesef pek kaliteli çekmiyor. Neyseki çok da can alıcı bir parça değil.

Tabletin avantajı 7 inch ekran olması ve ince, hafif olması. Telefonun 4 inch ekranı çok küçük geliyor insana. Evde 4-5 cihaz birarada çalışınca ortak bir disk alanı ihtiyacı doğuyor. Çekilen fotoğraf ve videoları bir bilgisayarda toplamak gerekiyor. Online disk alanlarına güvenmiyorum, zaten özellikle senkronizasyon (eşleştirme) hizmetlerini kapatmaya çalışırım.

“Google Hangouts” kullanarak ücretsiz kamera, ses ve mesajlaşma yazılımı ile deneme yaptık. Cihazlar birbirine yakınken sesler birbirine girdi, ama bence hız ve işlevsellik hiç fena değil. Internet olan yerde gmail adresi ile iletişim kurulabilir.

Telefon veya tablette çoğu zaman tüm özellikleri ve tüm yazılımları aktif olarak kullanmıyoruz. Mesela GPS’i nerede ise hiç kullanmadım, offline çalışan iGo gibi yazılımlar var ama o kadar sık açmıyorum. Aynı şekilde Bluetooth’da çok nadir gerekiyor. Belki bir kulaklık tanıtımı gerekirse deniyorum veya bir dosya aktarmak gerekirse açarım. 3G gibi fazla pil harcayan bağlantı türünü 2G olarak değiştiririm.

Eski “Galaxy S Plus i9001”de birçok kez Android ROM yüklemesi yaptım, ama hem S4’te hem de Tab 4’e yeni bir ROM yüklemek istemiyorum. Fayda getirmek yerine her kurulumda bir özellikte problem çıkıyor. Orijinal ROM tam çalışan ROM’dur diyelim. Şu anda 4.4.4 kurulu, bazen kamera göçüyor, telefonu yeniden başlatarak düzeltiyorum.

IMDb 250 Film Seçmeler


Tatilde seyrettiğim bazı filmleri beğenime gurupladım, bu listeye televizyonda çıkanları eklemiyorum. Android uygulaması olan http://www.cepkutusu.com/1354-android-hd-film-izle-302-programi-full-apk-indir.html programı tavsiye ederim.

Kaynak : http://www.imdb.com/chart/top

Süper (seyredilmeli)

Tamam (zaman geçsin)

Sıkıcı (gerek yok)

12 Öfkeli Adam (1957) Schindler’in Listesi (1993) Cinnet (1980)
Yedi Samuray (1954) Tanri Kent (2002) Otomatik Portakal (1971)
Metropolis (1927) Hayat Güzeldir (1997) Bazilari Sicak Sever (1959)
Bir Sehir Katilini Ariyor (1931) Geçmisin Gölgesinde (1998) Yedinci Mühür (1957)
Gandhi (1982) Arka Pencere (1954) Ihtiyar Delikanli (2003)
Akil Defteri (2000) Üçüncü Adam Kim? (1949)
Garip Doktor (1964)
Baskalarinin Hayati (2006)
Gizli Teskilât (1959)
Yurttas Kane (1941)

“Metropolis” filmi en şaşırtıcı gelen oldu, çünkü 90 yıl önce yapılmış ve sahneler oldukça iyi. Birçok bilimkurgu filminin esin kaynağı olmuş. Ardından “Bir Şehir Katilini Arıyor – M” 1930 yılı için çok üst düzey denilebilir.

Oyun PC’si


Çocuklar için yeni bir PC topladık. Vatan Bilgisayar’da istediğiniz konfigürasyonda PC toplayabilirsiniz. 1-2 saat arasında bekleyerek bilgisayarınız hazır oluyor. Parçalar test ediliyor. 2 yıl parça garantisi var.

Oyun bilgisayarı olacağı için aşağıdaki gibi bir bilgisayarı tercih ettim:

  • İşlemci : Core i5 4440 3.1 GHz (84 Watt)
    (AMD FX 8320 ve Core i7 4770 arasında kararsız kaldım)
  • RAM : 8 GB Kingston HyperX 1600 MHz
  • Grafik : AMD Radeon R9-270 2GB 256bit Dx 11.2 (175 Watt)
    (GTX 770 ve GTX 650Ti arasından Radeon’a geçtik)
  • Disk : Seagate 1TB 8GB SSHD 7200rpm
  • Ekran : AOC 21.5″ i2269 IPS LED 1920*1080
  • Anakart : Asus H87M-Pro 1150
  • Kasa : Cooler Master 600W ATX
  • Klavye, fare, Asus DVD RW, USB wireless adaptör, 3m 5’li priz, 1+1 Creative A60 speaker

Toplamda 2600 TL yani 1200 dolar gibi oldu. İşlemci ve ekran kartında kararsız kaldım fakat maddi nedenlerde GTX ve Core i7’ye geçemedik.

İlk testte “Windows 7 Professional 64 bit” bu puanı verdi:

cemREnPc

Toplayan bizim öğrencilerden biri çıktı:

SAMSUNG

Toplama PC için yardımcı siteler:

Daha oyun testi yapmadım, ama blender için kötü oldu, GPU render alamıyor (GeForce olmalı idi). Yazılım, sürücü ve firmware güncellemeleri ile sistem daha oturacaktır. Sessiz ve orta bir hız ile çalışan bilgisayarımız var.

Windows hibrit diske puan vermedi, yine de BIOS’u biraz karıştırınca SSHD desteği olduğunu görüyoruz. Windows açılış hızı başlangıçta açılan tüm programlar kapalı iken bir dakikanın altındadır. Sadece anakart CD’sinden kurduğum 60 günlük Norton açılışta geliyor.

Minimal, Responsive, Asynchronous Site – Day 2


We are continuing to “make a simple site” with modern (for now) technologies:
HTML5, CSS3, jQuery1.11, Bootstrap 3.1 and PHP5…

* Previous lesson is here:
http://tbagriyanik.wordpress.com/2014/05/17/minimal-responsive-asynchronous-site-day-1/

1-      We have a “synchronous” responsive PHP site now, but we want to use jQuery or Ajax power for loading/sending information without full page refresh and secondly we need some nice animations with jQuery!
* From now on, javascript disabled browsers will not read or send data anymore…

2-      I will use a tutorial here: http://www.tutorialspoint.com/jquery/jquery-ajax.htm. You can find a lot of tutorial sites in the internet, this is good news.

3-      First I will remove “mysql_connect” to another php file.

Screen Shot 05-18-14 at 01.36 PM

4-      We need another empty php file for data processing. In this file we will do all “database” works, so you need to add “connection.php” here.
Screen Shot 05-18-14 at 01.51 PM
5-      “dataprocess.php” will send or receive, this means it is the “hearth” of the site. Let’s put a “switch” to detect what is coming:

<?phpinclude(“connection.php”);

if(isset($_GET["process"])){

switch($_GET["process"]){

case “select”:

break;

case “delete”:

break;

case “insert”:

break;

case “update”:

break;

default:

echo “error 1 – no selected process”;

}

}else

echo “error 2 – no incoming request”;

?>

6-      We have something at PHP (server) side, so how will we use it in the client side? Answer is Ajax. Let’s go to our index.php and add some jQuery lines to the head:

<script type=”text/javascript” src=”js/jquery-1.11.1.js”></script>

<script type=”text/javascript”>

$(document).ready(function() {

$.ajax({

type: “GET”,

url: “dataprocess.php”,

dataType: “html”,

success: function(response){

$(“#ourcontent”).html(response);

}

});

});

</script>

</head>

7-      Looks weird $ signs and commas I know, but we need to go on. How about the “ourcontent” id? Where is it? It is here, you might guess:

<div class=”col-xs-12 col-sm-10″ id=”ourcontent”>

<?php

$selectQuery = mysql_query(“SELECT * FROM asite_db.asite_table LIMIT 0,5″);

Screen Shot 05-18-14 at 02.13 PM

When we run, we see this error. Did we do something wrong? No, it is working properly.

8-      Errors or warnings can look better, thanks to the Bootstrap’s well organized CSS:

                                       default:

echo “<div class=\”alert alert-warning\”>

<strong>Error 1</strong> No selected process.

</div>”;

}

}else

echo “<div class=\”alert alert-danger\”>

<strong>Error 2</strong> No incoming request.

</div>”;

?>

First we see for a little while MySQL error, then we see this red error message. Let’s fix it.

9-      So we don’t need any “mysql_query” at index.php too. Move it to the dataprocess.php:

<div class=”col-xs-12 col-sm-10″ id=”ourcontent”></div>

Change index.php

switch($_GET["process"]){

case “select”:

$selectQuery = mysql_query(“SELECT * FROM asite_db.asite_table LIMIT 0,5″);

while($row=mysql_fetch_array($selectQuery)):

?>

<div class=”col-sm-4″>

<div class=”panel panel-default”>

<div class=”panel-heading”>

<h3 class=”panel-title”>Item <?php echo $row["id"]?></h3>

</div>

<div class=”panel-body”><?php echo $row["name"]?></div>

<div class=”panel-footer”><a class=”btn btn-primary” href=”#” role=”button”>View details »</a></div>

</div>

</div>

<?php endwhile;

break;

Insert like this. If we send “select” then we will get out content.

Screen Shot 05-18-14 at 02.19 PM

10-   Hard part is finished. Change the request to “select” in the index.php:

      $.ajax({

type: “GET”,

url: “dataprocess.php?process=select”,

dataType: “html”,

success: function(response){

$(“#ourcontent”).html(response);

}

});

Screen Shot 05-18-14 at 02.52 PM

Screen Shot 05-18-14 at 02.56 PM

For the » sign, I changed the encoding to UTF-8 for “dataprocess.php”.

11-   We are done, mostly. This is not perfect, you always need to be carefull about “security”. Anyone can send or receive data from “dataprocess.php”. You need to tweak for unwanted inputs and errors too.

12-   I will give an example for the animation (effects) now. Whenever I hover a panel, I want to see the “number” field to use as a product price.

13-   Where can we put the price information? I chose “span” tag absolutely positioned:

?>

<div class=”ourdata col-sm-4″>

<div class=”panel panel-default”>

<div class=”panel-heading”>

<h3 class=”panel-title”><span class=”price”>$<?php echo $row["number"]?></span>

Item <?php echo $row["id"]?></h3>

</div>

Add the red properties to dataprocess.php.

success: function(response){

$(“#ourcontent”).html(response);

$(“.ourdata”).on(“mouseenter”,function(){

$(this).find(“.price”).animate({“top”: “-10px”,”opacity”: “1″}, “fast”);

});

$(“.ourdata”).on(“mouseleave”,function(){

$(this).find(“.price”).animate({“top”: “0px”,”opacity”: “0″}, “fast”);

});

}

});

});

 

</script>

<style type=”text/css”>

.price {

top: 0px;

right:20px;

opacity: 0;

font-weight: 700;

font-size: 16px;

text-align:right;

-webkit-transform: rotate(20deg);

transform: rotate(20deg);

position: absolute;

}

</style>

We are in index.php. This nice idea is taken from: http://try.jquery.com/levels/5/sections/11

Screen Shot 05-18-14 at 04.30 PM

14-   We can detect the price and see it animating.
Now I know you have a lot of ideas flying in your head! Please go on developing!

Test Address: http://yunus.sourceforge.net/asite/

Minimal, Responsive, Asynchronous Site – Day 1


Let’s make a simple site with modern (for now) technologies:
HTML5, CSS3, jQuery1.11, Bootstrap 3.1 and PHP5…
* “Adobe Dreamweaver CS6” is our text editor. You need to be familiar for all HTML, CSS, javascript and PHP basics…

1- Download these files:
a. Bootstrap: http://getbootstrap.com/customize/ (front-end CSS framework)
b. jQuery: http://jquery.com/download/ (Lightweight JavaScript library)
c. PHP&MySQL: https://www.apachefriends.org/download.html (local server)Screen Shot 05-17-14 at 08.33 PM

2- Install or start your apache and mysql servers:Screen Shot 05-17-14 at 08.27 PM

3- Make a database with phpmyadmin:Screen Shot 05-17-14 at 08.32 PM

4- Put your files in a folder in your “c:\xampp\htdocs” root:Screen Shot 05-17-14 at 08.35 PM

5- We don’t have to use every file we download, we can delete or put another folder some files. I want to use uncompressed files for javascript and css files to observe their contents to learn better. Others can be deleted.
6- In Dreamweaver, I opened a new PHP (HTML5) index.php file:Screen Shot 05-17-14 at 08.52 PM

7- Add the javascript and css files:

<!doctype html>

<html>

<head>

<meta charset=”iso-8859-9″>

<title>a Site – minimal</title>

<link rel=”stylesheet” type=”text/css” href=”css/bootstrap.css”>

<script src=”js/jquery-1.11.1.js”></script>

</head>

<body>

<script src=”js/bootstrap.js”></script>

</body>

</html>

8-      If you don’t have any idea, check Bootstrap’s http://getbootstrap.com/getting-started/ and http://getbootstrap.com/examples.
9-      Add this line to the head for mobile users:

<metaname=”viewport”content=”width=device-width, initial-scale=1″>

10-      We generally add <script> to the head but for faster loading, they advice us to put them to the previous line of </body>.

11-      Now we need a container div in the body. I prefer class “container-fluid” to fit the screen:

<divclass=”container-fluid”> … </div>

12-      Here I added a row and a single column:

<html><head>

<meta charset=”iso-8859-9″>

<title>a Site – minimal</title>

<meta name=”viewport” content=”width=device-width, initial-scale=1″>

<link href=”css/bootstrap.css” rel=”stylesheet” type=”text/css”>

<script src=”js/jquery-1.11.1.js”></script>

</head>

 

<body>

<div class=”container-fluid”>

<div class=”row”>

<div class=”col-lg-12″>

<h1 class=”well”>a Site – Minimal, Responsive, Asynchronous Site</h1>

</div>

</div>

</div>

<script src=”js/bootstrap.js”></script>

</body></html>Screen Shot 05-17-14 at 09.19 PM

13-      Title looks ok for now, let’s add 2 columns for menu and content:

  <div class=”row”>

<div class=”col-sm-2″>

<h3 class=”well”>Menu</h3>

</div>

<div class=”col-sm-10″>

<h3 class=”well”>Content</h3>

</div>

</div>

14-       Add some fixes:

<div class=”container-fluid”>

<div class=”jumbotron”>

<div class=”row”>

<div class=”col-lg-12″>

<h2>a Site – Minimal, Responsive, Asynchronous Site</h2>

</div>

</div>

</div>

<div class=”row”>

<div class=”col-xs-12 col-sm-2″>

<h3 class=”well”>Menu</h3>

</div>

<div class=”col-xs-12 col-sm-10″>

<h3 class=”well”>Content</h3>

</div>

</div>

</div>

Screen Shot 05-17-14 at 09.42 PM

For desktop size we have 2 columns and a large h1.Screen Shot 05-17-14 at 09.43 PM

After we resize, we see 1 column and smaller h1.

15-      Let’s add nesting columns inside the “content” class:

 <div class=”col-xs-12 col-sm-10″>

<div class=”col-sm-4″>

<div class=”panel”>

<div class=”panel-heading”>

<h3 class=”panel-title”>Item 0</h3>

</div>

<div class=”panel-body”> Item’s details </div>

</div>

</div>

<div class=”col-sm-4″>

<div class=”panel”>

<div class=”panel-heading”>

<h3 class=”panel-title”>Item 1</h3>

</div>

<div class=”panel-body”> Item’s details </div>

</div>

</div>

<div class=”col-sm-4″>

<div class=”panel”>

<div class=”panel-heading”>

<h3 class=”panel-title”>Item 2</h3>

</div>

<div class=”panel-body”> Item’s details </div>

</div>

</div>

</div>Screen Shot 05-17-14 at 09.49 PM

Full size we see 3 items, after resizing we see everthing 1 column and readable for mobil users.Screen Shot 05-17-14 at 09.51 PM

16-      Now we can add “real” data for item panels, for connecting to the MySQL server, add this lines inside the body tag:

<body role=”document”>

<?php

@mysql_connect(“localhost”,”root”,”pass”) or die(“database server is down? <br/> “.mysql_error());

?>

17-      Filling data is “syncronous” for now:

<div class=”col-xs-12 col-sm-10″>

<?php

$selectQuery = mysql_query(“SELECT * FROM asite_db.asite_table LIMIT 0,5″);

while($row=mysql_fetch_array($selectQuery)):

?>

<div class=”col-sm-4″>

<div class=”panel”>

<div class=”panel-heading”>

<h3 class=”panel-title”>Item <?php echo $row["id"]?></h3>

</div>

<div class=”panel-body”><?php echo $row["name"]?></div>

<p><a class=”btn btn-primary” href=”#” role=”button”>View details »</a></p>

</div>

</div>

<?php endwhile;?>

</div>Screen Shot 05-17-14 at 10.13 PM

Looks better and works! So, we came the last part.

18-      Now, we will convert this “full page refresh” to asyncronous by using “jQuery”. We can also use this library to animate, to add/remove tags dynamically. Before this, let me give you the last full HTML code:

<!doctype html>

<html>

<head>

<meta charset=”iso-8859-9″>

<title>a Site – minimal</title>

<meta name=”viewport” content=”width=device-width, initial-scale=1″>

<link rel=”stylesheet” type=”text/css” href=”css/bootstrap.css”>

<script src=”js/jquery-1.11.1.js”></script>

</head>

 

<body role=”document”>

<?php

@mysql_connect(“localhost”,”root”,””) or die(“database server is down?<br/>”.mysql_error());

?>

<div class=”container-fluid”>

<div class=”jumbotron”>

<div class=”row”>

<div class=”col-lg-12″>

<h1>a Site – Minimal, Responsive, Asynchronous Site</h1>

</div>

</div>

</div>

<div class=”row”>

<div class=”col-xs-12 col-sm-2″>

<div class=”list-group”> <a href=”index.php” class=”list-group-item active”> Home </a> <a href=”#” class=”list-group-item”>Projects</a> <a href=”#” class=”list-group-item”>About</a> </div>

</div>

<div class=”col-xs-12 col-sm-10″>

<?php

$selectQuery = mysql_query(“SELECT * FROM asite_db.asite_table LIMIT 0,5″);

while($row=mysql_fetch_array($selectQuery)):

?>

<div class=”col-sm-4″>

<div class=”panel”>

<div class=”panel-heading”>

<h3 class=”panel-title”>Item <?php echo $row["id"]?></h3>

</div>

<div class=”panel-body”><?php echo $row["name"]?></div>

<div class=”panel-footer”><a class=”btn btn-primary” href=”#” role=”button”>View details »</a></div>

</div>

</div>

<?php endwhile;?>

</div>

</div>

<div class=”footer”>

<p>Copyleft 2014</p>

</div>

</div>

<script src=”js/bootstrap.js”></script>

</body>

</html>Screen Shot 05-17-14 at 10.31 PM

Looks lovely for me! If you don’t like the white-blue default theme, look for “Bootstrap” templates…

19- See you at the other page : http://tbagriyanik.wordpress.com/2014/05/18/minimal-responsive-asynchronous-site-day-2/

ZBrush 4R6

ZBrush 4R6


ZBrush programı ile temel olarak çizim ve heykeltraş özelliklerini sunan bir programdır. 1 aydır kullandığım programda karşılaştığım bazı noktalardan bahsedeyim.

zbrush_logo Sitesi: www.pixologic.com

3Dmax, Maya ve blender kullanıcıları için tanıdık gelen birçok menü ve özellik görebilirsiniz, eğer ilk kez ZBrush programını kullanıyorsanız biraz bocalayabilirsiniz. 3D programlara göre çok da zor olduğunu söyleyemem, eminim biraz çalışsanız (bir iki hafta) uyum sağlayabilirsiniz. Çünkü program içinde animasyon, video düzenleme, oyun yapımı gibi fazladan özellikleri barındırmıyor, sadece illustrasyon üzerine odaklanmış. Sadece standart fırça ve “move” fırçası ile bile güzel uygulamalar yapılabiliyor.

Screen Shot 04-05-14 at 11.52 PMVarsayılan açılış ekranı bu resimdeki gibidir.

Screen Shot 04-05-14 at 11.53 PMBu pencere de benim özelleştirdiğim halidir. Tema, panel düzeni ve birkaç temel kısayol özelleştirmesi yaptım.

Öğrenmek için seyrettiğim ve bazılarını uyguladığım videolar:

Fare ile de çizim/illustrasyon yapabilirsiniz, ben bazen fare bazen de Wacom grafik tablet arasında gidip geliyorum. Grafik tablete daha tam alışamadım. Tabletin avantajı fare imlecinin “basınç” değerini yazılıma aktarmasıdır.

Yaptığım bazı çalışmalardan resimler:

blender 3d programı içinde de şimdiye kadar heykeltraş işlemi yaptık, hatta birçok terim birbiri ile aynı; Subdivide, UV Map, Vertex Groups gibi. Ama blender ile bu iş pek de kusursuz değil, daha geliştirilme aşamasında, “Dynamic Topology” ve “Remesh Modifier” gibi komutlar ile yeni tanışıyoruz. “Limited Dissolve” ve “Triangulate Face” gibi komutları da fena değil. Ngon’lara şimdilik pek sıcak bakmıyoruz, çünkü ileride oyun ve karmaşık animasyon yapmak gerektiğinde sorunlar çıkabiliyor.

ZBrush kullanırken karşımız çıkan bazı garip durumlar var:

  • Dosya nasıl kaydedilir?
    Aslında 2 şekilde kaydedilebilir, ister Tool ister Proje olarak. “Document*Save” dediğimizde ister dosya (zbr), istersek fırça aracı (ztl) olarak kaydedebiliriz. “File*Save As (Ctrl-S)” ile tüm yapılanlar proje dosyası (zpr) olarak saklanabilir.
  • Pencere yerleşimi ve tema nasıl kaydedilir?
    “Preferences*Store*Store Config” ile yapılabilir. Klavye özelleştirmeleri de “Preferences*Hotkeys*Store” ile StartupHotkeys metin dosyası içine saklanır.
  • Klavye kısayolu nasıl atanır?
    Tuş basımı atanacak öğeye (herhangi bir pencere parçası olabilir) Ctrl ve Alt ile basınır, istenen tuş basılır. Screen Shot 04-06-14 at 12.20 AM
  • Aynı çalışma içine farklı bir nesne nasıl eklenebilir?
    Nesneler aslında katman gibi saklanıyor. Kontrol edildikleri panelin adı “Tool*SubTool” olarak geçiyor, ekleme ve silme gibi işlemler buradadır.
  • Nesneyi nasıl taşıyabilirim?
    Nesne çizim modunda iken taşınamaz. Eklenen cisim “Edit – kısayolu T tuşu” durumuna alınmalıdır. W ile taşıma, E ile boyutlandırma ve R ile döndürme yapabilirsiniz. Screen Shot 04-06-14 at 12.27 AM
  • Aynalama (blender’da Mirror komutu) ile çizim nasıl yapılır?
    Cismin hem sağı hem solunda aynı çizimleri yapmak için “Transform*Activate Symmetry (X kısayolu)” kullanılabilir. Screen Shot 04-06-14 at 12.30 AM
  • Lightbox penceresi neden açık geliyor?
    “Preferences*Lightbox*Open At Launch” seçeneğinden kapatabilirsiniz. Ayarları kaydetmeyi unutmayın. Eğer açık gelebilir derseniz zaten virgül (,) kısayolu ile de bu paneli açıp kapatabilirsiniz. Screen Shot 04-06-14 at 12.34 AM
  • ZBrush 3 boyutlu bir program mıdır?
    Aslında kendine 2.5 boyut gibi ne 2d ne 3d bir yol seçmişler. Yani Paint gibi 2 boyu çizerken kabarık ve çukur yaparak, çizim üzerindeki açıları bilerek de 3 boyut çizim oluşturabiliyor. Screen Shot 04-06-14 at 12.51 AMPhotoshop’daki fırçaların 3 boyutlu hali gibi de diyebiliriz.
  • Saç ve tüy gibi şeyleri nasıl yapabilirim?
    Bunun için önce “maske – ctrl tuşu ile seçim” ve “FiberMesh” seçeneklerini keşfetmemiz gereklidir. Maskelenen alana saç/ot/çimen eklemek için “Lightbox*Fibers” denilir. Screen Shot 04-06-14 at 12.57 AM
  • Render nasıl alınır?
    “Ctrl-Shift-R” ile alınan resim görüntüsünü kaydetmek için “Document*Export*Kayıt türü:*.jpg” diyebilirsiniz. Screen Shot 04-06-14 at 12.58 AM
  • Nesne diğer 3d programa nasıl atılır?
    *.obj dosya türünde aktarım için “Tools*Export” menüsü kullanılabilir. Aynı yerde “Tools*Import” ile de başka programdan dosya içeri aktarabilirsiniz.
    Screen Shot 04-06-14 at 01.02 AM