bildirgec.org - sekanet - beğendikleri

Bedava UML Modelleme yazılımı

sekanet — Sun, 30 Sep 2007 18:39:00 GMT

Belli bir süre plansız kod yazan insanlar zamanla kodların çöplüğe dönüştüğünü görmeye başlarlar. Aynı zamanda hep çalışılmasına rağmen projeler yetişmiyordur. Bu sorunların en önemli sebebi yazılım geliştirme sürecinin ilk aşaması olan planlamanın endüstri strandartlarına uygun yapılmayışından kaynaklanmaktadır. Bir yazılım geliştirilmeden önce oturulup UML diagramları çıkarılmıyorsa o yazılım programlama açısından sakat doğuyor ve belli bir yerden sonra (programcının işten ayrılması) geliştirilmesi işkenceye dönüşebiliyor.

Eğer bir UML modelleme yazılımına ihtiyacınız varsa ve Microsoft'a Visio için para vermek istemiyorsanız Visual Paradigm'in geliştirmiş olduğu ve bedava olan Visual Paradigm UML Community Edition'unu kullanabilirsiniz. Yazılımı oldukça başarılı ve kullanıcı dostu buldum.

Bu yazı sekanet tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

En Seksi 16 Adet JQuery Eklentisi ve Eğitimi

sekanet — Mon, 09 Nov 2009 07:40:00 GMT

Web sitenizde, blogunuzda veya farklı amaçlarla hazırlamış olduğunuz/olacağınız Web uygulamalarınızda kullanabileceğiniz, 16 Adet JQuery ekletisi ve bu eklentilerin nasıl kullanılacağını anlatan eğitim dokümanlarını bu listede bulabilirsiniz.

1-jQZoom: Demosu | Eğitimi

2-Image Puzzle: Demosu | Eğitimi

3-Animate Curtains: Demosu | Eğitimi

4-Sexy Drop Down Menu: Demosu | Eğitimi

5-Image Scroller: Demosu | Eğitimi

6-Virtual Tour: Demosu | Eğitimi

7-Creating a Keyboard: Demosu | Eğitimi

8-Sliding Boxes and Captions: Demosu | Eğitimi

9-Image Rotator: Demosu | Eğitimi

10-AnythingSlider: Demosu | Eğitimi

11-ImageSwitch: Demosu | Eğitimi

12-Galleria: Demosu | Eğitimi

13-Image Cross Fade Transition: Demosu | Eğitimi

14-Scrollable: Demosu | Eğitimi

15-Polaroid photo viewer: Demosu | Eğitimi

16-Thumbnail Gallery: Demosu | Eğitimi

Bonus++++++++++++:
+Görenlere "OHA" Dedirten, JQuery ile Hazırlanmış, 10 Adet Animasyon ve Eğitimi
+Portfolio için 15 Adet Herkesten Saklanası Wordpress Teması
+En iyi 10 jquery slider eklentisi
+Html formları için 25 harika jquery eklentisi
+70 adet harika photoshop eğitimi ve kaynağı
+30 Adet Göz Dolduran Javascript Menü ve Kodu
+Tasarımcılar İçin Ücretsiz, Legal ve Kaliteli Kaynaklar
+Portfolio için 13 Adet Muhteşem Wordpress Teması
+jQuery ve CSS ile Page Peel Effect'i
+google api ve araçları
+15 Adet Dolu Dolu jQuery Kaynak Sitesi
+Adet Kullanışlı jQuery Örneği ve Eğitimi

Kaynak: designzzz
algoz: Blog FriendFeed Twitter Facebook Email RSS

Bu yazı sekanet tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

çizim mi yoksa fotoğraf mı diye düşündüren muhteşem çalışmalar

sekanet — Wed, 18 Mar 2009 16:55:00 GMT

Clay Aiken (karakalem)

karakalem çizimleri resme başlarken atılan ilk adımdır. bir nevi temeldir ve adından da anlaşıldığı gibi pek renk seçeneği yoktur bu çizimlerde. siyah ve beyaz.
fakat bazen öyle bir karakalem çalışmaları çıkar ki karşınıza şaşırıp kalırsınız. hatta ilk başta çizim olduğuna bile inanasınız gelmez.

işte tam da bu etkilere sahip çalışmalar çıkaran bir sanatçı biliyorum. adı Linda Huber. genelde ünlü isimlerin portrelerini çalışmaları arasına katan sanatçının şaheserleri birçok reklam, tv, kitap, internet sitesi ve çeşitli sanat galerilerinde kullanılmış.
çizim mi fotoğraf mı? ayrımını hemen yapamayacağınız işte o çalışmalar:

liv tyler (karakalem)

Marilyn Monroe (karakalem)

Johnny Depp (karakalem)

leeloo (karakalem)

jen garner (karakalem)

Linda Huber (karakalem)

drink art (karakalem)

water drop (karakalem)

Bu yazı sekanet tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

Güzel Tipografiye Sahip 20 Web Sitesi

sekanet — Mon, 09 Mar 2009 07:39:00 GMT

Web tasarımında tipografi bir web sitesinin tonunu, temasını ve mesajını aktarmada önemli bir rol oynamaktadır.

Örneğin bir sitenin odağını modernliğe ya da gelenekçiliğe yöneltmek için sırasıyla sans serif ya da serif yazıtipi kullanmayı tercih edebilirsiniz. Sadece yazıtipinin rengini, satır yüksekliğini, stilini ve boyutunu değiştirerek, içeriğin farklı bölümlerine ilgiyi çekebilir, diğer alanların önemini azaltabilirsiniz. Yazıtiplerinin verimli bir şekilde kullanımı tasarımı sadece çekici kılmakla kalmaz, ayrıca içeriğin okunulabilirliğini ve kullanılabilirliğini de arttırır.

Bu kolleksiyonda tipografiyi işlevsel ve verimli bir şekilde kullanan 20 adet web sitesini bulacaksınız.

1. Jason Santa Maria

Jason Santa Maria'nın kişisel sitesindeki tipografi seçimi ve stilleme, sitenin minimalist tasarımında önemli bir rol oynamaktadır. Büyük boyutlu makale başlıkları ilginizi derhal onlara çekiyor. Sitenin altlık başlıkları gibi çeşitli yerlerinde sIFR kullanılmış. Bu sayede herhangi bir görsel ya da metin kullanılmadan web-safe yazıtiplerinin kullanılması mümkün hale getirilmiş.

2. Elysium Burns

Elysium Burns büyük boyutlu, kalın, sans serif yazıtipleri ile geleneksel sans serif yazıtiplerini br arada kullanarak etkileyici bir tasarım oluşturmayı başarmış. Makalelerin başlıkları ve site üstlükleri için ise CSS görsel arkaplanları kullanılmış.

3. GOOD

GOOD temiz ve mükemmelce boşluklandırılmış yazıtiplerini güzel ve okunabilir bir tasarım oluşturmak için kullanmış.

4. Web Design Ledger

Web geliştiricisi ve tasarımcısı Henry Jones serif ve sans serif yazıtiplerinin birleşiminden ortaya özgün bir tasarım çıkarmış. Web Design Ledger'in tasarımı okurların son yorumlarını büyük boyutlu ve vurgulandırılmış bir yazitipi ile belirterek onları sadece tasarımın işlevsel bir elementi olarak kullanmakla kalmamış, ayrıca yaratıcı bir çalışma da ortaya çıkmış.

5. Future of Web Apps

Future of Web Apps web sitesi parlak renkli büyük ve koyu yazıtiplerinin bir karışımını kullanmış. Sitenin ana gezintisi için kullanılan yazıtipinde koyu, negatif harf aralığı ve kısa satır yüksekliği tercih edilmiş ve sonuçta kompakt ve özgün metin tabanlı bir gezinti menüsü ortaya çıkmış.

6. VigetInspire

WidgetInspire blogu bir dizi mükemmel yazıtipi kullanımını içeriyor. İçerik metni için yüksek satır yüksekliği okunulabilirlikten ödün vermeden küçük boyutlu yazıtipinin kullanımının önünü açmış.

7. Diaroogle.com

Diaroogle.com web tasarımında hem serif hem de sans serif yazıtiplerinin bir arada kullanılmasına rağmen sıkı ve birbirini tamamlayan bir çalışma ortaya sunan mükemmel bir örnek. Arama girdi kutusu hattatlığa ait yazıtipi kullanarak onun gözü rahatsız etmeden daha belirgin olmasını sağlamış.

8. The Morning News

Minimalist tasarımlarda tipografi, özellikle tasarımın temasında ve anahattında önemli bir rol oynar. The Morning News temiz ve doğru şekilde boşluklandırılmış yazıtiplerini uygun renklerle birlikte kullanarak temiz ve keskin bir atmosfer oluşturmuş.

9. Ordered List

Ordered List kalın ve büyük boyutları ve renkleri, görece karanlık arkaplanla uyumlu bir şekilde kullanmış. Başlıklar için arkaplan görselleri kullanarak kullanılan yazıtipinin web-safe yazıtipi olma zorunluluğu giderilirken, sitenin erişilebilirliği ve arşivlenebilirliği korunmuş.

10. Words Are Pictures

Words Are Pictures (Kelimeler Resimlerdir), sitenin adına sadık kalarak ana tasarım elementi olarak tipografiyi kullanma yoluna gitmiş. Serif yazıtiplerinin sade bir şekilde stillenmesi ile klasik görünüm ve his korunmuş.

11. Meagan Fisher

Meagan Fisher bir dizi serif yazıtipini ve stili kendi web sitesinde kullanmış. Sitenin sol üst köşesindeki askı etiketi üzerinde kullanılan özgün yazıtipinin dikkat çekiciliği ile birlikte ziyaretçiye o an nerede olduğunu hemen belirtiliyor.

12. The New Yorker

The New Yorker kendilerine ait olan derginin marka yazıtipini web üzerine taşıyarak hem basılı hem de dijital ortamlarda markanın karakterini korumayı başarmış. Serif yazıtiplerinin kullanılması okuyucuya The New Yorker'in hem geleneksel hem de uzun süredir yayımda olan bir dergi olduğu hissini uyandırmasını başarıyor.

13. Black Estate Vineyard

Bir web sitesini "yeraltı" sınıfına sokmadan karanlık arkaplan kullanmak zor bir iştir. Ancak Black Estate Vineyard kendi markalarının rengi olan siyah rengini arkaplanlarında kullanırken, büyük ve kalın serif yazıtiplerini kullanarak sitelerindeki sofistike havayı korumayı başarmış. Yüksek kontrasta sahip bir rengi (beyaz) önplan rengi olarak kullanmak her zaman okunulabilirlik için iyidir.

14. Ad Fed MN

Ad Fed MN sans serif ve serif yazıtiplerini tasarım üzerinde başarılı bir şekilde harmanlamayı başarmış. Tasarımın sağ üst köşesindeki parlak ve sade gezinti menüsü çekici ve kompakt bir gezinti menüsünün kullanılmasını sağlamış. Yanbar üzerinde kullanılan görsel konumlandırma (image replacement) başlıkları sayesinde erişilebilirlik ve arşivlenebilirlik korunurken web-safe yazıtipleri kullanma zorunluluğu da ortadan kaldırılmış.

15. What A Lovely Name

What a Lovely Name ziyaretçilerinin bebekleri için anahtar kelimeler ("etiketler") bazında isim seçmelerine yardımcı olan bir web uygulaması. Anahtar kelimeler bir etiket bulutu üzerinde dizilmiş durumda ve popüler olanlar, diğerlerine kıyasla daha koyu ve büyük boyutlu olarak belirtilmiş.

16. Rustin Jessen

Rustin Jessen'in sitesinin minimalist olmasının bir nedeni var: Okuyucunun dikkatini kendisine ait olan mükemmel sanat çalışmalarına çekmek.

17. The Darling Tree

The Darling Tree'nin farklı yazıtipi stillerini ve boyutlarını verimli bir şekilde kullanması tasarıma büyük katkı sağlamış.

18. I Love Typography

I Love Typography (Tipografiyi Seviyorum) adındaki bir siteden de oldukça özenle seçilmiş yazıtipi seçimi ve kullanımından başkasını beklemek doğru olmazdı zaten.

19. A List Apart

A List Apart'ın minimalist tasarımı, özellikle tipografinin işlevsel ve çekici uygulaması üzerine odaklanmış. İçeriğin metni üzerindeki yeterli satır yüksekliği makalelerinin okunulabilirliğini arttırdığı gibi başlıklarda kullanılan farklı renkler aynı konu altındaki makaleler arasında da bir ilişkinin oluşturulmasını sağlamış.

20. Collective Idea

Sitenin sağ üst kısmında kullanılan sıradaki etinlikler bölümünün güzel görünümü, sitenin tipografiye verdiği özeni başarılı bir şekilde yansıtıyor.

Tartışalım...

Web Tasarımında Tipografiye yönelik paylaşmak istediğiniz ilginç birşey var mı? Mükemmel bir tipografiye sahip ancak burada paylaşımı yapılmamış bir web sitesi biliyor musunuz? Lütfen fikirlerinizi yorumlarınızla paylaşmayı unutmayın.

Kaynak: Six Revisions

Tipografi İle İlgili Yazdığım Diğer Yazılar

Bu yazı sekanet tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

Çapraz Tarayıcı Uyumluluğu İçin Altın Değerinde İpuçları

sekanet — Mon, 16 Feb 2009 19:13:00 GMT

Internet Explorer'la çalışmak her seviyeden web tasarımcısı için bazen sorun olabilir. Ancak bu sorun olmak zorunda olacağı anlamına gelmiyor. Hepsi olmasa da pek çok Internet Explorer hatası, hatanın nasıl oluştuğunu anladıktan sonra kolayca düzeltilebilir. Bu yazımda özellikle giriş seviyesindeki kullanıcılar için çapraz tarayıcı uyumluluğunu sağlayabilmeleri için önemli problemleri ve çözümlerini listeledim.

Yazımda en çok kullanılan tarayıcı sürümleri olan Firefox 2+, Safari 3+ ve Internet Explorer 6+'ya odaklandım. Her ne kadar IE6'nın kullanım oranı gün geçtikçe düşüş gösteriyor olsa da, bu onu desteklememeniz gerektiği anlamına gelmez, zira halen pek çok kullanıcı hangi tarayıcı sürümünü kullandığını bilmemektedir. Eğer bu IE6 hatalarını biliyorsanız, tarayıcı üzerinde test yapmadan bile sitenizin doğru görünüp görünmediğini anlayabilirsiniz. Bu makale süper deneyimli web tasarımcılarına yönelik olmamakla birlikte IE6'nın çapraz tarayıcı uyumluluğuna yönelik gizlerini anlamanıza yardımcı olacaktır.

Özet
Makalenin tamamını okumak istemeyenleriniz için aşağıda makalenin bir özetini bulabilirsiniz.

Daima STRICT DOCTYPE ve standartlarla uyumlu HTML/CSS kullanın
CSS'nizin en başında daima sıfırlama (CSS RESET) kullanın.
Firefox'ta metin işleme sorunlarını gidermek için -moz-opacity:0.99, Safari'de ise text-shadow: #000 0 0 0 kullanın.
Görselleri asla CSS ya da HTML ile yeniden boyutlandırmayın.
Her tarayıcıda metinlerin nasıl işlendiğini test edin. Lucida kullanmayın.
BODY üzerinde metni % ile boyutlandırıp sitenin geri kalanında em kullanarak metin boyutlandırması yapın.
Üzerine float uygulanmış tüm anahat divleri display: inline ve overwlow: hidden içermeli.
CSS3 seçicilerini kullanmayın.
Alpha'yı yüklemediyseniz saydam PNG kullanmayın.

Element Uyumsuzlukları
Her tarayıcı farklı elementleri farklı şekillerde yorumlar - farklı miktarlarda boşluklar, marjlar, sınırlar vs. Bunun anlamı eğr siz öntanımlı stilleri kullanırsanız, kodunuz doğru olsa bile siteniz farklı tarayıcılarda farklı şekillerde görüntülenebilir.

Çözüm
Yapmanız gereken ilk şey, ki pek çoğunuzun bunu bildiğini düşünüyorum, stillerinizi sıfırlamaktır. Sıfırlamak, stillerinizin en üst kısmına yerleştireceğiniz ve elementler üzerindeki boşlukları, marjları, sınırları ve diğer uyuşmazlıkları sıfırlayıp onları standart olarak yeniden inşa eden bir kod parçasıdır.

Eric Meyer'in reset.css dosyasını indirin ve stillerinizin en başına yerleştirin. İşte bu kadar. Temiz, çapraz tarayıcı uyumlu stillere kavuştunuz.

Görsel İşleme
IE6 ve IE7'nin her ikisi de yeniden boyutlandırılmış görselleri inanılmaz derecede kötü bir şekilde işler. Bir görselin boyutunu CSS ya da HTML kullanarak değiştirdiğinizde görsel inanılmaz derecede kötü görünür.

Çözüm
Yapmayın. Görsellerinizi sitenize yerleştirmeden önce istediğiniz boyuta göre yeniden boyutlandırın.

Metin İşleme
Tüm hataların IE'den kaynaklanmadığını söylemiştim. Safari 3+ açık renkli metinlerin koyu renkli arkaplan üzerinde işlenmesi sırasında bir soruna sahip. Kimileri bunun iyi ya da kötü olup olmadığı konusunda farklı görüşlere sahip olabilir, ancak ilgili metni daha aydınlık görüntülemenin bir yolu var. Safari 3.1'de standart metin aşağıdaki şekilde işlenmektedir.

Çözüm
Oldukça kolay. Tek yapmanız gereken aşağıdaki stillemeyi CSS kodunuza dahil etmek.

p {text-shadow: #000 0 0 0;}

#000 kullandığınız arkaplan rengi olmalı. Seçtiğiniz elementlerde muhtemelen siz daha özgün olmak isteyeceksinizdir. Bunu BODY etiketi üzerinde kullanmanızı önermem. Düzeltmek isteyeceğiniz diğer elementler li, dt, dd, blockquote vs olabilir. Daha 'ince' görüntülemek istediğiniz tüm elementlerde bu düzeltmeyi kullanın.

Bazıları Safari'de tipografi için bunun iyi olmadığını söylüyorlar ve metnin standart işleme ile daha güzel göründüğünü söylüyorlar ki ben de onlara katılıyorum. Ancak bazılarının buna katılmadığını da biliyorum. Ayrıca arkaplan rengine, metin rengine ve metin seçimine karar verirken hangisinin daha iyi olduğuna da karar veremeyiz. Bu durumda seçim tamamen kişisel tercihinize ve sitenizin içeriğinin nasıl olduğuna kalmış.

Bu düzeltmeyi Firefox üzerinde kullanmak için opacity düzeltmesini kullanacağız.

p {-moz-opacity: 0.99;}

Bu düzeltmeyi kullanırken dikkatli olmalısınız zira düzeltmenin uygulandığı element içerisinde bir Flash dosyası bulunuyorsa ilgili dosya doğru görüntülenmemektedir.

İlgili düzeltmeler uygulandıktan sonra metnimiz aşağıdaki şekilde görünecektir.

Yazıtipi Seçimi
Hepimizin kullandığı bazı ortak web yazı tipleri vardır - Arial, Georgia, Verdana vb. Hem PC hem de Mac kullanıcılarının bilgisayarlarında bulunan yazı tipleri de mevcuttur - Century Gothic, Arial Narrow vs. Buna rağmen farklı tarayıcıların ve işletim sistemlerinin yazı tipi işleme yöntemleri farklıdır ve sizin bu farklılıkların farkında olmanız gerekir, zira yanlış bir yazı tipi kullanırsanız siteniz çok çirkin görünebilir.

Çözüm
Kullanacağınız yazı tipinin seçimi tamamen sizin tercihinize bağlıdır. Yazı tipini kullanmak güvenli olduğu sürece sorun yoktur ancak bu işleme sorunlarının farkında olmanız gerekir. Kullanmamanız gereken bir yazı tipi muhtemelen Lucida Grande/Sans zira IE üzerinde bu yazı tipi korkunç görünüyor. Yazı tipinin Safari'de (Mac) nasıl işlendiğine bir bakın.

Güzel değil mi? Internet Explorer (PC)'de yazı tipinin bu şekilde görüntüleniyor olması ise çok kötü.

Kimileri Lucida Sans yazı tipinin de işletim sisteminin ClearType özelliği açıldığında düzgün göründüğünü belirtirken, kimileri de halen yanlış göründüğünü belirtiyor. Bu durumda yapılması gereken en doğru şey muhtemelen Lucida Sans kullanmamak olacaktır. Bunun yerine Arial ya da başka bir san-serif yazı tipi kullanmayı tercih etmelisiniz.

Yazıtipi Boyutlama
Metni yeniden boyutlandırma işlemi farklı tarayıcılarda ve işletim sistemlerinde farklı şekillerde işlenir. Örneğin IE pixel kullanılarak boyutlandırılmış bir metni yeniden boyutlandırmayacaktır. Eğer metinleri em kullanarak boyutlandırırsak, o zaman da IE metni yeniden boyutlandırdığımızda boyutunu abartacaktır.

Çözüm
Yazı tipi boyutlandırmaya yönelik kendinize referans alabileceğiniz en iyi kaynak, Richard Rutter'ın yazdığı CSS'de Metin Nasıl Boyutlandırılmalıdır makalesidir. Sonuç ise, metninizi BODY elementi üzerinde yüzde kullanarak boyutlandırıp, stilin geri kalanında em kullanarak boyutu belirlemek. Satır yüksekliği için de yine pixel yerine em kullanırsanız farklı tarayıcılarda doğru işleme sonuçlarını alırsanız.

Burada hatırlamanız gereken şey öntanımlı yazı tipi boyutunun 16px olduğudur. Bu durumda örneğin yazı tipini 12px'e dönüştürmek için kullanmamız gereken kod şudur:

body {font-size: 75%; line-height: 1.5 em;}

Şimdi boyutlandırmanızı em kullanarak yapabilirsiniz:

h1 {font-size: 3em;}

Önerilen bir diğer teknik ise yazı tipinizi önce 10px'e indirgemektir. Bu durmda metninizi em kullanarak yeniden boyutlandırmak daha kolay olacaktır. Örneğin:

body {font-size: 62.5%; line-height: 1.5em;}
h1 {font-size: 1.8em; /* 18px */}
p {font-size: 1.2em; /* 12px */}

Bu tekniği kullanırsanız dikkat etmeniz gereken bir konu var ki o da insanların Internet Explorer üzerinde küçük yazı tipi seçeneğini kullanmaları durumunda metniniz okunamayacak derecede küçük olabilir. Her ne kadar bu seçeneği bilinçli olarak seçen kullanıcı sayısının yok denecek kadar az olduğunu düşünsem de bu ayrıntıyı bilmenizde yarar var.

Yüzen Elementlerde Çifte Marj
CSS Anahatlarımızı birbiri ardına yüzen (float) divler kullanar oluştururuz, tıpkı bir tür yatay tetris gibi. Satırın sonuna gelindiğinde ise satıra sığmayan div bir sonraki satıra kayar. Bir ızgara oluşturmak için sık kullanılan yöntem aşağıdaki gibidir:

#content {float: right; width: 300px; margin-right: 10px;}
#sidebar {float: right; width: 100px;}

Bu kod "normal" bir tarayıcıda aşağıdaki gibi görünmelidir.

Ancak IE'de bu aşağıdaki gibi görüntülenecektir.

Gördüğünüz üzere marj iki defa işlendi. Yüzen element ile aynı yönde bulunan her marj iki defa işlenecektir. Neden diye sormayın, IE bu. Bunun anlamı sol tarafaki elemente uygulanan marj, kodda belirtilenin aksine 20px olarak işlenecektir ki bu da muhtemelen anahattı bozacaktır.

Çözüm
Bu sorunu gidermek için anahat divlerinize display: inline yerleştirmelisiniz.

#content {float: right; width: 300px; margin-right: 10px; display: inline;}
#sidebar {float: right; width: 100px; display: inline;}

Bu sayede marj hatasını da gidermiş olduk. Her ne kadar bu yüzen element ile aynı yöndeki tüm marj elementlerini etkilese de bu düzeltmeyi yüzen tüm div elementlerine eklemek kullanışlı olabilir. Ne zaman yüzen tarafta marj kullanmak isteyeceğinizi önceden kestiremezsiniz. Bu kod diğer hiçbir tarayıcıyı etkilemeyeceğinden kullanışlı olabilir.

Genişleyen Kutu
Genişleyen kutu problemi pek çok CSS anahattında sorun oluşturur. birbiri ardına yüzen elementler içeren ve öntanımlı genişlikleri bulunan divleri içeren bir anahat kullanmanız durumunda eğer ilgili divin genişliğinden daha geniş bir genişliğe sahip bir görsel ya da boşluk içermeyen bir metin kullanmanız durumunda ilgili anahat IE6'de yanlış görüntülenecektir. Örneğimize bir bakalım:

#content {float: right; width: 300px; margin-right: 10px; display: inline;}
#sidebar {float: right; width: 100px; display: inline;}

Pek çok tarayıcıda bu aşağıdaki şekilde işlenecektir:

Buna rağmen IE6'da anahattımız bozulacaktır:

Çözüm
Burada kullanacağımız çözüm overflow özelliğini kullanmaktır. Eğer overflow: hidden değerini anahat divlerine dahil ederseniz, anahat IE6'de bozulmayacaktır.

#content {float: right; width: 300px; margin-right: 10px; display: inline; overflow: hidden;}
#sidebar {float: right; width: 100px; display: inline; overflow: hidden;}

Her ne kadar ekleyeceğiniz bu kod sorunu giderse de bazı karmaşık anahatlarda başka sorunlara yol açabilir. Bunun yanı sıra IE6 dışındaki tarayıcılarda metnin otomatik olarak iki satıra bölümlenmesinin aksine alana sığmayan metnin görünmemesine neden olacaktır.

Yüzen Elementleri Kapsamak
Burada anlatmak istediğimiz şey kapsayıcı bir divin içerisindeki divleri doğru bir şekilde kapsamamasıdır. Aşağıdaki örneğe bir bakın.

Kapsayıcının içerisindeki divleri nasıl doğru bir şekilde kapsadığını gördünüz mü? Olması gereken de bu zaten. Buna rağmen bazen bu şekilde sonuçlanmayıp aşağıdaki gibi bir hal alabiliyor.

Kapsayıcı doğru bir şekilde içerisindeki divleri kapsamıyor. Muhtemelen kapsayıcınıza bir arkaplan resmi atamadığınız sürece bunu fark etmeyeceksinizdir.

Çözüm
Bu sorunu gidermeye yönelik birkaç çözüm bulunmakla birlikte kullanılabilecek en iyi yöntem kapsayıcınıza overflow: auto; ya da overflow: hidden değerlerinden birisini atamaktır.

#container {width: 966px; margin: 0 auto; overflow: auto;}

overflow: auto değerinin Firefox üzerinde bazen sorunlara yol açabileceğini unutmayın. Eğer bunu kullandıktan sonra bir sorunla karşılaşırsanız, onun yerine overflow: hidden kullanmayı deneyin. Eğer bu da sorun oluşturuyorsa o zaman şuradaki makaleye bir göz atın. Bunu eklemenin dışında IE6 üzerinde anahattınızın tetiklenmesi gerektiğini de unutmayın. Bunu elementinize yükseklik ve genişlik atayarak yapabilrsiniz. Eğer kapsayıcınıza bir genişlik değeri vermek istemiyorsanız o zaman height: 1%; ya da zoom: 1; değerlerinden birini verebilirsiniz.

CSS Seçicileri
Her ne kadar hepimiz CSS3 seçicilerini kullanmaya can atsak da, IE6 bu seçicilerin büyük bir kısmını desteklememektedir. Bırakın CSS3'ü, IE6'nın desteklemediği CSS2 seçicileri bile vardır. İşte kullanmamanız gereken seçicilerin bir listesi:

E > F
E + F
E ~ F
:root
:last-child
:only-child
:nth-child()
:nth-last-child()
:first-of-type
:last-of-type
:only-of-type
:nth-of-type()
:nth-last-of-type()
:empty
:not()
:target
:enable
:disabled
:checked
E[değer] seçicilerinden herhangi biri
:first-child
:lang()
:before
::before
:after
::after

Elbette bu seçicilerin pek çoğu daha Firefox 3 üzerinde de desteklenmiyor. Desteklenen seçicilerin tam bir listesi için evotech.net üzerinde yer alan tarayıcılarda css seçiciler için destek yazısına bir göz atın.

Çözüm
Standart seçicileri kullanmaya devam edin. Sadece IE üzerinde çok önemli bir değişiklik yapmayacağı sürece E + F, F, E > F, E ~ F seçicilerini kullanın. Eğer gerçekten bu seçicileri kullanmak istiyorsanız, o zaman IE8.js'yi deneyebilirsiniz. Bu JavaScript kütüphanesi IE6'ya seçiciler için daha iyi destek sunmasına rağmen sitenizi yavaşlatacaktır. Ancak biz IE6 kullanıcılarını dikkate almıyoruz, öyle değil mi?

PNG Saydamlığı
IE6 PNGler üzerinde alfa saydamlığı desteklemiyor. Bu muhtemelen IE üzerinde gördüğümüz en rahatsız edici sorun.

Çözüm
Bu problem için bir dizi çözüm bulunuyor. Ya IE'ye özgü bir stil şablonunda AlphaImageLoader'ı kullanacaksınız ya da bu sorunu gidermek için oluşturulan çeşitli JavaScriptlerden birine başvuracaksınız. Hangisini tercih ederseniz edin, tekrar eden saydam arkaplan görsellerini IE6 üzerinde kullanabilmenin bir yolu yok.

AlphaImageLoader'ı kullanmak biraz zahmetli. Saydam olan tüm PNG görsellerine aşağıdaki özellikleri ekleyin (CSS'nizin doğrulanabilmesini istiyorsanız o zaman bu kodu IE'ye özgü bir stil şablonu içerisine yerleştirin).

.saydam {background-image: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.bildirgec.org/images/transparent.png', sizingMethod='image/scale/crop');}

Tüm PNG görsellerinizi "saydam" sınıfına dahil ettiğinizi varsayarsak yukarıdaki kodu kullanabilirsiniz. Ayrıca 1x1 saydam bir png oluşturup src değerinde onun konumunu belirtmeniz de gerekiyor. Geçtiğimiz yıl 24ways üzerinde bu konuda muhteşem bir makale yayımlandı.

Bu sorunu giderebileceğiniz daha da iyi bir yöntem, Blueprint CSS Çatısı'nın geliştiricisi Olav Bjorkoy'un şuradaki makalesinde anlattığı yöntemi uygulamak. AlphaImageLoader'e benzer bir yöntem ancak onun yerine saydamlığı tetikleyen bir betiğe bağlantı veriyorsunuz.

Kullanabileceğiniz üçüncü yöntem ise IE8.js'yi kullanmak. Bu yöntem öncekinden de güvenli ve bir sorunla karşılaşmanız neredeyse mümkün değil. HTML'niz üzerinde bu betiğe bağlantı verin ve betik dosya adı -trans ile biten tüm png dosyalarının saydamlık sorununu giderecektir (örneğin resim-trans.png).

Tüm bu yöntemleri kullanmanıza rağmen saydam pngler ile sorun yaşamanız halen olasıdır. Bu yöntemlerden herhangi birini kullandıktan sonra IE6 üzerinde sağlam bir test uygulamayı unutmayın.

Kaynak: Anthony Short

CSS İle İlgili Yazdığım Diğer Yazılar

Bu yazı sekanet tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

wallpaper-duvar kağıdı arşivi

sekanet — Sat, 14 Jun 2008 07:00:00 GMT

pixelgirl presents: pixelgirl'den hoş illüstrasyonlar.
hubblesite: uzay, yıldızlar ve gezengenler üzerine bir şeyler arıyorsanız işinize yarayabilir. (daha önce şurada ve şurada değinilmiş)
endeffect: arşiv dar olsa da gerçekten iyi çalışmalar.
my best desktops: masaüstünüz için iyi bir kaynak. birçok türden fotoğraflar bulabilirsiniz.
macdesktops: mac ilgililerinin işine yarayacak bir kaynak. mac üzerine birçok fotoğraf mevcut. (ilk yazı)
desktop nexus: çeşitli illüstrasyon ve fotoğrafların bulunduğu bir site.
wallpaper stock: oldukça iyi bir kaynak. birçok türden, istediğiniz çözünürlükte fotoğraflar sitede mevcut. (ilk bildirgec yazısı)
fantasy art design: adından da anlaşılabileceği gibi fantastik çalışmalara ulaşmak istiyorsanız ilginizi çekebilir.
animepaper: anime çalışmalarının hayranları büyüktür. burası da onlar için bir site.
veer-wallpaper: güzel ps çalışmaları ve fotoğrafalr mevcut.
customize-wallpaper: customize.org'un duvar kağıdı bölümü de görülmeye değer.
skeedz: çeşitli türlen yüksek çözünürlükte fotoğraflar.
wallcoo: yine geniş bir arşiv isteyenler için iyi bir kaynak.
nationalgeographic: sanırım site adı ne tür çalışmalara ulaşabileceğinizi belli ediyor.
my hd wallpaper: yine yüksek çözünürlükte (hd) fotoğraf çalışmalarına ulaşabileceğiniz bir site.
60 Mac OS X Leopard duvar kağıdı: Mac OS X Leopard sevler için bir derleme daha.
apple wallpapers: yine apple için 50'nin üzerinde duvar kağıdı listelenmiş.
49 duvar kağıdı çalışması: ilk kez şurada değinilmiş bağlantıda çok hoş duvar kağıtları bulabilirsiniz.
louie mantia: birkaç tane olsa da iyi çalışmalar var. geniş ekran ve tam ekran seçenekleriyle bilgisayarınıza indirebilirsiniz.
geniş ekran duvar kağıtları: benim de çok beğendiğim birkaç çalışma listelenmiş.
vladstudio-Masaüstü Duvar Kağıtları: oldukça geniş bir arşivde ps illüstrasyonları.
twistedsun: masaüstünüz için yüksek çözünürlükte fotoğraf derlemeleri.
sensitivelight: iki sayfadan oluşan duvar kağıdı çalışmaları.
555design: grunge çalışmalar istiyorsanız uğramanız gereken bir adres.
msdn: doğa üzerine fotoğraflar arıyorsanız işinize yarayacak bir arşiv.
mandolux: fotoğrafları ikiye bölerek sunan ilginç bir site. boyutlarda ise tercih size ait.
socksoff: doğa fotoğrafları üzerine iyi bir kaynak.
flickr grubu: en düşük 1024x768 boyutlarında duvar kağıtlarının toplandığı büyük bir flickr grubu.
deviantart: deviantart'ın duvar kağıdı bölümünü atlamamak gerek.
dual screen wallpaper: çeşitli boyutlarda geniş ve yarım olarak indirebileceğiniz duvar kağıtları.
game wallpapers: oyuncuları da unutmayalım.
smashing'ten birkaç derleme: 1, 2, 3, 4 ve 5

bu kadar duvar kağıdının ardından belki onları sıklıkla değiştirmek isteyebilirsiniz. Wallpaper Changer, ScrollWall ve John’s Background Switcher gibi ücretsiz progranlar masaüstünüzdeki resimleri değiştirmede size yardımcı olabilir.

3 saatin ardından sonunda bitti.

Bu yazı sekanet tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

öğrenilmesi gereken 15 css hilesi

sekanet — Tue, 27 Jan 2009 09:25:00 GMT

Web tasarımcıları ve geliştiricileri olarak zamanla, anahat hedeflerimize ulaşmamıza yardımcı olması için pek çok CSS hilesini ve ipucunu öğreniriz. Bu tekniklerin bir listesini yapmaya kalksanız, projenizin yoğunluğuna göre yüzlerce hileyi bir arada toplamanız gerekebilir. Ancak bu yazıda bulacağınız 15 önemli css hilesi, web geliştiricilerinin karşılaştığı sorunların pek çoğunu giderebilecek kalitededir.

1. Bağıl (relative) pozisyonlanan element içerisinde mutlak (absolute) pozisyonlama
Mutlak pozisyonlanan bir elementi bağıl pozisyonlanan bir element içerisine yerleştirdiğinizde, onun pozisyonu kendisine en yakın olan üst elementin pozisyona göre belirlenecektir. Bu, özellikle bir elementi sayfanızda belirleyeceğiniz bir noktaya sabitlemek istediğinizde oldukça kullanışlı bir hiledir, örneğin başlık (header) damgaları (badge) gibi.

Pozisyonlama hakkında daha fazla bilgi alabileceğiniz siteler:

2. Z-index ve pozisyonlama
z-index kimi zaman geliştiriciler arasında çözümü zor olan bir bulmacaya dönüşebilir. Genellikle bir div elementini diğer bir elementin üzerine yerleştirmek için çok yüksek z-index değerleri atayan tasarımcılarla karşılaşırsınız. Burada unutmamamız gereken, z-index elementinin "position" değeri atanmamış bir element üzerinde çalışmayacak oluşudur. Eğer siz de uyguladığınız z-index kuralının işlevsel olmadığını düşünüyorsanız, kuralı uyguladığınız elemente 'position: relative' ya da 'position: absolute' değerlerini ekleyin.

Z-index hakkında daha fazla bilgi alabileceğiniz siteler:

3. Margin Auto
Bir şablon üzerinde 'margin: auto' değerini kullanmak, o elementin tarayıcı üzerindeki pozisyonunu, tarayıcının kullanıldığı sistemin ekran çözünürlüğüne bakılmaksızın ortalamak için mükemmel bir yöntemdir. Ancak 'margin: auto' değeri uygulandığı elementin 'width' değeri belirlenmediği sürece çalışmaz. Bu ayrıca satıriçi (inline) elementlerde 'margin: auto' değerinin 'display: block' kullanılmadan işlevsel olmayacağı anlamına da gelir.

Margin Auto hakkında daha fazla bilgi alabileceğiniz siteler:

4. Padding Elementini Dikkatlice Ve Doğru Bir Şekilde Kullanın
CSS ile çalışmaya başladığımda genellikle yaptığım hatalardan birisi de onun tüm efektlerini ve CSS Kutu Modeli'ni gözardı etmektir. Kutu modeline göre 'padding' değerinin uygulandığı elementinin genel genişliğini etkilediğini aklınızdan çıkarmayın. Bunu gözardı ettiğinizde elementlerin olması gerektiği yerde olmadığını göreceksinizdir. Örneğin:

#div {
width:200px;
padding: 30px;
border:2px solid #000;
}

Bunun toplam genişliği 264px olacaktır (200 + 30 + 2 + 2). Bunun yanısıra 'padding' özelliğinin 'margin'in aksine negatif değerler içeremeyeceğini unutmayın.

Padding hakkında daha fazla bilgi alabileceğiniz siteler:

W3 Padding Properties

text-indent kullanarak bir metni gizlemek
Sitenizde logo olarak bir resim kullandığınızı varsayalım. Bu resmin H1 etiketi içerisinde olması SEO açısından önemlidir, ancak H1 tagı içerisinde, arama motorlarının okuyabilmesi için bir metin olmasını da isteriz. Bazıları 'display: none' kullanmak isteyebilir ancak bu yöntemi kullanırsak logo resmini h1 etiketinden ayırmamız gerekecektir. 'text-indent' ve negatif değerler kullanarak ziyaretçiler için bir resim, arama motorları için de okunabilecek bir metin kullanmak mümkündür.

h1 {
text-indent:-9999px;/*Metni gizle, SEO için tut*/
margin:0 auto;
width:948px;
background:transparent url("images/header.jpg") no-repeat scroll;
}

Bu kod sayesinde kullanılan metnin herhangi bir çözünürlükte görünmeyeceğinden ancak onun yerine bir resmin görüntüleneceğinden emin olabiliriz. Bu yöntem ayrıca ekran okuyucularının ilgili metni görebilmesini sağlayacaktır, ancak "display: none" için bu geçerli değildir.

text-indent kullanarak metin gizleme yöntemleri hakkında daha fazla bilgi alabileceğiniz siteler

SitePoint - Using text-indent

6. IE Double Float Margin Hatası
Eminim bununla pek çoğumuz boğuşmuşuzdur, zira en sık kullanılan CSS "hilelerinden" birisi de budur. Eğer bu hata ile daha önce karşılaşmadıysanız hemen özetleyelim: IE6'da üzerine 'margin' uygulanmış yüzen (float) bir element kullanıyorsanız, bunun ilgili tarayıcı üzerinde doğru pozisyonlanmadığını göreceksiniz. Ne şans ki IE6'nın bu hatasını gidermek çok basit. Tek yapmanız gereken 'display' özelliğinin diğerini aşağıda gösterildiği şekilde 'inline' olarak belirlemek.

.yourClass {
float: left;
width: 350px;
margin: 20px 0 15px 100px;
display: inline;
}

Bu değişikliğin diğer tarayıcılara hiçbir etkisi olmayacaktır, zira elementin kendisi zaten yüzen bir element olduğundan satır içi görüntülenir, ancak her nedense bu teknikle IE6'daki bu sorun giderilmektedir.

IE'nin marj hatası hakkında daha fazla bilgi alabileceğiniz siteler:

Double Margin Causes and Fixes

7. CSS Kullanarak SPAM'a Karşı Savaşın
Şablon açıklamınızı iyileştirecek güzel bir teknik. CSS-Globe.com sitesinden Alen Grakalic CSS kullanarak nasıl CAPTCHA benzeri bir korumayı sitenize entegre edebileceğinizi anlatmış. İlgili tekniğin uygulandığı bir form şu şekilde olsun:

<label for=”Name”>Ad:</label>
<input type=”text” name=”name” />
<label class=”captcha” for=”captcha”>Cevabınız?</label>
<input type=”text” name=”captcha” id=”captcha” />

'captcha' ID'si için CSS ile bir arkaplan resmi kullanıyoruz. Bu tekniği çözebilmek için spam betiklerinin öncelikle HTML elementini bulması, CSS'nizi taraması, seçicileri karşılaştırması ve ardından doğru seçici ile ona bağlı olan arkaplan imajını bulmasının ardından ilgili imajı okuması gerekir. Bu yöntem oldukça güvenlidir zira pek çok spam betiği bunu başarabilecek kapasitede değildir. Bu yöntemin bir kötü özelliği CSS'nin etkinleştirilmediği tarayıcılarda kullanıcı ne yapacağını bilemez.

Spam'a karşı CSS İle Savaş Açmak hakkında daha fazla bilgi alabileceğiniz siteler:

Fighting spam with CSS

8. IE6 Üzerindeki Saydam PNG Sorununu Gidermek
Hepimizin IE6 üzerindeki saydam PNG sorununun can sıkıcı olduğu konusunda hemfikir olduğuna eminim. Buna yönelik Internet üzerinde pek çok çözüm bulunmaktadır ve bunlar karmaşık JavaScript kodlarından Microsoft'un kendi filtrelerini kullanmaya kadar değişiklik göstermektedir. Unutmayın ki bu tekniklerin pek çoğu Microsoft'un AlphaImageLoader özelliğine dayanmaktadır.

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(...);

IE6'nın PNG saydamlık sorunu hakkında daha fazla bilgi alabileceğiniz siteler:

9. CSS Çoklu Tarayıcı Saydamlığı
İster inanın ister inanmayın tüm tarayıcılar üzerinde CSS'nin saydamlık elementini doğru bir şekilde kullanmak mümkün. Bu teknikle IE, Firefox, Safari, Opera ve Netscape Navigator gibi eski tarayıcıları bile kapsayabiliriz. Chris Coyler'in bu konuda yazılmış mükemmel bir makalesi bulunuyor.

.yourClass {
filter:alpha(opacity=50);/*IE İçin Gerekli*/
-moz-opacity:0.5;/*NN gibi eski Mozilla tarayıcıları*/
-khtml-opacity: 0.5;/*Safari'nin Eski Sürümleri ve "KHTML" tarama motorları*/
opacity: 0.5;/*FF, Safari ve Opera*/
}

Bu kod doğrulanmayacaktır ancak bu özelliği kullanmak isteyen kullanıcılar için bu pek bir sorun teşkil etmez.

CSS Opacity hakkında daha fazla bilgi alabileceğiniz siteler.

10. CSS Konumlandırlabilir Görseller (CSS Image Sprites) Kullanın
CSS Konumlandırılabilir Görseller birden fazla CSS görselinizi tek bir seferde yükleyebilmeniz için mükemmel bir yöntemdir. Bu yöntemle hem sunucuya bindirilen yük azalır hem de şablonunuzun dosya boyutunda önemli bir düşüş gözlenir.

CSS Konumlandırılabilir Görseller birden fazla görsel elementin tek bir görsel üzerinde depolanması ile oluşturulur. Ardından CSS kullanılarak arkaplan pozisyonu, genişliği ve yüksekliği gibi CSS değerleri ile görüntülemek istediğimiz görseli seçeriz.

Konumlandırılabilir Görseller hakkında daha fazla bilgi alabileceğiniz siteler:

11. IE6'yı desteklemek için Koşullu Yorumlar (Conditional Comments) Kullanın
Web geliştiricileri IE'nin bazı özel sürümlerini desteklemek için yeni CSS kuralları ve komutları oluştururlar. Eğer koşullu yorumlar hakkında bilginiz yoksa, aşağıdaki kod içerisinde yer alan stil şablonu, sadece IE 7 ve altındaki tarayıcılarda çalışacaktır.

<!--[if lte IE 7]>
<link rel="stylesheet" media="screen" href="styleIE.css" />
<![endif]-->

Bu kod HTML dosyanızın HEAD kısmına yerleştirilir. Eğer CSS IE'de çalışmıyor görünüyorsa, CSS seçimlerinizde daha doğrudan hedefleyen CSS komutlarını kullanmayı deneyin.

12. CSS Özgüllüğü
Yukarıda da belirtildiği üzere CSS stilleri belirli özgül sırasını takip eder ve hangi değerin hangisinin üzerine yazacağını belirlemek ,için puanlama kullanır. Nettuts'ta yayımlanan bu makalede CSS için puanlama değerleri açıklanmış. Değerler aşağıdaki gibidir.

Elementler: 1 puan
Sınıflar: 10 puan
Belirleyiciler: 100 puan
Satıriçi Stilleme: 1000 puan
Şüpheye düştüğünüzde stil tanımlamalarınızda daha keskin olmaya çalışın. Ayrıca gerektiğinde hata düzeltme işlemleri için !important değerini de kullanabilirsiniz.

CSS Özgüllüğü hakkında daha fazla bilgi alabileceğiniz siteler:

13. Tüm tarayıcılarda minimum yükseklik değerini kullanabilmek
Bir arabirim üzerinde çalışırken genellikle bir element için en düşük yükseklik değerini belirleme ihtiyacı hissederiz ve ardından ilgili yüksekliği, dahilindeki içerik sığmadığında otomatik olarak arttırabilmek isteriz. Ne yazık ki her zaman olduğu gibi IE min-height değerini doğru bir şekilde yorumlamamaktadır. Ancak min-height hızlı hilesi adı verilen bir çözümümüz var. Kod şu şekilde:

#yourId {
min-height:300px;
height:auto !important;
height:300px;/*Needs to match the min height pixels above*/
}

Sade, işlevsel ve doğrulanabilir bir kod. Bu örnek ayrıca '!important' özelliğinin kullanışlı olduğu sayılı örneklerden birini teşkil ediyor.

min-height hilesi hakkında daha fazla bilgi alabileceğiniz siteler:

Using the min height fast hack

14. * HTML hilesi
Eğer IE'ye özgü stil şablonlarına bağlantı vermek istemiyorsanız, o zaman * html hilesini kullanabilirsiniz. Kusursuz bir dünyada HTML elementi daime ana elementtir, bu sebeple HTML'den önce herhangi bir element bulunamaz. Buna rağmen IE, bunun mümkün olduğunu iddia eder. Bu sebeple eğer IE üzerinde bir elementi hedeflemek istersek onu bu şekilde gerçekleştiririz:

* html body div#sideBar {
display:inline;
}

html hilesi hakkında daha fazla bilgi alabileceğiniz siteler:

15. Kayan Kapılar Tekniği
Navigasyon düğmeleri için görsel kullanmanın oluşturduğu önemli problemlerden birisi de istemcinin metninin olması gerektiğinden uzun olma ihtimali ve bunun da düğmenin sınırlarını aşması ya da sınırları dahiline sığmamasıdır. İki görsel ve CSS kayan kapılar tekniği kullanarak içerisindeki metnin uzunluğuna göre genişleyip kısalabilecek düğmeler oluşturabiliriz. Bu tekniğin ardında yatan fikir, her düğme için iki adet görsel kullanmak ve ardından bu görselleri CSS'nin arkaplan tanımlamma özelliği ile düğmelere entegre etmektir. Örneğin:

HTML Dizisi
Başlık Metni

CSS
a.myButton { background: transparent url('right.png') no-repeat scroll top right; display: block; float: left; height: 32px; /* Görsel Yüksekliği */ margin-right: 6px; padding-right: 20px;/*Görsel Genişliği*/ /*Other Styles*/ } a.myButton span { background: transparent url('button_left.png') no-repeat; display: block; line-height: 22px; /* Görsel Yükseliği */ padding: /*İstediğiniz değer ile değiştirin*/ }

Kayan kapılar tekniği hakkında daha fazla bilgi alabileceğiniz siteler:

Ve işte size şablon hazırlarken yardımcı olabilecek 15 CSS tekniğinin de sonuna geldik. CSS tasarımcılar için mükemmel bir araçtır zira kodumuzla daha yaratıcı olabilmemizi ve kendi tekniklerimizi oluşturabilmemize olanak sağlar. Sizin de sık kullandığınız CSS teknikleri var mı? Listeye eklemek istediğiniz teknikler neler olabilir? Yorumlarınızla paylaşın.

Kaynak: ThemeForest

CSS Hileleri ve İpuçları İle İlgili Yazdığım Diğer Yazılar

Bu yazı sekanet tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

10 Kullanışlı Web Uygulaması Arayüzü Tekniği

sekanet — Mon, 19 Jan 2009 17:02:00 GMT

Gün geçtikçe daha çok web uygulaması Web'e geçiş yapıyor. Platform sorunları ve kurulum gereksinimleri olmadan, bir hizmet olarak yazılım (software as a service) modeli oldukça çekici görünüyor. Web uygulama arabirimi tasarımı, özünde, web tasarımı iken, aslında daha çok üzerine tasarlandığı uygulamanın özelliklerine odaklanır. Masaüstü yazılımları ile yarışabilmek için web uygulamaları basit, yenilikçi ve karşılık veren kullanıcı arabirimleri sunabilmeli ve bunlar da, onları kullanan kullanıcıların ulaşmak istediklerine en kısa yoldan ve onları yormadan ulaşabilmelerine aracılık edebilmelidirler.

Geçmişte web uygulamalarını olması gerektiği kadar dikkate almıyorduk ancak şimdi, web uygulamalarını daha güzel ve daha kullanıcı dostu kılacak bazı tasarım çözümleri ve kullanışlı tekniklere bakmanın zamanı geldi. Bu makale, modern web uygulamalarında kullanışlı tasarım çözümleri ve tasarım öğelerine yönelik yaptığımız derinlemesine araştırmanın ilk bölümünü oluşturmaktadır. Yazının devamında, pek çok başarılı web uygulamasında kullanılan 10 kullanışlı arabirim tasarlama tekniklerini ve en iyi deneyim örneklerini bulacaksınız.

Lütfen yazıyı okuduktan sonra siz de kendinize özgü fikirlerinizi, yaklaşımlarınızı ve kodlama çözümlerinizi bizlerle paylaşmaktan çekinmeyin. Yazının ikinci bölümü de pek yakında yayınlanacaktır.

1. İsteğe Bağlı Arayüz Elementleri
Sadelik, kullanıcı arabirim tasarımında önemlidir. Ekranda ne kadar fazla kontrol elementi gösterirseniz, kullanıcılarınız onları anlamak için o kadar fazla zaman geçireceklerdir. Daha fazla seçenek olduğunda, kullanıcıların kullanabileceği seçenekler onlara daha belirgin gelecek ve onları taramaları daha kolay olacaktır. Bir arayüzü sadeleştirmek burada yazıldığı kadar kolay bir iş değildir, özellikle uygulamanızın özelliklerinden kısmak istemiyorsanız.

Kontain'in arama kutusuna tıkladığınızda benzer bir açılır menü belirmektedir. Eğer arama kriterlerinizi daraltmak istiyorsanız, açılan bu menüyü kullanarak ilgilendiğiniz içerik kategorilerini seçebilirsiniz. Bu seçenekleri arama kutusu ile bütünleştirmek, arama kutusunu basitleştirmektedir.

İşleri sadeleştirmenin bir yolu, gelişmiş özellikleri gizlemek ya da perdelemektir. Arayüzünüzde en çok kullanılan elementlerin hangileri olduğunu bulun ve geri kalanını ayıklayın gitsin. Bunu açılır menüler ve kontroller ile yapmanız mümkündür ki bu her iki yöntem de masaüstü uygulamalarında oldukça popülerdir. Örneğin, eğer arama kutunuz gelişmiş filtrelere sahipse, o zaman onları satırın sonunda özel bir açılır menünün ardına gizleyin. Eğer kullanıcıların bu filtrelere ihtiyacı varsa sadece birkaç fare tıklaması ile onları etkinleştirebilirler. Bunu söylemesine söylüyorum ama neyi gizleyip neyi gizlemeyeceğinize karar vermek kolay bir iş değildir ve her bir kontrolün ne kadar önemli olduğu ve ne kadar sık kullanıldığı ile doğrudan ilgilidir.

CollabFinder'ın arama bağlantısına tıkladığınızda başka bir sayfaya yönlendirilmezsiniz. Aksine, arama kutusu bir açılır menüyü kontrol ederek, sizin doğrudan bulunduğunuz sayfa üzerinden arama yapmanızı kolaylaştırır.

2. Özelleştirilmiş Kontroller
Durum için doğru arayüz kontrollerini seçmek önemlidir. Farklı durumlar farklı şekillerle kontrol edilebilir ve bazı kontroller kendileri için tasarlanan görevlerde diğerlerinden daha iyidirler.

Backpack hatırlatıcı tarihi için kullanılan kompakt bir takvim tarih ve zaman seçicisine sahiptir.

Örneğin gün, ay ve yıl için ayrı ayrı açılır menüler kullanarak kullanıcıların seçmelerini sağlayabilirsiniz. Ancak açılır menüler çok verimli değildirler, özellikle seçmek istediğiniz tarihin üzerine doğrudan tıklayabilmenize olanak sağlayan takvim seçicileri ile kıyaslandığı zaman. Takvim seçicileri ayrıca sizin günleri, haftaları ve ayları (özellikle iş günlerini ve haftasonlarını) görebilmenize yardımcı olurlarken, sıradan açılır listelere kıyasla daha bilgilendirilmiş kararlar verebilmenizi sağlarlar.

MyBankTracker'ın yıllık gelir oranlarını hesaplamak için kullanılan bir hesaplayıcısı bulunmaktadır ve bu hesaplayıcı, kolay kullanımlı kayan kontrolleri kullanarak, farklı projeksiyonları kolayca deneyebilmenizi sağlamaktadır.

Bir diğer güzel örnek ise kaydırma çubuklarıdır. Evet, numaraları her zaman el ile girmek mümkündür, ancak bazı özel durumlarda kaydırma çubukları ve buna bağlı kontrolörler çok daha iyi iş çıkarırlar. Bunlar sadece daha kolay kullanımlı olmakla kalmaz (sadece sürükle ve bırak), ayrıca seçiminizin izin verilen en düşük ve en büyük değerler arasında nereye denk düştüğünü görsel olarak algılamanıza da yardımcı olur.

3. Basılı düğmeleri iptal etmek
Web uygulamalarının zorlandığı bir diğer problem de form gönderim işlemidir. Basit formlarla "Gönder" düğmesine iki ya da daha fazla kez çabucak basarsanız, form iki ya da üç kez gönderilebilir. Bu hiç şüphesiz bir problemdir, zira aynı form girdisinin benzer kopyalarını oluşturacaktır. Bu kopya girdilerin önüne geçmek zor bir işlem değildir, ancak pek çok web uygulamaları için kaçınılmaz bir işlemdir.

Bu korumaya iki bağ bulunur: sunucu tarafı ve istemci tarafı. İşin sunucu tarafına burada değinmeyeceğiz zira bu kullandığınız programlama diline ve sizin altyapı mimarinize göre değişiklik gösterecektir. Her koşulda yapmanız gereken şey, verinin işlenişi sırasında gönderilen her ne ise onun halihazırda depolanan verinin bir kopyası olup olmadığını kontrol edecek bir mekanizmayı entegre etmek olmalıdır.

Yammer "Güncelle" düğmesini yeni bir mesaj gönderildiğinde otomatik olarak etkisizleştirir.

İşin istemci tarafı çok daha basittir. Tek yapmanız gereken "Gönder" düğmesine tıklandığında onu etkisizleştirmektir. Bunu yapmanın en kolay yolu, "Gönder" düğmesine aşağıdaki gibi basit bir JavaScript kodu dahil etmektir.

<input type="submit" value="Submit" onclick="this.disabled=true" />

Elbette yukarıda da belirttiğimiz gibi istemci tarafının yanısıra sunucu taraflı bir kontrol mekanızmasını da uygulamanıza entegre etmeniz önerilir.

Çevirmen'in Notu: Kodaman'da PHP'de güvenli form gönderimlerine yönelik bir dizi makale bulunmaktadır.

4. Modal Pencereler Çevresindeki Gölgeler
Açılır menüler ve pencerelerin çevresindeki gölge efektleri sadece göze hoş gelmekle kalmaz, ayrıca efektin uygulandığı menünün ya da pencerenin, sayfanın diğer elementlerinden daha ön planda belirmesine de görsel olarak yardımcı olur. Bunun yanısıra efektin uygulandığı elementin ardındaki içeriğin oluşturması muhtemel görüntü kirliliğinin de, üzerine uygulanan karartıcı efektin de yardımı ile önüne geçer.

Bu tekniğin kökeni, sıradan masaüstü uygulamalarına dayanmaktadır. Bu tekniğin kullanıldığı masaüstü uygulamalarında kullanıcının dikkati, en öndeki pencereye ya da diyaloğa çekilir. Pek çok modal pencereler masaüstü uygulamalarında olduğu kadar kolayca ayırt edilebilir olmadıklarından beri, gölge efektleri, onların, okuyucular tarafından daha kolay algılanabilir kılınmasına yardımcı olur, zira ilgili pencere, üç boyutlu gibi görünür ve sayfanın geri kalanının önüne geçer.

Digg'in giriş penceresinin çevresinde bulunan kalın gölge efekti sayesinde, ilgili pencerenin ardındaki içeriğin oluşturduğu görüntü kirliliğinin önüne geçilmiş olur.

Bu efekte ulaşabilmek için tasarımcılar, saydam bir PNG imajı oluştururlar ve asıl içeriği de bu PNG dosyasını arkaplan imajı olarak kullandıkları kapsayıcının içerisine yerleştirirler. Kapsayıcının köşelerinde eşit oranlarda boşluk uygulanmas, içeriğin daha kolay seçilebilmesinin de önünü açar. Bir diğer seçenek ise saydam köşeler ile birlikte arkaplan imajı kullanarak, içeriği mutlak pozisyonlama ile yerleştirmektedir. Digg bu yöntemi kullanmaktadır - kullandıkları imaj ise bu (dialog.png). Kullandıkları kodlar ise aşağıda:

(X)HTML:
<div id="container"> <div style="display: block; top: 236px; opacity: 1;" class="dialog"> <div class="body"> <div class="content"> ... </div> </div> </div> </div>

CSS:
.dialog { position: absolute; left: 50%; margin-left: -315px; width: 630px; z-index: 100001; } .dialog .body { background: url(/img/dialog.png) 0 0; /* semi-transparent .png image */ padding: 40px 13px 10px 40px; }

Bu yöntemlerin yanısıra JavaScript tabanlı lightbox çözümleri ile ya da CSS3 elementlerini kullanarak gölge efektlerini kullanabilirsiniz. Ancak CSS3'ün Internet Explorer tarafından desteklenmediğini unutmayın.

Basecamp'in proje değiştirici penceresinin ardında geniş bir gölge efekti bulunuyor ve bu efekt, pencerenin, sayfanın diğer elementlerinden daha belirgin olmasını sağlıyor.

5. Size ne yapmanız gerektiğinizi söyleyen boş alanlar
Bir web uygulamasını tasarlarken, onu basit bir veri ile test etmek kadar, onun güzel görünmesi ve ortada henüz hiçbir veri yokken kullanıcısına yardımcı olmak da önemlidir. Boş alanları tasarlamanız gerekmektedir.

Ortada henüz sayfa ya da komut için bir bilgi bulunmazken, kullanıcıya ne yapması ya da nasıl başlaması gerektiğini söyleyen bir mesaj o boş alana gidebilir. Örneğin bir proje yönetim uygulamasının ana sayfası, kullanıcının projelerini listeleyebilir, ancak eğer henüz orada bir proje bulunmuyorsa, o zaman proje oluşturulabilecek sayfanın bağlantısını oraya yerleştirmek yerindedir. Eğer orada bir düğme bulunuyor olsa bile, biraz daha fazla yardımın kimseye zararı dokunmaz.

Campaign Monitor bir elektronik posta kampanyası hazırlamaya başlarken sizi doğru yöne yönlendirir.

Bu teknik, kullanıcıların sunulan servisi, kayıt olduktan hemen sonra denemeleri için teşvik eder. Kullanıcıya uygulamanız her adımında rehberlik ederek, onun uygulamanızın sunduğu avantajları anlamasına ve kendileri için kullanışlı olup olmadığını kavramasına yardımcı olur. Bu ayrıca kullanıcıya "sadece" en önemli veriyi sunar, zira onları gereksiz seçeneklerle daha ilk andan boğmanın bir anlamı yoktur. Unutmayın ki kullanıcılar genellikle kendilerine sunulan fikrin aşağı yukarı tümünü anlamak isterler ancak detaylarla ilgilenmek istemezler - zira buna ne zamanları ne de ilgileri olmayabilir.

Boş alanları kullanarak kullanıcıları motive ederek ve uygulama adımlarını canlılaştırarak sıkılıp kaçan kullanıcıların önüne geçebilir ve potansiyel müşterilerin sisteminizin nasıl daha iyi çalıştığını anlamalarına yardımcı olabilirsiniz.

Wufoo'nun formlar sayfasının geniş ve kullanıcı dostu bir mesajı bulunur ve bu mesaji herhangi bir form bulunmaması durumunda sizi yeni bir form oluşturmaya davet eder.

6. Basılı düğme durumları
Pek çok web uygulamasının özel tasarlanmış düğmeleri bulunur. Bunlar ya linkler ya da girdi düğmeleri olup kendilerine atanmış arkaplanlar bulunur. Öntanımlı girdi düğmeleri bazı durumlar için elverişli olmayabilir ve metin bağlantıları bazen çok sade kaçabilir. Burada karşılaşılabilecek olan zorluk, bağlantılarınızı birer düğme gibi gösterdiğinizde onların birer düğme gibi davranmalarını sağlamaktır - ki bu kullanıcıların onların üzerine tıkladıkları zaman ilgili düğmenin "basılı" görünüme bürünmesini de içerir.

Bu aslında sadece görsel bir hile değildir. Kullanıcılara anında geribildirim vererek, uygulamanın daha duyarlı olmasının ve kullanıcının masaüstü uygulamalarında yaşadıkları deneyime en yakın deneyimi web uygulamaları üzerinde yaşamalarını da sağlar.

Basılı düğme durum efektlerini CSS'nin active alt sınıfını kullanarak oluşturmanız mümkündür. Örneğin eğer bağlantınız add_task_button sınıfına sahipse, onun basılı durumunu add_task_button:active ile stillendirebilirsiniz.

Highrise sitesindeki düğmelerin üzerine tıklandığında düğmelere sanki gerçekten basılıyormuş hissi uyandırılır ve kullanıcı ilgili uygulamanın daha duyarlı olduğu hissine kapılır.

7. Kayıt Sayfasına Giriş Sayfasından Bağlantı Vermek
Uygulamanız için kayıt olmamış bazı insanlar sürekli olarak sitenize halihazırda üye olmuş kullanıcıların giriş yapabilecekleri sayfa ile karşılaşırlar ancak acele ettiklerinden de olsa gerek kayıt sayfasını bulamazlar. Belki de sadece kayıtlı kullanıcıların kullanımına açık olan bir özelliğe erişmeye çalışmış olabilirler.

Delicious hesabınız yok mu? Sorun değil, zira kayıt olabileceğiniz bağlantı giriş sayfası üzerinden verilmiş bile.

Goplan sitesinin üye girişi sayfasında bulunan güzel renklendirilmiş düğmesi sizi kayıt sayfasına yönlendiriyor.

Giriş sayfanıza kayıt olunabilecek bir bağlantı yerleştirerek bu işlemi onlar için kolaylaştırın. Eğer henüz bir hesabınız yoksa, kullanıcılar kayıt sayfasını bulmak için arama yapmamalıdırlar. Smashing Magazine'nin araştırmaları gösteriyor ki sitelerin %18'i, üye girişi sayfası üzerinde bir kayıt formu ya da o forma giden bir bağlantıyı barındırmaktadır (örneğin YouTube, Reddit, Digg, Metacafe).

8. İçerik/Durum hassaslığında navigasyon
Kullanıcıların karşı karşıya kaldığı her durumda onların neler görmeyi bekleyecekleri ve nelere ihtiyacı olabileceklerini düşünmek önemlidir. Aynı navigasyon kontrollerini her sayfada göstermenize gerek yoktur, çünkü kullanıcılarınızın her durumda onların tamamına ihtiyacı yoktur.

İçweik hassaslığında kontrollere yönelik en güzel örneklerden birisi de Microsoft Office 2007'nin arayüzünde son dönemde yapılan bir değişikliktir. Şerit üzerinde bulunan her bir sekme, ilgili aktiviteye yönelik eylem düğmelerini listelemektedir, örneğin grafik düzenleme, gözden geçirme ya da basitçe yazı yazma gibi. Web uygulamaları da bunun gibi benzer içerik hassaslığında kontrollerin nimetlerinden faydalanabilirler zira bu tekniğin kullanıldığı kontroller, arayüz üzerinde sadece kullanıcının ihtiyacı olan şeyleri göstererek, her şeyi tekrar tekrar göstermeyerek kalabalıklığı gidermeye yardımcı olacaktır.

Lighthouse artık alışık olduğumuz sekmeli navigasyon menüsünü kullanmaktadır, ancak, sekmeler içerisinde ikinci seviye menüler de yer almaktadır. Bu seviye görünümleri, sadece aktif sekmenin içeriği ile alakalı aktivitelere yönelik bağlantıları listelemektedir.

9. Ana Özellikleri Vurgulamak
Tüm kontroller aynı öneme sahip değillerdir. Örneğin, yeni bir öğe oluşturduğunuz bir öğe üzerinde sadece "Oluştur" ve "İptal" düğmeleri olabilir. "Oluştur" düğmesi daha önemlidir, zira kullanıcının ilgili sayfada genellikle yapacağı şey budur. Sadece bazı ender zamanlarda sayfayı iptal etmek isteyeceklerdir. O zaman eğer bu kontroller yan yana dizilirlerse, onlara aynı vurguyu yapmak istemeyebilirsiniz.

Lighthouse üzerindeki "Konu Oluştur" düğmesi. Onun hemen yanında "iptal" düğmesini görüyorsunuzdur, sadece salt metin olarak. Düğme yalnızca daha fazla önem kazanmakla kalmaz, ayrıca daha geniş tıklama alanına da sahip olup fark edilmesi daha kolaydır, sırf boyutundan ötürü.

"Oluştur" düğmesi üzerindeki vurguyu arttımak için basitçe farklı stillemeler ve farklı kontrol yöntemleri kullanabiliriz. Bazı uygulamalar form girdi düğmelerini bir eylem oluşturmak için kullanırlar ve iptal düğmesini bir bağlantı olarak yansıtırlar. Bu "oluştur" düğmesi için daha fazla tıklama alanı oluşturmakla kalmaz, ayrıca kullanıcının o sayfada olma nedeni bu olduğu için onların ilgili düğmeyi kolayca fark etmelerini sağlar.

10. Video Kullanmak
Resimler ve metinler kullanıcılarınızla iletişim kurmak ve uygulamanızın özelliklerinden bahsedebilmek için mükemmel bir yöntem olmasına rağmen eğer kaynaklarınız varsa video kullanmak daha da iyi bir alternatif olabilir. Özellikle son yıllarda web üzerinde videonun popülaritesi giderek artmaktadır. Web uygulamaları için videolar, genellikle, bir ürünün özelliklerini göstermek için birer araç olarak kullanılırlar, ancak bu video kullanabileceğiniz tek yöntem değildir.

GoodBarry sitesi ön sayfasında ürünü tanıtmak için bir video kullanır. Site ayrıca uygulama üzerinde kullanıcılara uygulamayı kullanmaya nasıl başlayabileceklerine yönelik yönergeler içeren videolar da içerir.

MailChimp acemi kullanıcılara yardımcı olmak için doğrudan yönetici paneli üzerinde yardımcı videolar içerir.

Bazı web uygulamaları doğrudan uygulamanın içerisinde, kullanıcıya uygulamanın nasıl kullanılabileceğini anlatan videolar kullanırlar. Videolar, uygulamanızın nasıl kullanılabileceğini gösterebilmek için muhteşem birer araçtır, çünkü algılaması bir sayfa metne oranla daha kolaydır ve ayrıca çok daha nettir, zira izleyici ne yapıldığını doğrudan görmektedir.

Daha önce kullanılırlık ile ilgili yazdığım diğer yazılar

Kaynak: Smashing Magazine

Bu yazı sekanet tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

En İyi 50 CSS Makalesi

sekanet — Wed, 14 Jan 2009 17:27:00 GMT

Modern web tasarımı CSS olmadan olmaz. CSS'in esnekliği web geliştiricilerine güncellemesi daha kolay ve daha hızlı web siteleri yaratmasına olanak sağlar. Toxel, bu konuda müthiş bir arşiv oluşturmuş. İpuçları, teknikler, şablonlar, dersler, galeriler, kaynaklar ve araçlar hakkında bir 50 adet makaleyi bir araya toplamış. Mutlaka inceleyin.

css ipuçları ve teknikleri

CSS ŞABLONLARI (Template) VE PLANLARI (Layout)

CSS DERSLERİ

CSS GALERİLERİ

CSS KAYNAKLARI

CSS ARAÇLARI

(kaynak)

Bu yazı sekanet tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

Yabancı dil öğrenmek için kahve molası..

sekanet — Thu, 08 Jan 2009 19:00:00 GMT

"Kahve molası ne alaka" diyebilirsiniz ama böyle bir başlığı programın ismi bu olduğu için yazdım. Coffee Break (Kahve Molası), esasında bir radyo programı. Radio Lingua tarafından gerçekleştirilen bu radyo programı birçok dil için mevcut.

Program temel olarak iki kişinin konuşmasından oluşuyor. (Ara sıra misafir falan da katılıyor ama çok nadir, bir keresinde öğretmen konumundaki kişinin oğlu katılmıştı mesela) Bu 2 kişinin birisi öğretmen diğeri de öğrenci konumunda oluyor. Konuşma olduğu için haliyle pek gramer yok içinde, genelde günlük konuşma ile başlayıp ileri seviyeye taşımayı amaçlamışlar. Tabii ki yeri geldiğinde gramer kısmı da anlatılıyor, detaylı olmasa da.

Şahsen bu programın İspanyolcasının (coffee break spanish) 5-6 bölümünü dinledim ve şimdi biraz biraz da olsa konuşabiliyorum. (Kendimi tanıtıp birkaç basit soru sorabiliyorum.) Şimdi gelelim kötü habere... Belki tahmin etmişsinidir, radyo istasyonu yabancı olduğu için bu programda İngilizce olarak anlatılıyor. Haliyle anlayacak düzeyde İngilizce bilmek gerekiyor. Ama İngilizceyi bildiğinizi varsayarsak 3. bir dil öğrenmek için çok güzel bir kaynak.
İndirmek isteyenler hepsinin bulunduğu yer bura
İspanyolcası için burası
Tabii ki sitede arama yaparak da bulabilirsiniz. Ayrıca İspanyolca öğrenmek isteyen varsa kıt İspanyolcamla yardımcı olmaya çalışırım.
Buenas Tardes....
Adios Amigos....
Hasta Pronto...

Bu yazı sekanet tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage