BRACKETS AÇIK KAYNAK KOD EDİTÖRÜ EMRE TEKİN

... konulu sunumlar: "BRACKETS AÇIK KAYNAK KOD EDİTÖRÜ EMRE TEKİN"— Sunum transkripti:

1 BRACKETS AÇIK KAYNAK KOD EDİTÖRÜ EMRE TEKİN 261284513

2 BRACKETS NEDİR? Brackets, Adobe tarafından yazılan açık kaynak kodlu bir kod editörüdür. Brackets ilk olarak MacOs ve Windows için kullanıma açıldı. Daha sonra Linux ortamı için tekrar yapılandırıldı. Şuan anda brackets.io adresinden 32 ve 64 bit .dep (Unix) .dmg (MacOS) .msi(Windows) uzantılarından size uygun olanı indirebilirsiniz. Aynı zamanda açık kaynak kodunu .zip ve .tar.gz olarak indirme imkanı da bulunmakta. Brackets ile ilgili ayrıntılı bilgiye brackets.io adresinden ulaşabilirsiniz. Projeye dahil olmak ve destek vermek de münkün. Brackets kaynak kodları Adobe’nin github hesabı (github.com/adobe/brackets) altında da yer alıyor.

3 NEDEN BRACKETS? Piyasada yüzlerce kod editörü varken neden Brackets?
Gözüme çarpan ve öne çıktığını düşündüğüm özellikleri şöyle HTML, CSS ve JavaScript üzerine inşa edilmesi. Bu açıdan kaynak kodların kolay geliştirilmesi Adobe’nin bir projesi ve ücretsiz olması FireBug tarzında çalışma ortamı. Yazdığınız kodların eşzamanlı görebilme imkanı Eklentiler ile çalışma alanınıza göre şekillendirebilmesi PSD tasarım üzerinde css yazarken yardımcı olması HTML tarafından yazarken tek kısa yol ile css e erişebilme

4 BRACKETS KURULUMU Brackets i adresinden ücretsiz olarak sisteminize uygun olanını bilgisayarınıza indirebilirsiniz. Kurulumu ise oldukça kolay. Bu örnekte .msi uzantısını indirip kurulumunu yapacağız İndirilen .msi uzantısını çift tıklayıp açıyoruz. Açılan ekranda kurmak istediğimiz klasör seçip ‘Next’ butonuna tıklıyoruz ve ardından ‘Install’ butonuna tıklıyoruz Kurulum bu aşamada başlıyor. Kurulum bittiğinde ‘Finish’ butonuna tıklayarak bitiriyoruz.

5 BRACKETS KULLANIMI Kurulum bittiğinde windows menüsü üzerinden Brackets i açabilirsiniz. Dil seçeneği otomatik olarak sisteminizin diline göre aktif olacaktır. Eğer dil seçeneğini değiştirmek isterseniz üst menüden ‘Git > Dil Değiştir’ e tıklayarak dil seçiminizi yapabilirsiniz. Brackets i etkileyecek her değişiklikte kendini yeniden başlatır. Bu işleme ihtiyaç duyduğunuzda ise program içerisinde F5 e basmanız yeterli.

6 BRACKETS KULLANIMI Çalışma dosyalarınızı proje bazlı brackets e tanımlayabilirsiniz. Çalışma Dosyaları başlığının altında osymden projesine ait açık dosyaları görüntülemekte. Osymden başlığının altındaki alanda ise proje içerisindeki tüm dosyaları görüntüler. Proje tanımlamanız için osymden başlığının yanındaki üçgene tıklayarak klasörü aç butonuna tıklıyoruz, ardından projenizin bulunduğu klasörü seçmeniz yeterli. Projenizi tanımladıktan sonra tanımlanan diğer projeler ile proje menüsünde görüntülenecek ve rahatlıkla aralarında geçiş yapabileceksiniz.

7 BRACKETS KULLANIMI Proje dosyasında seçtiğiniz dosya ilk olarak ön izleme mantığı ile editör tarafında görüntülenir. Eğer çift tıklarsanız veya ön izleme modunda dosya içerisinde değişiklik yaparsanız otomatik olarak dosyayı açmış olur. Çalışma Dosyaları başlığının yanındaki çark simgesi ile dosyaları neye göre sıralayacağınızı belirleye bilirsiniz Çarkın yanındaki Ekran simgesi ile kod ekranlarını dikey veya yatay bölebilir bunların her birinde ayrı dosyaları açıp içerisinde değişiklikler yapabilirsiniz.

8 BRACKETS KULLANIMI Kod ekranında yazdığınız dile göre nesneler, içerikler, taglar ve diğer elementlerin renkleri farklı şekilde belirtilmektedir. Yine kod ekranın en altında çalışmakta olduğunuz dosyaya ait bilgileri bulabilirsiniz. Çalışmakta olduğunuz dosyada yazım dilini en alttaki bilgi satırından değiştirebilirsiniz. Brackets piyasadaki birçok dili desteklemektedir. Kod ekranında yazdığınız sırada yazınızı otomatik tamamlamak için yardımcı olur. Otomatik çıkmadığı yerlerde ise CTRL+SPACE ile ekrana getirebilirsiniz.

9 BRACKETS KULLANIMI Kod ekranında yazdığınız html uzantılarını ekranın sağ tarafındaki elektrik simgesi ile canlı olarak chrome üzerinden ön izleyebilirsiniz. Altındaki göz simgesi ile kodlarınızın haritasını açabilirsiniz. Bu size aradığınız yeri bulmakta kolaylık sağlayacaktır. Göz simgesinin altındaki simgeden ise Brackets e eklenti, tema kurulumu ve yönetimini yapabilirsiniz. Eklenti Yönetim simgesinin alındaki simge ise eklenen eklentilere göre değişecek. Eklentiler eklendikçe yönetimi için eklentiye göre alt alta simgeler artacaktır. Tıkladığınızda eklentiye göre yönetim paneli açılacaktır. Örnekte eqFTP eklentisini görmektesiniz.

10 BRACKETS E EKLENTİ ve TEMA KURULUMU
Göz simgesinin altındaki eklenti simgesine Brackets e eklenti veya tema kurmak için tıklıyoruz. Açılan pencerede kuracağımız eklentiyi aratmak için Available seçiliyken arama kutusuna eklenti ismini yazıyoruz eklentileri kurmadan önce araştırabilirsiniz. Örneğin Emmet eklentisini kurabiliriz. Arama kutusuna Emmet yazdığımızda karşımıza arama sonuçları gelecek ve her sonucun sağında install butonu bulunmakta, kurmak istediğimiz eklentini karşısında install a tıklayarak kurulumu başlatıyoruz. Kurulum bittiğinde Bracketsi yeniden başlatmamızı isteyebilir.

11 BRACKETS E EKLENTİ ve TEMA KURULUMU
Tema kurulumunda eklenti kurulumu gibi aynı ekranda yapılmakta. Tema aratmak için Themes sekmesi seçili iken aratıyoruz ve çıkan sonuçların sağındaki install butonuna tıklıyoruz. Yükleme 5 – 30 sn sürebilir. Yüklemem tamamlandığında Bracketsi yeniden başlatabilirsiniz. Eklenti ve tema kurulumunu bu klasör içine yapmakta, buradan yedeğini almak için kopya oluşturabiliriz C:\Users\emre\AppData\Roaming\Brackets\extensions\user İnstalled sekmesinde ise Bracketsinizde kurulu olan tema ve eklentileri görebilirsiniz. Kaldırmak istediğiniz eklenti veya temanın sağındaki Remove butonuna basarak kaldırabilirsiniz.

12 BRACKETS TEMA DEĞİŞTİRME
Brackets içerisinde kurulumda 2 adet tema bulunmakta, bunlar arasında veya indirdiğiniz temalar arasında seçim yapmak için üst menüden ‘Göster > Themes’ i tıklıyoruz. Gelen ekrandaki Current Theme kısmında temanızı seçebilirsiniz. Altındaki tik işareti ise kod ekranın scrollbarının tema renklerinden oluşup oluşmayacağını soruyor. Temada kullanılan yazı büyüklüğünü ve fontunda bu pencereden değiştirebilirsiniz. İşlemler bittikten sonra Done butonuna basmanız gerekir Örnek Tema : Easy Dark

13 BRACKETS KISA YOL VE ÖZELLİKLER
Html elemanlarının css kodlarını hızlıca değiştirmek isterseniz nesneye tıklayıp resimdeki gibi; Ve daha sonra CTRL + E ‘ye basmak yeterli Elemanın bulunduğu satırın altında, elemana ait css dosyasını açıp etkileyen css satırın göstermektedir. Tıpkı tarayıcı sekmelerinde hızlı geçiş olduğu gibi CTRL + Tab ve CTRL + Shift + Tab ile çalıştığınız dosyalar arasında hızlı geçiş yapabilirsiniz. Mevcut satırı yorum satırı yapmak için CTRL + / yapmanız yeterli. Kod içerisinde aramak için CTRL + F proje içerisinde aramak için CTRL + SHİFT + F kombinasyonunu kullanabilirsiniz.