Grafik Tasarım Öğrenmek İsteyenlere Tavsiyeler

Grafik tasarım günümüzde oldukça yaygın bir meslek haline gelmiştir, reklam sektörü yanısıra bir çok firmada kendi bünyelerinde grafik tasarımcı bulundurmaktadır. Grafik tasarım mesleğini okullardan veya kurslardan öğrenenler kadar alaylı dediğimiz çıraklıktan başlayanlarında sayısı oldukça fazladır, grafik tasarımcı herkes olabilirmi diye sorarsak buna hem evet hemde hayır cevabını verebiliriz. Evet, grafik tasarım programlarını kullanmayı öğrenebilirsiniz ve size grafik tasarımcı diyebilirler. Hayır, grafik tasarım programlarını kullanmak sizi grafik tasarımcı yapmaz.

Öncelikle grafik tasarımcı olmak isteme nedeniniz önemlidir, neden bu mesleği tercih ediyorsunuz, günümüzde revaşta olan bir meslek olduğundan mı yoksa ilgi duyduğunuz bir meslek olduğundan mı, peki her iki durum size neler sunar.

Şayet revaşta bir meslek olduğunu düşünerek başlıyorsanız, bir yerden sonra meslekten sıkılmaya başlayacağınız kesindir, bunun yanı sıra kendinizi geliştirmeyede uğraşmayacaksınızdır. Biz yinede revaşta bir meslek olduğunu düşünenlere bir kaç öneriyle yol gösterelim. Proramları öğrendiğinizi varsayarak, mesleğinizi yürütmek adına öncelikle hazır şablonlara fazlasıyla ihtiyaç duyacaksınız en azından bunun için internetten bol bol hazır şablon indirip kendinize arşiv yapmanız gerekecek, yine hazır yapılmış tasarımları kendinize örnek olacaksınız, bir nevi kopya çekerek mesleğinizi yürüteceksiniz, şayet kopya çekmekle ilgili sıkıntınız yoksa ve çektiğiniz kopyaları kendinize uyarlama yeteneğine sahipseniz işinizi bir şekilde yürütürsünüz. Ama grafik tasarımcı aslında olmamış olursunuz, bunu sorun etmiyorsanız sıkıntı yok demektir.

Bu meslek ilginizi çektiği için başlamak istiyorsanız, yine programları öğrendiğiniz varsayarak, öncelikle araştırmanız gerek yada bilmeniz gereken bazı konular bulunmaktadır, bunları sıralamak gerekirse.

Renk uyumu: bununla ilgili internette kaynak bulunduğu gibi göze hoş gelen uyumlu renkleri kendinizde anlayabilirsiniz, renklerle yapılabilecek en yanlış şey ise renklerin insanlar üzerindeki etkisini bilmeden bu işe başlamak olacaktır, her renk insanlar üzerinde farklı bir duygu ve his oluşturmaktadır, örneğin kırmızı renk dikkat çekici olduğu kadar insanlarda bir süre sonra tehlike yani tedirginlik hisside uyandırmaktadır ve siz bunu bilmeden yapacağınız bir çalışma size beklediğiniz sonucu vermeyecektir.

Typography: forma uygun yazmak demektir, bu konuda bilgi sahibi olmanız gerekmektedir, konunun internette fazla kaynağı olmasada, ne olduğunu ve nasıl kullanacağınızı anlayabileceğiniz kadar bilgi bulunmktadır, typography nin size getirilerine bakacak olursak, yaptığınız çalışmalarda yazı tipinin, punto büyüklüğünün, satır uzunluğunun ve satır arası boşlukların ne kadar olması gerektiği konusunda bilgi sahibi olmanıza yardımcı olacaktır, örneğin bir billboard çalışmasına uzun yazı koymanız gerekmektedir, işte burada insanların o yazıyı okurken gözlerinin bir süre sonra yorulup sıkılıp girmemeleri için yazı tipinin, puntosunun, satır uzunluğunun ve satır arası boşlukların nasıl olması gerektiğini bilmeniz gerekir, çünkü böyle bir yazı mecbur olmadığı sürece kimse okumayacaktır, bir ipucu daha uzun bir metni BÜYÜK harflerle yazarsanız bütün harfler aynı boyda olduğu için okuyan kişi bu yazıyı okuma güçlüğü çekecektir, bu nedenler uzun yazıları “BÜYÜK” harf yerine “küçük” harflerle yazmalısınız.

Vurgu: belirtmek istediğiniz yada dikkat çekmek istediğiniz olay, düşünce, ürün diyebiliriz. Ön planda olmasını istediğiniz durumu tasarım içerisinde bulunan diğer nesnelere göre daha göze çarpıcı hale getirmelisiniz, bunun yanısıra vurguyu bir iki kelime yazı ilede yapma imkanınız vardır. Kısaca vurgu yaptığınız çalışmanızda ilk göze çarpan yazı veya nesnedir.

Ve bunlar dışında öğrenmeniz gereken bir çok konu var diyebilirim fakat fazla uzatmak istemediğimden temel bilmeniz gereken konular üzerinde durmak istedim, yine bir öneri olarak bol bol tasarım yapın ve kendi kütüpanelerinizi kendiniz hazırlayın, yapılmış tasarımlara bakarak nelere dikkat edildiğini az çok kafanızda oluşturun. Sizden istenen tasarımlarda ürünü veya olayı tanıyın, anlayın daha sonra hedef kitleyi az çok tanıyın, unutmayınki 7 yaşındaki çocuğun dikkatini çekmek veya ona ulaşmakla 70 yaşındaki bir yetişkinin dikkatini çekmek ona ulaşmak aynı yolla olmayacaktır veya köyde yaşayan bir insanla şehirde yaşayan bir insanın ihtiyacı aynı değildir, kime nasıl ulaşacağınızı, olayın veya ürünün kimlere en doğru şekilde hitap edeceğini yapacağınız tasarımdaki kullanacağınız başlıklar, sloganlar, yazılar ve görsellerle belirleyeceksiniz. Bu nedenle gerçek bir grafik tasarımcı olmak için işinizi severek yapmalısınız ve kendinizi sürekli geliştirmelisiniz.

Peki hangi proramları kullanmalısınız, ilk olarak kesinlikle photoshop bilmeniz gerekir her an işinizin düşeceği bir programdır, özellikle resimlerde yapacağınız değişikler için mutlaka photoshop bilmeniz gerekir, zaten iyi bir grafiker resimler üzerinde istediği gibi oynamayı bilmelidir, tabi photoshop sadece resim için kullanılmaz tasarımda yapabileceğiniz bir programdır fakat vector tabanlı olmaması size vector tabanlı bir program öğrenmek zorunda bırakır, size tavsiye edebileceğim vector tabanlı üç program bulunmaktadır, corelDraw, illustrator bu iki program çok yaygın olarak kullanıldığından mutlaka ikisinide öğrenmenizi tavsiye ederim, ayrıca birini öğrenince diğerinide öğrenmek bana göre o kadarda zor değil, gerçi bu bana görede olabilir fakat vektor tabanlı programlar aynı özellikleri hemen hemen aynı ikonlar altınada kullandığından ve özellikler isim olarak aynı olduğundan en azından yerlerini bulmak ve uygulama açısından fazla zorluk çekmezsiniz, ayrıca programların kullanımlarıyla ilgili internette bir çok dökümanda bulunmaktadır, gelelim üçüncü vector tabanlı programa indesign diyebilirim, program daha çok kullanım alanı çoklu sayfa yani kitap gibi fazla sayfası bulunan çalışmalarda kullanılır.

Şimdilik bu kadar diyorum ve daha sonra prgramların genel kullanımı ve en çok işinize yarayacak özelliklerini anlatan bir yazı hazırlayacağım.

CorelDRAW grafik tasarım grafikerlere tavsiyeler Illustrator photoshop

Web Tasarım Nedir, Nereden Başlamalı

internet dünyası 1990 yılında html ile başlamıştır ve zamanla bugünki halini almıştır. İnternet dünyası başta bilgi paylaşım olarak başlamış olsa da günümüzde daha çok ticari amaca yönelmiş durumdadır. Bir çok kişi ve firmalar internet üzerinden maddi kazanç sağlayacak web siteleri yayınlanmaktadırlar. Hergün sayısı artan ve vazgeçilmez hale gelen web siteleri, web programcılığının yanı sıra web tasarımını da kullanıcıya hitap etmesi açısından önemli olduğunu kabullenmiştir.

Arka planda güçlü bir yazılım olması kadar, ön planda kullanıcıların beğenisine ve kullanım kolaylığına da önem verilmesi web tasarımcılara büyük sorumluluk yüklemektedir. Özellikle son zamanlarda responsive kullanımı ile birlikte web tasarımcıların yükü artmıştır.

Web tasarımla ilgilenmek isteyen web tasarımcı adayları için nereden başlamaları gerektiğine dair bir kaç öneride bulunmak gerekirse, eğer niyetiniz sadece şablon çıkarmaksa sizin için photoshop yeterli olacaktır, photoshopta tasarladığınız şablonu slice tool aracıyla parçaladıktan sonra web formatında kaydetmeniz yeterli, fakat şablon çıkarmaktan fazlasını düşünüpte kodlamaya geçmek istiyorsanız o zaman html den başlamanız gerekmektedir.

Olmazsa olmazımız html
Html, web tasarım gibi web programcılığında temelidir, html oldukça basit ve anlaşılır bir dil yapısına sahip olduğundan öğrenilmesi de kolaydır, en son html5 ile gelen yenilikler ile daha da güçlendirilmiştir.

Sayfalarımıza şablon hazırlamak için css
Css, şablon hazırlamak için kullanılır, yazı rengi, stili, boyutlandırma gibi özellikler atamanıza yarar, kullanım olarak sayfa tasarımlarınızı stil dosyalarında bir kere tanımlayarak her istediğiniz sayfaya link yoluyla dosyayı çektikten sonra, kullanıcı tarafında görünmesini istediğiniz özellikleri class ve id isimleri ile tanımlayabilirsiniz buda sayfaların ve sizin çalışma yükünüzü hafifletmiş olacaktır, en son css3 ile daha da zenginleştirilmiştir.

Animasyonlarımız için Jquery
Jquery, javascript kütüphanesidir, genel olarak animasyonlarda kullanılmaktadır, flash programına alternetif programdır, daha önce flash programıyla yapılan animasyonlar sayfaları ağırlaştırdığından, jquery günümüzde flash ile yapılan çalışmaların yerine tercih edilmeye başlamıştır. Jquery öğrenmeden önce mutlaka javascript konusunda bilginiz olması gerekmektedir. Html ve css dillerine göre biraz daha karmaşık bir yapısı vardır, fakat mantık olarak anlaşılması zor değildir.

Ve son olarak responsive ve bootstrap
responsive, web tasarımda uyumluluk, duyarlılık anlamına gelir, yani ekran boyutuna göre şekil alan yapı da diyebiliriz. Günümüzde responsive tasarımdan adını sıkça duyduğumuz twitter bootstrap yapısıdır, bootstrap’ın sitesinden indirdiğiniz hazır kütüphaneleri sayfanıza ekledikten sonra sitede bulunan örneklerden yola çıkarak ekran boyutunu rahatlıkla uyumlu hale getirebiliyorsunuz, şayet bootstrap’ın vermiş olduğu kütüphanelerde değişiklik yapmak isterseniz, hazır kütüphanelere dokunmadan kendi stil dosyanızı oluşturarak değiştirmek istediğiniz class veya id adıyla uygulamak istediğiniz özelliği tanımlamanız yeterli olacaktır. Bootstrap hakkında fazla türkçe kaynak bulunmamaktadır fakat kendi sitesinden örneklere bakarak ta nasıl kullanılacağı hakkında bilgi edinmeniz zor olmayacaktır.

bootstrap css html jquery web tasarım nedir

Template Çalışmam (3)

özel bir firmaya hazırladığım bootsrap template çalışmamın ön taslağıdır.

  TEMAYA AİT DEMOYU BURADAN GÖREBİLİRSİNİZ

tema template

Template Çalışmam (2)

özel bir firmaya hazırladığım bootsrap template çalışmamın ön taslağıdır.

TEMAYA AİT DEMOYU BURADAN GÖREBİLİRSİNİZ

tema template

Template çalışmam

özel bir firmaya hazırladığım bootsrap template çalışmamın ön taslağıdır.

  TEMAYA AİT DEMOYU BURADAN GÖREBİLİRSİNİZ

tema template

Bootstrap Tables Örnekleri

Bootstrap tablo örneklerini görebilmek için aşağıdaki kodları bootstrap standart kodları ile ekleyip çalıştırın.

<div class="container">

<h3 style="color:blue">standar tablo</h3>
<table class="table">
<tr>
  <td><h4> tablo hücresi... </h1></td>
  <td><h4> tablo hücresi... </h1></td>
  <td><h4> tablo hücresi... </h1></td>
  <td><h4> tablo hücresi... </h1></td>
  <td><h4> tablo hücresi... </h1></td>
  </tr>
  <tr>
  <td>tablo hücresi...</td>
  <td>tablo hücresi...</td>
  <td>tablo hücresi...</td>
  <td>tablo hücresi...</td>
  <td>tablo hücresi...</td>
 </tr>
</table></br>

<h3 style="color:blue">çizgili tablo</h3>
<table class="table table-striped">
<tr>
  <td><h4> tablo hücresi... </h1></td>
  <td><h4> tablo hücresi... </h1></td>
  <td><h4> tablo hücresi... </h1></td>
  <td><h4> tablo hücresi... </h1></td>
  <td><h4> tablo hücresi... </h1></td>
  </tr>
  <tr>
  <td>tablo hücresi...</td>
  <td>tablo hücresi...</td>
  <td>tablo hücresi...</td>
  <td>tablo hücresi...</td>
  <td>tablo hücresi...</td>
 </tr>
</table></br>

<h3 style="color:blue">hücreli tablo</h3>
<table class="table table-bordered">
<tr>
  <td><h4> tablo hücresi... </h1></td>
  <td><h4> tablo hücresi... </h1></td>
  <td><h4> tablo hücresi... </h1></td>
  <td><h4> tablo hücresi... </h1></td>
  <td><h4> tablo hücresi... </h1></td>
  </tr>
  <tr>
  <td>tablo hücresi...</td>
  <td>tablo hücresi...</td>
  <td>tablo hücresi...</td>
  <td>tablo hücresi...</td>
  <td>tablo hücresi...</td>
 </tr>
</table></br>

<h3 style="color:blue">hover, üzerindeyken satırlar renklenen tablo</h3>
<table class="table table-hover">
<tr>
  <td><h4> tablo hücresi... </h1></td>
  <td><h4> tablo hücresi... </h1></td>
  <td><h4> tablo hücresi... </h1></td>
  <td><h4> tablo hücresi... </h1></td>
  <td><h4> tablo hücresi... </h1></td>
  </tr>
  <tr>
  <td>tablo hücresi...</td>
  <td>tablo hücresi...</td>
  <td>tablo hücresi...</td>
  <td>tablo hücresi...</td>
  <td>tablo hücresi...</td>
 </tr>
 <tr>
  <td>tablo hücresi...</td>
  <td>tablo hücresi...</td>
  <td>tablo hücresi...</td>
  <td>tablo hücresi...</td>
  <td>tablo hücresi...</td>
 </tr>
</table></br>


<h3 style="color:blue">renkli tablo ve renklerin bootstrap ta kullanım amaçları</h3>

<table class="table">
<tr>
  <td class="active">active tablo hücresi...</td>
  <td class="success">success tablo hücresi...</td>
  <td class="warning">warning tablo hücresi...</td>
  <td class="danger">danger tablo hücresi...</td>
  <td class="info">info tablo hücresi...</td>
  </tr>
  <tr>
  <td class="info">info tablo hücresi...</td>
  <td class="danger">danger tablo hücresi...</td>
  <td class="warning">warnin tablo hücresi...</td>
  <td class="success">success tablo hücresi...</td>
  <td class="active">active tablo hücresi...</td>
 </tr>
</table>

<h5 style="color:blue"> yukarıdaki renklerin bootstrapta kullanım alanları </br>
.active = belirli bir satır veya hücreye vurgulu renk uygular </br>
.success = başarılı ya da pozitif eylemi gösterir </br>
.info = nötr bilgilendirici değişiklik veya eylemi gösterir </br>
.warning = dikkat gerekebilir bir uyarı gösterir </br>
.danger = tehlikeli veya potansiyel olumsuz bir etki gösterir </br>
</h5>
</br>

<h3 style="color:blue">table-responsive tablonun altına scrooll ekler</h3>
<div class="table-responsive">
<table class="table">
<tr>
  <td><h4> tablo hücresi... </h1></td>
  <td><h4> tablo hücresi... </h1></td>
  <td><h4> tablo hücresi... </h1></td>
  <td><h4> tablo hücresi... </h1></td>
  <td><h4> tablo hücresi... </h1></td>
  </tr>
  <tr>
  <td>tablo hücresi...</td>
  <td>tablo hücresi...</td>
  <td>tablo hücresi...</td>
  <td>tablo hücresi...</td>
  <td>tablo hücresi...</td>
 </tr>
 </table>
 <div>
 </br>
 </br>


</div>

bootstrap bootstrap tables tables

Bootstrap Typography Örnekleri

Bootstrap Typography örneklerini görmek için aşağıdaki kodları bootstrap'ın standart kodları ile ekleyip çalıştırın..


<div class="container">
<h1>h1. Bootstrap başlık</h1>
<h2>h2. Bootstrap başlık</h2>
<h3>h3. Bootstrap başlık</h3>
<h4>h4. Bootstrap başlık</h4>
<h5>h5. Bootstrap başlık</h5>
<h6>h6. Bootstrap başlık</h6>

<hr style="border-color: red">

<h1>h1. Bootstrap başlık <small>ikinci yazı alanı</small> </h1>
<h2>h2. Bootstrap başlık <small>ikinci yazı alanı</small> </h2>
<h3>h3. Bootstrap başlık <small>ikinci yazı alanı</small> </h3>
<h4>h4. Bootstrap başlık <small>ikinci yazı alanı</small> </h4>
<h5>h5. Bootstrap başlık <small>ikinci yazı alanı</small> </h5>
<h6>h6. Bootstrap başlık <small>ikinci yazı alanı</small> </h6>

<hr style="border-color: red">

<p class="lead">Bootstrap parağrafta öneçıkarmak istediğiniz alan...</p> </br>
<del>buraya yazılan metni silinmiş olarak kabul eder</del></br>
<s>buraya yazılan yazının üzerini çizer </s></br>
<u>buraya yazılan yazının altını çizer </u></br>
<small>small, ince yazı olarak görünür </small></br>
<strong>strong, kalın yazı olarak görünür</strong></br>
<em>italik yazı olarak görünür</em>

<hr style="border-color: red">

<p class="text-left">Left, sola yasla.</p>
<p class="text-center">Center, ortala.</p>
<p class="text-right">Right, sağa yasla.</p>
<p class="text-justify">Justified, her iki yana yasla.. Justified, her iki yana yasla.. Justified, her iki yana yasla.. Justified, her iki yana yasla.. Justified, her iki yana yasla.. Justified, her iki yana yasla.. Justified, her iki yana yasla.. Justified, her iki yana yasla.. Justified, her iki yana yasla.. Justified, her iki yana yasla.. Justified, her iki yana yasla.. </p>
<p class="text-nowrap">özellik atama.</p>

<hr style="border-color: red">

<p class="text-lowercase">Lowercased, hepsini küçült.</p>
<p class="text-uppercase">Uppercased, hepsnini büyüt.</p>
<p class="text-capitalize">Capitalized, ilk harfleri büyüt.</p> </br>
<hr style="border-color: red">
<abbr title="buraya üzerine geldiğinizde görünmesini istediğiniz metin gelecek">sayfa metni üzerine gelin</abbr>

<hr style="border-color: red">

<address>
 <strong>Adres</strong><br>
 cumhuriyet cad. no:1<br>
 kadıköy/istanbul<br>
 <abbr title="Telefon">Tel:</abbr> (555) 505 50 50
</address>
<address>
 <strong>e-mail</strong><br>
 <a href="mailto:#">first.last@example.com</a>
</address>

<hr style="border-color: red">

<blockquote>
 <p>sola yaslı blok oluşturmak için kullanılır</p>
 <footer>çizgi alanı, <cite title="Source Title">kaynak başlığı</cite></footer>
</blockquote>

<blockquote class="blockquote-reverse">
 <p>sağa yaslı blok oluşturmak için kullanılır</p>
 <footer>çizgi alanı <cite title="Source Title">kaynak başlığı</cite></footer>
</blockquote>

<hr style="border-color: red">

    <ul>
    <li>ul li örnek...</li>
    <li>örnek...</li>
    <li>örnek...</li>
    <li>örnek...</li>
    </ul>

<hr style="border-color: red">

    <ul class="list-unstyled">
    <li>ul class="list-unstyled" ile simgeleri yok eder</li>
    <li>örnek...</li>
    <li>örnek...</li>
    <li>örnek...</li>
    </ul>

<hr style="border-color: red">

<ul class="list-inline">
    <li>ul class="list-inline" ile tek satırda gösterir</li>
    <li>örnek...</li>
    <li>örnek...</li>
    <li>örnek...</li>
    </ul>

<hr style="border-color: red">

    <ol>
    <li>ol li örnek...</li>
    <li>örnek...</li>
    <li>örnek...</li>
    <li>örnek...</li>
    </ol>

<hr style="border-color: red">

    <dl>
<dt>dt başlık örnek...</dt>
<dd>dd alt satır örnek...</dd>
<dd>dd alt satırörnek...</dd>
</dl>

<hr style="border-color: red">

<dl class="dl-horizontal">
<dt>dl-horizontal örnek...</dt>
<dd>dd alt satır örnek...</dd>
<dd>dd alt satırörnek...</dd>
</dl>

</div>

bootstrap bootstrap typography typography

Bootstrap Col Yapısı

Bootstrap'ın temeli col yapısı, bootstrap hakkında fazla türkçe kaynak malesefki bulunmamakta, bu nedenle özellikle col yapısını bazı arkadaşların karıştırdığını fark ettim,  mümkün olduğunca ayrıntılı olarak anlatmaya çalıştığım kodları kendi oluşturacağınız sayfanıza bootstrap'ın standart kodları ile ekleyin ve deneyin, açıklamaları da lg, md, sm ve xs yapısına göre takip ederseniz konuyu anlayacağınıza eminim..

Ayrıca belirtmek isterim, oluşturduğunuz col yapısını tekrar kendi içinde 12'lik sisteme istediğiniz gibi bölme imkanı vermektedir, aşağıdaki örnekle daha iyi anlayabilirsiniz.
<div class="col-lg-4">
<div class="col-lg-6"></div>
<div class="col-lg-6"></div>
</div>

bootstrap col yapısı kodları

<div class="container">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> <!--ektanı 12'lik sistemle bir bütün olarak algılattık -->
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <!--ektanı 6'lık sistemle ikiye bölmüş olduk (6+6=12), aynı işlemi aşağıda da kullandık -->
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-6"> <!--6'lık sistemle ikiye böldüğümüz alanın, elimizde oln tek parçasını kendi içinde tekrar lg-2 ile 6 ya böldük, yani (2+2+2+2+2+2=12) 6 ayrı resmi tek satırda göstermesi için ayarlamış olduk, md-2 yine aynı olay, sm-4 ile elimizdeki satırı 3'e böldük bu defa aynı satırda (4+4+4=12) 3 resim gösterecektir, xs-6 ile 2'e böldük bu defada (6+6=12) 2 resim göstermiş olduk -->
<img src="img/1.jpg" alt="..." class="img-thumbnail">
</div>
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-6">
<img src="img/2.jpg" alt="..." class="img-thumbnail">
</div>
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-6">          <!--xs-6 da alt satırdan başlar-->
<img src="img/3.jpg" alt="..." class="img-thumbnail">
</div>
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-6">
<img src="img/4.jpg" alt="..." class="img-thumbnail">
</div>
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-6">           <!--sm-4 de alt satırdan başlar--> <!--xs-6 da alt satırdan başlar-->
<img src="img/1.jpg" alt="..." class="img-thumbnail">
</div>
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-6">
<img src="img/2.jpg" alt="..." class="img-thumbnail">
</div>
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-6"> <!--lg-2 de alt satırdan başlar--> <!--xs-6 da alt satırdan başlar-->
<img src="img/1.jpg" alt="..." class="img-thumbnail">
</div>
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-6">
<img src="img/2.jpg" alt="..." class="img-thumbnail">
</div>
</div>

<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <!--ektanı 6'lık sistemle ikiye bölmüş olduk (6+6=12), yukarıda ikiye böldüğümüz alanın diğer kısmı -->
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12"> <!--6'lık sistemle ikiye böldüğümüz alanın, elimizde oln tek parçasını kendi içinde tekrar lg-3 ile 4'e böldük, yani (3+3+3+3=12) 4 ayrı resmi tek satırda göstermesi için ayarlamış olduk, md-3 yine aynı olay, sm-6 ile elimizdeki satırı 2'ye böldük bu defa aynı satırda (6+6=12) 2 resim gösterecektir, xs-12 ile 1'e böldük bu defada (12=12) 1 resim göstermiş olduk -->
<img src="img/1.jpg" alt="..." class="img-thumbnail"> <!--xs-12 de alt satırdan başlar-->
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">     <!--xs-12 de alt satırdan başlar-->
<img src="img/2.jpg" alt="..." class="img-thumbnail">
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">     <!--sm-6 da alt satırdan başlar--> <!--xs-12 de alt satırdan başlar-->
<img src="img/3.jpg" alt="..." class="img-thumbnail">
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12"> <!--xs-12 de alt satırdan başlar-->
<img src="img/4.jpg" alt="..." class="img-thumbnail">
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">     <!--lg-3 de alt satırdan başlar--> <!--sm-6 da alt satırdan başlar-->
<img src="img/4.jpg" alt="..." class="img-thumbnail">
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12"> <!--xs-12 de alt satırdan başlar-->
<img src="img/4.jpg" alt="..." class="img-thumbnail">
</div>
</div>
</div>
</div>

bootstrap col col yapısı

Bootstrap Carousel Slide Örneği

Aşağıda bulunan kodları standart bootstrap linkleri eklenmiş her hangi bir sayfada rahatlıkla kullanabilirsiniz.

<div class="container"> <!-- container class ına atayacağınız özellik ile slide alanınızın en oranını ayarlayabilirsiniz. -->

<div id="benimbannerim" class="carousel slide" data-ride="carousel">  <!--benimbannerim olarak adlandırdığımız id daha sonra ilişkilendirmek istediğimiz alanlarda kullanacağız -->

<ol class="carousel-indicators">       <!--slide alanın en altında bulunan daire ikonlarının konumunu ayarlayacağınız class -->

<li data-target="#benimbannerim" data-slide-to="0" class="active"></li> <!-- slide alanının en altında bulunan daire ikonları, active sayfa ilk yüklendiinde aktif olacak ikonu belirtir-->

<li data-target="#benimbannerim" data-slide-to="1"></li>             

<li data-target="#benimbannerim" data-slide-to="2"></li>

<li data-target="#benimbannerim" data-slide-to="3"></li>

</ol>

<div class="carousel-inner">       <!-- resimlerin sıralı bir şekilde görünmesini sağlar, bu class olmadığı taktirde resimler ekranda alt alta işlem yapmadan durur -->

<div class="item active">   <!-- item resim alanına ait özellikler atanabilecek class, active sayfa ilk yüklendiğinde aktif olacak resimi belirtir -->

<img src="img/1.jpg" alt="resim"/> <!-- eklenecek resim -->

<div class="carousel-caption"> <!-- slide alanına ekleyeceğiniz yazılara ve alanına ait özellikleri ayarlayabileceğiniz class-->

<h2>birinci başlık </h2>  <!-- slide alanına ekleyeceğiniz yazı-->

<h3>ikinci başlık </h3>  <!-- slide alanına istediğiniz kadar yazı alananı ekleyebilirsiniz -->

<p>ücüncü başlık </p>

</div> 

</div>

<div class="item">

<img src="img/2.jpg" alt="resim"/>

<div class="carousel-caption">

<h2>başlık </h2>

<p>alt başlık </p>

</div> 

</div>

<div class="item">

<img src="img/3.jpg" alt="resim"/>

<div class="carousel-caption">

<h2>başka deneme yazısı </h2>

<p>başka deneme </p>

</div> 

</div>

<div class="item">

<img src="img/4.jpg" alt="resim"/>

<div class="carousel-caption">

<h2>bu yazı deneme </h2>

<p>bu yazı </p>

</div> 

</div>

</div>

<a class="left carousel-control" href="#benimbannerim" role="button" data-slide="prev"> <!-- slide alanında sol ok ikonu, left ile sola yasla, button ile buton özelliği verme ve prev ile geri gitme özelliği verilmiştir  -->

<span class="glyphicon glyphicon-chevron-left"></span> <!--buradaki glyphicon glyphicon-chevron-left class adı ikonun adıdır  -->

<span class="sr-only">Previous</span>

</a>

<a class="right carousel-control" href="#benimbannerim" role="button" data-slide="next">

<span class="glyphicon glyphicon-chevron-right"></span>

<span class="sr-only">Next</span>

</a>

</div>

</div>

banner bootstrap carousel silide

Bootstrap Navbar Örneği

       Aşağıda bulunan kodları standart bootstrap linkleri eklenmiş her hangi bir sayfada rahatlıkla kullanabilirsiniz.

<!-- buraya ekleyeceğiniz container (</div> menü sonunda kapatılmak kaydıyla) menüyü ekranın sol ve sağ kısmını sıfır alarak başlatmak yerine, bootstrap ölçülerinde ortalar -->

<nav class="navbar navbar-default navbar-static-top">
<!--navbar-default siyah memü, navbar-inverse gri menü seçeneği sunar -->
<!--navbar-static-top  bar ın alt divle mesafesini ayarlar, bunun yerine navbar-fixed-bottom yazarsanız menü sayfa altında yer alır, navbar-fixed-top menü sayfanın üstünde yer alır  -->

     <div class="container-fluid">
 <!-- container-fluid menüyü içindekiler dahil ekranın solundan ve sağdan sıfır başlatır, sadece container ise menünün çerçevesini ekranın soldan ve sağdan sıfır başlatır fakat menü içeriği bootstrap standarlarında orta alanda kalır--> 

<div class="navbar-header">

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navekle">
<!--  #navekle ile aşağıdaki navekle birbirleri ile bağlantı kurar, bu şekilde sağdaki icona tıkladığınızda açılır menü haline gelir. burada isimlerin aynı olması gerekmekte id veya class olabilir-->

                            <span class="icon-bar"></span> <!--sağ menüdeki ikonlar -->
                               <span class="icon-bar"></span>
                               <span class="icon-bar"></span>
                      </button>

  <a class="navbar-brand" href="#"> logo</a>
                             <!-- menünün solundaki sabit alan, isteğe bağlı kaldırılabilir -->
</div>

<div class="collapse navbar-collapse" id="navekle">
          <!-- navekle böylece yukarıdaki #naveklenin nereyi etkilediği belirlenir-->

<ul class="nav navbar-nav navbar-right">
                       <!-- navbar-right menüleri sağa yaslar, kullanmadığınız taktirde solda kalır -->
<li> <a href="#"> anasayfa </a></li>
<li> <a href="#"> hakkımızda </a></li>
<li> <a href="#"> referanslar</a></li>
<li> <a href="#"> iletişim </a></li>
</ul>
</div>
</div>
</nav>

bootstrap navbar

CSS Tablo (Table) Özellikleri

Table, th, td : sınır çizgilerini belirlemek için kullanılır.

Alabileceği değerler, width, height, text-align, vertical-align, padding, background-color

width: tablo veya hücre genişliği - height: tablo veya hücre yüksekliği

table {

Width:150px;

Height:100px;

}

Text-align: tablo veya hücre içerisindeki metni yatayda hızalar.

Alabileceği değerler:  right: sağ -  left: sol - center: orta

table {

text-align:right;

}

Vertical-align:tablo veya hücre içerisindeki metni dikeyde hızalar.

Alabileceği değerler:  bottom: alt – top:üst – center: orta

table{

Vertical-align:bottom;

}

Padding:tablo veya hücre sınırları ile içerik arasındaki boşluğu ayarlar.

Alabileceği değerler : padding: dört kenar. Padding-left: sol, parding-right:sağ , padding-top:üst, padding-bottom:alt

table{ padding:10px; } dört kenara tek değer verme.

table{ padding: 1px 3px 7px 5px; } dört kenara tek satırda ayrı değer verme.

table{ padding-left:10px; } sol kenara değer verme.

border-collapse: hücreler arasındaki çift çizgiyi tek çizgi haline getirir. Alabileceği tek değer collapse dir.

border: sınır çizgisi. 

Alabileceği değerler:  kalınlık, çizgi şekli, renk.

border:1px solid blue;

özelliklerin birlikte kullanımı
  

table {

Width:200px;

Height:100px;

border:1px solid red;

}

td{width:100px;

Height:100px;

text-align:center;

vertical-align:top;

padding-top:30px;

}

çalışmalara ait örnek link

css table css tablo css tablo özellikleri

PDO ile Veritabanı İşlemleri

PDO İLE VERİTABANINA BAĞLANMA

Localhost için geçerli :  

dosya adı = db.php

<?php

try {

     $db = new PDO("mysql:host=localhost;dbname=database_ismi;charset=utf8", "root", "");

} catch ( PDOException $e ){

     print $e->getMessage();  }

?>

NOTLAR :

Mysql:host = sunucu adı yazılır.

Dbname= veritabanı adı yazılır .

Charset=karakter tanımı yazılır (utf8, türkiye için karakter tanımı).

SELECT İŞLEMLERİ

<?php

include ("db.php");  

$baslik="baslik";  

$query = $db->query("SELECT * FROM anasayfa", PDO::FETCH_ASSOC);

if ( $query->rowCount() ){

     foreach( $query as $row ){

          print $row["$baslik"]."<br />";       }}

?>

İNSERT İŞLEMLERİ

<?php

include ("db.php"); 

$yeni_baslik="yeni başlık deneme";          

$yeni_icerik="yeni içerik deneme";

$yeni_aciklama="yeni açıklama deneme";

$query = $db->prepare("INSERT INTO anasayfa SET baslik = ?, icerik = ?, aciklama = ?");

$insert = $query->execute(array("$yeni_baslik", "$yeni_icerik", "$yeni_aciklama" ));

if ( $insert ){

    $last_id = $db->lastInsertId();

    print "kayıt başarılı!"; }

?>

UPDATE İŞLEMLERİ

<?php

include ("db.php");

$yeni_baslik = "sistem deneme";

$eski_baslik = "yeni deneme";

$query = $db->prepare("UPDATE anasayfa SET baslik = ? WHERE baslik = ?");

$update = $query->execute(array( "$yeni_baslik", "$eski_baslik"));

if ( $update ){

     print "güncelleme başarılı!"; } 

?>

DELETE İŞLEMLERİ

<?php

include ("db.php");

$id=1;

$query = $db->prepare("DELETE FROM anasayfa WHERE id =?");

$delete = $query->execute(array("$id"));

if ( $delete ){

     print "silme işlemi başarılı!"; }

?>

çalışmalara ait dosyayı buradan indirebilirsiniz
yapmanız gereken; indirmiş olduğunuz dosyayı rar klasöründen çıkarıp kullandığınız serverde www içine atın,
daha sonra veritabanı için;
veritabanı adı = database_ismi, tablo adı = anasayfa
sütun isimleri = id, baslik, aciklama ve icerik
olarak ayarlayın ve çalıştırın. dosyaların içinde açıklama satırları bulunmakta bunlardan yararlanarak yeni denemeler yapabilirsiniz. kolay gelsin...

pdo php veritabanı işlemleri

JQuery Animasyon (Animate) Özellikleri

Animate: click özelliği atanan elemana tıklandığı an, animate özelliği atanan eleman çalışır.

Yön atamaları: click özelliği atanan elemana tıklandığı an,  (left, right, top, bottom)  sol, sağ, üst veya alt yönünde hareket eder.

  $(document).ready(function(){

  $("#button1").click(function(){

  $("#kutu1").animate({left:'500px'});

  });
  });

Saydamlık: click özelliği atanan elemana tıklandığı an, Opacity özelliğine atanan değer kadar saydamlaşır.

  $(document).ready(function(){

  $("#button2").click(function(){

  $("#kutu2").animate({opacity:'0.5'});

  });

  });

Toggle () :  click özelliği atanan elemana tıklandığı an, Toggle  özelliği atanan elemanı her tıklamada gösteri veya gizler.

$(document).ready(function(){

$("#button3").click(function(){

$("#kutu3").animate({height:'toggle'});

});

})

çalışmalara ait örnek link

Birden fazla özelliği bir arada kullanmak

$(document).ready(function(){

$("button").click(function(){

 var div=$("div");

div.animate({height:'+=100px',opacity:'0.4'},"slow");

div.animate({width:'+=100px',opacity:'0.8'},"slow");

div.animate({height:'+=25px',opacity:'0.4'},"slow");

div.animate({width:'+=25px',opacity:'0.9',left:'+=150px'},"slow");

});

});

çalışmalara ait örnek link

jquery jquery animasyon jquery animate

Hazır Photoshop Hoşgeldin Bebek Çalışmaları

Photoshopta hazırlanmış 8 adet psd formatında hoşgeldin bebek çalışması, fazla photoshop bilgisi olmayan arkadaşlar için en üste bulunan layerden (bebek) ismi değiştirmeleri yeterli olacaktır. Çalışmalara ait link aşağıda bulunmakta.

Çalışmaları buradan indirebilirsiniz

download hoşgeldin bebek photoshop

jQuery Slide Özellikleri

slideDown () :  click özelliği atanan elemana tıklandığı an, slideDown özelliği atanan elemanı gösterir.

$("#bir").click(function(){

$("#iki").slideDown("slow");

});

slideUp () :  click özelliği atanan elemana tıklandığı an, slideUp  özelliği atanan elemanı gizler.

$("#uc").click(function(){

$("#dort").slideUp("slow");

});

slideToggle () :  click özelliği atanan elemana tıklandığı an, slideToggle  özelliği atanan elemanı her tıklamada gösteri veya gizler.

$("#bes").click(function(){

$("#alti").slideToggle("slow");

});

çalışmalara ait örnek link

jquery jquery slide özellikleri

Sql Like, In, Between ve As Komutları

LIKE

Tablodaki belirtilen sütundan, belirtilen değer şartını seçer.

SELECT * FROM tablo adı WHERE sütun adı LIKE ‘değer%‘;

Tablodaki belirtlen sütundan, belirtilen şart olmayan değerleri seçer.

SELECT * FROM tablo adı WHERE sütun adı NOT LİKE ‘değer%‘;

Alabileceği değerler:

Değer% = belirtilen değer ile başlayan.

%değer = belirtilen değer ile biten.

%değer% = içinde belirtilen değer geçen.

_değer = çizgi sayısı kadar karakter, herhangi değer alabilir, diğerleri belirtilen değer ile bitmeli.

_d_g_r= çizgi karakterleri herhangi bir değer alabilir. diğerleri belirtilen değer olmalıdır.

[bsp]%= belirtilen karakterlerin herhangi biriyle başlayan.

[a-d]%=belirtilen karakterlerle  başlayan (a,b,c,d).

[!abc]%= belirtilen karakterle başlayan değerleri seçmez, bu değer istediğiniz sayıda olabilir.

IN

Tabloda belirtilen sütunda, yalnızca belirtilen değerleri seçer, bu değer istediğiniz sayıda olabilir.

SELECT * FROM tablo adı WHERE sütun adı IN (değer, değer);

 BETWEEN

Tablodan belirtilen sütunda, belirtilen sayı aralığını seçer.

SELECT * FROM tablo adı WHERE sütun adı BETWEEN 10 AND 20;

Tablodan belirtilen sütunda, belirtilen sayı aralığı dışında kalan değerleri seçer.

SELECT * FROM tablo adı WHERE sütun adı NOT BETWEEN 10 AND 20;

Tablodan belirtilen sütunda, belirtilen harf aralığını seçer.

SELECT * FROM tablo adı WHERE sütun adı BETWEEN C AND L;

Tablodan belirtilen sütunda, belirtilen tarih  aralığını seçer.

SELECT * FROM tablo adı WHERE sütun adı BETWEEN #01/02/2013#  AND  #01/02/2014#;

  

AS

Tablodan belirtilen sütun içeriğini AS parametresinden sonra gelen sütun adı altında birleştirir.

SELECT sütun adı AS sütun adı, sütun adı AS sütun adı FROM tablo adı;

Tablodan belirtilen sütun adlarını AS parametresinden sonra gelen sütun adı altında birleştirir.

SELECT sütun adı+‘,‘ +sütun adı+‘,‘ +sütun adı AS sütun adı FROM tablo adı;

as between like sql

Sql Order By, Into, Update, Delete ve Select Top Komutları

ORDER BY

talodan belirtilen sütunu referans alarak (sayı veya rakama göre) sıralı listeler.

SELECT * FROM tablo adı ORDER BY sütun adı;

ORDER BY DESC:

tablodan belirtilen sütunu referans alarak (sayı veya rakama göre) tersten listeler.

SELECT * FROM tablo adı ORDER BY sütun adı DESC;

INTO:

Tablodan belirtilen sütunlara belirtilen değerleri atar.

INSERT INTO tablo adı (sütun adı, sütun adı, sütun adı) VALUES ( ‘değer‘,‘değer‘,‘değer‘);

UPDATE

Tablodan belirtilen sütun ve değeri referans alarak güncelleme yapar.

UPDATE tablo adı SET sütun adı =değer, sütun adı =değer WHERE referans sütun adı= referans değer;

DELETE

Tablodan belirtilen sütundaki, belirtilen değeri siler.

DELETE FROM tablo adı WHERE sütun adı=değer;

Tablodan bütün satırları siler.

DELETE * FROM tablo adı;

DELETE FROM tablo adı;

SELECT TOP

Belirtilen sütunun belirtilen değer kadar satırını seçer.

SELECT sütun adı FROM LIMIT değer;

Tablodan belirtilen değer kadar satır seçer.

SELECT TOP değer FROM tablo adı;

Tabloda bulunan kayıt sayısının, belirtilen yüzde değerini seçer.

SELECT TOP değer PERCENT * FROM tablo adı;

delete into order by select top sql update

Sql Select, Distinct, Where, And ve Or Komutları

SELECT:

tablodan bir veya birden fazla sütun listeler.

SELECT sutun adı, sutun adı  FROM tablo adı;

tablodaki bütün sütunları listeler.

SELECT * FROM tablo adı;

DISTINCT:

tablodan belirtilen sütundaki farklı değerleri listeler.

SELECT DISTINCT sütün adı FROM tablo adı;

WHERE:

tablodan belirtilen sütündaki belirtilen değer veya değerleri listeler.

SELECT * FROM tablo adı WHERE sütün adı =değeri;

AND:

tablodan belirtilen sütundaki, belirtilen değerlerin, aynı satırda olan değerleri listeler

SELECT * FROM tablo WHERE sütün adı =değer AND sütün adı=değer;

OR:

tablodan belirtilen sütundaki, belirtilen değerleri listeler.

SELECT * FROM tablo WHERE sütün adı=değer OR sürun adı=değer;

AND, OR:

tablodan belirtilen sütundaki belertilen değerlerin, aynı satırda olan dğerlerini listeler.

SELECT * FROM tablo WHERE sütun adı=değer AND (sütun adı=değer OR sütun adı=değer);

and or distinct select sql where

Temel Sql Komutları

SELECT: veritabanından veri seçer

UPDATE: veritabanını günceller

INSERT INTO: veritabanına yeni veri ekler

CREATE DATABASE: yeni veritabanı oluşturur

ALTER DATABASE: veritabanını değiştirir

CREATE TABLE: yeni tablo oluşturur

ALTER TABLE: tabloyu değiştirir

DROP TABLE: tabloyu siler

CREATE INDEX: dizin oluşturur

DROP INDEX: dizin siler

sql temel sql momutları

Hakkımda

EML Bilgisayar/y bölümünü bitirdiğimde başlayan bilgisayar yazılım, tasarım ve donanım merakım zamanla meslek aşkına dönüşünce 2004 yılında A.Ü BMYO Bilgisayar Teknolojileri ve Programlama bölümünü bitirerek mesleki hayatıma yeniden yön verdim.

Şuanda Grafik Tasarım Uzamanı, Front End & PHP Developer olarak mesleğime devam etmekteyim.

Ayrıca yılların tecrübesi ve mesleğime olan ilgim nedeniyle uzmanı olmadığım birçok grafik tasarım programını rahatlıkla kullanabildiğim gibi web tasarım konusunda da yeniliklere hemen adapte olabilmekteyim. Ve yine web programlama konusunda uzmanı olmadığım dillerde bilgi sahibiyim.

Uzman Olduğum Konular

Grafik Tasarım: CorelDraw, Illustator, Photoshop, 3ds max

Tasarımdan baskıya kadar tüm aşamalar

Web Tasarım: Html, html5, css, java script,  jquery, bootstrap, less, photoshop

Psd tasarımdan responsive tasarıma kadar tüm aşamalar

Web Programla: PHP, SQL

Kodlama ve yayınlamaya kadar tüm aşamalar

blogum dışında  www.nurcanyurttas.com ile bilgilerimi paylaşmaya devam etmekteyim.

hakkımda

phpMyAdmin Tablo Düzenleme

1-Düzenleme : bulunduğu satıra ait düzenlemeyi, yeni bir sayfa açarak  yapar.

2-Sıralı düzenleme: bulunduğu satıra ait düzenlemeyi yine bulunduğu satırda yapar.

3-Kopyala: bulunduğu satıra ait bilgilerin bir kopyasını oluşturup bir alt satıra ekler.

4-Sil : bulunduğu satırı siler.

Yukarıda, düzenleme sayfasına ait örnek resim bulunmakta.

Yukarıda, sıralı düzenleme sayfasına ait örnek resim bulunmakta.

Yapı:

1-Değiştir: seçili satıra ait değişiklikleri yeni bir sayfa açarak yapar.

2-Birincil anahtar: seçili satıra birincil anahtar ataması yapar.

Yukarıda, değiştir sayfasına ait örnek resim bulunmakta.

Sql sorgu komutları: select, insert, update ve delete sql sorgu komutlarını verir.

Ekle: yeni bir boş satır açar, yeni bir satır ekleme olanağı tanır.

Dışa aktar: mevcut veritabanını veya tabloyu dışa aktarır. (Bu durum bize local sunucudan hosting sunucumuza veritabanını veya tabloları taşırken gerekir.)

Dışa aktarım: aktarmak istediğimiz sql dosyamızı göz attan seçerek, yeni bir veritabanı veya tabloyu local sunucumuza aktarır.

İşlemlerden genel ayarları yapabiliriz.

1-tablonun yeni adı

2-karakter uyum ayarları gibi

phpmyadmin sql tablo düzenleme