Günün Sözü

"Her Şeyin Bir Şeyini, Bir Şeyin Her Şeyini Bileceksiniz..." Sakıp SABANCI

21 Ocak 2017

Yardımcı Siteler:

Graphemica: İkonların html koda karşılıklarını bulmak için yararlı bir site
http://graphemica.com/

Pixabay: Yüksek çözünürlüklü fotoğraf veya görsel bulabilmek için faydalı
https://pixabay.com/

Freepik: Afiş logo gibi örnek çalışma bulabileceğiniz bir site
http://www.freepik.com/ 

Font Siteleri: 
100 Free Fonts:http://www.1001freefonts.com/
fonts2u: http://www.fonts2u.com/ 
dafont:http://www.dafont.com/


Templateler
https://www.megafonn.com/web-sitesi-nasil-yapilir-tum-asamalari/
https://www.c-sharpcorner.com/
https://cssdeck.com/
https://bootsnipp.com/snippets/92xNm
https://codequs.com/p/Hk6T8-mB4
https://musefree.com/
https://www.bootdey.com/s
https://www.bootdey.com/snippets/view/single-advisor-profile
https://webdevresources.info/css
https://www.html5xcss3.com/responsive-menus-tutorials
https://csshint.com/css-dropdown-menu/
https://tympanus.net/Tutorials/ResponsiveRetinaReadyMenu/
http://demo.html5xcss3.com/demo.php?url=www.script-tutorials.com/demos/415/index.html
https://codepen.io/ahmedhosna95/pen/RJeYjg
https://codepen.io/Mohamed-Ayman/pen/WyYGPa
https://bootsnipp.com/snippets/bXZA2
https://freefrontend.com/css-menu/
https://quazar.starfirewebdesign.com/
https://colorlib.com/wp/html-social-buttons-templates/
https://tympanus.net/Tutorials/ResponsiveRetinaReadyMenu/
https://www.youtube.com/watch?v=rk-IuYOyfnc&ab_channel=Onlinewebustaad
https://www.jquery-az.com/css/demo.php?ex=132.0_1
https://www.html5xcss3.com/responsive-menus-tutorials
https://codepen.io/Mohamed-Ayman/pen/WyYGPa
https://codepen.io/nolasia/pen/OwxJaB
https://css-tricks.com/the-shapes-of-css/
https://sharkcoder.com/visual/shapes
https://enjoycss.com/

20 Ocak 2017

Favori Yazı Fontlarım

Sevdiğim Yazı Tipleri

Josefin Sans
Gruppo
Philosopher
Syncopate
Roboto
Play
PT Sans
Cuprum
Platform One
Ceria Lebaran
Salzburg
HurmeGeometricSans1 
Muli
Mulish
PoiretOne-Regular
Poppins
Raleway
Charm-Regular, El yazısı
SignPainter-HouseScript, El yazısı
TrajanPro (Afişler İçin)

Sitede Kullandıklarım:
Başlıklarda:Philosopher
Yazılarda:Play

Programlamaya Yeni Başlayanlara Tavsiye Eğitim Siteleri

14 Ocak 2017

İllustratorda Çalışırken En Çok Kullandığım Araçlar ve Kısayollar:

YENİ DOSYA AÇMA

*300dpi, CMYK, A4 Yatay olarak dosya seçeneklerimi kullanıyorum.

SEÇME
  • Seçtiğimiz şekle benzer şekilleri seçmek:
    Önce, şekillerden birini seçeriz,
    Sonra, Select Menüsü>>Same>>Apperance  yolunu izleriz, tüm benzer şekilleri seçer
ŞEKİL VERME
  • Bütün çizgileri gösterme: Ctrl+Y
  • Şekillerimizi birleştirmek istersek:
    Window>>Pathfinder yolunu izleriz burdaki paneldeki özellikleri kullanırız.
  • Ctrl +Ü: şekilleri bir üste taşır, 
  • Ctrl+Shift+Ü şekilleri en üste taşır
  • Ctrl+Ğ: şekilleri bir alta taşır
  • Ctrl+Shift +Ğ şekilleri en üste taşır
  • Ctrl +2 seçilen katmanı kilitler
  • Ctrl+Alt+2 kilidi kaldırır.
YAZI
  • Yazıyı vektöre çevirme: Sağ tık>>Create Outlines yada Ctrl+Shift+O
  • Yazıdaki harfleri ayırma: Sağ tık>> Ungroup
    Eğer ungroupla ayrılmamışsa: Sağ tık>> Relase Compund Path
RESİM

  • Resmi vektöre çevirmek için, resmi seçtikten sonra; Object>>İmage Trace>>Make And Expand yolunu izleriz.

İlustrator konusunda kendinizi geliştirmek istiyorsanız kaynak tavsiyem:
https://www.youtube.com/watch?v=D4cNtsIuMAY&index=12&list=PLK8wbkvLOBVQ_0Xcbn_WvlRbj4EZh6OTb
12. video ve sonrasında yararlı bilgiler mevcut

12 Ocak 2017

Yazı Karakterini Türkçeleştirme

Merhabalar yeni bir yazı ile karşınızdayım,

Bu yazımda yazı fontlarına Türkçe karakter ekleme işleminden bahsedeceğim.

Çalışmalarımızda kullanmak için değişik yazı fontlarına ihtiyaç duyarız. Çeşitli font sitelerinden indirebileceğimiz bu fontlarda bazen Türkçe karakter sıkıntısı yaşanmaktadır.

Bu sorunun bir çözümü var, var olan karakter ile Türkçe karakterler oluşturabiliriz.

Bunu için ben  Font Creator isimli programı kullanıyorum. Bu programı indirdikten sonra yapmanız gerekenleri aşağıdaki videomda anlattım.






Faydalı olması dileğimle hoşçakalın :)


08 Ocak 2017

Daire Etrafına Yazı Yazmak


Daire etrafına yazı yazma çalışması ile ilgili hazırlık süreci şu aşamalardan oluşuyor:

1.  Adobe Illustrator programında yeni bir doküman açarak çalışmaya başladım.
Boyutları: w:1000px h:1000px Çözünürlük:300 ppi Color mode:Rgb olarak belirledim.

2.Önce daire çizdim ve içine yazıları yazdım. Bu işlemi yapmak için şu videoadan yararlandım:




3.Sonrada içine yazıları yazıp son şeklini verdim. Bu aşamada en zorlayan kısım çizim yapmak oldu.
Bunu yapmak için ise hazır resimleri (örneğin ok işareti) alıp vektöre çevirdim ve diğer ögelerle birleştirdim.

Resmi vektöre çevirme konusunda yararlandığım kaynak:





Keyifli Bloglar...

Yeni Logo Çalışmam

Merhabalar,

Bu çalışmam bi arkadaşım için hazırladığım örnek bir logo çalışması oldu.

Logoya gelecek olursak;

Genel olarak logoyu hazırlarken sadelik ve algıda seçicilik üzerinde durdum.

İlk olarak renkleri belirlemekle başladım.

Bu sebeple sadeliği, asaleti temsil eden “siyah” ve tazeliği, canlılığı anlatan “yeşil” renklerini ana renklerimiz olarak belirledik.

Sonraki aşama yazı fontunu belirlemek oldu, yine sade ve akılda kalıcı bir font seçtim. Kullandığım fontun adı ise: PlatformOne

Bu bilgiler ışığında logoyu hazırladım… ve işte sonuç:



Umarım beğenmişsinizdir...
Bir sonraki yazıda görüşmek üzere..

07 Ocak 2017

Asp.net Veritabanı Bağlantısı

Bu makalemizde Asp.net veritabanı bağlantısı için kullanılan çeşitli yöntemleri ve örnek kodlamaları inceleyeceğiz. Asp.net veri tabanı bağlantısı için MS SQL veritabanını kullanacağız. Bağlantı için kullanılan çeşitli yöntemlerden Web.config dosyası, harici bir class dosyası ve button click olayı içine yazılan bağlantı cümlelerini inceleyeceğiz.

Makalemizi örnek bir proje kodlayarak anlatacağız. Makalemizin son bölümünde hazırladığımız örnek projeyi ve kaynak kodlarını bulabilirsiniz.Uygulamaya geçmeden önce yukarıda bahsettiğimiz 3 farklı kullanımı anlatalım.

1. Web.Config ile Veritabanı Bağlantısı

Web.config, Asp.net projemizin (yada websitesi) ayarlarının tutulduğu dosyadır. Veritabanı bağlantı cümlesi, session ayarlamaları, Url yapısı tanımları, hata kontrolü gibi ayarlamalar web.config dosyası ile yapılır. Sitenin genel ayarları için kullanılır. Buradan da anlaşılacağı üzere, web.config dosyasında tanımlanacak bir bağlantı cümlesi ile sitemizdeki tüm sayfalarda kolayca veritabanı bağlantısına sahip oluruz. Web.config dosyası XML temelli bir yapıya sahiptir.

2. Class Dosyası ile Asp.net Veritabanı Bağlantısı

Asp.net class dosyaları projenin çeşitli yerlerinde tekrar tekrar kullanacağımız kod parçalarını yazabileceğimiz dosyalardır. Tekrar eden kodlarımızı harici bir dosyada tutmak kod okunurluğunu arttırdığı gibi, projemizin daha yönetilebilir olmasını da sağlar. Veritabanı işlemlerini de yine harici bir class dosyası üzerinden yapabiliriz. Özellikle geliştirme aşamasında sıkça değişen bağlantı cümlelerini (Connection Strings) yönetmek oldukça kolaylaşır. Web.config kullanımından farkı ise, programatik olarak daha özgür olabiliriz. Class dosyaları C# ile (Projenizin dili ile) kodlanır.

3. Click Olayı İçerisinde Veritabanı Bağlantısı

Projeniz çok küçük boyutlu ise yada henüz öğrenme aşamasındaysanız, bağlantı cümlelerinizi doğrudan buttonların click olayının içerisine de yazabilirsiniz. Bu durumda her, button için bağlantı cümlesini tekrar tekrar yazmanız gerekir.


Bağlantı Cümlesi (Connection Strings)

Projemize bağlanacağımız veritabanını tanıtmak için yazdığımız komutlara bağlantı cümlesi (Connection Strings) denir. Kullandığınız veritabanı türüne, sürümüne göre ve bağlantı durumuna göre bu bağlantı cümleleri farklılık gösterir. Bağlantı cümleleri için connectionstrings.com iyi bir rehberdir.
Bu kadar ön bilgi yeterli sanırım. Artık Visual Studio‘ ya geçip kodlamaya başlayabiliriz. Yeni bir web site açıp bir adet web form ekleyerek kodları yazmaya başlayabiliriz. “Server Explorer” penceresinden veritabanı bağlantısı yapmayı unutmayınız. Biz projede “BaglantiDatabase” ismindeki veritabanını kullanacağız.

Button Click Metodu ile

Sayfamıza “System.Data.SqlClient” kütüphanesini ekliyoruz. Veritabanı bağlantısı için bu kütüphaneyi kullanacağız. Daha sonra sayfamıza bir adet button ekleyip buttonnun click olayına bağlantı cümlemizi yazabiliriz.Bu aşamaya kadar yazdığımız kodlar aşağıdaki gibi olacak.

protected void btnBaglanti_Click(object sender, EventArgs e)
{
SqlConnection baglantiCumlemiz = new SqlConnection(@”Data Source=.;Initial Catalog=BaglantiDatabase;Integrated Security=True”);
baglantiCumlemiz.Open();
Response.Write(“Button ile veritabanı bağlantısı başarılı!”);
baglantiCumlemiz.Close();
}

Bağlantı cümlemizi yazdık, bağlantımızı Open() metodu ile açtık, ekrana mesajımızı yazdırdık ve bağlantımızı Close() metodu ile kapattık. Herhangi bir sorunla karşılaşmadan bağlantımızın gerçekleştiğini görebildik. Response.Write() metodu parantezler içerisine yazdığımız metni ekranda göstermemizi sağlar. Bunun için mesajımızı göstermek için bu metodu kullandık.

Web.Config Yöntemi

Artık web.config üzerinden bağlantı yapmayı deneyebiliriz. Bunun için sayfamıza bir button daha ekliyoruz ve web.config dosyamızı açıyoruz.
Web.config dosyasında <configuration> düğümü içerisinde <system.web> düğümünün altına yeni bir düğüm olarak <connectionStrings>  düğümünü ekliyoruz. Bağlantı cümlemizide ekledikten sonra web.config dosyasımız aşağıdaki gibi olacaktır.

Not: siz kodlama yaparken parantez işareti yerine büyük-küçük işareti yazmayı unutmayın, html bu kodları yorum olarak göstermediği için böyle yazdım.

(configuration)
(system.web)
(compilation debug=“true” targetFramework=“4.5.2” /)
(httpRuntime targetFramework=“4.5.2” /)
(/system.web)
(connectionStrings)
(add name=“baglantiCumlemiz2” connectionString=“Data Source=.;Initial Catalog=BaglantiDatabase;Integrated Security=True” providerName=“System.Data.SqlClient”/)
(/connectionStrings)
(/configuration)

Şimdi ConfigurationManager aracılığı ile bağlantımızı kullanacağımız yerde (bu örnek için button içinde) çağırıyoruz. Diğer kodlamamız aynı.

protected void btnWebConfig_Click(object sender, EventArgs e)
{
SqlConnection baglantiCumlemiz2 = new SqlConnection
(System.Web.Configuration.WebConfigurationManager.ConnectionStrings
[“baglantiCumlemiz2”].ConnectionString);
baglantiCumlemiz2.Open();
Response.Write(“web.config ile veritabanı bağlantısı başarılı!”);
baglantiCumlemiz2.Close();
}

Class Dosyası Yöntemi

Son yöntemimiz olan harici bir class dosyası ile veritabanı bağlantısı için birtakım eklemeler ve düzenlemeler yapacağız projemizde. Öncelikle “Solution Explorer” penceresinde sağ tıklayıp projemize App_Code klasörü ekleyeceğiz. (Add > Add ASP.NET Folder > App_Code) Sonraki adımda bu klasör içine bir adet Class dosyası (.cs) ekliyoruz. Bu dosyamızın adını örnek projemizde “Baglanti.cs” olarak kaydettik. Class dosyamızı açıp içerisine bağlantı cümlemizi yazıp, bağlantımızı açıyoruz. Burada tanımladığımız metodu projemizin diğer dosyalarında çağıracağımız için “return” deyimi ile bize bağlantı döndürmesini istedik. Class dosyamızın kodlaması aşağıdaki gibi olacak.

using System.Data.SqlClient;
public class Baglanti
{
public SqlConnection Baglan()
{
SqlConnection baglantiCumlemiz3 = new SqlConnection(@”Data Source=.;Initial Catalog=BaglantiDatabase;Integrated Security=True”);
baglantiCumlemiz3.Open();
return baglantiCumlemiz3;
}
}

Şimdi ana sayfamıza dönüp, class dosyamızdan veritabanı bağlantısını çağıracağız. Yeni bir buton daha ekleyip buttonun click olayına aşağıdaki kodlamayı yapacağız. Kodlamamızın etkin olması için de “Baglanti” ismini verdiğimiz class dosyamızı bu sayfada kullanacağımızı belirten “ Baglanti baglantimiz = new Baglanti(); ”  tanımlamamızı buttonun click olayının hemen üzerinde yazıyoruz. Bu kodlamadan sonraki kodlarımız aşağıdaki gibi olacak.

Baglanti baglantimiz = new Baglanti();
protected void btnClassDosyasi_Click(object sender, EventArgs e)
{
SqlConnection baglantiCumlemiz3 = baglantimiz.Baglan();
Response.Write(“Class dosyası ile veritabanı bağlantısı başarılı!”);
baglantiCumlemiz3.Close();
}

Alıntıdır.
Kaynak: http://www.teknologweb.com/asp-net-veritabani-baglantisi

Logo Hazırlarken Dikkat Edilmesi Gerekenler:

1. Grafik tasarımın çoğaltılabilir öğelerinin başında yer alan logo tasarımı, her yerde, her türlü teknikte çoğaltılabilir olmalıdır. Serigrafi, yazıcı çıktısı, folyo kesim, kabartma, matbaa uygulamaları, dijital baskılar, televizyon ve internet… Logo tasarımı kullanılacak dağıtım araçlarına mutlak suretle uyum sağlamalı ve aslını bozmamalıdır. Bunun için logo kesinlikle vektörel olmadır.

2. Logo tasarımı yapılırken yapılacak logonun neyi anlatması gerektiği, neyi temsil edeceği planlanmalı ona göre eskizler hazırlanmalıdır.

3. Sonraki adım eskiz çalışmalardır. Eskiz çalışmalarda çizimler, çıkış noktaları somutlaştırılarak çizimler oluşturulur, bu çizimlerin hoşa giden yerleri kullanılır.. Tasarımlar oluşturulmaya çalışılır.

4. Ana form oluşturulduktan sonra oluşturulan formlar vektörel hale getirilerek renk seçimleri yapılır. Renk seçimleri markanın amacına göre değişebilir. Satış artırma amaçlı kırmızı, güven sağlamak amaçlı mavi, hareket ve dinamiklik sağlamak amaçlı turuncu tercih edilebilir.

5. Tasarım yapıldıktan sonra uygun tipografi seçilerek, yada özel bir tipografi tasarlanarak logoyla uyumu sağlanır. 
Font seçiminde olabildiğince uygulanabilir, okunmayı akılda kalıcılığı artıran, tırnaksız (sans serif) fontlar kullanılmalı. Çünkü tırnaksız fontlar (aril, helvatica vb.) özellikle okunma esnasında harfleri vurgular ve markayı akılda tutar. Tırnaklı fontlar (times new roman vb.) kitap, gazete gibi yazıların devamlılık sağladığı metinlerde kullanılmalı.

Uyulması gereken ölçüler
Logo tasarımlarında belli bir ölçü sınırı yoktur. Bunun yerine oran orantı kullanılarak X yada Y değerleriyle logoyu geometrik yapılarda çözümlemek daha doğru olur. Örneğin 1/3 -1/2 gibi yazının logoya, logonun yüksekliğinin genişliğe oranı.. Önemli olan logonun her alanda güzel ve kararlı durmasını sağlamaktır.

Logo tasarımında başarı için altın kurallar
Bir logonun öncelikle negatif – pozitif uygulamasının yapılması gerekir. Logo sadece siyah, yada sadece beyaz olduğunda da özelliğini kaybetmemeli! Renk geçişlerine degradelere girmeden logoyu yalın haliyle tasarlamak gerekir. Daha sonra ihtiyaç duyulduğunda efektlendirilebilir, yada üç boyutlu hale getirilebilir. Ama logonun özü en sade hali vektörel , negatif-pozitif uyarlanabilecek hali olmalıdır.

Logo hangi programlar ile tasarlanır?
Adobe Illustrator; vektörel Macromedia Freehand; vektörel Adobe Photoshop; Pixel tabanlı, Path özelliği uygulanırsa vektörel Corel; vektörel. Tavsiye edebileceğim programlardır.

Logo nasıl değerlendirilmeli?
Logo değerlendirmelerinde şu kriterler mutlak süretle sorgulanmalıdır.
• Sadelik / yeterince sade mi?
• Anlaşılabilirlik / bakıldığında ne olduğu, neyi temsil ettiği anlaşılıyor mu?
• Okunurluk / marka kafa karışıklığına sebep olmadan düzgün okunabiliyor mu?
• Markayı temsili / ürünü veya hizmeti hatırlatıyor mu?
• Özgünlük / tasarım yeterince farklı ve diğerlerinden ayrı mı?
• Uygulanabilirlik / basılı ve görsel metaryallerde uygulama problemi oluşturur mu?


İletişim Formu

Ad

E-posta *

Mesaj *