JavaScript ile Sekmeli İçerik Kutusu

JavaScript Sekme, JavaScript Tabs

Teknik konularda farklı durumlardan bahsetmeyi pek sevmesem de, yazmak şart oldu bence. Diyeceğim pek bir şey yok aslında. Bloga çok vakit ayırmıyorum, neredeyse senede bir yazı giriyor gibiyim. Daha sık yazı yazmamı istiyorsanız eğer yorum yapabilir veya mail atabilirsiniz. Şimdiden teşekkürler!

Bahsedeceğim konu 2015 yılı web teknolojileri için sanki geri kalmış bir konu gibi olsa da kendi oluşturduğum bu içeriği sizinle de paylaşmak istedim. Yazı başlığından ve görselden anlayacağınız üzere JavaScript dilini kullanarak kendi sekmeli içerik kutumuzu oluşturmuş olacağız. Oluşturduğumuz sekmeli içerik kutusunun biçimsel özelliklerini ise CSS ile yazdım. Bu içerik kutusunu oluşturmadan önce codepen.io gibi daha birçok açık kaynak konuyla ilgili çalışmalara göz attım. Yazmış olduğum JavaScript kodu biraz onların yanında amatör gibi kalsa da, şuan güncel olan web platformlarında gayet stabil çalışabilmekte.

HTML/CSS: İlk olarak nasıl bir içerik kutusu yapacağıma karar verdikten sonra ortaya böyle bir kutu çıkardım. Renk seçimlerini ise Turuncu, Mavi ve Beyaz renklerden yana kullandım. (Beyaz renk mi?) Turuncu renk, seçili olan sekmeyi temsil etmekle olup mavi ise fare ile üzerine gelinen sekmeyi göstermektedir. Kenar çizgilerinde herhangi bir oval işlemi uygulamadım. Bu biraz Windows Metro arayüzünü anımsatmıyor değil. Yazı tipini Google Font aracılığıyla Titillium Web olarak belirledim. Geçişlerdeki hafifliği yine CSS’in Keyframe özelliği ile yaptım.
Continue reading…

WebZap Eklentisi ve Bootstrap Yapısı

Eski yıllara göre gerçekten teknoloji çok büyük bir hızla ilerliyor. Özellikle eskiye nazaran çok kısa süreler içerisinde bir teknolojinin yeni bir versiyonun çıkması artık sıradan bir olay oldu. Tabii bu teknolojiye Web Teknolojileri de dahil. Artık her şeyin pratikleştiği bu dönemde arayüz çizimi ve bunun sonrasında CSS/HTML aktarımını daha hızlı, çabuk ve kolay nasıl yapabiliriz onlardan bahsetmek istiyorum.

Öncelikle şunu söylemeliyim ki; WebZap ve Bootstrap tamamen birbirinden bağımsız/alakasız iki ayrı araçtır. Bu başlık altında WebZap ve Bootstrap’ı ayrı ayrı inceledikten sonra iki aracın arasında nasıl bir ilişki/bağ kurabiliriz veya işlerimizi bu iki araç ile daha da pratik nasıl yapabiliriz onlardan bahsedeceğim.

WebZap Eklentisi (Photoshop Plug-in)

İlk olarak WebZap ile başlıyorum: WebZap bir Adobe Photoshop eklentisidir. WebZap ile çok hızlı, kolay ve düzenli bir şekilde arayüz çizimi gerçekleştirebilirsiniz. Aslında ona çizmek bile denilemez, sadece bir kaç tık ile sayfanız anında oluşturulmuş oluyor. WebZap’la yeni bir dosyanın boyutlarından(en/boy) tutun, sayfa içerisinde kullanılacak materyallerin(logo, text, image.. etc.) varsayılan olarak koordinatları ve yine aynı şekilde boyutları belli bir şekilde karşımıza çıkıyor. Bu ufacık ama gerçekten çok işe yarar eklentimiz sayfamızda ki tüm renkleri tam bir uyum içinde bize sunuyor.
 
Continue reading…