Genelde jquery’den angular’a geçtiğimiz için daha önceki alışkanlıkları ve kolaylıkları angular’da da arıyoruz. Bunlardan bir taneside toggle ve toggleClass.

AngularJs ile toggle ve toggleClass uygulamak çok basit.

Basit bit toggle yapalım. Bir değişken(acKapa) tanımlayıp, bu değişkenin değerine göre gizle göster yapacağız. Değer kontrolünü acKapa=!acKapa kısayolu ile yapıyoruz.

toggleClass içinde benzer bir yol izliyoruz. ng-class yönergesini(directive) kullanıyoruz.

Kaynaklar

:before ve :after sözde sınıfları tanımlandığı elemanla ilişkili ve alt eleman olarak eklenir, isimlerinden de anlaşılacağı gibi içeriğin başına ve sonuna eklenirler. Kullanım alanlarını gördükçe ne kadar faydalı seçiciler olduğunu daha iyi anlayacağız.

Bu makalede özellikle kullanım alanlarına değineceğim. Daha önce bir çok sayfada kullandığım ve sitemde örneklerini verdiğim bu seçicileri önemine binaen daha detaylı anlatacağım. pseudo sınıfları ve pseudo elementleri yazımda anlatmıştım. Basit bir kullanımı var.

p.not:before { 
    content: "Not." 
}

Gelelim kullanım yerlerine, tek tek kullanım yerlerini inceleyelim.

İkon eklemek

:before yöntemi ikonların kullanımı için bence birebir çözüm oluşturuyor. Boostrap’in ikonları için kullandığı <i> veya <span> etiketi bana çok mantıklı gelmiyor. Zamanında :before ve :after desteği olmadığında <i> kullanmak mantıklı idi ama şimdi çok mantıklı bir kullanım değil bence.

Hazırladığımız ikon sprite resminden ilgili ikonu :before ile ekleyebiliriz. Sprite resimlerinde boşluk ayarlamak gibi işlerle uğraşmaya da gerek kalmaz.

a:before {
    content: '';
    width: 20px;
    height: 20px;
    background:url(images/sprite) 0 0 no-repeat;
}

Tanımlanan ikonları konumlandırmak bu yöntem ile çok kolay oluyor.

Aynı yöntemle yazı tipi ikolnarıda eklenebilir. Yazı tipi ikonları kullanırken content kısmına ilgili karakter konulur. http://fatihhayrioglu.com/font-face-yardimi-ile-ikon-eklemek-yeni-tl-sembolu-eklemek/

clearfix

Float uygulanmış elementleri tam kapsayamama sorunu halletmek içinde :before ve :after yardımı gerekir.

/* For modern browsers */
.clearfix:before,
.clearfix:after {
    content:"";
    display:table;
}
 
.clearfix:after {
    clear:both;
}

Bİr çok arayüz geliştiricinin hazır kod kütüphanesinde vardır bu kod. Şimdilerde CSS önişlemcilerinde mixin listesinin başında yer alır bu kod.

Çoklu kenar kullanımı

Daha önceki çoklu kenar oluşturmak yazımdaki örnekte görebileceğimiz gibi.

#cokluKenarCizgisi:before{
    border: 5px solid #06F;
    bottom: 0;
    content: "";
    display: block;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: -1;
}

Kapsayıcı elemanın genişlik ve yüksekliğini alması için position:absolute tanımlanıp; left, right, top ve bottom değerleri sıfırlanmıştır.

CSS ile şekil eklemek

CSS ile üçgen yapmak yazımızdaki örneği inceleyelim.

.konusma-balonu:after{
  content: '';
  position:absolute;
  left: 30px;
  top:-15px;
  border-style: solid;
  border-width: 0 15px 15px 15px;;
  border-color: transparent transparent #40DBE5 transparent;  
}

.konusma-balonu:before{
  content: '';
  position:absolute;
  left: 29px;
  top:-16px;
  border-style: solid;
  border-width: 0 16px 16px 16px;;
  border-color: transparent transparent #6b5fb3 transparent;  
}

CSS ile oluşturulan ok :before ile, okun kenarçizgisi ise :after ile ekleniyor.

CSS ile şekil üretirken altıgen yapmak içinde :after yardımı ile çözümler mevcut. http://www.cssportal.com/css3-shapes/

Gölge çeşitleri eklemek

CSS3 box-shadow örnekleri yazısında ve diğer estetik gölge örneklerinde :before ve :after yardımı gerekmektedir. http://www.creativejuiz.fr/blog/tutoriels/ombre-avancees-avec-css3-et-box-shadow bu sitedeki örnekler çok süper.

Sonuç

Yukarıda listelediğim ve listelemeyi unuttuğum(kaynaklarda var) işleri :before ve :after ile yapabiliriz. İşin mantığını anlatmak için yukarıdaki listeyi yazdım. Genel olarak mantığı kavradıktan sonra web sayfalarımızda gerektikçe bu sözde sınıfları kullanmak bizim elimizi güçlendirir.

Bazı durumlarda keşke bir kaç tane daha olsa kullansak dediğim oluyor :D

Bu yazıyı özellikle Murat Çorlu‘ya ithaf ediyorum. 3 sene önce :before ve :after yazısı yazacaktı. Artık yazar bu göndermeden sonra :D

Kalın sağlıcakla.

Kaynaklar

CSS’de sorun olan noktalardan biridir dikeyde elemanları ortalamak. Farklı çözüm önerileri sunulmuştur. Bende daha önce yazmıştım bir tane. CSS ile Dikey Ortalama

CSS3 ile birlikte bu soruna bazı çözümler üretildi. Benim burada anlatacağım transform ile üretilen çözüm.

Kod çok basit;

.dikey-ortala {
   position: relative;
   top: 50%;
   transform: translateY(-50%);
}

Kod bu kadar

Son olarak belirtmem gereken şeyler var.

  • Kapsayıcı elemanın sabit bir yüksekliği olmalıdır.
  • İçeriği yoğun olan sayfalarda transform uygulanan elemanda bulanıklık oluyor. Çözüm için kapsayıcı elemana transform-style: preserve-3d; atamak yeterli oluyor.
  • Dikey ortalama uygulanan elemana tanımlanan üst ve alt padding, margin veya border sıkıntı çıkarıyor.
  • Dinamik CSS yazıyorsanız bunu bir mixin haline getirmek mantıklı

Kalın sağlıcakla.

Tarayıcı Desteği

Chrome explorer Firefox
+ 9+(-ms) +

Mobil Tarayıcılar

Android Mobil Safari Chrome
+ (-webkit) +(-webkit) +

Kaynaklar

Arayüz geliştiricilerinin hayatı hiç bir zaman durağan olmadı. Her zaman kendini güncellemek gerekiyor.

Kendimden örnek vererek konuyu açıklamaya çalışayım. Bu işe ilk başladığımda(Liste2000 ve Turkline’ın ilk zamanları) tüm işleri biz yapardık. O zaman web master olarak çağırılırdık. Tasarım, arayüz geliştirme ve sunucu tarafı programlama kısımları. Hatta site içeriğini bile araştırıp eklediğim siteler oldu. Master olmak kolay değil tabi.

Sonra sonra tasarım işinin, görselliğin başka bir boyut olduğunu kısa sürede anladı herkes. Tasarımcılar ve programcılar olarak adlandırıldık. HTML, CSS, Javascript ve sunucu taraflı programlama(php, asp) işlerini yapmaya devam ettik. Ben asp ve sonrasında asp.net ile programlama yapmayı tercih ediyordum. Turkline ve PixelPlus’ın ilk zamanları.

Sonra arayüz geliştiriciliğin aslında tek başına bir sektör olduğu kanısına vardık. Arayüz Geliştiriciliği ile sunucu taraflı kodlamanın ayrı ayrı olması daha verimli sonuçlar vereceği konusunda kabullenmeler başladı ve arayüz geliştiricileri(Front-End) olduk.

Tüm bu gelişmeler hep ihtiyaçların artması ve bu ihtiyaçları karşılamak için yapılan çalışmalar sonucunda doğdu. Ne kadar iyi sonuç almak istiyorsanız, bir konuda o kadar ihtisaslaşmış insan gücüne ihtiyacınız var demektir. Bir insana bu ihtiyaçların hepsini yüklerseniz, o insan süperman değilse bu ihtiyaçları belli bir oranda karşılayacaktır. İstekler genelde üst düzeyde olduğu için herşeyi yapan insanların bu istekleri karşılama imkanı kısıtılı oluyor tabi.

Bazı yöneticiler çalışanların bu kadar bölümlere ayrılmasını yönetim ve götürülerini(maddi) düşünerek istemeyebilir. Hala tam yetkili programcıların(Full Stack developer) olacağını ve burada iyi işler çıkacağını düşünen bir kesim var.

Burada şu ayrımı iyi yapmak lazım. Her bölümde çalışan kişiler ilişkide olduğu birimlerin ne iş yaptığı ve kabiliyetlerinin ne olduğu hakkında bilgi sahibi olmalıdır. Bir arayüz geliştirici; hem tasarımcının kabiliyetlerini hemde sunucu taraflı programlama yapanların kabiliyetleri hakkında bilgi sahibi olmalıdır. Bu iletişim ve iş genelinde çözüm oluşturmak için önemli bir ayrıntıdır. Ancak bu hiç bir zaman bir arayüz geliştiricinin çok iyi derecede tasarım yapabilmesi veya sunucu taraflı kodlamayı yalayıp yutması anlamına gelmez. Tasarımcılardan örnek verecek olursak; bir tasarımcı arayüz geliştiricinin neler yapabildiğini, kabiliyetlerini bilmeli, ama gidip farklı tarayıcılar için kodlama yapmamalı. Ne demiş atalar “taş yerinde ağırdır”.

Mobil dünyanın gelişmesi ve javascript’in artık bir sunucu taraflı dil olması ile birlikte web siteleri birer uygulamaya dönüşmeye başladı. Artık web uygulamaları yazmaya başladık.

Aşağıda son yıllarda arayüz geliştiricilerin dünyasını olumlu yönde etkileyen bir çok gelişme ve araçtan bahsedeceğim. Bu araçlar hakkında genel bilgi vereceğim. Bu bilgilendirme sonunda yukarıda yazdıklarımın aksini düşünenler tekrar bir düşünsün derim.

Modern Arayüz Geliştiricileri Ne Yapar?

Eski statik HTML, CSS ve Javascript yazma zamanı geride kaldı artık. Notepad ile html kodu yazdığımız, style klasöründe statik css dosyaları ile oluşturduğumuz web siteleri. Hayat şimdi daha hızlı işliyor. Eskiden projelerde hız, ekip çalışması ve optimizasyon düşünülmeden yazılır ve yayına çıkardı. Gerçi buna bazı sitelerde gerek te yoktu.

Bir siteyi kodlarken artık arayüz geliştiricileri aşağıdaki listedeki işlemleri yapmak durumunda;

  • Birden fazla kişi çalışıyorsa; bir sürüm kontrol sistemi ile kodlarını farklı sürümlerde saklamayı ihmal etmezler. (Git, SVN vd.)
  • Site dosya yapısını ilerideki genişlemeleri de dikkate alarak kurgularlar.
  • Sorunların çözümünü araştırmak için etkin olarak arama sistemlerini kullanırlar. (Google, StackOverflow, Kullanılan araçların dokümantasyonlarını)
  • Farklı tarayıcı ve platformlar için kod yazarlar. iPhone, Windows’da IE8, Android Table vs. (Simülatör ve Sanal Makineler)
  • Tasarımcı ile iletişimi sağlam tutup, UX konusunda fikir paylaşımında bulunurlar.
  • Sunucu taraflı kod yazarları ile iletişimini sağlam tutup, proje alt yapısını birlikte kurarlar.
  • Dinamik sprite yöntemi ile birleştirmeliler.
  • Kod düzenin düzgün tutmak için çaba sarf ederler. Hatalı kodları kontrol etmelidirler.
  • Kullandığı harici eklentileri, uygulama çatılarını güncel tutmakla yükümlüdürler.
  • Optimizasyon işlerini en baştan düşünerek kodlarını yazarlar
  • Erişilebilirlik kurallarını kontrol eder
  • Otomatik test senaryolarını yazar. (Karma / Jasmine)
  • Dokümantasyon hazırlamayı ihmal etmezler

Yukarıda saydığım ve saymayı unuttuğum görevler ile uğraşmak durmunda kalan arayüz geliştiricileri için işleri hızlandırma ihtiyacı doğdu. Bu ihtiyaçları karşılamak için farklı farklı çözümler çıktı. Aşağıda ben sizlere bu ihtiyaçları karşılamak için oluşturulan çözümleri listeleyeceğim ve kısaca bilgilendireceğim.

  • Sürüm Kontrol Sistemleri
  • İskelet Oluşturma (Scaffolding) Genellikle es geçilen bu kısım aslında web site/uygulamasının en önemli yerlerinden biridir. Bizim için hazır iskelet yapısı oluşturmaya yarayan araçlar;
  • İhtiyaçların Yönetimi (Dependency management) Arayüz geliştiricileri uygulama çatıları, eklentiler ve uygulama geliştirme araçları kullanarak projelerini geliştirirler. Açık kaynak bu araçları kullanmak bizlere büyük hız ve avantaj sağlamaktadır. Ancak her güzelin bir kusuru olduğu gibi, bu kod yapılarınında güncel tutma ve verimli kullanma konusunda sıkıntıları vardır. İşte tam bu noktada aşağıdaki araçlar bizi bu dertten kurtarıyor.
  • Javascript Uygulama Çatıları(Framework) Javascript önem kazanması ile bir çok javascript uygulama çatıları çıktı. Javascript Uygulama Çatılarını; düzensiz ve belli bir mimariden uzak kod yazan bizleri bir düzene sokan ana çatılar olarak özetleyebilirim. Bu sayede anlaşılır, sürdürülebilir ve kolay yönetilebilir yapılar üretebiliyoruz.
  • Otomasyon Genel olarak kod yazarları tembel adamlardır, bundan dolayı bir çok işini yazdıkları betiklerle otomotize ederler. Bu işi daha düzenli ve tertipli yapan araçlarda var tabi. Tekrar tekrar yapmamız gereken işleri(sprite oluşturmak, kodların havasını almak, kodları birleştirmek vs. vs.) bizim yerimize yapan araçlar;
  • HTML, CSS ve Javascript önişlemcileri Statik dosyalara(HTML, CSS) dinamizim kazandıran ve işaretleme dillerini işaretlerden kurtaran araçlar olarak özetleyebiliriz bu araçları;
  • Çok Kullanılan Kütüphaneler
  • Tarayıcıların Geliştirici Araçları
  • Simülatörler

Yukarıda listelemeye çalıştığım bir çok konu hakkında bilgi sahibi olamız gerekiyor. Listelemeyi unuttuğum şeyler de vardır muhtemelen. Her projede hangi ihtiyaçların olduğunu çıkarmak ve hangi araçları kullanmak gerektiğine karar vermek gerekiyor.

Ben konuların yanına benim yazdığım konuların linklerini koydum. Çok az şey yazdığımı fark ettim. Zamanımı iyi değerlendirebilirsem hepsi hakkında bir şeyler yazmak isterim.

Kaynaklar

Bazı projeleri geliştirmek için kendi bilgisayarımızda bir HTTP sunucuya ihtiyacımız oluyor. Mac OS’ta bu iş çok basit.

cd /ilgili/proje/dosyasi

Kodu ile ilgili projenin olduğu klasöre geçelim.

python -m SimpleHTTPServer 8080

Ta ta http://localhost:8080 adresi üzerinden gezebilirsiniz.

Bu kodları unutuyorum. Buraya yazayımda bulması kolay olsun :D

Kaynak: http://www.andyjamesdavies.com/blog/javascript/simple-http-server-on-mac-os-x-in-seconds