css

• html & css'e yeni girdin, çok güzel html'i anladın yaladın yuttun css biraz daha komplike geldi ve kavramakta zorlanıyorsun, süper hiç sıkıntı yok.
  
  css'de öğrenmeyi ve pratik yapmayı oyunlar ile eğlenceli hale getiren bir amme hizmeti yapmış adamlar ben de onları derledim;
  
  1. flexbox defense flex temasının temellerini 12 ayrı seviye ile anlatıyor.
  2. flexbox froggy yine flex teması için 24 ayrı seviye ile oldukça eğlenceli bi biçimde öğretiyor.
  3. grid garden 28 ayrı tema ile grid layoutlarını öğretiyor
  4. css diner css selectorlarını yemek seçerek öğrenmek mi yok daha neler?
  5. unfold 3d transforms'u anlatıyor diğerlerine göre bir tık sıkıcı gelebilir fakat sadece css neler yapabileceğinizi düşününce bi o kadar şaşırtıcı oluyor
  6. roadmap clip-path, transform veanimation gibi temaları keyframeler ile ele alıyor.
  7. carnival checkbox ve animationlar ile hedef vurma oyunu.
  8. css tic-tac-toe klasik x-o-x.
  9. css flexbox playground interaktif biçimde flexboxı değiştirme ve kodda gerçekleşen değişimleri görebileceğiniz muhteşem bi site.
  
  şimdi oyunlar çok güzel falan teker teker içerik mi arayacaz onun içinde çeşitli kaynaklar bırakıyorum;
  
  css tricks 8300den fazla makale +200 video ve bir çok rehber ile muhteşem bir, website mutlaka ama mutlaka bir göz atmanızı tavsiye ederim siteden çıkmayacaksınız söz :)
  html & css html ve css tutorialları.
  ıntroduction to css css'in fundamentallerini interaktif bir ders şeklinde öğretiyor.
  advanced css selectors
  css must watch css ile ilgili video içeriklerin toplandığı bi github repositorysi.
  css guidlines temiz ve okunabilir css yazmak için bolca örnek mevcut.
  maintainable css
  css modules css ile yapabileceğiniz bir çok şey derlenmiş. ( media queryler, modüller, filterlar vs.)
  css e-book css için el kitabı başlangıçtan ileri seviyeye kadar her konuyu ele almış.
  
  şimdi bunların çoğuna baktın,şimdi biraz css yeteneklerini ileri seviyeye taşımana yardımcı olacak kaynaklar bırakayım;
  
  css prototips ileri seviyede kullanılan css konuları hakkında ön fikir oluşturacak bi içerik.
  svg (scalable vector graphics) svg hakkında istemediğiniz kadar içerik bulabileceğiniz kaynaklar bütünü.
  https://github.com/…/critical-path-css-tools#readme css tools] ileri ve profesyonel seviyede websitesini optimize etmek için kullanabileceğiniz toolbox.
  awesome css css içeriklerini derleyen başka bi repository.
  
  debe editi: bu kadar kişiye ulaşacağını bilmiyordum biraz daha detaylandıracak kaynaklar ekledim.
• bu olmasaydı sözlüğü şu şekilde görecektik.
  
  özet:
  
  html halini sakın unutma
  css'e dil uzatma sebepsiz
  sen yine entry girerdin ama
  buton nedir göremezdin şerefsiz
• http://www.w3schools.com/'daki tutoriallardan ogrendim, cok memnun kaldim, koca web sitesinin tum sayfalarindaki lekeleri bir tek stylesheet'i editleyerek cikardim. tum ev hanimlarina ayni kolayligi dilerim.
• yazması en zevkli şey. pıt pıt pıt basıyorsun klavyeden tuşlara, satır satır diziyorsun. sayfaya gelip f5 tuşuna bastıktan sonra tuvaletten makyaj yapıp çıkmış sevgili gibi değişiyor. canım benim.
• cascaded style sheet'in kisaltmasi. ahmet markup cascaded tarafindan 1998 yilinda halka arz edilmistir ve buyuk ilgi gormustur..
• ks. cascading style sheets.. html yazarken her seferinde ayni layout belirleyici tag'leri ba$tan yazmamak icin getirilmi$ ve koskoca site'in renklerini fontlarini tek bir dosyayi editleyerek degi$tirebilmenizi saglayan guzel standartlar butunu.. http://w3.org/ 'da ayrintili bilgi bulunabilir..
• css (cascading style sheets), dokumanlardaki gorsel ogelerle icerigin birbirinden ayri olarak yonetilmesi ve tasarlanmasi icin gelistirilmis bir dildir.
  
  diger programlama dillerine nazaran css sadece sayfadaki verilerin gorsel ve isitsel olarak formatlanmasi amaciyla kullanilmaktadir.
  
  en buyuk faydasi (bence) web sayfalarinin duzenlenmesi, tasarlanmasi ve sunulmasi gibi konularda bize sayfanin iceriginden bagimsiz bir yonetim imkani saglamasidir. bunu da sayfadaki gorsel ve isitsel ogelerin ozelliklerini ayri bir css dosyasinda tutmasiyla basarir.
  
  elimizde ana baslik, alt basliklar ve 3-4 paragraf metnin oldugu bir internet sayfasi dusunelim. bu metindeki yazilarin stilleri, paragraflar arasindaki acikligin boyu, baslikta kullanilacak renk, paragraflarin sayfanin neresinde cikacagi gibi sayfadaki icerigin gorsel durumunu etkileyen butun bilgileri css dosyasinda belirtiriz.
  
  css kullanilirken dikkat edilmesi gereken bir takim unsurlar bulunmaktadir :
  
  - css dosyasinda girdiginiz veriler frakli tarayicilarda farkli yorumlanabilir. dolayisiyla her tarayicida ayni sonucu alamayabilirsiniz. ki bugun web tasarimcilarinin css ile ilgili yasadiklari en buyuk problem budur.
  
  - yorumlamadan sonraki diger buyuk problem ise bazi css ozelliklerinin bazi tarayicilarda hic desteklenmemesidir. dolayisiyla o anda tasarima faydasi olacak bir css ozelligi (css property), mesela internet explorer'da tamamen gozardi edilecegi icin sorunu baska yollardan cozmeniz gerekecektir. bu gibi durumlarda hedef tarayiciya gore farkli yontemler vardir.
  
  genelde eski tarayicilar (netscape 3.0,4.0, ie 5.0., 5.5, apple icin ie ve internet explorer 6 vs.) bu konuda en buyuk problem yaratan programlardir. tasarimci projeye baslamadan tasarimin hangi tarayicilari destekleyip desteklemeyecegini asagi yukari belirler ve ona gore hareket eder. bugunden bahsedecek olursak, internette netscape 3.0 kullanan insanlarin hala olabilecegini varsaysakta, olmasa da olur diyebilecegimiz kadar azdir. ancak ie6 icin ayni seyi soylemek mumkun degil dolayisiyla tasarimin ie 6.0 de calismasi zaruridir.
  
  firefox, opera gibi css destegi daha gelismis (hala 100% destek sozkonusu degil) tarayicilar yayginlastikca sorun yavas yavas cozulecektir diye umuyorum. (ie7 css desteginin de oldukca iyi oldugunu soyleyebilirim)
  
  internette yuzlerce farkli css hacks denen, tarayicilardaki bazi css buglarinin manipule edilmesiyle yapilan bir dolu yontem mevcuttur. ancak bu isi uzun yillardir yapan biri olarak tavsiyem herhangi bir hack cozumunden uzak durmanizdir. kullandiginiz hack metodu o anda isi cozsede hedef tarayicinin yeni bir versiyonu eger o bugi tamir ederse tasariminiz dagilabilir. ayrica css kodunuzu validate etme sorunu da yasayabilirsiniz.
  
  benim metodum soyle : -en cok kullanilan tarayicilara destek ver gerisine fazla karisma-
  
  tam destek : firefox, opera, ie7, safari (hack vs. gerek kalmadan tertemiz css ile her turlu tasarim yapilabilir)
  zayif destek : ie6 (bunun icinde sadece ie tarayicilarinin yorumlayabildigi -conditional comment- denen ve html icine yazilan ufak bir kodla apayri bir css dosyasini kullanarak halledebilirsiniz) http://www.quirksmode.org/css/condcom.html
  
  - css ancak temiz ve mantikli kodlanmis (semantic de derler) bir html yada xhtml sayfasinda gercekten basarili olur. kodlamayi belli bir mantiga (verinin sunumu, akis yonu, taglerin dogru sekilde kullanilmlasi vs.) uygun olmayan html sayflarini css ile sekillendirmek cok buyuk problemler yaratabilir ve gereginden fazla zaman kaybina sebep olur.
  
  bu isin yolu da dreamweaver bile kullansaniz tasarimi kodu elle yazarak yapmanizdir. turkiye'deki sorun sitelerin arayuzlerini elle kodlayan insan sayisinin kitligidir, bu sebepledir ki tc mali sitelerin cogu hem ozensiz, hem olcusuz hem de bozuk gorunmektedir. duzgun kodlanmis bir html sayfasi jilet gibi cikar ekranda.
  
  ayrica duzgun sekilde ic ice gecmemis html kodlari css ile ne kadar ugrasirsaniz ugrasin duzgun sonuc vermez. herseyden once html sayfasinin duzenli olmasina ozen gostermek gerekir.
  
  bunun icinde gene yontem olarak tavsiye edebilecegim uygulama soyledir:
  
  herseyden once gorselligi unutup sayfadakii butun icerigi a'dan z'ye html'de kodlayip icerigini de yazin. dinamik bir site tasarliyorsaniz sanki database den veriler gelmis gibi maket bir sayfa yapip icini lorem ipsumla doldurabilirsiniz.
  
  sayfanin kac sutun olacagini zaten photoshopta yaptiginiz tasarimdan bilirsiniz. tek yapacaginiz o tasarimdaki bolumleri kutulara ayirmak ve solt ustten sag alta gidecek sekilde html sayfanizda kodlamak.
  
  css de html deki taglarin sirasini izlemektedir:
  
  html :
  
  <div class="icerik">
  <h1>baslik</h1>
  <p>paragraf burada basliyor <a href="link.html>link</a></p>
  </div>
  
  mesela linkimizin rengini kirmizi ve fon rengini sari yapmak istersek gidecegimiz iki yol var :
  
  1. eger sitedeki butun linkleri ayni sekilde olmasini istiyorsak :
  
  css :
  
  a { /* a taginin onunde hic birsey olmadigi icin butun a taglarini etkiler */
  color: red;
  background-color: yellow;
  }
  
  2. eger sadece 'icerik' kutusunun icindeki her paragrafin icinde yer alan linklerin rengini degistirmek istersek:
  
  div.icerik p a {
  color: red;
  background-color: yellow;
  }
  
  gordugunuz gibi html deki ic ice gecen taglere bakarsaniz sira soyle : div > p > a
  
  (burada h1 p ile ayni seviyededir: div > h1)
  
  css kodunda da ayni siralamayi kullanarak istedigimiz tagi hedef alip sadece ona ozellikler atayabiliyoruz. eger 2. ornekteki sekilde ayni 'icerik' div'inin icinde ama paragrafin disinda bir link olsaydi bu ornekteki ozellikleri almayacakti cunku css de biz ozellikle <p> taginin icinde yer alan linkleri kastediyoruz.
  
  neyse fazla kafa karistirmadan devam edeyim...
  
  icerigin tamami dogru sekilde html sayfasina yazildiktan sonra css dosyanizi acip html tag sirasindaki birinci tag'den baslayarak (<body>) css ozelliklerinizi atarsiniz. her yaptiginiz degisiklikte browserlarda test ederek sonucu gorur ve devam edersiniz.
  
  bu soylediklerim biraz kafa karistirici olabilir ancak, belli bir sure sonra ucacaksiniz cunku hep ayni seyler tekrar etmekte. isin zaten en zor ve zaman alan yani bu ilk asamadir. sayfanin tasarimini bir kere oturttuktan sonra diger sayfalar sadece 'save as' ile cogaltilip gerekli ufak degisiklikler (yeni baslik, baska resim vs.) yapilarak devam edilir.
  
  - css oncesi table ile tasarima alismis kisilerin sayfalarin tasarimina bakis acilarini degistirmesi ve css in kullanim mantigini anlayabilmesi biraz zor olabilir.
  
  - css size farkli ortamlarda da internet sitenizin dogru olarak gorulebilmesi imkanini sunar:
  
  soyleki :
  
  grafik agirlikli ve renkli sitenizi, hem yazicilarda gereksiz murekkep harcamamak hem de cevre duyarliligi adina basitlestirip, renkler ve grafiklerden arindirip kagida basilmasini saglayabilirsiniz.
  
  ayni sekilde text okuyucu programlarda okunan metnin istendigi gibi algilanabilmesi icin, basliklara, paragraflara, alintilara vs. farkli vurgular ve ses duzeyleri atayarak metnin kavranmasini kolaylastirabilirsiniz.
  
  baska guzel bir ornek; sitenizi en temel xhtml destegi olan cok eski bir telefonda dahi gayet temiz bir bicimde ziyaretcilerinize sunma imkaniniz vardir.
  
  ancak ilk maddede belirttigim gibi teknoloji ureten firmalarin bu standardi tam desteklememesi ya da farkli sekilde yorumlamasi her zaman onunuze cikacak bir sorundur. (en azindan onumuzdeki 3-5 sene degisecek gibi gorunmuyor)
  
  bu gibi problemler ve hala bazi buyuk tarayicilarin tam destek vermemesine ragmen cssin internet sitesi tasarimi yapan kisiler tarafindan ogrenilmesinin zorunlu oldugu kanaatindeyim.
  
  yazim kurali acisindan ogrenmesi cok kolaydir. onemli olan xhtml dosyanizin dogru ve mantikli sekilde kodlanmis olmasi, ve css kutu modeli (css box model) hakkinda biraz bilgi sahibi olmaniz yeticektir. geriye kalan teksey pratik yapmak ve sorun gidermektir.
• kendisiyle ilgilenenlerin youtube'da kevin powell isimli css king denilen şahsi takip edip bütün videolarini izlemelerini tavsiye ettiğim dil.
  
  özellikle flex ve custom props kullanımını çok güzel anlatıp ufkunuzu genisletebilir.
  
  https://youtube.com/kepowob
• tablolar, resimler yapan bağımlıları olan dil. ancak 500 satırla oluşturulan bisikletgörseli bugün bir sanat eseri gibi övgü toplasa da bir versiyon sonra amelelik olarak tanımlanacak.
  [http://cssaz.tumblr.com/ http://cssaz.tumblr.com/]
• şunu gördükten sonra bırakmaya karar verdiğim şey. mesleği bırakıp köye yerleşiyorum.