By RSS
Demo: Ahmet Alp Balkan or Demo Page
Wordpress Download: github (fork too)

Download & github

Here is #minimal, #typography-focused and free #WordPress theme ‘mnmlsm’ that I’ve designed.rss-ems.com/blog/?p=2738 & github.com/rssems/mnmlsm

— Rıza Selçuk Saydam (@rssems) Nisan 19, 2012

Features

• Pre-built ‘index.php’, ‘header.php’, ‘single.php’, ‘comments.php’
• HTML 5 + CSS 3
• @font-face
• SEO

inspired by Dustin Curtis, special thanks for Ahmet Alp Balkan.

Still in the works…

• Custom Theme Settings for sidebar
• Pages
• Search
• Comments

What you need to know

To change sidebar information use: header.php
Happy usign!

A WordPress Theme.

http://github.com/rssems/mnmlsm

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.

Kısaca ne mi oldu?

• Yanlış Yere Teslimat
• 1.30dk Sipariş Süresi
• Alınmaması Gerekirken Ücret Alınması
• Sipariş İçeriğinin Yine de Yanlış Getirilmesi
• Bu olaylar sonrasında Sürekli olarak Rahatsız Edilmem

Bu olaylar sonucu hissetiklerim ve Dominos’tan beklentim

• Ne zaman Domino’s kelimesini görsem, duysam hoşuma gitmeyen duygular oluşuyor.
• YemekSepeti.com üyeliğimi sildirdim. YemekSepeti beni sonsuza dek kaybetti.
• Dominos’un ellerindeki bilgilerimle beni son kez aramasını ve belirteceğim e-posta adresine beni bir daha hiçbir şekilde rahatsız etmeyeceklerini ve ellerindeki tüm kişiler bilgilerimi sildiklerine dair @dominos.com.tr adresiyle e-posta atmalarını istiyorum.

Şimdi de uzun uzun, ayrıntılı olarak ne mi oldu?

Rutin bir sipariş

Tarih 25.12.2011
YemekSepeti.com üyeliğimle Domaino’s Pizza siparişi verdim. YemekSepeti Domino’s 3. siparişim verişimdi, ayrıca daha önce telefon ile de vermiştim. Adresim Tandoğan’daki bir yerin Sıhhiye şubesi olduğundan, Tandoğan Bilmemne Yeri Misafirhanesi, Sıhhiye olarak yazdım. Yanlış anlaşılma olmaması için Tandoğan’da değilim, Sıhhiye’deyim şeklinde de ayrıntılı olarak siparişime bir not ekledim.

Pizza’mın Değiştirilmesi

Aradan 20dkya yakın bir süre geçti. Ardından bir telefon geldi, Domino’s Pizza, Bahçelievler (3. Cadde) arıyordu. Ellerinde söylediğim pizza yokmuş, doğal karşıladım. Tamam dedim, bol malzemos yapın. Sonra telefonu kapatmadan bakın dedim, Bahçelievler’den arıyorsunuz fakat ben Sıhhiye’deyim. Tandoğan orduevi ile karıştırmayın. Kişi de tamam efendim, biliyoruz orayı, karıştırmayız. İyi madem dedim kapattım.

Yanlış Adrese Teslimat

Aradan 30dk geçti. Bir telefon geldi. Efendim, Tandoğan orduevindeyiz, burada yokmuşsunuz falan diye. Yanlış yere gitmişler! Ben de bakın kardeşim, size 3. defa bunu iletiyorum ben orada değilim, Sıhhiye’deyim dedim. YemekSepeti ile iletişim geçtim hemen.

Özür olarak Pizza’nın Ücretsiz Teslimatı

Bir sürü özür dilediler falan, sizi Kızılay şubemize yönlendirdik, ücretsiz olarak siparişinizi teslim edeceğiz, kusura bakmayın dediler. Peki yollayın dedim.

Toplam 1 saat kadar geçti, motorlu kişi geldi.

Ücretsiz denen pizza için para istenilmesi

Verir vermez pizzayı borcunuz bilmamkaç küsür lira dedi. Ödemek durumunda kaldım, halbuki ücretsiz olması gerekiyordu.

Ve Pizza da Yanlış!

Ardından yukarı çıktım, pizzayı açtım ve pizza da yanlıştı.

Şikayetim ve Üyelik Sildirme İsteğim

Şaka gibi. YemekSepeti’ne yine şikayet ettim ve dedim ki paramı istemiyorum, sizin olsun, üyeliğimi silin ve dominos bir daha benimle iletişime geçmesin.

Domino’s Yetkililerinin Beni Rahatsız Etmesi

Peki dediler, kapattım ve sinirle aç bir halde Pizza’mı yemeye başladım. Ardından dominos aradı, kuryemiz aşağıda paranızı vermek istiyor. Ben de aşağı inmek bile istemediğimi, Yemek Sepeti’ne bildirdiğim gibi benimle iletişime geçmemelerini istedim.

Tekrar yemeksepeti’ne girdim. Aaaa, üyeliğimi halen silmemişlerdi. Tekrar iletişime geçmesin Domino’s benimle dedim. Üyeliğimi de silin dedim.

Hop 2 gün sonra tekrar Domino’s Kızılay şube müdürü aradı. Halbuki iletişime geçilmek istemiyordum. Telefonu açtım, özürlerini ve deneyimsiz bir kurye bahanelerini dinledim. Sonra yapacak bir şey olmadığını, memnuniyetsiz olduğumu belirttim. Bana tekrar bedava pizza önerisini sundu, teşekkür edip, reddettim.

Ardından 3 defa Domino’s'tan tüm bilgilerimi silmelerini istememe rağmen bu olaylardan sonra 2 defa Dominos kampanya mesajı geldi.

9.01.2012 tarihinde bu yazıyı artık kesin olarak yazmama neden olacak Domino’s Pizza, Bahçelievler şubesi beni aradı ve çok ilginç bir şekilde kurye deneyimsizliğinden, bedava pizza tekliflerinden bahsetti. Kızılay şubenizin beni aradığını biliyor muydunuz dedim ve bilmiyorlardı. Bilmedikleri halde, birebir aynı konuşma tarzı ve bahanelerle beni arayan farklı 2 şube sizce rastlantı mı yoksa şirketin sorunları çözmek adına bulduğu bir yöntem mi?

2 şubenin Dominos genel müşteri hizmetlerine bağlı olmadan, kendi isteklerine göre bana ulaşabiliyor olmalarına ne demeli? (…)

Dominos düş peşimden!

Yemek Sepeti de az değil!

Tarih 10.01.2012
Yemek Sepeti’nden bir mail geliyor, Konusu: Size bir yemek ısmarlayabilir miyiz?
Diyorum heralde yazıyı okuyup bir adım atmak istediler, yok hayır. Bu olayla ilgili değil, klasik bir toplu mail!
Daha birkaç gün önce kendilerine üyeliğimi silmelerini söylemişken, kendileri de silindiğini teyitlemişken içersinde çeşitli anket bilgileri olan bir mail atıyorlar, kim bilir bu mail kaçımıza geldi!

Yemek Sepeti iletişim adresi olarak yazdıkları ankara@yemeksepeti.com ‘a mail atıyorum ve maillerim geri dönüyor! Sistemleri de çalışmıyor!

Yemek Sepeti sildim dediği bilgilerimi silmemiş! Yani Yemek Sepeti’ne verilerinizi bir kez verdiğinizde istedikleri şekilde kullanıyorlar, kullandılar!

15.01.2012 tarihinde Dominos Kızılay şubesi bana 2 kere daha kampanya mesajlarını attılar.

Eh bir blog yazısınız hak etmediler mi?

Bu da kayıtlar falan

• 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

Ofis ile evdeki bilgisayarımın senkonizasyonunu sağlamak için bulduğum en iyi çözüm ve aylardır sorunsuz kullandığım Cloud Service olan Dropbox‘ı sizlerle paylaşmak istiyorum.

Dropbox çevirimiçi dosya depolama, paylaşma, senkronizasyon programı, kısaca son zamanlarda sıkça ismi geçen “Cloud Computing”in ta kendisi, bir Cloud Service.

Dropbox ile dosyalarına her yerden ulaşabilirsin

Dropbox ile kaydettiğiniz her dosya, anında senkonize halinde olan diğer bilgisayar(lar)ınıza, cep telefonunuzda da kaydediliyor.

• Dropbox size 2GB ücretsiz alan veriyor. 100GB’a kadar ücret ile yükseltebiliyorsunuz.
• Dosyalarınıza Dropbox websitesinden veya Dropbox programı aracılığıyla ulaşabiliyorsunuz.
• Windows, Mac, Linux, iPad, iPhone, Android ve BlackBerry destekliyor.
• Online olduğunuzda senkonizasyon yapıyor, Offline olsanız bile senkonize edilmiş dosyalarınıza erişebiliyorsunuz.
• Dropbox‘ta tuttuğunuz dosyaların istediğiniz kısmını istediğiniz kişi ile veya herkesle paylaşabiliyorsunuz.
• Dropbox bilgisayarınızı yavaşlatmıyor, bandwidth limitleyebiliyorsunuz.
• Dropbox open source desteklediğinden, birçok güzel ek uygulaması var. Örneğin belirlediğiniz bir klasöre attığınız dosyaları anında tweetlemesini veya facebookta paylaşmasını sağlayabiliyorsunuz.

Nasıl Kullanılıyor?

Dropbox websitesinden kullanabileceğiniz sistemin ayrıca Dropbox.com/install Windows, Mac, Linux, iPad, iPhone, Android ve BlackBerry için uygulaması var.

Uygulamayı kurduktan sonra kullanıcı bilgilerinizle giriş yaptıktan sonra Dropbox sizden bilgisayarınızda bir yer seçmenizi istiyor ve oraya Dropbox klasörü ile yerleşiyor.

Dropbox klasörünün içersinde oluşturduğunuz tüm dosyalar, yaptığınız tüm değişiklikler programı kurduğunuz diğer klasörlerde de anında gerçekleşiyor.

Dropbox ile Neler Yapabilirim?

• Sürekli ihtiyaç duyabileceğiniz dosyaları Dropbox ile online taşıyabilirsin
• Dropbox klasörü içersinde oluşturduğun bir klasörü istediğin arkadaşınla paylaşıp, ortak arşiv tutabilirsin.
  Örneğin üniversite sınıfınızın ortak ders notları, şirketler için mali raporlarınız, iki arkadaşın müzik tavsiye klasörü gibi…

Falan filan işte… ((: Kısacası;

Hemen üye ol.

Not: http://db.tt/28dmmSEP linki ile üye olup, Dropbox uygulamasını kurduğunuzda bana extra alan kazandırmış olacaksınız. Teşekkürler

Kendilerini meta taglarından maili yolladıktan sonra dahi kaldırmadıkları anahtar kelimelerle sizlere tanıtayım:
“co.tv, bedava alan adı, bedava domain, bedava domain name, bedava domain alma, bedava domain veren siteler, bedava URL yönlendirme, bedava sitebuilder, bedava alan adları, bedava alan adı tescili, bedava alan adı al, alan adı sorgulama, alan adı tescili, alan adı yönlendirme,reklamsız bedava domain, alan adı, ücretsiz alan adi”

Kısa bir süre önce iş modellerini değiştirerek alan adlarını kapatacaklarını duyurdular. Binler kişi bu adlarını Co.TV’ye güvenerek kullandı, sitelerinden kalıcı link verdi, co.tv’yi kalkındırdı.

Co.Tv bu şekilde dolandırıcılığını ispatlayarak, açık bir şekilde güvenilmez olduğunu ispatlamıştır. Kendilerine bunu belirttikleri için teşekkür ediyorum, bir sonraki iş modellerinde yanlarında durmak isteyen kişiler daha önce yaptıkları bu dolandırıcılığı unutmamalıdır.

Ben bir mağdur değilim, sadece deneme amaçlı rss.co.tr adresini kullandığımdan bu olaydan haberim olabildi. Haksızlığa sessiz kalmamak alışkanlığımdır.

Co.Tv! İş modelimizin değişmesi beni ilgilendirmez, bu yaptığın adiliktir. Tüm sosyal medya platformlarında yaptığınız dolandırıcılığı hatırlatarak hep karşınızda olacağım. Başarılar

26 Ağustos 2011 tarihinde Türkçe İnfografik, “İnfografik yorum ve analizleriyle yayındayız! ” demiştik sosyal medyanın her noktasında!

Birkaç gün sonra da ilk 4 günümüzün istatistiklerini yayınladık infografik olarak. (via)

Birçok infografik yorum ve analizi oluşturduk, Wikipedia gibi sitelere infografik kavramını biz anlattık, çeşitli siteleri heyecanlandırarak infografik paylaşımların artmasını sağladık.
Seval Ünver, Zülal Ateş, Adil İlhan gibi konuk yazarlarımız oldu ve sayısı dudak uçuklatacak kadar konuk yazarımız infografya için emek vermekte. Ayrıca sitemizi Cumhuriyet gazetesi tanıttı.

Bu sürece ek olarak firmalara infografik tasarım ve analiz hizmeti verdik. 2 adet infografik teslim ettik, Türkiye’de neredeyse herkesin bildiği büyük bir firmaya başarılı bir şekilde analiz hizmeti verdik. Birçok firma ile de görüşme aşamasındayız.

Kendimize güvenerek, konuya hakim bir şekilde başarılı adımlar atıyoruz.

Destekleyen tüm dostlara teşekkürler.

https://www.facebook.com/infografya & http://twitter.com/infografya
http://infografya.com

Bu seferki konu Açlık! (Blog Action Day – Food)

Bu konuda değerli bloggerları aşağıdaki konulara dikkat çekerek yazı yazmaya davet ediyorum.

• Benim en sevdiğim yemek
• Doğu Afrika’da kıtlık
• Organik ya da değil?
• Açlık ve yoksulluk.
• En iyi ve en kötü gıda
• Slow Food, Fast Food: aslında ne anlama geliyor
• yetersiz beslenme
• Gıda üzerine Çatışma: tarıma uygun topraklar hakkında yeni savaşlar olacak mı?
• Bir hamburger üretmek için 24 litre su alır. Avrupa’da her kişi için sadece bir hamburger yapmak için üzerinde 19,9 milyar litre su alacak anlamına gelir.
• Vegan, Vejetaryen, Et yiyici hangisi ve neden?
• Gıda gelecekte Tic. Gıda spekülasyonu etkisi nedir?
• 2050 yılında 9 milyar insanın beslenmesi mümkün olacak mı?
• Adil Ticaret gıda yardım çiftçiler ve topluluklar yoksulluk kavramları
• Freeganism
• Gıda atık skandalı.
• Yanlız büyümek
• Gıda yetiştirmek
• Çok fazla veya çok az gıda almak.
• Yediğiniz garip bir şey
• Yemek kültürü ne anlamına gelir.

Facebook’tan, Twitter’dan Google+’a halen geçerli bir yollama yolu yok. Google+’dan Twitter’a, Facebook’a RSS desteğiyle gönderilerinizi paylaşabilirsiniz.

<?php
	include_once(ABSPATH.WPINC.'/rss.php');
	$googleplus = fetch_feed("http://plusfeed.appspot.com/116336491198638950761");
	echo '<a href="';
	echo $googleplus->items[0]['link']; echo '">';
	echo $googleplus->items[0]['summary'];
	echo '';
?>

Google+ Profilim | Valentin Brandt ‘a güzel hatırlatması için teşekkürler.

İ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.

Kitap Adı: WordPress Kitabı
Yayın Evi: dikeyeksen
Yazar: Ali Arslan
Satış Linki: Hepsi Burada

Arslania nickiyle de tanıdığımız Ali Arslan, uzun süredir üzerinde çalıştığını belirttiği WordPress kitabı baskı aşamasına gelmiş durumda. Kendisini bu girişiminden ötürü tebrik ediyorum ve destekliyorum. Umarım hakettiği ilgiye biran önce kavuşur.

Kitap baskı aşamasında olduğundan şimdilik sadece ön satış yapılabiliyor, dolayısıyla ben de henüz incelemiş değilim. Fakat WordPress üzerine yazılmış bu kitap sektöre yeni bir can getirecektir. WordPress Türkiye ile zaten birçok kaynak üreten Ali Arslan’ın yazarı olması ise ayrıca olumlu bir gelişme.

Kendisine selamlarımı sunuyorum, başarılar diliyorum

Umarım kitabı edindiğimde ayrıntılı bilgiler için bir yazı daha yaacağım.

Açıkcası her bloggerın, website sahibinin ilhamlandığı, başlarken hayran olduğu bir site vardır. Araba yapmak için tekerleği tekrar keşfetmenize gerek yok, bu noktada Opereyşın benim için blogumu oluştururken defalarca fikirlerime etki eden, beni yönlendiren bir siteydi.

6. yıllarında Opereyşın.com (Türkçe karakter, evet) domainini almalarına vesile olmam dolayısıyla bana özelleştirilmiş, Opereyşın logolu hediye bardak yolladılar Bardak şu an gözümün ucunda, yolda kırılacak diye korkmadım değil hani.

Kendilerine teşekkür ediyorum

http://opereysin.com/

teppanyakialaturka.com & Facebook

Teppanyaki, japon mutfağının, yemek pişirmek için demir tava (döküm tava) kullanan bir çeşitidir. Teppanyaki kelimesi, demir tabak anlamına gelen “teppan” ve ızgaralanmış ve az yağda pişirilmiş anlamına gelen “yaki” kelimelerinden türemiştir.Japonya’da, teppanyaki, et, karides, “okonomiyaki”, “yakisoba” ve “monjayaki” de dahil olmak üzere demir tabak kullanılarak pişirilen yemekler olarak bilinir.

Modern teppanyaki ızgaraları genellikle propan şekilde ısıtılan düz yüzeyli ızgaralardır ve restorandaki misafirlerin (müşterilerin) gözleri önünde yemek pişirmek için kullanılırlar. Teppanyaki ızgaraları çoğu zaman kömür ve ya gaz aleviyle çalışan ve açık ızgara dizaynıyla tasarlanan “hibachi barbekü ızgarasıyla” karıştırılır. Katı demir pişirme yüzeyiyle teppanyaki, pirinç, yumurta ve doğranmış sebzeler gibi daha küçük malzemeler için idealdir. (daha uygundur).

• 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?

Tema Yayımcısı: cssreflex
Türkçesi: RSS-EMS
Demo: Demo Alanı
Wordpress Download: İndir

Özellikleri

• WordPress 3.2.1 uyumluluk
• Minimalist 3 Kolon Tasarım
• Valid Xhtml & CSS3
• Özel Menü Desteği
• Yazı thumbnails desteği
• jQuery destekli devamını yükleyin
• IE 7 ve 8, Opera, Safari, Google Chrome ve Firefox uyumlu

Kurulum

• »”reflex-plus” klasörünü blog FTP dizininizin wp-content/themes kısmına kopyalayın.
• »Wordpress Admin Paneline Giriş yapın.
• »Görünüm > Temalar bölümüne gelin ve temanın üstüne tıklayarak aktifleştirin.
• »Bileşen ve menü ayarlarını yapın.
• »Tadını çıkarın!

Katkılarımız

• Eksiksiz Türkçe Çeviri
• Eksiksiz tanıtım!

(Türkçe)İndir – Demo

Sıkça Sorulan Sorular

• Henüz soru sorulmadı. Sorulduğu an cevapları burada yayınlanacak.

Özel Not1: Çeviride ve bağlantılarda herhangi bir hata varsa lütfen belirtiniz.
Özel Not2: Tema hakkında demo sayfasında özellikleri oluşturamıyorsanız bu yazıya yorum yaptığınız taktirde ayrıntılı bilgi kesinlikle en yakın zamanda eklenecektir.

WordPress İpuçları – 1 adlı yazım ile başlayan WordPress İpuçları serim devam ediyor. Bu yazımda ‘Admin Paneli’ üzerinde yapılabilecek 10 temel ipucu yer almakta.

Admin Bar’ı Kaldırmak

WordPress 3.1 ile gelen Twitter’dan tanıdık gelecek Admin Bar’ı functions.php ‘ye aşağıdaki kodu ekleyerek kaldırabilirsiniz.

add_filter( 'show_admin_bar', 

'__

return_false' );

Otomatik Kaydetme Zamanı

WordPress otomatik güncellemesinin çok sık olduğunu düşünenlerdenim. Eğer çok yazarınız varsa, belki server yükünü azaltmak adına da kullanmak isteyebilirsiniz. wp-config.php’e ekleyin;

define('AUTOSAVE_INTERVAL', 600); // 60 * 10, 600 saniye yani 10 dakikada bir kontrol eder ve kaydeder

Otomatik Kaydetmeyi Kapat

functions.php ‘ye ekleyeceğiniz kod;

function no_autosave() {
  wp_deregister_script('autosave');
}

add_action( 'wp_print_scripts', 'no_autosave' );

Düzeltmelere Limit Getirmek

Otomatik kaydedi ile admi panelde görebileceğiniz Revisions yani Düzeltmeler bölümü bazen haddini aşabilir. En fazla 5 adet veya belirlediğiniz bir sayının limit olmasını sağlayabilirsiniz.
wp-config.php ‘e ekleyeceğiniz kod;

define('WP_POST_REVISIONS', 5); // duzeltmeleri sinirlar
define('WP_POST_REVISIONS', false); // duzeltmeleri kapatir

Çöp Kutusunu Otomatik Boşaltın

Maillerinizdeki gibi çöp kutusunu belirlediğiniz gün aralığıyla boşaltmak isteyebilirsiniz. wp-config.php ‘ye ekleyin;

define('EMPTY_TRASH_DAYS', 5 ); // 5 gunde bir bosaltir

Görsel Editörü Kapatın

Nedenini anlatmaya dahi gerek yok heralde. Admin Paneli > Profiliniz’den düzenleyebilirsiniz, bu kod ile komple de kaldırabilirsiniz.

add_filter('user_can_richedit' , create_function('' , 'return false;') , 50);

Yardım Yazısını Düzenleyin

WordPress admin panelinde sağ üstte yardım yazar, tıklayınca aşağıya kayan. Müşterinize bir site yaparken o alanı düzenleyebilirsiniz.

Aşağıdaki kodu admin panelinden herang bir yere ekleyebilirsiniz. Örneğin post-new.php’e eklemek için load-post-new.php ‘i kullanmanız yeterli.

add_action('load-page-new.php','custom_help_page');
add_action('load-page.php','custom_help_page');
function custom_help_page() {
  add_filter('contextual_help','custom_page_help');
}
function custom_page_help($help) {
  // echo $help; //
  echo "<h5>Baslik</h5>";
  echo "<p> HTML kodlar buraya.</p>";
}

Kullanıcılara Profil Alanı Ekleyin

Profil alanında IAM gibi modası geçmiş şeyler var. Twitter ve Facebook falan ekleyebilirsiniz.

function new_contactmethods( $contactmethods ) {
  $contactmethods['twitter'] = 'Twitter'; // Add Twitter
  $contactmethods['facebook'] = 'Facebook'; // Add Facebook
  unset($contactmethods['yim']); // Remove Yahoo IM
  unset($contactmethods['aim']); // Remove AIM
  unset($contactmethods['jabber']); // Remove Jabber

return $contactmethods;
}
add_filter('user_contactmethods','new_contactmethods',10,1);

Kullanıcı Yetkileri

Sanırım basit gözükse de en önemli ipucu kullanıcı yetkilerine müdehale etmeniz.

$edit_contributor = get_role('contributor'); // kullanici yetkisi
$edit_contributor->add_cap('upload_files'); // upload yetkisi verme
$edit_contributor->remove_cap('delete_posts'); // yazi silme yetkisi alma

Kullanıcı Yetkilerini Kontrol Edin

Belirli bir kullanıcıyı conditional tags ile kontrol edebiliyoruz.

if( !is_admin() ) {
  add_filter( 'pre_site_transient_update_core', create_function( '$a', "return null;" ) );
}

is_admin() bunu yapabilmenin ilk yolu, current_user_can() ile de daha genel kodlar yazılabilir.

if( current_user_can('edit_pages') ) {
  // True eğer kullanici sayfa duzenleyebilir
}

if( !current_user_can('delete_private_posts') ) {
  // True eger kullanici ozel yazilari silemez
}
if( current_user_can('activate_plugins') ) {
  // True eger kullanici eklenti aktiflestirebilir
}

Bu seferki ipuçları biraz zorlayıcı olmuş olabilir, belirli bir konuya yoğunlaşmanın etkisiydi. Gelecek yazımda karışık, kullanışlı diğer ipuçları olacak.

Teşekkürler.

Alain de Botton başarı ve başarısızlık fikirlerimizi inceliyor – ve bu iki yargının altında yatan varsayımları sorguluyor. Başarı her zaman kazanılan bir şey mi? Ya başarısızlık? Züppeliğin ötesine geçerek yaptığımız işte gerçek keyfi bulmamız için belagatli ve zekice bir vaka oluşturuyor.

TED’in olağanüstü konuşmacıları var ve bu konuşmaların haklarını vermek adına onları irdelemek, izleyip geçmemek gerekiyor.

Züppelik ve Anne

“Züppe, sizin küçük bir parçanızı alan ve kim olduğunuza dair bütün bir görüşe ulaşmak için kullanan kişidir. Bu züppeliktir.” diyor Alain de Botton. Açıkcası züppe bizde zengin ve küstah anlamında kullanılsa da tanımlamara takılmamak gerek. Kastettiği anlam önemli. Züppelik ile nitelemek istediği ‘Ne iş yaparsınız?’ sorusunu sorduktan sonra, aldığı cevap ile size bakış açısını oluşturan insanlar.

Benim özellikle ilgimi çeken, imgelemesini öylesine net yaptığı züppeliğin karşıtı, başarılarınızı o kadar önemsemeyen birisi olarak anne kavramını sunması.

İşte bu karşıt kavramlar ile “Başarı nedir?” e ustaca bir dönüş yapılıyor.

Bir dahaki sefere Ferrari kullanan birini gördüğünüzde ‘Bu açgözlü biri.’ diye düşünmeyin. ‘Bu inanılmaz derecede kırılgan ve sevilmeye ihtiyacı olan biri.’ diye düşünün. Diğer bir deyişle – (Gülüşmeler) küçümsemek yerine sempati hissedin.

Eşitlik

Herkesin her şeyi yapabileceği, her pozisyona yükselebileceği inancı, hiyerarşilerin yokoluşu ile birlikte insanların birbirleriyle eşit olduğu bilinci kıskançlığı doğuruyor. Bu konuda çok önemli bir temel var. “Başkasıyla kendinizi ilişkilendiremezseniz, onu kıskanmazsınız.” Dolayısıyla kıskandığınız, kendini karşılaştırdığınız, bilhassa yakın olduğunuz kişilerle aranızdaki farklar çok stresli bir ortam oluşturabiliyor. “Yani bir eşitlik ruhu var, ancak derin eşitsizliklerle birlikte.”

Başarı

‘Yapabilirsin! Başarabilirsin! Her şey mümkün!’ pek de yabancısı olmadığımız sözler. Bu sözlerin arkasında unutulan, en iyinin en üste çıktığı gibi en alta inmeyi hak edenin de en alta indiği ve orada kaldığı bir topluma da inanacaksınızdır. “Diğer bir deyişle, hayattaki pozisyonunuz rastlantısal görünmez, ancak layık olduğunuz ve hak ettiğinizdir. Ve bu başarısızlığı çok daha fazla ezici gösterir.” Bu noktada talihsizlik ve talih kavramı üzerine yapılan vurgu ile birlikte “Sorumlu artık tanrılar değil, biziz.” cümlesi oldukça kilit.

“Başarılarını sahipleniyorlar. Ama başarısızlıklarını da.”

Bu konuda talihsiz bir şekilde başarısız olanlara Trajik sanat ‘ı bir alternatif kurtuluş yolu olarak sunuyor.

Başarının Tanımı

“Başarı ile ilgili fikirlerin kendimizin olduğundan emin olmalıyız.” Bir mesleği istemenin nedeni kendi tutkularımız olmalı, çevremizin baskısı değil. Ve o mesleği elde etmek mi bizim için başarı? Meslekte nereye ulaştığınızda kendinizi başarılı hissedeceksiniz? Veya herangi bir yarı nokta başarısızlık kabul edilebilir mi? En önemlisi başarı olarak hedeflediğiniz yere vardığınızda ‘tutku’nuzun bu olmadığını hissederseniz, bu duyguya hazır mısınız?

Bunlar yola çıkmadan kendinize sorup, açıkca yanıt verebilmeniz gereken sorular. Tüm bunlar yaşanırken tesadüfün önemli bir faktör olduğunu her zaman hatırlamalıyız.

Ve hiçbir zaman unutulmamalı ki herangi bir şeyde başarılı olabilirsiniz fakat her şeyde başarılı olamazsınız. Başarılı olduğunuzuda eksik kalan bir yönünüz de olacaktır. Hangi yönünüzden fedekarlık edeceğinizi de planlamalı, başarıya ulaştığınızda o yönünüzü görerek kendinizi beklenmeyen bir başarısızlık içinde bulabilirsiniz, geri dönüşü olmayanından.

Alain de Botton ‘ın konuşmasını yukarıdan veya TED üzerinden izleyebilirsiniz.

Not: Konuşmayı izlemek isterseniz Türkçe altyazı seçeneği olduğunu unutmayın. Farketmeyenlerin video şablonunda yer alan ‘View subtitles’ a tıklayıp açılan menüden Türkçe anlamına gelen Turkish ‘i seçmeleri yeterli olacaktır.

Teşekkürler.