CodeBehind

ASP.NET MVC 4 ile Sosyal ağ bağlantısı

May 13, 2013 ASP.NET, C# No comments

Merhaba,

Bu yazımda MVC 4 ile gelen sosyal ağ entegrasyonuna değineceğim. Bu versiyonda MVC 3′te yer alan webHelper desteği daha da geliştirilerek Twitter, Facebook ve Google+ üzerinde hesaplar ile ek bir kütüphane ihtiyacı olmadan doğrudan bağlantı kurulabiliyoruz. MVC 4 içerisinde Facebook C# SDK’yi da barındırıyor.

Örneğimizi Facebook üzerinden bilgi alan bir uygulama oluşturarak tamamlayacağız. Öncelikle Visual Studio’da yeni bir proje açalım. Projeye istediğiniz ismi verebilirsiniz.

Visual Studio Projeyi oluşturduktan sonra App_Start dosyası içinde yera alan AuthConfig.cs dosyası, bağlanmak istediğimiz sosyal ağa ait bilgileri ekleyeceğimiz bölüm. Facebook, MSN, Google+ ve Twitter için RegisterAuth metodu ile bağlantıları yapacağız.

Önce bunun nasıl gerçekleştiğine bakmakta fayda var.

OAuth

Günümüzde büyük internet sitelerinin – özellikle sosyal paylaşım siteleri – çoğunluğu barındırdıkları veriyi belirledikleri sınırlar içerisinde 3. parti uygulamalar/siteler ile paylaşıyor. OAuth sözkonusu uygulamanın veya web sitesinin kullanıcının şifresini bilmeleri gerekmeden kullanıcı verilerine erişmesine olanak tanıyan bir açık standart kimlik doğrulama protokolüdür.

Facebook, Twitter gibi sitelerden veri alabilmek için Access Token, APPID ve App Secret gibi uygulamamızı ilgili sitede doğrulamaya yarayan anahtarlara ihtiyacımız var.

Örneğimizde Facebook üzerinden devam ettiğimiz için https://developers.facebook.com/apps adresinden bir uygulama yaratıyoruz. “Create New App” e tıkladığımızda aşağıdaki gibi ilgili alanları dolduruyoruz.

Uygulamayı oluşturduktan sonra Facebook bize gerekli APPID ve App Secret bilgilerini vermiş durumda.

Facebook’la şuan işimiz tamamlandı.

Visual Studio’yu açıp projemize dönelim. AuthConfig.cs dosyasında Facebook’la ilgili olan alanı aktif hale getirelim.

//OAuthWebSecurity.RegisterFacebookClient(
// appId: “”,
// appSecret: “”);

AppID ve appSecret kısımlarına facebooktan aldığımız bilgileri yazıyoruz. Görünüm aşağıdaki gibi olmalı:

Uygulamayı çalıştıralım. Açılan standart MVC 4 sayfası karşımıza geldi. URL olarak görünen adresi kopyalayalım. Facebook’ta kullanıcı uygulamamıza erişim sağladıktan sonra yönlendirme için gerekli olan bu adrestir. Lokalde çalıştığımızdan adres http://localhost:port no// olarak kalabilir.

Adresi kopyaladıktan sonra aşağıdaki bölüme adresi yapıştırıp kaydedin.

Çalıştırdığımız uygulamıza geri dönüp sağ üstten Login’e basalım. Facebook uygulamamıza ait bilgileri verdiğimiz için artık Facebook Login açılmış oldu.

Facebook’u seçtiğimizde sayfa bizi facebook’a yönlendirip uygulamaya izin vermemizi isteyecek. İzin verdikten sonra http://localhost:port no// olarak kaydettiğimiz sayfaya yönlendirip kayıt işlemini tamamlayacağız.

Kayıt işlemiyle birlikte artık sitemiz Facebook’a bağlanmış oldu. Kullanıcıdan aldığımız izinler ölçüsünde Facebook’tan kullanıcı hakkında bilgi alabilir, timeline’a post edebiliriz. Bu işlemler için ayrıca metotlar yazmak gerek.

Bunu da bir başka yazımda aktarmaya çalışacağım.

Kolay Gelsin.

iOS 7 : Welcome to the future of the iPhone

May 13, 2013 Design, iOS, UI No comments

iOS 7 ile ilgili konsept bir tasarım. Oldukça başarılı..

Facebook Home 1 milyon kere indirildi.

May 13, 2013 News No comments

Tam 1 ay önce Facebook’un CEO’su Mark Zuckerberg tarafından Android platformuna durulan Facebook Home 1 milyon kere indirilme sayısına ulaştı. Uygulama ilk 10 gün içerisinde 500.000 rakamına ulaşmasına rağmen 1 milyona ulaşması daha fazla zaman aldı. Şuan Android markette top 100 listesinde girmiş durumda.

Facebook’un aktif 750 milyon mobil kullanıcısı olduğunu düşünürsek yaygınlaşması epey zaman alacak gibi görünüyor.

Samsung Galaxy IV – 14 Mart

February 25, 2013 News No comments

Reuters in haberine göre Samsung’un yeni akıllı telefonu Galaxy IV 14 Mart’ta New York’ta yapılacak bir etkinlikle tanıtılacak.

Beklenen özellikler: Exynos 5 8-core processor, 4.99” Full HD ekran, 2GB RAM, 13 MP Kamera ve Android 4.2.2.

Sony Playstation Event – Muhtemel PS4 duyurusu yapılacak?

February 20, 2013 News No comments

Sony’nin yakın zamanda twitter’dan duyurduğu ve Future of Playstation olarak adlandırdığı event bu gece TR saati ile 01.00′de New York’ta yapılacak. muhtemel bilgiler PS4′ün tanıtılacağı yönünde.

Ayrıca süpriz bir şekilde 2013 kasımda ayında çıkabileceği ve telefon ile kontrol de edilebileceği söylentiler arasında.

Akşam bekleyip göreceğiz.

One ASP.NET

February 19, 2013 ASP.NET No comments

Merhaba,

Temmuz ayında Microsoft asp.net’in geleceği ile ilgili bazı bilgileri paylaşmaya başlamıştı.

Şuanda ASP.NET, web forms ve mvc olmak üzere 2 framework üzerine kurulu durumda ve Microsoft’un değerlendirmesine göre bu durum biraz kafa karıştırıcı. Çünkü mevcut durum developer’lara 2 frameworkten biri tercih etme zorunluluğunda bırakıyor.

Yeni yaklaşımda standart bir ASP.NET Web Application üzerinden hem mvc hem web forms özellikleri iç içe kullanılabilecek.

Mevcut yapıda:

Microsoft’tan Scott Hanselman’ın ASP.NET ile ilgili gelişmeleri anlattığı videosuna http://channel9.msdn.com/Events/aspConf/aspConf/aspConf-Keynote-Scott-Hanselman adresinden ulaşabilirsiniz.

Bu çalışma için ilk update yayımlandı. Detaylar için

:http://www.hanselman.com/blog/ReleasedASPNETAndWebTools20122InContext.aspx

Responsive design

January 14, 2013 Design, HTML 5 No comments

Responsive Design

January 9, 2013 CSS 3, Design, HTML 5, UI No comments

Yaklaşık 5 sene önce web tasarımcıları sadece masaüstü pc’lere göre tasarımlarını yapıyordu. 2013 yılına girdiğimizde ise farklı ebatlarda tabletler, akıllı telefonlar vb. cihazlar ile internete girmek mümkün.

Bu durum aslında tasarımcılar için tam bir kabus. Çünkü her bir cihazın farklı bir çözünürlüğü var. Bu da görüntülenecek web sayfasının cihazın ekran ölçülerinde nasıl görüneceği sorusunu gündeme getiriyor.

Üretilebilecek çözümlerden biri amaca uygun bir uygulama geliştirmek iken diğeride son dönemde oldukça popüler olan bir tasarım modeli: Responsive Design.

CSS3 ve Mobil

CSS3 web tasarımcıları ve geliştiricileri için oldukça heyecan verici özellikler ve kolaylıklarla geldi. Ancak tüm bunların yanında kocaman bir Internet Explorer 8 ve öncesine ait sıkıntılarıda getirdi. IE8 ve öncesi versiyonlarının neredeyse hiç destek vermemesi hayal kırıklığıydı. Neyseki bu durum iOS ve Android cihazlar için geçerli değil.

Responsive Design başlarda karmaşık gelebilir ancak oldukça basit.

Anahtar: Media Queries

Media Queries, CSS2′deki Media Types’ın daha geliştirilmiş hali. Temel olarak görüntüleme yapılan cihazın yeteneklerine göre sayfayı düzenler.

Örneğin:

-browser’ın genişliği ve yüksekliği,
-Cihazın genişliği ve yüksekliği,
-Orientation yani cihaz yan mı yoksa dikey mi duruyor,
-Çözünürlük,

gibi yeteneklere bakılır. Önemli olan nokta browser’ın Media Queries’i desteklemesi. Desteklemeyen IE8 gibi browser’larda javascript ile çözüm üretebiliriz.

safari’nin desktop versiyonu ile görüntülenen sayfa

Aynı sayfanın iphone’daki safari hali

Örnek

1. Adım: Meta Tag

Pekçok mobil tarayıcı mevcut sayfaları görüntülemek için belirli bir oran üzerinden sayfayı daraltır. Bunu sayfamızda <head> etiketi içine yazılan kod ile tanımlayabiliriz.

<meta content="width=device-width, initial-scale=1.0" name="viewport">

Internet Explorer 8 media query desteklemiyor. Bu nedenle javascript kullanmak gerekiyor. Aşağıdaki kodu da ekleyelim.

<!--[if lt IE 9]>
	<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

2. Adım: Html Sayfası

Örnek olarak bu html sayfasını indirebilirsiniz.

3. Adım: media Query

CSS3 Media Query bu işin merkezinde. Bu aynen if içinde tanımladığımız koşul mantığında çalışıyor.

Örnek sayfada tanımladığımız genişlik değerlerine göre elementlerin özelliklerini otomatik olarak değiştiriyor. Yani yazının başında belirttiğim viewport genişliğini ayarlıyor.

Sayfanızda header, section gibi Html5 elementlerini kullanıyorsanız IE9 öncesi bu elementleri tanımayacaktır. Bunu çözmek için browser’a aşağıdaki javascript ile elementleri tanıtabiliriz.

<!--[if lt IE 9]>
	<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Esnek Resimler – Flexible Images

img {
	max-width: 100%;
	height: auto;
	width: auto\9; /* ie8 */
}

Esnek Videolar – Flexible Videos

.video embed,
.video object,
.video iframe {
	width: 100%;
	height: auto;
}

Cihazlara göre çözünürlükler

Ufak telefonlar: 240 x 320
iPhone : 320 x 480
Ufak Tabletler (7″) : 480 x 640
iPad (Dikey) : 768 x 1024
iPad (Yatay) : 1024 x 768

Sonuç

Yinede sayfanızı responsive olarak oluşturmak istemeyenler için farklı çözümlerde var. Bunlardan birincisi tamamen mobil için hazırlanmış ayrı bir sayfa yapmak. İkincisi ise platforma uygun uygulamayı hazırlamak.

Tercih sizin

Web Tasarım 2013 Trendleri

January 9, 2013 Design, UI One comment

2012 yılı web tasarımı için oldukça hızlı geçen bir yıl oldu.

2013 yılında özellikle Responsive Design, daha renkli fontlar, Parallax Scrolling gibi yapıları içeren siteler göreceğiz.

Responsive Design

Bu tasarım modeli aslında uzun zamandır kullanıyor. Ancak iphone ile başlayan günümüz telefon ve tablet kullanımının inanılmaz artışı da tasarımcılara bu cihazlarda sayfaların nasıl görüneceği hakkında yeni yollar aramaya itti. Artık kullanıcıların en sık ziyaret ettiği sitelerin mobil tarayıcılarda görüntülenme oranı artmaya devam ediyor.

Neyseki Html5 ve CSS3 ile çözüm üretmek kolay. Responsive design temel olarak hazırlanan web sayfasının görüntülendiği cihazın özelliklerine – ekran genişliği, çözünürlük vb. – göre göre kendisini uyarlaması olarak özetleyebilirim.

Hazırladığımız web sayfasının her 3 cihazdaki görünümü

Font

2013 yılı bence fontların yılı olacak. Çünkü uzun zamandır özellikle Helvetica nedeniyle sade fontlar oldukça rağbet görüyor. Büyük sosyal paylaşım sitelerinin de öncülüğünde bu font uzun süre yaygın olarak kullanıldı.

2013′de ise tasarımcılar bir web sitesinin en temel öğelerinden olan font konusunda daha özgür tercihler yapacak.

Internette bir sürü font sitesi var. Benim en çok baktığım siteler dafont ve fontempire.