Başlangıç

Konu: CSS Filtreleri
Uyumluluk: Webkit Nightlies
Karizma Puanı: 100

w3‘ün geçtiğimiz ay yayınladığı filtre efektleri beni oldukça heyecanlandırdı! Bu yeni teknolojiyi Google Chrome’ın tasarımcı ve geliştiriciler için özel olarak sunduğu Kanarya tarayıcısında deneyebilirsiniz. Kısa zamanda diğer browserlara da yayılacağını da umuyorum.

Güzel bir örnek…

Ayrıntılara girmeden önce hemen bir örnek gösterelim.

img {
-webkit-filter: brightness(0.1) drop-shadow(7px 7px 20px black) grayscale(1) opacity(1) sepia(1);
}

İşte inanılmaz, Photoshop’tur bu dedirten sonuç:

Hemen siz de deneyin.

Özellikler

Aşağıdaki markup üzerinden Webkit browser olan Canary ile birkaç test yaparak özelliklerin test edelim.

<img src="http://upload.wikimedia.org/wikipedia/en/9/9e/Deviantart_logo.png" alt="DeviantART Logo">

Not: Birçok tarayıcı desteklemediğinden snuçları ekran görüntüsü olarak ekleyeceğim, isterseniz deneyebilirsiniz.

hue-rotate

Hue/Saturation ayarı ile oynuyoruz. Photoshop’tan tanıdığımız, resimleri siyah/beyaz’a çevirmekten tutun genel olarak renkleriyle ilgili size bir çok güzel imkan sunan tool. Şimdi bunu css ile deviantart görseline uygulayalım.

img {
   -webkit-filter: hue-rotate(50deg);
}

İşte sonuç:

Biraz animasyon katalım:

    img {
       -webkit-animation: adjustHue 1s alternate infinite;
    }  

    @-webkit-keyframes adjustHue {
       0% { -webkit-filter: hue-rotate(30deg); }
       50% { -webkit-filter: hue-rotate(60deg); }
       100% { -webkit-filter: hue-rotate(90deg); }
    }

[demo]

grayscale

256 çeşit gri ile siyah/beyaz yapalım görselimizi.

    img {
       -webkit-filter: grayscale(100%);
    }

İşte Sonu:

sepia

Instagram tarzı bir efekt olan sepia’ya bakalım.

img {
      -webkit-filter: sepia(100%);
}

İşte sonuç:

blur

Bulanık mod

img {
      -webkit-filter: blur(2px);
}

Sonuç:

brightness

ışığınız bol olsun

img {
      -webkit-filter: brightness(45%);
	  }

Sonuç:

contrast

img {
      -webkit-filter: contrast(200%);
	  }

Sonuç:

invert

img {
      -webkit-filter: invert(100%);
}

Sonuç:

saturate

img {
      -webkit-filter: saturate(0%);
}

Sonuç:

Birlikte Kullanım

Bu efektlerin kombinasyonunu birlikte kullanarak daha farklı şeyler yapabilirsiniz.

img {
      -webkit-filter: brightness(60%) sepia(100%);
}

Sonuç

Kombinasyonlar ve yeni değişkenler sizi bekliyor. İyi çalışmalar

İçerik Tasarımı: Tipografi

Typography (Türkçe olarak tipografya veya tipografi) web arayüz tasarımcıları ve geliştiricileri için halen rahatsız edici bir gizem halinde. 6 ipucu ile bilgi düzeyinizi arttıracak, yanlış bilgilerinizi umarım düzeltecek, kısaca sizi geliştirecek bilgiler paylaşmayı amaçlıyorum.

Giriş

Tipografi, harfler, kelimeler, paragraflar ve nasıl birbirleriyle tasarımsal olarak etkileşimi sanatıdır. Web üzerindeki içeriğin 95%’i yazılı olarak sunulduğundan, “web tasarımının 95%’i tipografidir” diyebiliriz. Dolayısıyla arayüz tasarımcılarının font ve typeface seçiminden öte tipografi konusunu ayrıntılı incelemeleri gerekmekte.

Not: Yazının bu noktasından gerekmedikçe kavramları Türkçeleştirmeyeceğim, sadece Türkçe anlamını açıklayarak devam edeceğim. Böylece bu kavramları derinlemesine incelemek istediğinizde diğer İngilizce makaleleri daha hızlı anlayabileceksiniz ve ben de kavram uydurmuş olmayacağım.

1.Tipografinin Temelleri

Aşağıda tipografi ile ilgili her tasarımcının veya geliştiricinin anlaması gereken bazı temel tipografik tanımlar yer alıyor.

• Ascender: fontlarda küçük harflerin x height’ın üzerinde kalan çıkıntılarına denir. sırasıyla şu harflerde vardır: b, d, f, h, k, l, t.
• Baseline: Font’larda ve muhtemelen kaligrafide de yazı yazılıken harf govdelerinin üstüne oturduğu sanal cizgi. mesela “z”‘nin alt çizgisi baseline üstündedir. referans çizgisi olarak Türkçeleşmiş.
• Cap Height: x height’ın üst kısmı
• Descender: Küçük harflerin x height’ın altında kalan çıkıntılarına denir. sırasıyla şu harflerde vardır:
  g, j, p, q, y.
• Kerning: Harflerin arasında boşluk. hemen sevgi gösterisi: helvetica <3
• Leading: Büyük harf küçük harf farkı (Genellikle font yüksekliğinin yarısı olarak ayarlanır. 12px font-size için 6px)
• Letter Spacing: iki harf yanyana geldiği taktirde aralarında kalması gereken font tasarımcısı tarafından belirlenmiş boşluk, “Tracking.” olarak da bilinir.
• Ligatures: tipografide, iki veya daha fazla harfin, birbirine baglanarak tek bir harf olarak kullanilmasidir. ornek olarak; “fi”, “fj”, “ff” harfleri bazi yazi karakterlerinde birlesik olarak kullanilir.. bunun sebebi de karakterler arasindaki beyaz alani dengeleyerek daha estetik gorunmesini saglamak ve yazinin okunakliligini arttirmaktir. ligaratür olarak geçiyor.
• Line Height: Büyük harfleri de kapsayan çizgi yüksekliği. Yüksekliği belirlemek için kullanılan en etkili yoldur. Örneğin 12px font için, 6px leading (yarısı demiştik) eklersek 18px line-height tanımlayabiliriz.
• Measure: Genişliği karakter olarak tanımlamak – Genellikle 60 olarak tanımlanmakta tabi fonta ve projeye göre değişir.
• Rendering: Okuma ve yorumlama işlemi. Her tarayıcı kahretsin ki farklı bir sonuç verebilir.
• Weight: Kalınlık ve incelik durumları.image-based tipografi ile, Semibold, Light ve Black olarak kullanmak mükemmel rahatlık vericidir, normal ve bold olarak genellikle kullanılır.
• Word Spacing: İki kelime arasındaki boşluk
• X-Height: baseline ve meanline arasındaki boşluk. (the “x” glyph).

Tipografik Ölçeği

Etkili bir tipografik ölçeği oluşturmak için, bulduğum en iyi yöntem, belirli bir belgenin tabanına göre boyutunu ayarlar boyut ölçüm birimi “em” kullanmaktır. Yani tek bir öge üzerinden diğer tüm hx taglerini orantılayabilirsiniz.

    body {
     font-size: 12px;
    }
    h1 {
     font-size: 5.0em;
    }
    h2 {
     font-size: 4.0em;
    }
    h3 {
     font-size: 3.0em;
    }
    h4 {
     font-size: 2.0em;
    }
    blockquote {
     font-size: 1.5em;
    }
    p {
     font-size: 1.25em;
    }
    input {
     font-size: 1.0em;
    }
    small {
     font-size: 0.75em;
    }

Dikey Uyum

Gözün içeriği rahatlıkla takip edebilmesi için satırlarası boşluğu ifade eder. 1.5 em gözlemlerime göre en uygun olanı.

Aşağıda 960px grid için hazırlanmış örnek bir “vertical rhythm” yer alıyor.

    body {
     font-size: 12px;
     line-height: 15px;
    }
    p {
     margin-bottom: 15px;
    }

Tarayıcılar

Biraz önce bahsettiğim gibi tarayıcılar tasarımımızı farklı renderlar. İşte 5 farklı tarayıcının aynı tasarımı nasıl farklı gösterdiği

1997 yılından beri tasarımcılar tarayıcılar arasındaki farklı görünümün farkında olarak tasarlıyorlar. Açıkcası neden hale dur denilememiş bilemiyorum, belki bir gün biz deriz fakat şu an için yapılabilecek en mantıklı şey tasarımınızın tamamını tasarım programlarında gerçekleştirmemeniz. Yani .psd halindeyken tasarımınız çeşitli rahat alanlar oluşturup, css’inizi kodlarken de bu alanları tarayıcılara onların nasıl farklı gösterdiğinin bilincinde olarak çeşitli düzenlemeler yapmak gerekiyor. Hatta bu düzenlemeleri css’e geçmeden tasarım .psd halindeyken düşünülmeli.

Grid sistemi de bir çözüm, ayrıntılı bir makele olarak Andy Clarke’ın yazısını öneriyorum yeri gelmişken. Biraz da burada bahsedecek olursak gridler aracılığıyla tarayıcıda tasarımı geliştirmeye devam ederken sınırları daha rahat görebilir ve çözümler üretebilirsiniz. Aşağıdaki classları css’e ekleyerek html’de kullanarak tasarım yapmanız oldukça geliştirici olacaktır.

    .grid960base15 {
     width: 960px;
     line-height: 15px;
     background: url(images/grid960base15.png) repeat-y;
    }
    .grid960base18 {
     width: 960px;
     line-height: 18px;
     background: url(images/grid960base18.png) repeat-y;
    }
    .grid960base30 {
     width: 960px;
     line-height: 30px;
     background: url(images/grid960base30.png) repeat-y;
    }
    .grid600base12 {
     width: 600px;
     line-height: 12px;
     background: url(images/grid600base12.png) repeat-y;
    }
    .grid600base16 {
     width: 600px;
     line-height: 16px;
     background: url(images/grid600base16.png) repeat-y;
    }
    .grid600base18 {
     width: 600px;
     line-height: 18px;
     background: url(images/grid600base18.png) repeat-y;
    }

Grid-making Bookmarklet gibi farklı çözümler de denenebilir.

CSS Image Replacement

Başlığı nasıl çevirebilirim bilemedim, çevirmedim dolayısıyla. Kısaca şöyle anlatayım, divler veya css ile etki edebileceğiniz herangi bir öge içersinde olan text’i kendisine arkaplan tanımlayıp, text’i de css ile görünmeyen kılmanızı sağlayacak güzel bir hamle.
Bunun için birçok teknik var. En ünlüsü;

<h1 class="rss">
	RSS
</h1>

h1.RSS {
	width: 350px; height: 75px;
	background: url("images/RSS.jpg");
	text-indent: -9999px;
} 

Yani 350 x 75 alan için rss.jpg görselini gösterip, text içerik olan RSS ögesini de tens-indent ile 9999px dışarı alarak tarayıcının muhtemelen stad büyüklüğünde olmayan tüm versiyonlarında dışarıda görünmesini sağlıyor. Böylece arkaplandaki görsel ile çeşitli tipografik çalışmalar yapabilirsiniz. Başka yol isterim diyenler tık tık tık

Gelişmiş Image Replacement

Standart bir Image Replacement, çeşitli değişken veya uzun içeriklerde kullanışlılık açısından yetersiz kalıyor. Bu durumda 3 yeni ve gelişmiş seçeneceğiniz var. Flash-tabanlı, Javascript-tabanlı, ve PHP-tabanlı. Benim tavsiyem Js tabanlı olan elbette ama hepsinden bahsedelim.

Scalable Inman Flash Replacement (sIFR)

Shaun Inman tarafından IFR olarak tasarlanmış, arından Mike Davidson ve Mark Wubben tarafından geliştirilerek sIFR olmuş.

Artıları

• anti-aliasing sayesinde kaliteli, net görüntü
• semantik olarak markupta textiniz görüntülenir
• text seçilebilir
• sade bir komut

Eksileri

• Büyük fontlara uyumlu değil
• kurulumu karmaşık ve zor olabilir
• Flash and Javascript gerektirir
• yüklenmesi zaman alır
• baskıda problem yaşatır

a great tutorial on how to use sIFR veya the Official Site for sIFR2 veya the Official Site for sIFR3 üzerinden kullanım bilgilerine erişebilirsiniz, ama kısaca daha iyisi var diyeyim.

cufón

Fena değil fakat oldukça çok eksiği var. http://wiki.github.com/sorccu/cufon/about

Artıları

• en hızlı teknik
• semantik olarak markupta textiniz görüntülenir
• flash olmadığından sistemsel bir gereksinim istemez
• sade bir komut
• kolay kurulum

Eksileri

• Seçilebilir text olmaz
• Lisans problemleri oluşabilir
• :hover konusunda problem yaşatır
• Javascript gerektirir

Facelift Image Replacement (FLIR)

Hiç kullanmadığım bir teknik itiraf edeyim. Çünkü bu bir server-side teknik.

Artıları

• semantik olarak markupta textiniz görüntülenir
• flash olmadığından sistemsel bir gereksinim istemez
• lisans sorunu yoktur

Eksileri

• Seçilebilir text olmaz
• HP ve GD server gerektirir
• kurulumu zordur
• server konusunda maliyetli olabilir

CSS3 ve @font-face

CSS3 oldukça yeni bir teknoloji ve @font-face oldukça önemli bir özelliği.

IE6, IE7, IE8, FireFox 3.5+ (PC & Mac) ve Safari (PC & Mac) Opera 10 ve Chrome destekliyor. Mükemmel. 90%+ kullanıcınızda sorun yaşatmayacaktır.

Bu konuda ben temel bilgimi Fatih Hayrioğlu’nun makalinden öğrendim. Rahatlıkla siz de öğrenebilirsiniz.

Ömür Boyu Beta

• PSDTUTS+ Text Effects TUTS
• 101 Typography Resources from Vandalay Design Blog
• A List Apart
• Abduzeedo
• Astheria
• Font Lover
• Smashing Magazine
• The Typographic Archives
• TypeNow Type Glossary
• Typophile
• Web Designer Depot
• Web Typography Guide

Gibi kaynakları takip ederek kendinizi sürekli geliştirmelisiniz. Öğretmenin en iyi öğrenme tekniği olduğundan bu konuda bir makale yazmaya çalışarak (benim gibi) kendinizi geliştirebilirsiniz.

Ek: Hatamız varsa affola, yorum ola, düzeltile.

CSS(Cascading Style Sheets) geliştiriciler için başlangıç seviyesinde sayılabilecek fakat arşivinizin bir köşesinde yer alması gereken, bazı pahalı hatalardan kaçınmak adına göz gezdirmenizin yararlı olacağı ‘CSS Geliştiricilere 30 İpucu’

1. Anlaşılır Olmak

CSS kodlarınızın anlaşılabilir olması oldukça önemli. Çeşitli güncellemeler yapmak istediğinizde kendinizi kaybetmek istemezsiniz. Kullandığınız bir div’in içeriğini parçalara bölmek yerine tek bir seferde yazmanız mantıklı olacaktır.

.herangibirDiv { background: red; padding: 2em; border: 1px solid black; }

Her stili tek bir satırda yazmanız ve div’in satırından 1 tab içeride olması anlaşılırlığını arttıracaktır.

.herangibirDiv {
           background: red;
           padding: 2em;
           border: 1px solid black;
       }

2. Tutarlılık

CSS için kendi standartlarınızı oluşturmaya başlayın. Böylelikle birden fazla projede benzer class’larla çalışıyor olacaksınız ve hakimiyetiniz kodları rahatlıkla hatırlıyor olacağınızdan artacaktır.

Örneğin bir wordpress sistemi default olarak görsel editörden bir fotoğrafı sağa yaslarsanız otomatik olarak .caption-right classını verecektir. Dolayısıyla birden fazla temanızda .caption-right ‘ı float: right; olarak aynı şekilde kullanıyor olmalısınız.

3. Framework

Her ne kadar kullanmasam ve hatta tavsiye etmesem de araba kullanmak için tekerleği tekrar icat etmek istemeyenler için faydalı olabilecek, size zaman kazandırabilecek olan Framework‘leri tercih eden geliştiriciler var.

Benim düşüncem mevzu araba veya tekerlekten öte arabanın nasıl çalıştığını bilmek ile ilgili. Kendinizi nasıl rahat hissediyorsanız o şekilde devam edin. Fakat framework ile başlamayın, belirli bir süre sonra doğru bir adım ile framework kullanmaya başlayabilir veya kendi framework’ünüzü yazabilirsiniz.

Tavsiye edebileceğim 960.gs var. (Tasarlarken kullanıyorum fakat CSS geliştirirken framework olarak faydalanmıyorum.)

4. Reset

h1 kodu için herangi bir stil tanımlamasanız da fontun otomatik olarak büyük olduğunu göreceksiniz. Bu browserların default olarak tanımladığı stil özelliklerinden biri. Ne yazık ki bu default olarak tanımlanan ögeler tüm browserlarda aynı şekilde tanımlı değil. Küçük bir örnek olarak Firefox 3′te paragraflardan önce boşluk olmasına rağmen IE 7′de herangi bir boşluk yok.

Bu tarz küçük ayrıntılar tasarımınızın farklı browserlarda farklı görüntülenmesine neden olacaktır ve bazı projelerde bu farklılıklar oldukça önemli.

İşte bu noktada Reset CSS olukça zekice bir iş yapıp tüm bu değerleri sıfırlayarak bize tam hakimiyet sağlıyor. Eric Meyer ve YUI 2‘yu Reset CSS olarak tavsiye ediyorum.

5. Yapı

Stil dosyanızı tasarımda kullandığınız öge sıralamasında kodlamanız kullanışlı olacaktır.

1. Genel classlar (body, a, p, h1, vs.)
2. #header
3. #nav-menu
4. #main-content

Ayrıca her bölüm başına notlar almayı da unutmayın.

/****** header *********/
header stil kodları

/****** footer *********/
footer stil kodları

6. Elementleri Birleştirmek

h1, h2, ve h3 isimleriyle 3 adet elementiniz var. tahoma fontu ve #333 rengi bu elementler için ortak, ayrıca her birinin birbirinden farklı boyutları var. Dolayısıyla ortak elementleri birlikte kodlamak ilerleyen günlerdeki değişikliklerinizde hakimiyet ve kolaylık sağlar.

    h1, h2, h3 {font-family: tahoma, color: #333}
    h1 {size: 2.1em}
    h2 {size: 1.6em}
    h3 {size: 1em}

7. Önce markup

İlk bakışta HTML ve CSS’i aynı anda geliştiriyor olmak mantıklı geliyor olabilir fakat yapılması gereken mockup olarak HTML’i kodlamak, zorlanılabilecek kısımları belirlemek, onlara göre özel çözümleri hayal ederek HTML’li geliştirmek, ardından CSS kodlarını yazmaktır. CSS’teki çeşitli gereksinimlerinizde HTML’de tekrar değişiklik elbette yapılabilir.

Öncelikle HTML’i yazmanız default layout olarak siteyi görmenizi, temiz bir kod yazmanızı sağlayacaktır. Ayrıca gereksinimlerden dolayı sürekli öncelik CSS kodlarınızı yenileme gereksinimizi de ortadan kaldırıyor olduğunu farkedeceksiniz.

8. Çoklu Class Kullanmak

Sağa yaslanmış bir kutu oluşturmak için .box olarak css’te kutu tasarlayıp, right ile yaslama işlemini gerçekleştirip aşağıdaki gibi kullanabilirsiniz.

<div class="box right"></div>

Ufak bir not: HTML semantik olarak markup ve içerik içindir, CSS ile sunarsınız. Eğer bir değişiklik için CSS değil de HTML’i düzenliyorsunuz bir şeyleri yanlış yapıyorsunuz demektir.

9. Doğru Doctype

CSS doğrulamaları Doctype’ınıza göre yapılır, Doctype’ınıza göre browserlar sitenizi bambaşka okuyabilir. Fix Your Site With the Right DOCTYPE! bu konuda önemli bir kaynak.

Ben tüm projelerimde HTML5 Doctype kullanmaya başladım.

    <!DOCTYPE html>  

10. Kısaltmak

padding, margin, font gibi çeşitli değerlerde kodlarınızı kısaltmanız gayet mümkün.

    #rss {
        margin-left:    5px;
        margin-right:   7px;
        margin-top: 8px;
    }

yerine aşağıdaki şekilde de kodlayabilirsin.

    #rss {
        margin: 8px 7px 0px 5px;
    }

11. Yorum

    /* yorumlar */  

şeklinde css kodlarınıza yorum ekleyebilir, belirli bir özelliği /* … */ arasına alarak pasif hale getirebilir, çeşitli bugları not alabilirsiniz.

Block vs. Inline

Inline veya Block elemenletler:

    span, a, strong, em, img, br, input, abbr, acronym  

Block elemenletler:

    div, h1...h6, p, ul, li, table, blockquote, pre, form  

Block ve Inline olarak kullanabileceğiniz, clearfix’e gerek duyacağınız durumları sürekli kontrol edin.

13. Alfebatik Sıra

Anlamsız gözükse de birkaç kullanımdan sonra bu ipucunu kullandığınızı dahi farketmeyeceksiniz. CSS element özelliklerinizi alfebatik olarak kodlayın.

    #alfebatik {
        color: #fff;
        float: left;
        font-weight:
        height: 200px;
        margin: 0;
        padding: 0;
        width: 150px;
    }

Göz ile taramanızda uzun vadede size zaman kazandıracak, ayrıca firebug gibi eklentilerle css’nizi görüntülediğinizde otomatik olarak alfebatik sıraladığından çeşitli değişikliklerinizi el ile güncellemek istediğinizde beni hatırlayacaksınız.

14. Sıkıştırma

CSS dosyalarının boyutu normalde fazla büyük olmaz fakat sitenizin açılışını bir nebze olsun hızlandırmak için final dosyanızın satır boşluklarından CSS Compressor ve CSS Optimizer kullarak kurtulabilirsiniz.

15. Genel Classlar

#8′de bahsettiğimiz gibi belirli classları sürekli olarak kullanıyor olacağınızdan genel classlarınızı kullanın. Bu projeyi devrettiğinizde yerinize gelecek develeper’a da yardımcı olacaktır.

    .left {float:left}
    .rightright {float:rightright}  

    <div id="coolbox" class="left">...</div>

16. Margin: 0 auto

Ögelerinizi ortalamak için float:center; yerine

    margin: 0 auto; 

kullanmalısınız.

17. Div Saçmak

    <div class="header-text"><h1>Header Text</h1></div>  

şeklinde kullanmak yerine h1′i kapsayan div’i parent olarak kullanıp stil verebilirsiniz.

    <h1>Header Text</h1>    

18. Firebug

Firebug eğer kullanmıyorduysanız napıyorsanız durun, Firebug’ı kurun. Olmazsa olmaz aracınız olacak! debug JavaScript, inspect HTML, hata bulma gibi özellikleri real-time düzenlemeler derken ertesi gün Firebug yokken geliştiriciler ne yapıyordu diyeceksiniz.

19. Cross-Browser

Cross-Browser desteklemiyor olsa bile CSS ile kimi browserlara güzellikler yapabilirsiniz. Hatta sonrasında Prefixr ile mümkün olduğunca tüm browserlara uygulayabilirsiniz.

.box {
   opacity: .5;
}

Cross-Browser:

.box {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	filter: alpha(opacity=50);
	opacity: .5;
}

20. Absolute Position

Absolute positioning sanırım en sevdiğim yenilikliklerden. Absolute Position ile Parent olarak div’e aldırmadan relative verdiğiniz div’e göre kendini konumlandırıp istediğiniz gibi at koşturun. Tabi birden fazla absolute postion ile veya dikkatsizce atılan adımlarda oldukça komik duruma da düşebilirsiniz.

21. Text-transform

Text-transform ile içeriklerinizi CSS üzerinden yönetebilirsiniz.

22. h1′i gizlemek için Nagatif Margin Kullanmayın

Google’ın web spam tim lideri Matt Cutts’ın söylediğine göre bu spam olarak algılanmakta. alt tagini kullanmanız semantic olarak kendinizi ifade etmeniz için yeterli.

23. Validate CSS ve XHTML

CSS validator ile kodunuzdaki olası hataları giderebilirsiniz. Ben pek umursamam.

24. Ems vs. Pixels

Font boyutlarını tanımlarken em veya pixel’den hangisini kullacağınızın sonucu browserlara göre fark yaratır. Ben pixelcilerdenim. Fakat siz Sizes In Webdesign: Em Vs. Px – and why em is better ve Using Points, Pixels, Ems, or Percentages for CSS Fonts makalelerini de inceleyin, kendiniz karar verin.

25. Listelemenin Gücü

Listeleme oldukça güzel ve güçlü bir özelliktir. Ayrıca semantic olarak da anlam verir. CSS3′ün sağladığı güzelliklerle nth-child (first,last, 1, 5.. )’a özel stil verebilmemiz bence çığır açan özelliklerden.

<ul id="nav">
							<li class="cat-item cat-item-291"><a title="Manşet Alanında Yayınlanan Makaleler" href="http://www.rsskitap.com/bolum/manset/">#</a>
</li>
	<li class="cat-item cat-item-187"><a title="Medyada RSS Kitap'a Yer Verenler" href="http://www.rsskitap.com/bolum/basin/">Basından</a>
</li>
		</ul>

26. Extra Seçicilerden Kaçının

Gerekmediği taktirde parent olan seçicinize alt class eklemekten kaçının.

    body #container .someclass ul li {....}

yerine

    .someclass li {...}

şeklinde kullanmak daha doğru. Bu şekilde css dosyanız mahşer alanı gibi olmaz.

27. Margin ve Padding

Cross-browser sorununa çözüm olarak her şeye margin ve padding eklemek akıllıca olacaktır.

    * {margin:0;padding:0;}

28. Object Oriented CSS

OOCSS sayesinde Javascript’i unutabilirsiniz. Kısa bir sunum ile adım atabileceğiniz OOCSS yeni başlayanlar için zorlayıcı olabilecektir fakat en azından teorik bir bilgiyi edinmeniz ilerleyen günlerde standartlaştığınızda yabancılığınızı önleyecektir.

29. Çoklu Stiller

Bir CMS sisteminin tipografi veya renk seçenekleri olabilir. Ortak alanları style.css’e alıp değişkenler için red.css blue.css gibi çeşitlere ayırabilirsiniz.

Bu dosyaların cachelenmeleri konusunda dikkatli olmayı unutmayın.

30. / Kapatın

XHTML validator ile eksiklerinizi farkedin. Boşa kürek çekmeyin.

Not: Umarım anlaşılır bir makale olmuştur. Hatam varsa affola, yorumlarsanız anında düzeltmek için adım atabiliriz.

Unutmadan: Yazıyı betimleyen thumbnaili tamamen css ile oluşturuldu. Teşekkürler Jeffrey Way, ayrıca makale Nettuts‘a ve Glen Stansberry ayrıca teşekkürler.

Biraz daha teknik blog yazılarına yönelmek istiyorum, eğer blogun gidişatı konusunda söyleceğiniz olursa lütfen çekinmeyin.

Teşekkürler.

• RSS Sonrası için Sakla http://goo.gl/FBy83
• RSS Beslemesi http://goo.gl/RdEQZ
• Paylaşımda Gizlilik http://goo.gl/1No7h
• Anket http://goo.gl/w7EEX
• Albüm Fotoğrafları http://goo.gl/dC1mU

Rıza Selçuk Saydam

İKON Ltd. Sti. üzerinden TRT HD’de Balık Ankara’da Yenir programında Social Media Manager olarak benim de emeğimin olduğunu baştan belirtelim

”Balık Ankara’da Yenir”de 13 hafta boyunca Süreyya Üzmez ve Başak Temel, Türkiye’nin farklı köşelerinde balık kültürüne dair her şeyi izleyenlerle paylaşacak. Ankara’da, yakından tanınan ve sevilen konuklarla sohbet edecek olan ikili, daha önce tatmadıkları deniz ürünlerini konuklarına ikram edecek. Yemeklerin tarifleri ve yapılışları da aynı programda yer alacak.

Program, sevmeyene balık sevdirecek, sevene izlettirecek, evinde pişirmeyene önyargısını unutturacak, pişirene nefis tarifler sunacak. Hayatında balığa hiç yer vermemiş olanları balık tutkunu yapacak. ”Balık Ankara’da Yenir” ile şimdiye kadar hiç duymadığınız bilgiler, ünlü konuklar, leziz sohbetler ve enfes yemekler TRT HD ekranlarında olacak.

Süreyya Üzmez ve Başak Temel programda, Haldun Dormen, Ayşegül Aldinç, Yavuz Donat, Nilgün Belgün, Ali Şen, Tekin Acar, Muharrem Sarıkaya, Erkan Tan gibi yakından tanıdığınız isimleri ağırlayacak. İkili, zamansız ve usulsüz avlanmadan güzellik ve sağlığa, lezzet ipuçlarından balık kültürüne kadar farklı konuları içeren sohbetleriyle ekran karşısında olacak.

Balık Ankara’da Yenir! Ne kadar ilginç bir iddia değil mi? Halbuki öyle değil. Bir şehir efsanesi olan Balığın Tazesi Ankara’da Yenir sözünü hatırlayın, programımız bu efsanenin kanıtı olarak onu gerçek kılmakta ve En İyi Balık Ankara’da Yenir diye eklemekte.
Ankaralı müşterilere her gün en taze ve en iyi balığı sunulmasının sırrını sizlere açıklamanın zamanı geldi. Ankara’da, deniz kıyısındaki restaurantların aksine sadece çevre balıkçılarından değil, Türkiye’nin en iyi balıkçılarından ürünler günlük olarak rahat ulaşım imkanlarıyla Ankara’ya, Türkiye’nin başkentine temin ediliyor. Sabahında Karadeniz’den toplanmış hamsi Sansun’dan, Körfez’in karidesleri İskendurun’dan, lahozlar Antalya’dan, çipura İzmir’den, lüfer ve ahtapot Çanakkale’den, kalkan İsntabul’dan ve mevsiminde papalina Ayvalık’tan Ankara’ya öğleden sonra iniyor ve akşam sofranızda yerini buluyor. Güzel hammaddeyi güzel işleyince güzel lezzetler ortaya çıkıyor.
Gönüllü barış elçisi olarak da bilinen ve balıkta trend isim Trilye’ye uğramadan başkentten dönülmez dedirten sahibi Sürüyya Üzmez’in sözleri bu konuda oldukça aydınlatıcı. “Bütün canlılarda ölüm sertliği olur. Öldüğü anda kasları sertleşir. Vücuttaki kasların yumuşaması için en az altı saat geçmesi gerekir. Bu yüzden en iyi balık Ankara’da yenir. Çünkü denizden tutulup, Ankara’ya gelene kadar en az altı saat geçiyor.”

“Balık Ankara’da Yenir”, sosyal medyada da bir ilki gerçekleştiriyor. Programın kamera arkası görüntüleri, seyahatlerden notlar ve çekimlerle ilgili tüm detaylar  sosyal medyada Twitter: @ankaradabalik ve Facebook: Facebook.com/AnkaradaBalik sayfalarında program takipçileriyle ilk günden itibaren paylaşılıyor.

–TRT HD Nasıl İzleyebilirim?
Turksat 42E 11043 V 6400 3/4
Digiturk 333.Kanal
D-Smart 110.Kanal
Teledünya 7.Kanal
Iphone ve Ipad Uygulamaları

DVB-T2 (ANKARA) 7/24 yayın

Facebook’ta Canlı Yayın: http://www.facebook.com/TRTHDTV?sk=app_218917304809582
Yayın saatleri için : http://www.trt.net.tr/televizyon/#yayin_akis_trt
Fragman : http://www.youtube.com/watch?v=flD1Oqm6pjs

Detaylı Bilgi ve İletişim: info@ikon-ltd.com

İlk program 4 Eylül Pazar 16:50 ve 19:25’de.

Tekrar saatlerine TRT web sitesinden ve program sosyal medya sayfalarından ulaşabilirsiniz.

• Müşteri Hizmetleri linki oldukça gizli kalmış durumda. MyBilet Destek Hattı olarak yan menüde de yer alan bölümde irtibat telefonu / mail yer alıyor, asıl kullanışlı alanın linkinin de yer alması gerek.
• Favori Mekanlarım veya eski adıyla Benim Mekanlarım alanında geliştirmeler gerek. İlk aklıma gelen bir filtre eklemek. Tıklandığında bir çoğunda, özellikle yaz aylarında “Bu etkinlik yeri için tanımlanmış bir etkinlik bulunamadı… ” yazıyor. Örneğin aktif etkinlik olmayanları gizle gibi bir seçenek sunulabilir. Ayrıca filtre olarak tarih aralığı, il gibi seçenekler de eklenebilir.
• MyBilet Etkinlik Bülteni konusunda ciddi anlamda zayıf. Her ay genel bülten yollanabilir, bu konuda problem yok, prestijli işlerini paylaşmak isteyebilirler. Benim özellikle istediğim belirlediğim mekanlara eklenen yeni etkinliklerden haberdar olabilme imkanı. Mekanların üst menüsünde “Favori Mekanlarım’ a ekle | Haritada Göster” yanına Etkinlik Eklenince Haber Ver gibi bir seçenek daha sunulmalı. Hatta mekanların etkinliklerini mail ile haberdar etme yanında RSS desteği de sunulmalı.
• MyBilet gelir paylaşımı sunabilmeli. Örneğin ben gittiğim etkinliklerden bahsettiğim bir sitemde MyBilet etkinliğine link verdiğimde ref ile az da olsa belirli bir ücret alabilmeliyim. Biliyorum ihtiyaçları yok, alanında devler fakat daha da büyümek ellerinde.
• Gelir paylaşımının ardından API yayınlamalılar. Böylelikle etkinlik bilgilerini otomatik mybilet’ten çekebilir, tarihlerini yayınlar, ref ile gelir kazanır, sistemi genişletir, hit alır bir çok şey başarırlar. Ayrıca yaratıcı beyinlerin API ile sistemi nasıl geliştireceğini hayal bile etmek güzel.
• Kamil Koç gibi seyahat firmaları da MyBilet’te görmek çok güzel. Umarım büyükdükçe etkinliklerden alınan hizmet bedeli düşer.
• Android üzerinden giriş yapıldığında mobil bir arayüz geliyor. Bu arayüz 3. adımdan itibaren patlıyor. Düzeltilme mükemmel olur, ayrıca Android app yapılırsa da tadından yenmez.
• Etkinliklerim alanında şimdiye kadar aldığım tüm biletleri görmek isterim. Hatta abartır da ne kadar bilet almışım, ne sıklıkla almışım gibi istatistik sunarlarsa bana mutlu olurum.
• Bizimle Çalışın alanında açıkta olan pozisyonları paylaşmalılar.
• Açık para konusunda esnek olmalılar. İşletme Grubuna göre ayırmaları kafa karıştırı olabiliyor.
• Bileti MyBilet makinelerinden alırken kredi kartımın tüm bilgilerini girmem çok riskli. Biri kamera ile izliyorsa? Belirli bir kısmını girdirmesi (atıyorum ilk 6 hane) ve cep telefonu ile o an onay sistemi olması çok iyi olur.

Bu yazıyı aklıma bir şeyler geldikçe güncelliyeceğim. Kendilerini çalışmalarından dolayı tebrik ederim.

Web 2.0 Sunumu

Blogumun genel içeriği Türkçe olduğundan bu yazıya Türkçe ön açıklama koymayı uygun buldum. 9 Mayıs 2011 tarihinde Çankaya Üniversitesi, Mavi Salon’da Web 2.0 konulu bir sunum yaptım.

Bu yazımda sunum dökümünü sizlerle paylaşacağım. Belki gelen yorumlarla hatam varsa farkeder veya bu konuda çalışma yapanlara katkıda bulunabilirim. Sunumu İngilizce olarak İngilizce öğretmenlerine yaptığımı ve Web 2.0 kelimesini tahminimce ilk kez benden duyduklarını belirtmeliyim, bu konuyu neden genel olarak ele aldığımı ve ilgi çekici hale getirdiğimi açıklar sanırım. Teşekkürler.

Intro (via)

Presantation Media (via)

Web 2.0 Presentation (via)

Good afternoon everyone!
Before start my presantation i want to say thank you to my instructor Yağmur Sönmez and all
of you because of having this opportunity, i am honoured.
Shall we start? My name is Rıza Selçuk Saydam. I’am a student of Matematik and Computer
Science at Cankaya University.
Today i will talk about Web 2.0. My purpose of the talk is showing how important you’re and
idetify that clearly. Also i hope after the presantation you’ll be able to find new ideas for
change Web 2.0 to Web 3.0.
My presantation will take about fifteen minutes and it will be a little bit fast.
If you have any question during the presantation, please wait and take notes, i will answer all of
them after my presantation.
I prepared intro about my topic. Let’s have a look at that.
As you can see on the screen the web has tree main parts.
Web 1.0 | Web 2.0 | Web 3.0
I’ll begin with explain what was web 1.0.
Than i’ll go on to Web 2.0, at this part i’ll speak about people, intracting, creating, benefits and
power.
After that i will identify problem about Web 2.0.
Finally i’ll move on web 3.0 and i ‘ll offter some solutions.
I want to show some famaus cover from TIME magazine for draw your attention.
On the right side you can see Adolf Hitler and on the left side Martin Luther King Jr.
They were leader! Thats shows us if you were a leader, you could be TIME cover.
In the evelution of time, Albert Einstein became TIME cover. Now it’s going to be about
what you invented for world.
At this time computer moved on the area and Facebook’s inventer Mark Zuckerberk was
become TIME cover.
I think you will be suprised to see last TIME cover.
Because the last Time cover is you! Yes, you! You control the Information Age.
Welcome to your world!
What i would like to say here is web 2.0 is you!
To understand Web 2.0 clearly let’s continue with explain what was web 1.0
The World Wide Web invented at twenty century. It’s still a baby.
Web 1.0 was read-only web!
Look at the visiual. It’s actually all about web 1.0. The man is talking and talking.
The other is getting bored. Because at this time there wasn’t even comment area in websites.
However it was really Powerful! There wasn’t a lot of websites so websites own the data.
Websites was magnanimous!
But something terribly going wrong! People loves to talk!
Than Web 1.5 invented with Chat. Actually that was not enough too.
Because there was no database, no security, no username, no password.
It was real revolution but as i said that was not enough!
All of them bring us to Web 2.0. The web as a PLATFORM!
Today we have some web standards, Remixability, Usability.
I leasted some important keyword on the screen.
So what is Web 2.0 in real mean?
It’s everyting which is realeated with YOU! You’re the Web 2.0.
It’s Google to find, Youtube to watch, Wikipedia to find imformation,
Flickr to share your photos, blogger to post your ideas, RSS to subscribe
websites, twitter to say what are u doing, foursquare to share where you’re
and facebook to do all of them.
And this are just solutions. THERE ARE NO PRODUCTS! ONYL SOLUTIONS!
Moreover Web 2.0 is about intracting. Look at the screen, this are screenshot of
Windows Live Messenger, Skype and Google Talk… There are a lot of
online people in different platforms in the same time. As you can realized i’m using
myself in that slide and will use in the others too. Because Web 2.0 is all about you,
and in that case ‘you’ is ‘me’. I think i have to use myself. Let’s move on next slide.
This people also love ‘Creating’! I’m one of them. I like sharing my thoughs, links, photos,
vidoes on Facebook and likewise websites. And not just me! Seventy four people also online.
At the 1 oc’lock, midnight!
If we look at demographic profiles with in age & gender factor, we can see this people are
mostly adult, and they know what are they doing. Also there are female users more than male’s.
It’s somethig suprsised.
Look at mine 3 diffrent profile in Twitter and Friendfeed. I use 2 different twitter profile
to communicate different type people. My first account has twelve thousund,
second has seven houndred and third has more than one thousend and six houndred followers.
That’s mean there are a lot people.
This users add value on this websites. Some of them says that is not enough to share.
They can create their own Blogs. To share their voice on the WEb more laudly.
Here is the my blogs for example.
So you can do everything with Web 2.0.
There are a lot of benefits and Web 2.0 is really powerful with this benefits!
First of all it’s sofware. As i said you can create your own blog! It’s actually free!
You can use Blogger.com and tumblr.com for create your own blog! It’s really easy.
Second benefits is Loyalty.
Facebook has more than 500 million active users, also they have
250 milliyon active users on mobile too. They all connected at any time!
And fifty percent people login every single thay! That’s what i call loyalty.
Third benefit is Reduce cost.
If you’re a company you can create your own web site with really reduce cost.
For example Media Temple.com’s price is 20$ / month, DreamHost’s price is 10$/month!
With unlimited storage and bandwith! Isn’t it great?
And Fınal benefit is Marketing, Public Realations and Social Media.
Here’s a few mail which was came to me. One of them is about CNBC-e Business Blogger
Campain, the other’s is about TEDxReset invention, Startup Weekend Istanbul e-mail, and a
repy to my e-mail
from Facebook inventer Mark Zuckerbecs.
In additional Web 2.0 is connecting people with solutions. This solutions makes your life
easier than past.
It’s all i want to say about Web 2.0.
But let’s ask our self a question? is it enough? Of course not!
Imagine yourself searching imformation about your work. Google gives you a lot of resuts,
and non of them is what you want. Let’s identify problem: IT’S INFORMATION POLUTION!
So how can we deal with that?
Thet answer is Web 3.0 which is we called Semantic web.
It’s mean find what you want! I choiced 2 example about Web 3.0.
One of them is Wolfrang Alpha. It’s knowlege engine, which is answer your real question.
For example i gived the imput area to my first Calculus midterm’s first questions.
It answered my problem with soluions, and result was true.
It also answers about chemisctry, history and likewise topics.
The other example is of course Google!
If you noticed it, nowadays google tries to use I’m feeling lucky button. That button directly
redirect you to what you want. For example if you search Cankaya University with I’m feeling
lucky button.
That means Google ‘ll redirect you to Cankaya university website which is cankaya.edu.tr
I hope you’ll be able to invent the next Web 3.0 solution. That’s all i want to say about web
3.0.
Oke than, let’s summiraze what we talked about.
As you all remember Web 1.0 which is invented 20 century, was read-only web!
With chat reveolution it became web 1.5.
Than we met with Web 2.0.
It has simple solutions. Web 2.0 gived us to sharing, creating opportunty.
We can call Web 2.0 as read-write web! It’s about evertything, exitly YOU.
Then we talked about about information pollutions.
And than we moved on Web 3.0 as solution which will organize world information.
Thank you. Now, is there any question?

Plexus flash games Puzzles adlı site için yapılan logo ve site tasarımı için hedeflenen değerler sevinç, farklılık, çeşitlilik, mutluluk, paylaşmak ve pek çok renk olmuş.

Logonun ilk çalışmalarında ‘P’ harfinin baskın bir yaratıcılığı olduğu dikkatimi çekti. Yukarıda typography ile oldukça güzel işler başarılmış fakat eğer fikir değiştirmeseler aşağıdaki mükemmelliğe ulaşamayacaklardı. Bence bu nokta kritik çünkü oldukça güzel bir logo oluşturup daha iyisini yapabiliriz demek!

Plexus’un X’ine odaklansalar da daha sonrada sadelik ile birlikte logo yukarıdaki gördüğünüz hali almış.

Yukarıda gördüğünüz değişimi yaşatan ise doğru yolda olduklarını anladıktan sonra kullandıkları ögeleri kendileriyle daha ilgili ögelerle değiştirmek olmuş.

Kısa bir süre sonra da logo son halini almış;

Böylesine mükemmel bir tasarım da tabiki karşılıksız kalmamış.
. Plexus also be included on several lists on blog that i really respect, so thank you fellas for the mentions.  :)

The Plexus Puzzles logo was featured on

LOGOPOND || LOGOGALA || LOGOOFTHEDAY || LOGOSPIRE || LOGOMOOSE || LOGOTREASURE || THELOGOMIX || LOGOBLISS || THEDESIGNINSPIRATION || SHARELOGO || LOGOFURY ||  COLOURLOVERS

Bir de web sitesine baktığımızda çocuklara yönelik olmasından ötürü düşünülen sadeliğin hissedilmediği, basitlik duygusu veren bir site. Bu konuda yeterince başarılı olunduğu söylenemez.

Breno Bitencourt(+via) ‘un beğendiğim diğer tasarımlarından seçmeyi de sizlerle paylaşamak istiyorum. Kendisiyle iletişime geçmek isterseniz; Bitenquote@gmail.com

Camila Almeida

CA – Nutrition Logo/Identity

Linda

Linda corporative Identity

Silfver Creations

Silfver Creations- Logo/Identity Development

Breno Bitencourt

Kişisel Logosu

AG Dentistry

Typography, Branding

Anna’s Choice

Anna’s Choice – Corporate Identity

Dandelion

Teşekkürler.

Kısaca…

Ankara Events aracılığıyla Fonksiyon Manuel Fizyoterapi ve Elif Özkaleli adına geçen ay başlatılan sosyal medya çalışması kapsamında “Yaşam harekettir, hareket yaşam!” sloganı ile başlayan “Sağlıklı Yaşam Hareketi” Sohbeti ve Kahvaltısı’na blog yazarı olarak davet edildim.

Türkiye’nin çok az sayıdaki manuel fizyoretapistlerinden olan Sayın Elif Özkaleli Vardar ile sağlıklı yaşama dair sohbet etme ve Ankara Events’i temsilen Başak TEMEL ile Ankara’daki diğer blog yazarlarıyla tanışma fırsatı buldum. İlginizi çekerse bu konuyu biraz daha açacağım. ((:

Neden Blog Yazarları Davet Edildi?

Cevap tabiki Sosyal Medya. Halka en içten, güvenilir, hızlı şekilde sesinizi duyurmak istiyorsanız arkadanızda blog yazarları olması gerek. Kısa, öz bir şekilde bloggerlara destek olarak onların yanınızda yer almasını sağlarsanız ve işinizde iyiyseniz sosyal medyaya Fonksiyon Manuel Fizyoterapi ve diğer markalar, hizmetler gibi katılmalısınız.

Sağlıklı Yaşam Hareketi

Sağlıklı Yaşam Hareketi, Fonksiyon Manuel Fizyoterapi’nin sosyal medya kampanyası. Yoğun özverisi ile bu konuda ELİF ÖZKALELİ VARDAR önplana çıkıyor. Resmiyetin dışına çıkıp sizlere konunun özünden bahset istiyorum. FTR konusunda hepimizin duyduğu veya şahit olduğu bir takım aksaklıklar var. İlgisizlik, sıradanlık sanırım en iyi karşılayan kelimeler. Hastalar rahatsızlıklarını ilgisiz bir doktor gözetiminde klasik ve çoğu zaman faydasız tekniklerle geçmediğini farkediyorlar. Bu konudaki yurt içi ve yurt dışında olan tüm gelişmeleri takip eden, konunun lisanslı uzmanı Elif Hanım’ın bakış açısı gerçekten benimkiyle uyuşuyor, biraz da psikolojik tedaviye benzetiyorum bu çözümü. Bilinen klasik FTR yöntemlerinin yanında, hastaların tıbbi ihtiyaçlarına göre tedavi etmek, yani kişiye özel tedaviden bahsediyorum.

Tıbbi anlamda ihtiyaç duyduğunuz tüm cihazların yanında düzenli olarak tedavinize özel spor ile birlikte sorunun kaynağına inilen bir sistem ile karşınıza çıkıyor Fonksiyon Manuel Fizyoterapi. Örneğin belirli bölgenizde ağrı hissediyorsanız, ağrı kesici ile onu belirli süreliğine dindirip görmezden gelmek değil yaptıkları, alışılmışın dışında olarak bu ağrıya neden olan olaylar zincirini köküne kadar takip edip sorununuzu tekrarlanmaz bir şekilde çözmeye adıyorlar kendilerini.

Fonksiyon Manuel Fizyoterapi ‘ye sadece sorununuz olduğunda değil, sağlıklı spor yapmak adına merak ettiğiniz, destek alma gereksinimi hissetiğiniz her konuda uğrayabiliyorsunuz. Sohbet sırasında ciddi anlamda önyargılarım yıkılırken aynı zamanda bu önyargılara ek olarak bu güne kadar yaptığım kendime zarar veren ve benim yararlı sandığım ayrıntıları öğrendim. FTR’nin nesil atlamış hali olarak zihnimde canlanan, yeni nesil FTR diyebileceğim Fonksiyon Manuel Fizyoterapi’yi sizlere öneriyorum! ((:

Sohbete dair…

Sohbete katılan Ankara’daki blog ve internet yazarlarını hemen paylaşmak istiyorum.

Nilay Arslan, Nilay Yılmaz, Betül Ayman, Görkem SH +, Sibel Erzincan, Burcu İncecik, Altan Alkan ve ben ((:

Kahvaltımızı mükemmel sohbet eşliğinde Patile‘de yaptık. Ev hissi veren, zengin menüsü, hızlı ve gülümseyen servisinin yanında mekana kazandırılmış seviye gerçekten ilgimi çekti ve taktir ettim.

Aklımda sohbete dair kalmış anahtar kelimeleri listeleyip konuyu uzatmayacağım; sağlıklı yaşam, FTR, blog, sansür, blogspot.com, wordpress, moda, yemek tarifi, pasta Onca bayan arasında, yeme eylemi dışında hiçbir ilgimin olmadığı konularda sıkılmadan rahatça durabilmemi o kişilerin içtenliğine bağlıyorum. Keyifli bir sohbet, tanışma, bilgilenmeydi.

Sağlıklı Yaşam Hareketi’ni Takip Etmek için…

Ayrıca http://www.fonksiyonrehabilitasyon.com.tr yanı sıra http://www.fizyoterapi.tv/ ve http://www.fizyoterapist.tv/ mevcut. Facebook uygulamasını da ziyaret etmeyi unutmayın.

Sağlıklı Yaşam Hareketi

Fonksiyon Manuel Fizyoterapi
Göreme Sk. No:8/2 Kavaklıdere Ankara
Tel: (0312) 466 18 85
Faks:(0312) 467 01 46
E-mail: fonksiyon@fonksiyonrehabilitasyon.com.tr

Fonksiyon Egzersiz Club
Göreme Sk. No:8/1 Kavaklıdere Ankara
0312 466 18 83

Kesin bir şeyler söylemeyi unuttum fakat bu mükemmel günün ve bilgilerin hatırası hatırladığım kadarıyla yaşasın. ((:
Selamlar.

Facebook bilgilerinizi bilgisayarınıza indirmenize artık izin veriyor!

Yararları neler?

Facebook bilgilerinizi indirerek bilgilerinizin, fotoğraflarınızın paylaşmış olduğunuz şeylerin yedeğini alıyor olacaksınız. Böylece bir gün facebooktan ayrılmanız gerekse de veya bilgilerinizi offline kullanmanız gerektiğinde elinizde yedekleri olacak.

Yedek dosyasının içersinde neler var?

İndireceğiniz yedek dosyası içersindekiler;

• * Profil bilgilerin (örn; ilgilerin, ilişim bilgilerin, grupların)
• * Senin ve arkadaşların tarafından duvarına gönderilmiş içerikler
• * Yüklediğin görseller ve videolar
• * Arkadaş listen
• * Oluşturduğun notlar
• * Cevapladığın etkinlikler
• * Gönderdiğin ve sana gönderilen mesajlar
• * Seni ilgilendiren, etkiletlendiğin diğer içerikler

Şimdilik belirli dataları indiremiyorsunuz fakat ileride umut ediyorum yukarıdakileri bir seçenek olarak da sunacaklardır.

Nasıl indiririm?

Öncelikle Facebook diliniz İngilizce olmalı. Bunu chat bölümünün solunda yer alan dünya simgesine tıklayıp dilinizi İngilizce seçerek rahatlıkla düzenleyebilirsiniz, yedek aldıktan sonra eski haline de çevirebilirsiniz.

İlk olarak sağ üstten “Account” a tıklayıp açılan menüden “Account Settings” sayfasına, ardından “Download Your Information.” ın yanında yer alan “learn more” linkine tıklayın. Açılan sayfada “Download” butonuna tıklayın. Ardından açılan uyarı bölümünde tekrar download butonuna tıklayın ve yedeğiniz alındıktan sonra size mail atılsın. Mail ile gelen linke tıkladığınızda bilgilerinizi indirebilirsiniz.

Size yardımcı olacak görseller;

İşte nasıl yapılıra cevap olacak video;

Ve işte örnek indirilmiş veri;

Teşekkürler.

Neden HangiUniversite?

Bu soruyu kesinlikle sormalısınız. Ben kendimce beğendiğim özelliklerini listelemek istiyorum.

• Üniversiteler hakkında tanıtım yazısı mevcut.
• Üniversite ve Bölüm aramak için güzel bir arama motoru var.
• Arama motoru kelime tamamlama yaparak benzer bölümleri görmenizi de sağlıyor.
• Bir bölümün normal, ikinci öğretim ve tam burslu seçenekleri toplu ve ayrı ayrı listelenebiliyor.
• Bölümler hakkında gelişmiş bir sayfası var.
• Bölümler için yorumlama alanı mevcut.
• Bölümün diğer üniversitelerdekileri için sekmesi mevcut.
• İllere göre üniversite analizi yapabiliyorsunuz.
• Arama yaptıktan sonra tek tıklama ile bölümün önemli bilgilerini görebiliyorsunuz.(*)
• 2010 Puan sistemine göre çevrilmiş puanları görebiliyorsunuz.(*)
• Tercih sepetiniz oldukça kullanışlı.
• Tüm adaylarla birlikte tercih provasına katılabiliyorsunuz.
• 65 bini aşkın kişi tercih provalarında rol oynuyor.
• Tercih provasının sonrasında sonucunuzu görebiliyor ve istatistiklerden yararlanıyorsunuz.
  • 1. tercih provası 25 Temmuz ‘da gerçekleşti.
  • 2. tercih provasu 29 Temmuz ‘da gerçekleşti.
  • 3. tercih provası 31 Temmuz gerçekleşecek.
  • 4. tercih provası 3 Ağustos’da gerçekleşecek
  • 5. tercih provası 4 Ağustos’da gerçekleşecek.

* Sadece Premium üyeler faydalanabiliyorlar.

Eksikleri

• Yeni açılan üniversitelerin tahmini puanları yer almıyor.
• Site üzerinde uzman destek forumu veya canlı yayınlar yok.
• Üniversite tanıtımları yetersiz, kampüs ve yurt bilgileri sınırlı.
• Meslek tanıtımları sitede yer almıyor.
• Tercih Listesi sayfasında puan sıralaması yer almıyor.
• Arama motoru gelişmiş ayarları yok. Belirli bölümler, belirli seçenekler ile daha ayrıntılı bir arama motoru oluşturulabilir.

Kısaca…

Üniversite seçiminizde başvuracağınız tek site olmayacak olsa da Tercih Liste’nizi rahatlıkla oluşturup arkadaşlarınızla paylaşabileceğiniz ve özellikle yüksek katılımlı prova yapabileceğiniz bir site.

Bölümleri tanıdığınız taktirde size uygun tercihi oluşturmanız oldukça rahat olacaktır ve sitenin tüm eksikleri sizin araştırmalarınızla kapanacaktır. Sitenin üstüne basarak söylüyorum E-tohum’dan da geçer not alarak en önemli özelliği 3. kere prova yapabilme şansınız olmasıdır. HangiUniversite.com ‘u sizlere tavsiy ediyorum.

Siteye girmek için tıklayınız.

Widget Geliştirme Yarışması

18 yaşını dolduran herkesin katılabileceği yarışmaya 24 Mart’a kadar http://www.simdiseninsiran.com adresi aracılığıyla rahatlıkla katılabilirsiniz. Katılımdan sonra öncelikle ön deneme yapılacak, ardından da içersinde tanıdık simalarında bulunduğu jüri tarafından 26-30 Mart tarihleri arasında yaratıcılık, kullanım kolaylığı ve kullanıcıya fayda kriterlerine göre değerlendirilecek ve dereceye girenlere ödülleri törenle sunulacak.

Ödüller

• İlk üçe giren finalistlere Vodafone Türkiye’de staj imkanı sağlanacak.
• Finale kalan ilk 10 Widget’i geliştiren tüm yarışmacılara Acer dizüstü bilgisayar hediye edilecek.
• Kısa listeye kalan diğer 10 Widgeti geliştiren yarışmacıya ise Nokia N97 akıllı telefon hediye edilecek.

Umarım ilginizi çekmemiştir, çünkü benim çekti. ((:

Ben Rıza Selçuk Saydam, nam-ı diğer RSS. Nam oluşturmaya çalıştık, oluştuğu kadarıyla artık sitelerin önüne kendi nickimi yerleştiriyorum. İlk olarak bu sevda RSSKitap ile başladı. Şimdi de yeni bir site daha oluşturdum. ‘Gayri Muazzam Film Eleştirihanesi’ sloganıyla RSS İmge!

RSS İmge | Neden, Amaç, Süreç

RSS İmge‘nin oluşum süreci hakkında yazdığım yazıya buradan ulaşabilirsiniz.

RSS İmge | Tasarım Teknolojisi

RSS İmge farkederseniz biraz farklı. Nedir, ne değidir biraz ele alalım dedim. İlk göze çarpan özelliği sitenin açıldığında 1 yazının tam olarak görünmesi ve çevresindeki yazıların da şeffaf olarak gözükmesidir. İçerik tabanlı bir site olduğundan kullanıcının odak noktasını belirlemesinde faydalı olacağını düşünüyorum. Bu ögenin oluşması için bolca JQuery kullanışmıştır.

Daha sonra efendim yazılara tıkladığınızda yeni sayfada açılmadığını görürsünüz. Bu ziyaretçilerin sitede daha uzun süre vakit geçirmelerini sağlamak üzere FaceBox ile kalıcı bağlantıların birleştirilmesi ile oluşmuştur. FaceBox, Facebook tarafından geliştirilmiş ve tasarım ilhamı olarak bizler tarafından uygulamaya dökülmüştür.

Sitenin bir başka görünmez özelliği oluşturulan scriptler sayesinde analistikler elde etmek, ftp programlarına gerek kalmadan wordpress’in medya ekleme özelliğine gerek kalmadan sitedeki resimleri tek bir çözünürlüğe getirip özel alanlara otomatik ekleyen sistemdir. Yani eskiden resmi ftp’ye wordpress desteğiyle ya da manuel ekler sonra da özel alan tanımlayıp bu alana resmin linkini kendimiz boyutlandırdıktan sonra koyardık. Şimdi ise sadece gözat’tan resmi seçmek ve upload etmek kalıyor. Her şey yerini buluyor.

Bir başka özeliğimiz ise sitede belirli bir satırlık alan yayınlanıyor ve üzerine tıklayınca FaceBox ile açılan menüde yazının devamının yanı sıra fragmanı da karşınıza çıkıyor. Böylelikle daha fazla bilgi ediniyorsunuz.

Mükemmel olduğunu düşündüğüm bir de logomuz mevcut. Şimdilik bu kadar uğraş yeterli diye düşünüyorum. Gelecekte siteye ekleyeceğim özellikleri listeleyebileyim ve yaptıkça üzerini çizeyim diye aşağıya yazıyorum.

• Spolier alanları görünmez yaparak açılması için onay almak
• Arama motorları için yazılara alternatif tekil yazı şablonu oluşturmak
• Mevcut kategorileri ziyaretçilere lanse etmek
• Yorum şablonu oluşturmak (jquery)
• CSS yoğunlaştırmak ve XHTML uyumluluğu denetimi
• FaceBox için kapat butonu
• Bileşen uyumlu gizlenmiş alt menü
• Alternatif tema kullanalabilirliği
• IMDB puanlaması yansıması
• Filmler hakkında sistemsel detaylı bilgi çeken robotlarla sadece bana yorum yapmanın düşmesi
• Puanlama sistemi ya da + – sistemi
• Link değişim alanı
• Geniş arşiv sistemi
• Flash ile destek

Eğer Limango ’nun ne olduğunu bilmiyorsanız Limango ’nun sitesinde yer alan “Limango Hakkında” yazısının aynısını sizler için yayımlıyorum.

Limango hakkında
limango üst düzey markaları avantajlı fiyatlar ile yalnızca üyelerine sunan, kapalı devre alışveriş sistemidir. limango, tekstil ürünleri ağırlıklı olmak üzere, aksesuar, ev eşyası ve ihtiyaç duyulabilecek her türlü ürün çeşitliliğine sahip ‘Private Shopping’ konseptini tüketici ile buluşturmaktadır. limango bir Otto Group şirketidir.

Private Shopping Nedir ?
Sınırlı sayıdaki seçkin ürünlerin %70′e varan indirimler ile 5 ila 7 gün arasında değişen sürelerde satışa sunulmasıdır. Üyeler yalnızca davetiye yöntemi ile bu kapalı devre satış aktivitelerinden faydalanabilmektedir.

Otto Group Kimdir ?
Otto Group, 123 şirketi 53.000 çalışanı ve 2008 yılı cirosu ile Fortune Global ilk 500 listesinde 397.sırada yer alan, perakende ve servis sektöründe hizmet veren şirketler topluluğudur. Otto Group’un 2008 yılı cirosu 15 milyar Euro’nun üzerindedir. B2C faaliyetleri ele alındığında Otto Group dünyada Amazon’ dan sonra ikinci sırada bulunmaktadır.

Bu buluşmaya benim(Rıza Selçuk Saydam) dışında Özgür Alaz,Osman Orhan ve Gökhan Onar katıldı.Amacımız sohbet,tanışmak ve yeni fikirlerimizi sunup tartışıp güzel anlar geçirmekti ve fazlasıyla bu beklentiyi gerçekleştirdik.Neler konuştuğumuzdan önce size toplantıdaki isimlerin kimler olduğunu anlatayım.

Özgür Alaz | Kendisi kısa ve öz fikir avcısı olarak tanıtabiliriz.İsim olarak pek tanıdık gelmiyor.Çünkü projeleri bunu ben yaptım diyerek ortaya çıkmıyor.Halk katılımlı,sosyal olarak açık bir kişilik.Neler yapmış neler desem yeridir. Mesela; Google Bize Logo Yapsana projesi fikri onun işi.Ayrıca Loreal Estrat yarışmasında Roadrunner takımı ile Dünya 2.liği elde etmiş. PSFK, dunya capina yayilmis yazar kadrosu ile dunyanin en onemli trend sitelerinden birisidir.LikeMind Istanbul gibi büyük bir sosyal kitle oluşturmuş.Springspotters gibi 8000′den fazla uyesi bulunan dunyanin en genis trend networkunun, dunyada en aktif uyesi. En cok gozlem gonderen ve en cok gozlemi yayinlanan uyesi.Digg gibi dünyaca ünlü bir sistemin anasayfasında defalarca yayımlanan ilk Türk.Dunyanin Ilk Google Earth CVsi,SecondLife Business Plan Contest,Kariyer.Net Fikir geliştirme birinciliği,LoveMarks birinciliği,YTU Sunum Yarismasi gibi başarılarının yanında bir çok bankada çalışmış ve halen üniversite öğrencisi olan bir kişilik.Aslında sırf başarıları hakkında kitap yazılabilecek bir içerik mevcut fakat naçizane blogum bu kadar çok başarıyı zor hazmetti.Böyle bir insan ile tanışmak sokakta rastlamak gibi bir şey değil.Teleskopla baksan zor bulunanlardan. ((: Şu an Pazarlama trendleri ve yeni iş fikirleri üzerinde uzmanlaşmakta.

Osman Orhan | Malatya İnönü Makina Mühendisliğine öğrenci.Malatya’da bir çok proje çalışması bulunan,internetten gelir elde etme konusunda çeşitli araştırmalarda bulunan ve yeni fikir üretme konusunda canlı bir kişilik.Malatya İndirim gibi bir site ile kariyer.net ‘den daha güzel bir oluşum için çabalar sarf etmekte.Kontörman,pratikturk,doyurbizi,100kisiyesorduk gibi bir çok projeyi arkadaşlarıyla birlikte oluşturmuş ve geliştirmekte.

Gökan Onar | İnternette nr_gkh kullanıcı adıyla orijinal bir çok içerik oluşturan ve bir çok forum sitesi kurmuş olan deneylimli bir gözlemci olarak tanıtabiliriz.Bir çok konu hakkında bilgisi ve akabinde fikri bulunan özellikle de müzik,tasarım,fikir adamı.TOAL Club gibi bir takım oluşumlar deneyen,halen de yeni fikirleri için ortam arayışında olan zamanla açılacak bir bomba.

Rıza Selçuk Saydam | Ben.

Şahısların Resimlerini Görmek İsteyenlere : Özgür Alaz,Osman Orhan,Gökan Onar,Rıza Selçuk Saydam

Konuştuğumuz konular yeni nesil internet teknoloji oyuncakları, google gibi yahoo hizmetleri, oluşacak projelerde Özgür Alaz’ın bizlere verdiği pazarlama tiyoları,bir takım projelerimiz ,bunların sonuçları,projelerimizde kullanmamız gereken internet dili,sosyal platformlar aracılığıyla sosyal ağlar,Malatya’daki internet ile ilgili kişileri bir araya getirecek bir organizasyonun temelleri,bir çok websitesi yorumlaması,etohum.com ve detayları,web 3.0 tahminleri ve sohbet.Aradaki şeyleri özelden soran arkadaşlara kısmen anlatabilirim çünkü gerçekten ciddi bir takım maddi gelir elde etme ve projeler havada uçuştu.Yakın zamanda hayata geçirilecek bir çok şeyimiz var artık.

Lafı fazla uzatmadan bir şeyler söyleyeyim.Facebook bazı arkadaşlarımızın mail kutularını boş beleş işlerle doldurmakta.Biz bundan rahatsız olduk ve bu arkadaşlarımıza nr_gkh‘ın hatırlatması üzerine sunum hazırladık.

2 tane sunumumuz bulunmakta.Bunları kısaca tanıtayım.
Sunum 1 Nedir? Daha önce facebookdan bu tarz mail almamış olan arkadaşlara.
Sunum 2 Nedir? Daha önce facebookdan bu tarz mail almış olan arkadaşlara.

» Sunum No : 1
» Sunum No : 2

Faydalı olabildiysek ne mutlu bize.Zorlanılan noktalarda aşağıya yorum yaparak destek alabilirsiniz.

Ufacık Dipnot: Facebook tasarımını geçen hafta yeniledi.Yeni tasarımını denemek için buraya tıklayınız,linkten giriş yaparsanız artık facebook’un yeni tasarımını kabul etmiş olursunuz.

Not: Kaspersky aktivasyonunu her versiyon kabul etmemekte.Bu yüzden şuradaki kaspersky trialini indirerek aktivasyonlayınız.

1 yıl sonra legal bir şekilde Kasper Sky konusu ile görüşmek üzere.

Bu konuyu sırf rahatsızlık duyduğum için yazıyorum. Öncelikle kendi listemdekileri tekrar uyarıyorum.

Gelen yazılar şu şekilde; Bu fotoğraftaki senmisin ? oh sen çıplak mi ? ve örnekleri çoğaltmak mümkün.Gelen linkler de şu şekilde : http://viruşluyumben.com/viewimage.php?id=mail-adresiniz@uzantisi
Neyse fazla uzatmadan temizleme yönetimini de açıklayayım.

Msn Virüsünden kurtulmanın yolu

Sorunlarla boğuşanlar için formattan başka birkaç çözüm yolu daha var. Peki nedir bunlar?
- Sistem Geri Yükleme (belki)
Başlat > Programlar > Donatılar > Sistem Araçları > Sistem Geri Yükleme menüsünden ulaşabileceğiniz bu çözüm, sisteminizi geçmiş bir tarihe geri alıyor. Ama tam çözüm değil (bence)
-MSN Virus Removal (kesin)
Bu yazımızn konusu aslında bu. MSN virüs sorununa bir çözüm oluyor bu yazılımımız. Peki nasıl yapılıyor?
Öncelikle, şuradan; MSN Virus Removal’ı indirin.
Daha sonra indirdiğiniz .exe dosyasını çalıştırın.
Karşınıza ufak bir pencere çıkacak. O pencerenin alt tarafında yer alan “START” butonuna tıklayın.
Ve birkaç dakika bekleyin.
Program, sisteminizi kontrol ederek MSN Virüsü dahil,bulduğu tüm Truva atlarını vs. sırasıyla imha edecektir.
Ve tarama sonucunda size bir uyarı penceresi vererek temizlediğini bildirecektir.
Linki duymayanlar ve görmeyenler için tekrar: MSN Virus Removal Eğer bu şekilde kalkmadıysa, bilgisayarınızı güvenli moddan başlatın ve yeniden deneyin. Virüsü temizledikten sonra bilgisayarınızı yeniden başlatın ve normal bir şekilde başlatın.

Bundan sonra gelen linklere daha dikkat edersiniz. ((:

İşin ucunu insanların canına kastetmeye kadar götüren Ermeni terörünün amacı, sözde Ermeni soykırımı iddialarını ve Ermenilerin taleplerini dünya kamuoyuna duyurmaktır. Nihai hedef ise, “Büyük Ermenistan” rüyasıdır. Büyük Ermenistan’a giden yolda atılması gereken en önemli adım, sözde iddialar konusunda kamuoyu oluşturmak ve Türkiye’ye yönelik emelleri gerçekleştirmektir.

Bunun için uygulamaya konan ve “Dört T” şeklinde adlandırılabilecek olan plan şu dört kavrama dayanmaktadır: Tanıtım, Tanınma, Tazminat ve Toprak… Yani, sözde Ermeni sorunu tüm dünyada terör yoluyla “tanıtılacak”, sözde iddialar dünya kamuoyunca kabul edilip Türkiyece “tanınacak”, sözde soykırımdan dolayı Türkiye’den “tazminat” alınacak ve “Büyük Ermenistan” rüyasını gerçekleştirmek için gerekli olan “toprak” Türkiye’den koparılacaktır!…

Bugün, maksatlı olarak gündemde tutulmaya çalışılan sözde Ermeni sorununun ne derece mesnetsiz olduğunu ve ne tür çıkar kaygıları ile ortaya atıldığını daha iyi anlayabilmek için iddiaların ve Türk-Ermeni ilişkilerinin tarihsel gelişimini incelemek gerekmektedir.

Detaylı bilgiler ve arşiv belgileri için lütfen şu adresleri ziyaret ediniz;

» Ermeni Tarihine Kısa Bir Bakış
» Ermeni Sorununun Ortaya Çıkışı
» Ermeni İsyan Ve Katliamları
» 24 Nisan 1915
» Yer Değiştirme Kanunu Ve Uygulaması
» Soykırım nedir?
» Ermeni Terörü
» Bugünkü Durum
» Sonuç

Notwithstanding’in olmayan Ermeni soykırımı için yazdığı Invaded şarkısı…

Şrkıyı dinlemek için [link] Şimdi de orijinal dilinde ;

Notwithstanding’s song Invaded for Armenian lies about Genocide which has never happened!

To listen the song [link]

Saygılarımla..  Rıza Selçuk SAYDAM

Kaynaklar:

• Ermeni Sorunu
• DeviantART
• Atatürk
• Ermeni
• T.C. MEB
• Genelkurmay Başkanlığı

Video

Vincent Laforet – Dalgalar from rss_ems on Vimeo.

Ön İzleme

Kamera

İlgimi çektiğinden üstteki görüntüler için kullanılan kamerayı da buldum. Canon’s 800mm 5,6 bir RedRock Mikro objektif destek sistemi ile bir KIRMIZI Bir Kamera için çiftleşmiş.