Coder

26 Eylül 2012

Nivo slider siteye ekleme

Bir önceki yazımda hazırladığım basit css ana sayfa üzerinden devam ediyorum. Yazıyı buradan görebilirsiniz. Önceki tasarıma göre yeni eklenen görseller; site logosu, basit menü ve konumu olan slider.

Başlamadan önce slider eklenmiş hazır tasarıma ve slider dosyalarını alttaki linkten indirebilirsiniz.
[viral-lock][wpdm_file id=1][/viral-lock]

Büyük resim olarak bıraktığım alana slider(otomatik değişen resimler, geçişli resimler) ekleyeceğiz. Bunun için öncelikle sayfamda kullandığım Nivo slider kodlarını nivo.dev7studios.com, dosyalarını(jquery, css) bilgisayarınıza indirmeniz gerekmekte.

İndirdiğiniz anasayfa tasarımının ekran görüntüsü

Dosyaları veya yukarıda paylaştığım bitmiş tasarımı indir diğinizi varsayarak başlamak istiyorum.

Nivo slider’in çalışması için gerekli dosyaları Head etiketi arasına css js dosyaların yerlerini belirterek yapıştırın. Kodlar içinde dikkat edilmesi gereken noktalar; css ve js ek olan dosyaların doğru yolunun verilmesi, jquery.nivo.slider.pack.js dosya ekinin hemen altına koddaki gibi sliderın çalışması için gerekli script dosyalarının hemen altında olması (javascript i başka yere yazıldığın da çalışmıyor! ).

Bir diğer dikkat edilmesi gereken husus, $(‘#buyukresim’).nivoSlider( daha önceki örnekte oluşturduğum #buyukresim id’li sınıfı javascript içinde belirtmem olması. Yukarıda paylaştığım bitmiş olan tasarımı indirip bakarsanız ne göstermek istediğimi daha iyi anlarsınız.

[cc lang="html"]



[/cc]

Sliderın çalışması için gerekli dosyaları ekledikten sonra sıra geldi gösterilecek olan resimlere.

[cc lang="html"]



[/cc]

Bir sonraki yazılarda bu ana sayfa tasarım uygulamasının devamında görüşmek üzere…

25 Eylül 2012

Hazır basit site tasarımı css ile

El altında bulunması gereken css ile hazırladığım basit anasayfa görünümü. Yalnızca kalıp olarak hazırladığım bu css örneğinde bazen ufak tefek unuttuğumuz kodlar olduğundan dolayı paylaşmak istedim. Sıfırdan web sitesi tasarlayanlar içinde başlangıç kalıbı da yapılabilir.

Fazla irdelemeden başlangıç seviyesindeki Css bilgisiyle yapılan bu örnek sayfanın devamı diğer yazılarımda geleceğini söyleyeyim. Bu tasarımda; logo, üst menü, altında slider veya büyük resim için alan, onun altında orta kısım ve site hakkında bilgiler içeren alt kısım bulunmakta.

Css ve html kısımları ayrı olarak kullanabilirsiniz.

Head alanı içine yazılan Css kodları;

[cc lang="css"]

[/cc]

Body alanına içine yazılan Html kodları;

[cc lang="html"]

Coder.digitaldunyam.net

Büyük resim alanı
Orta kısım
En alt kısım

[/cc]

22 Eylül 2012

Css renk bazında transparan alan

Başlık biraz harbiden karışık oldu. Neyse ki içerik ve etiketlerden dolayı bu yazıyı buldunuz. Bu laubali girişten sonra konuyu açmak, geliştirmek ve sonlandırmak istiyorum. Resimdeki gibi sayfalarımızda div tag’ı ile açtığımız bir alanı transparan göstermek isteyebiliriz. Bunun için .png transparan resmi ile yapabilmekteyiz. Ama bazen resim yetmeye bilir. Css’in yeni teknolojisinde .png lerle uğraşmadan renk bazında transparan değeri verilebilir.

Bu şekilde background-color: rgb(255,51,0); renklendirdiğimiz bir div tagini alttaki kod gibi transparan değeri ekleyerek, opacity ile uğraşmadan arka planı gözüken şeffaf alan yapabiliriz.

[cc lang="c#"]
.resimdekidiv {
width:300px;
height:200px;
border-bottom-color:#0C3;
background-color: rgba(255,51,0,0.5);
color:#FFF;
border-color:rgb(153,0,255);
border-width:3px;
border-style:solid;

}
[/cc]

Kodlar transparan resimdekidiv class’ının kodları.

21 Eylül 2012

Css ile linklere ikon resim ekleme

Bazen sitemizdeki bağlantılara daha fazla görsellik katmak isteye biliriz. Css ile halledebileceğimiz senaryo da bağlantının uzantısına göre renklendirip sağına resim ikon ekleye bilmekteyiz. İsteyen alttaki kodlarla sitesindeki tüm linkleri tek tek stil ekleyebilir.

Suffix selectors anlamında kullanılan uzantı seçici senaryosunu tam açıklamak gerekirse; sitenizde .psp, .exe, .rar vb. gibi dosya paylaşım linkleri olduğunu düşünün. Bu linkleri ziyaretçiye daha hoş göstermek için eklediğimiz link uzantısına göre linki renklendirip minik ikon resmi ekleyebiliriz.

Kodu kopyala yapıştır yaparsanız tam olarak çalışmayacaktır. background:url(winraricon.png) css dosyasının aynı dizininde olduğu için resimdeki gibi sorunsuzca çalıştı.

[cc lang="c#"]
a[href$=".rar"]{
background:url(winraricon.png) no-repeat right center;
color:#C00;
padding-right:20px;

}
[/cc]

Burada dikkat ederseniz olay [href$=".rar"] kodunda cereyan etmekte. Burada .rar uzantısı yerine veya ayrı bir link için css tanımladığınızda istediğiniz uzantıyı yazarak özel uzantı seçici oluşturabilirsiniz. Diğer dikkat edilmesi gereken nokta, seçtiğiniz resim boyutuna göre padding-right değerini ayarlamak oluyor.

12 Eylül 2012

Form içinde alt form açmak

Bazen birden fazla form ile çalışmak isteye biliriz. Böyle durumlarda düz mantıkla projemizde çalışacağımız kadar form oluştururuz. Bunu birkaç form ile halledebiliriz. Ancak iş kullanıcının istediği doğrultusunda açılması gerek form olduğunda yapışıp kalabiliriz. Bunu önlemek için yardımımıza MDI formlar koşuyor.

MDI form mantığını Excel için örnek verebiliriz. Biliyorsunuz ki Excel içinde birden fazla excel dosyası açıp çalışabilmek deyiz. Adobe Photoshop programını da örnek göstere biliriz. İki ayrı resim ile çalışıldığında Photoshop içinde iki ayrı çalışma sayfası açılır onları istediğimiz yere Photoshop içinde hareket ettirebiliyoruz.

Örnekleri ve hikayeyi fazla uzatmadan MDI, form içinde form açma uygulamasına geçelim. Öncelikle bir tane ana form oluşturalım. Bunun için formun IsMdiContainer özelliğini True olarak ayarlayın.(Resimdeki gibi form arkaplan gri renkte olacak)

Form içinde alt form açmak için anaforma bir adet menü oluşturmamız gerekecek. Toolbox daki MenuStrip kontrolünü sürükleyip bırakarak oluşturabiliriz. Menü otomatik en üste çıkacak, özellikler bölümünden konumunu ayarlaya bilirsiniz. Üzerine tıklayarak menü isimlerini basit bir şekilde oluşturun.

Örneğe uygun olarak resimdeki gibi oluşturabilirsiniz. Ardından açılacak olan alt form için yeni windows form ekleyin. Formun IsMdiContainer özelliğini False olarak bırakıp, Name özelliğini altform olarak yazarsanız örneğimizdeki kodları daha iyi anlayabilirsiniz.

Çalışır vaziyetteki örneğimiz

Bunları yaptıktan sonra kod kısmına geçebiliriz. İlk önce yeni alt form oluşturmak için Yeni Form Aç menümüze çift tıklayıp Click olayına alttaki kodları yazalım.

[cc lang="c#"]
int formsayim = 1; // formsayim değişkenini global olarak tanımlayın !

int formno= formsayim++;

altform cocuk = new altform();

cocuk.Name = “cocukform” + formno.ToString();
cocuk.Text= “Yeni Alt Form ” + formno.ToString();

cocuk.MdiParent = this;

cocuk.Show();

[/cc]

Açılan her yeni form için form numarasını 1 arttırarak yeni çocuk formun name özelliğine atadık. Sırası ile kapat menüsüne çift tıklayıp Clik olayına alttaki kodları yazalım

[cc lang="c#"] if (this.ActiveMdiChild != null)
{
Form frm = ActiveMdiChild;
frm.Close();
} [/cc]

Buradaki kod açılı form varsa en onu kapatır. Son olarak hepsini kapat menüsüne de çift tıklayıp Clik olayına alttaki kodları yazalım.

[cc lang="c#"]foreach (Form frm in this.MdiChildren)
{
frm.Close();
} [/cc]

foreach döngüsü ile form içindeki tüm çocuk formları kapatır.

ConsoleColor arka plan rengini değiştirme

Filed under: C# — Etiketler:, , — tayfun55 @ 14:32

Console ekranında çalıştığımızda kullanıcıya biraz daha hoş gözükmesini isteyebiliriz. Console arka plan rengini değiştiren ConsoleColor metodu ile bu işlemi yapabiliyoruz.

[cc lang="c#"] static void Main(string[] args)
{

Console.WriteLine(“Ekranın rengi ne olsun? (1-15 arası numara giriniz.)”);

ConsoleColor renk = (ConsoleColor)Convert.ToInt32(Console.ReadLine());

Console.BackgroundColor = renk;

Console.Clear();

Console.ReadKey();

} [/cc]

11 Eylül 2012

Forma sağ tuş tıkladığında çıkan menü

Filed under: C# — Etiketler:, , , — Murat M.oğlu @ 16:15

Bağlam menüsü olarak geçen bu uygulama form ekranında boş olan herhangi bir alanına farenin sağ tuşuna tıkladığımızda karşımıza çıkan menüyü beraber hazırlayalım.

Contextmenu olarak da isimlendirilen bu menüyü yapabilmek için herhangi bir form ve işlem yapması için bir kaç textbox ekleyip kod kısmına geçebiliriz.

Form1 alanına contextmenum(); metodunu ekliyoruz.

[cc lang="c#"]
public Form1()
{
InitializeComponent();
contextmenum();
}
[/cc]

Ardından bu metodu ve menü içersindeki sekmelerin neler yapacağını yazıyoruz.

[cc lang="c#"]
private void contextmenum()
{
ContextMenu cm = new ContextMenu();

MenuItem m1 = new MenuItem(“özellikler”);
MenuItem m2 = new MenuItem(“temizle”);
MenuItem m3 = new MenuItem(“kirlet”);
MenuItem m4 = new MenuItem(“zıpla”);

cm.MenuItems.Add(m1);
cm.MenuItems.Add(m2);
cm.MenuItems.Add(m3);
cm.MenuItems.Add(m4);

m1.Click += new EventHandler(m1_Click);
m2.Click += new EventHandler(m2_Click);
m3.Click += new EventHandler(m3_Click);
m4.Click += new EventHandler(m4_Click);

this.ContextMenu = cm;

       }

private void m1_Click(object sender, EventArgs e)
{
MessageBox.Show(“özellikler”);
}

private void m2_Click(object sender, EventArgs e)
{
textBox1.Text=”";
textBox2.Text=”";
textBox3.Text=”";

}

private void m3_Click(object sender, EventArgs e)
{
MessageBox.Show(“kirlet özelliği”);
}

private void m4_Click(object sender, EventArgs e)
{
MessageBox.Show(“zıpla özelliği”);
}

[/cc]

Bu şekilde form ekranında sağ tuş tıklama ile açılan menü oluşturabilir. Uygulama tasarımında menü karmaşasından kurtulabiliriz.

10 Eylül 2012

Ajax ile saati güncel gösterme

Mini bir uygulama ile merhaba. Web sitelerinde karşılaştığımız güncel saati yani dijital saat gibi saatin, saniyelerin ilerlediği yapıyla karşılaş mısınızdır. Asp.net ile saati saniyeleri güncel hareketli göstermek için sayfayı her saniye yenilememiz gerekecek. İşte bu ve buna benzer durumlarda yardımımıza Ajax web teknolojisi geliyor.

Saati kullanıcıya gösterebilmek için javascript den de yaralanabiliriz. Fakat biraz daha fazla kod yazmak gerekir. Ajax da bunu timer ile kolaylıkla yapabiliyoruz. Ajax timer hakkında daha fazla bir şey konuşmadan direk mini uygulamamıza geçiyorum.

İlk olarak sayfamıza ScriptManager ardından UpdatePanel bunun içerisine Label ve Ajax Timer ekliyoruz. Bunları yaptıktan sonra alttaki arayüz formu kodları gelmekte. Timer Interval değerine 1000, ontick olayına da Timer1_Tick yapıyoruz.

[cc lang="c#"]









[/cc]

Bundan sonra yapmamız gereken timer tick olayında Label text özelliğine tarihi göstermek kalıyor. Ve bunun da kodu aşağıdaki gibi.

[cc lang="c#"]
protected void Timer1_Tick(object sender, EventArgs e)
{
Label1.Text = DateTime.Now.ToString();
}
[/cc]

Older Posts »

Powered by WordPress