Bir Kahve Fincanı Çizelim (resimli öğretim )

Bu dersimizde illustrator programında kolay bir şekilde bir fincan çizmenin nasıl olduğunu göreceğiz. Herkesin yapabileceği basit bir ders olduğuna inanıyorum.

Kullandığım yazılım CS4 versiyonu.

Adım 1

Yeni bir sayfa açarak başlayalım. Pen tool’u seçip dersimiz için kullanacağımız fincanın dış hatlarını çizelim. Aşağıdaki gibi bir şey olacak. En iyi sonucu almak için 4 bağlama noktası kullanabilirsiniz. Yani 4 adımda çizmeniz iyi olur. Renkleri henüz dert etmeyin, sadece dış hat için siyah renk kullanmanız kafi. Aşağıdaki şekle baktığınızda ne demek istediğimi daha net göreceksiniz.

http://img.sanalkurs.net/images/mug_shape.jpg

Adım 2

Şimdi renk paletinize (Swatches) kullanacağımız renkleri ekleyeceksiniz. Eğer renk paletinizi açamıyorsanız Windows > Swatches tıklayın. Benim yaptığım ilk iş renkleri yeni bir gurup içinde bir araya getirmek olacak. Burada çalışmamızda kullanacağımız renkler yer alacak. Siz de kodların verdiğim renkleri gurubunuza ekleyebilirsiniz. Kahvenin fincanı için 3 tür renk kullandım: (#E3D8BA, #B52025, #4A141A). Fincanın altlığı (alt tabağı) ve fincanın iç görünüşü içinse yine 3 renk kullanıyorum: (#D0C7DA, #5067B0, #100E19). Kahve için kullanacağım renkler ise yine 3 adet. (#87604C, #553827, #0D090C). Bu renkler elbette benim kişisel tercihim, siz dilerseniz arzu ettiğiniz başka renkler kullanabilirsiniz.

http://img.sanalkurs.net/images/swatches.jpg

Adım 3

Az önce oluşturduğumuz kahve fincanı şekline tıklayın. Dış kenarlığını iptal edin (dolgu vermeyin), Radial gradient verin, dolgusunu ise koyu kırmızıdan orta koyuluktaki kırmızıya ayarlayın. Ayarlamak için Gradient paletini kullanın. Sonra dolgunun şekline sol üste doğru hafifçe kavis vermek için Gradient tool’u seçin, sol üst kısımda bir yere tıklayın ve alt kısma doğru mouse’unuzu sürükleyip bırakın.

http://img.sanalkurs.net/images/mug_gradient.jpg

Adım 4

Ellipse tool’u (daire aracını) seçin ve fincanın üst kısmında bir daire oluşturun. Aşağıdaki gibi yapabilirsiniz:

http://img.sanalkurs.net/images/mug_ellipse.jpg

Adım 5

Aşağıdaki resimde gördüğünüz şekilde ortasında koyu mavi olacak şekilde linear dolgu ekleyin. Not: Renkleri daha kolay vermek istiyorsanız Swatches panelindeki rengi tutup Gradient paneline taşıyabilirsiniz.

http://img.sanalkurs.net/images/ellipse_gradient1.jpg

Adım 6

Şimdi bu daireyi seçin ve Ctrl+C ile kopyalayın, sonra Ctrl+F’ye basın. Bu şekilde kopyaladığınız şeklin aynısı en öne tam üstüne yerleştirilecektir. Şimdi de bu şekli seçin ve Shift+Alt tuşlarına birlikte basarak her hangi bir köşesinden içeri doğru çekin, böylelikle her köşesinden aynı oranda, çok düzgün bir şekilde küçültmüş olacaksınız. Dolgu rengini aşağıdaki gibi değiştirin:

http://img.sanalkurs.net/images/ellipse_2_gradient.jpg

Adım 7

Şimdi sıra geldi fincandaki kahveyi yapmaya. Klavyenizden Alt tuşuna basılı tutarak son çizdiğiniz daireyi birazcık aşağı çekin. Bu işlem dairenin bir kopyasını oluşturacaktır. Aşağıdaki gibi konumlandırın ve tek renk olarak açık kahverengi dolgu verin.

http://img.sanalkurs.net/images/coffee_fill1.jpg

Adım 8

Shift tuşuna basılı tutarken, sırayla en son oluşturduğunuz kahverengi daire ile fincanın içi olarak yaptığımız daireye tıklayın. Böylelikle ikisini de seçmiş oldunuz. Pathfinder panelini (eğer açık değilse, Window > Pathfinder ) açın. Divide (böl) olarak isimlendirilen şekildeki simgeye tıklayın.

http://img.sanalkurs.net/images/divide.jpg

Adım 9

Şimdi kahve dairesine sağ tıklayın ve Ungroup’u seçin. Sonra şekilleri seçili halden çıkarmek için sahnede herhangi bir yere tıklayın. En aşağıda kalan fazlalık olan şekli seçin ve Delete tuşuna basarak silin. Böylelikle kahvenin ağzındaki az önceki fazlalık kısım düzelmiş olacaktır.

http://img.sanalkurs.net/images/coffee_fill_cropped.jpg

Adım 10

Şimdi kahveye biraz gölge verelim. Kahveyi seçin, az önce yaptığımız gibi kopyalayın ve yapıştırın, bunun için Ctrl+C’ye bastıktan sonra yine Ctrl+F’ye basacaksınız. Şimdi yeni ve en üste kopyalanan bu şekle linear dolgu uygulayın, koyu kahverengiden orta koyuluktaki kahverengiye doğru olsun.

http://img.sanalkurs.net/images/shadow_fill.jpg

Adım 11

Şimdi de Pen tool’u seçin ve aşağıdaki gibi bir şekil oluşturun. Gölgenin ayrımını belirleyecek bir şekil olacak bu.

http://img.sanalkurs.net/images/shadow_separator.jpg

Adım 12

En son oluşturduğumuz koyu kahverengi daire ile bu çizgiyi seçin ve Pathfinder paletinden Divide ayarını uygulayın. Az önceki gibi sağ tıklayıp ungroup yapın ve alttaki fazlalık şekli silin.

http://img.sanalkurs.net/images/coffee_fill_cropped1.jpg

Adım 13

Bu adımda fincan üzerine parlaklık ekleyeceğiz. Pen tool ile aşağıdaki gibi bir şekil çizin, sonra çok açık bir kahverengi tonda dolgu verin.

http://img.sanalkurs.net/images/mug_highlight.jpg

Adım 14

Şimdi bu parlaklık üzerine bulanıklık ekleyelim de bu şekilde sırıtmasın. Üst menüden Effect > Blur > Gaussian Blur’u seçin. Amount değeri olarak 16 px verin.

http://img.sanalkurs.net/images/highlight_blur.jpg

http://img.sanalkurs.net/images/highlight_finished.jpg

Adım 15

Bu adımda ise kahvenin kulpunu yapacağız. Öncelikle pen tool ile aşağıdaki gibi şeklimizi çizelim, sol taraf doğru fazla çizmenizde bir mahzur yok. Sonra ona kırmızı dolgu verin ve arkaya gönderin. Yani diğer şekillerin arkasına atın. Şekle sağ tıklayın ve Arrange > Send to Back seçin.

http://img.sanalkurs.net/images/handle_shape.jpg

Adım 16

Pen tool ile yine kulpun iç kısmını çizelim. Aşağıdaki resme bakarak yapabilirsiniz. Sonra her iki şekli seçin ve Pathfinder panelinden yine divide simgesine tıklayın. Ortadaki kesilmiş olan parçayı silin. Şimdi şeklimiz aşağıdaki gibi görünmeli:

http://img.sanalkurs.net/images/handle_cut.jpg

Adım 17

Pen tool ile yine aşağıdaki gibi kulpun üzerine gölge olacak şekli çizin.

http://img.sanalkurs.net/images/handle_shadow1.jpg

Adım 18

Bu şekle az bir Gaussian blur efekti verin. Ben 12 px kullandım. Sonra Transparency paletini açın ve üst açılır kısımdan layer modunu Multiply yapın, Opacity (saydamlık) ayarını ise %90 olarak belirleyin.

http://img.sanalkurs.net/images/shadow_transparency.jpg

Adım 19

Aynı adımları bu kez ikinci bir gölge çizerek tekrar uygulayın. Yalnız ben bu kez Transparency panelinden blend modundaki ayarı darken olarak yaptım.

http://img.sanalkurs.net/images/handle_shadow_2.jpg

Adım 20

Sonrasında bu kulp üzerine de bir parlaklık ekleyelim. Yine pen tool ile aşağıdaki gibi bir şekilde çizin.

http://img.sanalkurs.net/images/handle_highlight.jpg

Adım 21

Gaussian blur efekti uygulayın. Ben 8 px kullandım. Transparency kısmındaki ayarı Lighten yapın ve opacity ise %75 olsun.

http://img.sanalkurs.net/images/handle_finished.jpg

Adım 22

Şimdi de fincanın altındaki gölgeyi yapalım. Ellipse aracı ile kahvenin boyutundan biraz daha büyük olacak şekilde bir daire çizin. Buna griden siyaha doğru radial bir gradient dolgu ekleyin. Transparency panelinden Blend modunu Multiply yapın. Bu gölgeyi Arrange menüsünü kullanarak yine en arkaya gönderin ve fincanın sağ alt kısmına aşağıdaki gibi yerleştirin. Resimdeki gibi olsun.

http://img.sanalkurs.net/images/bottom_shadow.jpg

http://img.sanalkurs.net/images/mug_shadow.jpg

Adım 23

Şimdi aynı adımları uygulayarak bir gölge daha yapalım. Bu gölge fincanın kulpunun gölgesi olacak. Bu kez griden beyaz doğru linear gradient dolgu kullanın ve fincanın arkasına yerleştirin. Ama diğer gölgenin üstüne olmasına dikkat edin. Bu gölgeler algılamadaki derinliğe yardımcı olacaktır.

http://img.sanalkurs.net/images/second_shadow.jpg

Adım 24

Şimdi sıra geldi fincanın tabağını çizmeye. Bir daire çizin ve radial gradient dolgu verin, maviden orta koyulukta bir maviye doğru olsun. Dış hat çizgisi (stroke) ekleyin ve kalınlığını 5 px yaparak rengini açık bir mavi renk olarak ayarlayın. Sonra bunu en arkaya gönderin. (Arrange menüsünü kullanın yine.)

http://img.sanalkurs.net/images/saucer.jpg

Adım 25

Benzer tekniklerle bir gölge daha oluşturun ve bunu da fincan tabağının arkasına gönderin. Artık nasıl yapacağınız tekrar tarif etmeme sanırım gerek yok. Şekildeki gibi olsun.

http://img.sanalkurs.net/images/saucer_shadow.jpg

Adım 26

Şimdi fincan tabağının içine daire şeklinde bir çizgi oluşturalım. Bu daireye sadece dış hat çizgisi verin, dolgu vermeyin. Çizginin kalınlığı 3 px olsun. Bu şekli fincanın ve fincan gölgesinin arkasına yerleştirin, fakat fincan tabağının üstünde olsun. Tranparency paletinden blend ayarını Overlay olarak değiştirin.

http://img.sanalkurs.net/images/saucer_circle.jpg

Adım 27

Şimdi sıra geldi kahveden sıcak bir buhar çıkarmaya. Pen tool ile kahvenin üstüne “S” şeklinde bir şekil çizin. Dolgu vermediğinizden emin olun, çizgi kalınlığını ise 1 px yapın. Çizgi rengini ise orta koyulukta bir kahverengi yapın. Transparency panelinde Multiply olarak ayarlayın, opacity ayarını ise %58 yapın. Brush (fırça) paletini açın ve brush ayarlarını görebileceğiniz üstteki küçük oka tıklayın. Buradan sırasıyla Open Brush Library > Artistic > Artistic Watercolor’u seçin. Gelen fırça seçimlerinden üstten üçüncüsünü tercih edin, dilerseniz diğerlerinden birini de seçebilirsiniz.

http://img.sanalkurs.net/images/brush_library.jpg

http://img.sanalkurs.net/uploads/watercolor_brushes.jpg

İşte benim yaptığım çalışmanın sonucu:

http://img.sanalkurs.net/images/coffee_tut_final2.jpg

Hadi Fireworks ile Basit Bir Televizyon Yapalım

Bu dersimizde Fireworks ile eski siyah beyaz bir televizyon çizeceğiz.

Adım 1: İlk Önce Rounded Renctagle Tool ile çizim için Fireworks ile 600×600 ebatlarında Bir sayfa açiyoruz

http://www.sanalkurs.net/images/dersler/resim1o.jpg

Adım 2: Resimde göründüğü gibi Rounded Renctagle Tool’u seçiyoruz

http://www.sanalkurs.net/images/dersler/resim2v.jpg

Adım 3: Evet Aracımızı Seçtik şimdi sıra çizimde

http://www.sanalkurs.net/images/dersler/resim3ew.jpg

Adım 4: Bu adımda yine Rounded Renctagle Tool’u kullanacağız, ama burada dikkat etmemiz gereken şey, daha önce çizdiğimiz kahverengi cephenin içine oturacak şekilde yerleştirmemiz gerektiği. Ve dış cephe değeri 6. Renk olarak ise siyah seçtik, bu sizin istediğinize bağlı tabi.

http://www.sanalkurs.net/images/dersler/resim4c.jpg

Adım 5: Ve son olarak 3 tane küçük düğme çizecelim. Bunun için Ellipse tool kullanacağız. Sadece bir tane daire çizip iki defa (ctrl+c ve ctrl+v) yapıyoruz ve düğmelerinizi televizyonun sağ tarafına yerleştiriyoruz.

http://www.sanalkurs.net/images/dersler/resim5ym.jpg

Elimden bu kadar geldi, umarım faydalı olmuştur sizlere bu ders.

Saygılar…

Not Hesaplama Programı (if kontrolü) yapmak

Merhaba arkadaşlar,

Bu makalemizde if’in kullanımından bahsedeceğiz. Bunu bir uygulama üzerinde göreceğiz.

Uygulamamızda 2 vize notunun %40 nı ve 1 final notunun %60 nı aldırarak. Notumuzu hesaplatıp ekrana yazdıracağız..

Evet başlayalım ;

Öncelikle visual studio ortamımıza gidip File-Project e tıklayıp Windows sekmesinden Console Application? u tıklıyoruz.

http://www.sanalkurs.net/images/dersler/NotHesabi1.jpg

Kod aşamamızda ilk önce değişkenlerimizi tanımlıyoruz.

            int sonuc;
            int vize1, vize2, final;
            string vize1str, vize2str, finalstr;

İnt türünden; 1.vize , 2.vize,final ve sonuc değişkenlerimizi tanımladık.Daha sonra string türünden vize1str, vize2str ve finalstr değişkenlerimizi tanımladık.

Şimdi kullanıcıdan verilerimizi aldıracağız. Girecek olan kullanıcı 2 vize ve bir final notunu girecek. Hemen aldırtalım.Bunun için hangi komutu kullanıyorduk ? Console.Write değil Mi ?

            Console.Write("1. Vizeyi giriniz :");
            vize1str = Console.ReadLine();
            Console.Write("2. Vizeyi giriniz :");
            vize2str = Console.ReadLine();
            Console.Write("Final Notunu giriniz :");
            finalstr = Console.ReadLine();

Kullanıcılardan verileri aldırdık. Ve Console.ReadLine(); komutuyla kullanıcın klavyeden bir veri girdikten sonra entere basmasını sağlamak için komutumumuzu kullandık.

Şimdi String türünden bir ifademiz var elimizde bunları int türüne çevireceğiz. Nasıl yapacagız ?

      vize1 = Int32.Parse(vize1str);
            vize2 = Int32.Parse(vize2str);
            final = Int32.Parse(finalstr);

String türünden verilerimizi Int32.Parse komutuyla ınt turune cevirdik.
Şimdi hesaplamamızı yapalım.. Vizelerin %40 ve finallerin %60nı alayarak ekrana bunu yansıttıralım..

sonuc = (vize1 * 2/10) + (vize2 * 2/10) + (final * 6/10);

Şimdi ise dananın kuyruğunun koptuğu ana geldık. İf i kullanarak karşılaştırma operatörleri ile (<=,>= vb) karşılaştırıp ekrana yazdıracağız..

if ((sonuc >= 90) && (sonuc <= 100))// 90-100 AA
                Console.WriteLine("Notunuz AA dır.");
            if ((sonuc >= 85) && (sonuc <= 90)) // 90-85 BA
                Console.WriteLine("Notunuz BA dır.");
            if ((sonuc >= 80) && (sonuc <= 85)) // 85-80 BB
                Console.WriteLine("Notunuz BB dır.");
            if ((sonuc >= 75) && (sonuc <= 80))// 80-75 CB
                Console.WriteLine("Notunuz CB dır.");
            if ((sonuc >= 70) && (sonuc <= 75))// 75-70 CC
                Console.WriteLine("Notunuz CC dır.");
            if ((sonuc >= 65) && (sonuc <= 70))// 70-65 DC
                Console.WriteLine("Notunuz DC dır.");
            if ((sonuc < 65))// 65-0 FF
                Console.WriteLine("Geçemediniz. Notunuz FF dir.");

Programımızda Not aralıklarını tamamen kafamızdan verdik. Siz yine kendinize göre değiştirebilirsiniz.
Programımızın son hali ;

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

namespace NotHesabi
{
    class Program
    {
        static void Main(string[] args)
        {
            int sonuc;
            int vize1, vize2, final;
            string vize1str, vize2str, finalstr;
            Console.Write("1. Vizeyi giriniz :");
            vize1str = Console.ReadLine();
            Console.Write("2. Vizeyi giriniz :");
            vize2str = Console.ReadLine();
            Console.Write("Final Notunu giriniz :");
            finalstr = Console.ReadLine();
            vize1 = Int32.Parse(vize1str);
            vize2 = Int32.Parse(vize2str);
            final = Int32.Parse(finalstr);
            sonuc = (vize1 * 2/10) + (vize2 * 2/10) + (final * 6/10);
            if ((sonuc >= 90) && (sonuc <= 100))// 90-100 AA
                Console.WriteLine("Notunuz AA dır.");
            if ((sonuc >= 85) && (sonuc <= 90)) // 90-85 BA
                Console.WriteLine("Notunuz BA dır.");
            if ((sonuc >= 80) && (sonuc <= 85)) // 85-80 BB
                Console.WriteLine("Notunuz BB dır.");
            if ((sonuc >= 75) && (sonuc <= 80))// 80-75 CB
                Console.WriteLine("Notunuz CB dır.");
            if ((sonuc >= 70) && (sonuc <= 75))// 75-70 CC
                Console.WriteLine("Notunuz CC dır.");
            if ((sonuc >= 65) && (sonuc <= 70))// 70-65 DC
                Console.WriteLine("Notunuz DC dır.");
            if ((sonuc < 65))// 65-0 FF
                Console.WriteLine("Geçemediniz. Notunuz FF dir.");
        }
    }
}

Programımızı çalıştırıyoruz..

http://www.sanalkurs.net/images/dersler/NotHesabi2.jpg

Gördüğünüz gibi notumuzu hesaplattık ve ekrana doğru bir biçimde yazdırttık. Bu sayede hem if kontrolunu ogrenmış olduk, hemde beraber güzel bir uygulama yapmış olduk.

Bir dahaki makalemizde görüşmek dileğiyle..

Herkese iyi çalışmalar!

Merhaba arkadaşlar,

Bu makalemizde if’in kullanımından bahsedeceğiz. Bunu bir uygulama üzerinde göreceğiz.

Uygulamamızda 2 vize notunun %40 nı ve 1 final notunun %60 nı aldırarak. Notumuzu hesaplatıp ekrana yazdıracağız..

Evet başlayalım ;

Öncelikle visual studio ortamımıza gidip File-Project e tıklayıp Windows sekmesinden Console Application? u tıklıyoruz.

http://www.sanalkurs.net/images/dersler/NotHesabi1.jpg

Kod aşamamızda ilk önce değişkenlerimizi tanımlıyoruz.

            int sonuc;
            int vize1, vize2, final;
            string vize1str, vize2str, finalstr;

İnt türünden; 1.vize , 2.vize,final ve sonuc değişkenlerimizi tanımladık.Daha sonra string türünden vize1str, vize2str ve finalstr değişkenlerimizi tanımladık.

Şimdi kullanıcıdan verilerimizi aldıracağız. Girecek olan kullanıcı 2 vize ve bir final notunu girecek. Hemen aldırtalım.Bunun için hangi komutu kullanıyorduk ? Console.Write değil Mi ?

            Console.Write("1. Vizeyi giriniz :");
            vize1str = Console.ReadLine();
            Console.Write("2. Vizeyi giriniz :");
            vize2str = Console.ReadLine();
            Console.Write("Final Notunu giriniz :");
            finalstr = Console.ReadLine();

Kullanıcılardan verileri aldırdık. Ve Console.ReadLine(); komutuyla kullanıcın klavyeden bir veri girdikten sonra entere basmasını sağlamak için komutumumuzu kullandık.

Şimdi String türünden bir ifademiz var elimizde bunları int türüne çevireceğiz. Nasıl yapacagız ?

      vize1 = Int32.Parse(vize1str);
            vize2 = Int32.Parse(vize2str);
            final = Int32.Parse(finalstr);

String türünden verilerimizi Int32.Parse komutuyla ınt turune cevirdik.
Şimdi hesaplamamızı yapalım.. Vizelerin %40 ve finallerin %60nı alayarak ekrana bunu yansıttıralım..

sonuc = (vize1 * 2/10) + (vize2 * 2/10) + (final * 6/10);

Şimdi ise dananın kuyruğunun koptuğu ana geldık. İf i kullanarak karşılaştırma operatörleri ile (<=,>= vb) karşılaştırıp ekrana yazdıracağız..

if ((sonuc >= 90) && (sonuc <= 100))// 90-100 AA
                Console.WriteLine("Notunuz AA dır.");
            if ((sonuc >= 85) && (sonuc <= 90)) // 90-85 BA
                Console.WriteLine("Notunuz BA dır.");
            if ((sonuc >= 80) && (sonuc <= 85)) // 85-80 BB
                Console.WriteLine("Notunuz BB dır.");
            if ((sonuc >= 75) && (sonuc <= 80))// 80-75 CB
                Console.WriteLine("Notunuz CB dır.");
            if ((sonuc >= 70) && (sonuc <= 75))// 75-70 CC
                Console.WriteLine("Notunuz CC dır.");
            if ((sonuc >= 65) && (sonuc <= 70))// 70-65 DC
                Console.WriteLine("Notunuz DC dır.");
            if ((sonuc < 65))// 65-0 FF
                Console.WriteLine("Geçemediniz. Notunuz FF dir.");

Programımızda Not aralıklarını tamamen kafamızdan verdik. Siz yine kendinize göre değiştirebilirsiniz.
Programımızın son hali ;

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

namespace NotHesabi
{
    class Program
    {
        static void Main(string[] args)
        {
            int sonuc;
            int vize1, vize2, final;
            string vize1str, vize2str, finalstr;
            Console.Write("1. Vizeyi giriniz :");
            vize1str = Console.ReadLine();
            Console.Write("2. Vizeyi giriniz :");
            vize2str = Console.ReadLine();
            Console.Write("Final Notunu giriniz :");
            finalstr = Console.ReadLine();
            vize1 = Int32.Parse(vize1str);
            vize2 = Int32.Parse(vize2str);
            final = Int32.Parse(finalstr);
            sonuc = (vize1 * 2/10) + (vize2 * 2/10) + (final * 6/10);
            if ((sonuc >= 90) && (sonuc <= 100))// 90-100 AA
                Console.WriteLine("Notunuz AA dır.");
            if ((sonuc >= 85) && (sonuc <= 90)) // 90-85 BA
                Console.WriteLine("Notunuz BA dır.");
            if ((sonuc >= 80) && (sonuc <= 85)) // 85-80 BB
                Console.WriteLine("Notunuz BB dır.");
            if ((sonuc >= 75) && (sonuc <= 80))// 80-75 CB
                Console.WriteLine("Notunuz CB dır.");
            if ((sonuc >= 70) && (sonuc <= 75))// 75-70 CC
                Console.WriteLine("Notunuz CC dır.");
            if ((sonuc >= 65) && (sonuc <= 70))// 70-65 DC
                Console.WriteLine("Notunuz DC dır.");
            if ((sonuc < 65))// 65-0 FF
                Console.WriteLine("Geçemediniz. Notunuz FF dir.");
        }
    }
}

Programımızı çalıştırıyoruz..

http://www.sanalkurs.net/images/dersler/NotHesabi2.jpg

Gördüğünüz gibi notumuzu hesaplattık ve ekrana doğru bir biçimde yazdırttık. Bu sayede hem if kontrolunu ogrenmış olduk, hemde beraber güzel bir uygulama yapmış olduk.

Bir dahaki makalemizde görüşmek dileğiyle..

Herkese iyi çalışmalar!

JavaScript İle Manşet Sistemi anlatımı

Merhabalar bir dersimizde daha beraberiz!

İlk önce kodumu yazdıktan sonra açıklama yapıyorum.

İlk Önce Jscript.js Adında bir dosya açık alttaki kod blogunu kaydedin.

Jscript.Js

 function Goster(id)
    {
                 for (var i=1;i<=6;i++)
                {
                    if (i!=id)
                    {
                     document.getElementById("icerik"+i).style.display='none';
			document.getElementById("div"+i).style.display='none';		 

                        }
                    else
                        {
                    document.getElementById("icerik"+i).style.display='block';
document.getElementById("div"+i).style.display='block';

                    }

            }

Bir döngü yarattık, ben 6′ya kadar değerimizin dönmesini istedim ve document.GetElementById parametremizle id’mizi çağırdım ve i döngüsü ile bir artırdım.

Default.html

<html>
<head>
<meta content="Language" language="tr">
<title>Manset Sisstemi-Rıza Soylu</title>
<script src="Jscript.js" type="text/javascript" ></style>
</head>
<body>
<table border="0" cellspacing="1" cellpadding="1" width="800">
<tr>
<td width="200"><table border="0" cellspacing="1" cellpadding="1" width="200"><tr>
<td>
<div id="div1"><img src="resim1.jpg"></div>
<div id="div2"><img src="resim2.jpg"></div>
<div id="div3"><img src="resim3.jpg"></div>
<div id="div4"><img src="resim4.jpg"></div>
<div id="div5"><img src="resim5.jpg"></div>
<div id="div6"><img src="resim6.jpg"></div>
</td>
</tr>
</table>
</td>
<td width="500"><span onmouseover="Goster('1')"><a href="adres1">Resimyolu</a></span><br/>
<span onmouseover="Goster('2')"><a href="adres2">Resimyolu</a></span><br/>

<span onmouseover="Goster('3')"><a href="adres3">Resimyolu</a></span><br/>

<span onmouseover="Goster('4')"><a href="adres4">Resimyolu</a></span><br/>

<span onmouseover="Goster('5')"><a href="adres5">Resimyolu</a></span><br/>

<span onmouseover="Goster('6')"><a href="adres6">Resimyolu</a></span><br/>
<br/>
<div id="icerik1">Açıklama1</div>
<div id="icerik2">Açıklama2</div>
<div id="icerik3">Açıklama3</div>
<div id="icerik4">Açıklama4</div>
<div id="icerik5">Açıklama5</div>
<div id="icerik6">Açıklama6</div>
</td>
</tr>
</table>

Arkadaşlar, o kadar bir zor mantık kullanmadık. Ben sadece resimlerim ve yazılar için iki tane id atadım; resimler için “div” açıklamam içinde “icerik”, bunları java dosyamda Goster adlı bir function oluşturdum Ve bu div, icerik adlı idleri çağırıp bir döngüye soktum ve bunları da üzerine gelince sıra sıra göstermesini istedim. Function adımız Goster’di ve:

<span onmouseOver="Goster('1')">Çıkan</span>

şeklinde ona karşı gelen resim ve açıklama çıkacaktır.

İyi Çalışmalar…

Dışarıdan İçerik Çekmek

Merhaba Arkadaşlar,

Flash’da yaptığınız sitenin güncellemesi dışarıdan içerik okutamayanlar için her zaman sorun olmuştur. Oysa ki güncelenecek yerleri bir text doyasından alsak, güncellemeyi daha hızlı ve kolay bir şekilde yapabiliriz. Şimdi bunu öğreneceğiz. Sitedeki güncellenmesi gereken yazıları dışarıdaki bir text dosyasından alarak hazırlayacağız ve güncellenmesi gerekirken sadece text dosyasında içeriği değiştirmemiz yeterli olacak.

1.) Öncelikle body_txt isimli movie clip oluşturuyoruz.

http://www.sanalkurs.net/images/dersler/ders1.jpg

2.) Oluşturduğumuz Movie Clip’in içine Dynamic Text oluşturuyoruz. Properties Panelinden text’in Single line özelliğini Multiline yapıyoruz ve var degerinide “txt” yazıyoruz. (Bu text alanına dışarıdan aldığımız text dosyamızda yazan içerik bulunacak.)

http://www.sanalkurs.net/images/dersler/ders2.jpg

3.) Movie Clibimizi scene’ye (sahneye) alıyoruz.

4.) Scene’ye (sahneye) “Action” İsimli yeni bir layer ekliyoruz.

http://www.sanalkurs.net/images/dersler/ders3.jpg

5.) Yeni eklediğimiz “Action” isimli layerımızın ilk frame’ine tıklayıp klavyeden F9 basarak Actions Panelini açıyoruz buraya aşağıda belirtiğim kodu yazıyoruz.

body_txt.loadVariables("icerik.txt", txt);

6.) En son olarak da flash çalışmanızı kaydettiğiniz yere ?icerik? isimli bir text dosyası oluşturuyoruz. İçene de şunu yazıyoruz.

txt=Yazmak istediginizi bu alana yazınız.

Evet arkadaşlar, bu uygulamaları eksiksiz yaptığınızda göreceksiniz ki, text dosyanızdaki “txt=” den sonrasını alarak flash çalışmanıza yerleştiriyor.

Kaynak dosyasını alarak örneği inceleyebilirsiniz.

Kaynak dosyayı indirmek için tıklayın

Pointer ile String İfadeyi Tersten Yazmak

Bu derste strgin ifadeyi tersten yazacağız.Örnek olarak; kullanıcı “Fuat” stringini girdiğinde çıktı olarak “tauF” verecektir.

#include<stdio.h>
#include<conio.h>
#include<string.h>
char *p , isim[100];
int boyut;
void buyuk(char *q){
       int i;
       char yedek;
       for(i=0;i<boyut/2;i++){
                                yedek=*(p+i);
                                *(p+i)=*(q-i);
                                *(q-i)=yedek;
                                }}

main(){
       printf("Isim Giriniz:");scanf("%s",isim);
       boyut=strlen(isim);
       p=&isim[0];
       buyuk(&isim[boyut-1]);
       printf("%s",isim);
       getch();
       }

Herkese kolay gelsin…

C# ile sayı formatı oluşturmak

Merhaba arkadaşlar! Bu dersimizde girilen bir sayının nasıl bir formata çevrileceğini göreceğiz. Mesela girilen rakamları telefon numarası formatında ayıralım.

Arkadaşlar tam anlamıyla bir program yazmayacağım. Sadece mantığını göstermem yeterli olacaktır.

//Telefon numarası formatı:
String.Format("{0:+### ### ### ###}", +90123456789); // "+90 123 456 789"

//Seri numarası formatı:
String.Format("{0:##-####-#####}", 23445891231);       // "23-4458-91231"

Kolay gelsin.

JavaScript ile Sanal Klavye nasıl yapılır

Merhaba arkadaşlar,

Tekrardan farklı bir örneği sizinle paylaşmaktan mutluluk duyuyorum. Şu anda üzerinde çalıştığım bir alışveriş sistemi için gerekli olan sanal klavye uygulamasının yapımını burdan sizinle paylasmak istedim. Klavye basit biraz, artık burdan mantığını alıp geliştirmek size düşüyor.

http://www.sanalkurs.net/images/dersler/form.jpg

İşte bu şekilde iki input’tan oluşan bir form oluşturduktan sonrasında ise kodlarımıza geçiyoruz. Başta söylediğim gibi bu örnek basit, sadece mantığını anlatmak için oluşturulmuş bir örnek. Siz ne kadar geliştirirseniz o kadar büyüyecek ve güzelleşecektir; buna inanıyorum.

İlk önce input değerlerinden herhangi birisine tıklandığında sağ kısımda küçük bir alanın görünmesini, diğer input’a tıkladığımızda ise o input değeri için olan alanın görünmesini, diğer alanın ise gizlenmesini istiyoruz. O halde yapmamız gerek input’lara birer onclick eklemek ve javascript fonksiyonumuzu yazmaya başlamak.

http://www.sanalkurs.net/images/dersler/js.jpg

İşte arkadaşlar, gördüğünüz gibi temelde 3 kalıp fonksiyonun birleşimi.

1. fonksiyon birinci inpu’ttan ikinci input’a geçtiğimizde 1. input için görünen alanın kaybolmasını sağlıyor. Aynı şekilde tam tersi de geçerli tabi ki.

2. fonksiyon ise sanal klavyeyi gösteren gizleyen alan!

3. fonksiyon gurbu ise sanal klavye içindeki değerleri inputların içerisine yazmaya yarayan fonksiyon .

Şimdi ise sanal klavyeyi gösterelim. Sanal klavye de burda çok basit bir şekilde. Tekrardan üzerinde bastırmak istiyorum, bu örneği göz önüne alarak çok değişik şeyler geliştirebilirsiniz.

Sanal Klavye Kodları

http://www.sanalkurs.net/images/dersler/klavye.jpg

Asp’de Rss

Çoğu sitede RSS sayfaları görmekteyiz. RSS, XML ismiyle de bilinmektedir. RSS genellikle haber ve download siteleri gibi sürekli güncellenen sitelerde kullanılmaktadır. RSS ile sitemizde ki içeriğin, ziyaretçilerimiz tarafından yardımcı bir program kullanılarak sitemize girmesine gerek kalmadan okuyabilmelerini sağlayabiliriz. RSS sayfalarını okutmak için SharpReader adlı programı kullanabilirsiniz. Bununla birlikte, başka bir sitede yer alan RSS sayfasından ASP ile veri alıp sitemiz içerisinde yayınlayabiliriz.

Kendi sitemde kullandığım RSS sayfasının kodlarını sizlerle paylaşmak istiyorum.

<%
Set baglanti = Server.CreateObject("ADODB.Connection")
baglanti.Open "DRIVER={Microsoft Access Driver (*.mdb)}; DBQ=" & Server.MapPath("database/db.mdb")

Response.Buffer = True
Response.ContentType = "text/xml"

Function Temizle(strInput)
      strInput = Replace(strInput,"&", "&")
      strInput = Replace(strInput,"'", "'")
      strInput = Replace(strInput,"""", """)
      strInput = Replace(strInput,">", ">")
      strInput = Replace(strInput,"<","<")
      strInput = Replace(strInput,"İ","I")
      strInput = Replace(strInput,"Ş","S")
      strInput = Replace(strInput,"Ü","U")
      strInput = Replace(strInput,"Ö","O")
      strInput = Replace(strInput,"Ç","C")
      strInput = Replace(strInput,"Ğ","G")
      strInput = Replace(strInput,"ğ","g")
      strInput = Replace(strInput,"ı","i")
      strInput = Replace(strInput,"ş","s")
      strInput = Replace(strInput,"ü","u")
      strInput = Replace(strInput,"ö","o")
      strInput = Replace(strInput,"ç","c") 
      Temizle = strInput
End Function
%>

<rss version="2.0">
<channel>
<title>SİTENİZİN ADI</title>
<link>http://www.sitenizinadresi.com</link>
<description>En Son Eklenen 20 İçerik</description>
<language>tr</language>
<%
Set rs = Server.CreateObject("ADODB.Recordset")
SQL = "Select * from tablo_adi order by tarih desc"
rs.Open SQL,baglanti,1,3

i = 0
Do While i =< 19 And Not rs.Eof
Response.Write "<item>"
Response.Write "<title>" & Temizle(rs("icerik_adi")) & "</title>"
Response.Write "<link>http://www.sitenizinadresi.com/icerik.asp?id="& Temizle(rs("id")) &"</link>"
Response.Write "<description>İcerik Aciklamasi : " & Temizle(rs("icerik_aciklamasi")) & "</description>"
Response.Write "</item>"

i = i + 1
rs.MoveNext
Loop

rs.Close
%></channel></rss>

Yukarıda görmüş olduğunuz koddaki ilgili yerleri kendi sitenize göre düzenleyerek RSS sayfanızı oluşturabilirsiniz. RSS sayfası içerisinde, veritabanından gelen Türkçe harflerde yer alan noktaları replace yöntemi ile kaldırmaktayız.

RSS sayfasında, aşağıda yer alan hatayı alırsanız Türkçe karakterleri düzenleyerek bu hatayı giderebilirsiniz.

?An invalid character was found in text content. Error processing resource?

İyi Çalışmalar…

Web sayfamızı resim formatında nasıl kaydederiz

Bu dersimizde web sayfamızı resim formatında nasıl kaydedeceğimize bir göz atalım.

1. Web Sitesi oluşturuyoruz.

2. System.Windows.Forms Reference’ini ekliyoruz.

3. AspCompat=”true” ekini ekliyoruz. Bilmeyen arkadaşlar tıklasınlar.

4.Son olarak da aşağıda vermiş olduğum namespace’leri arkaplan kod sayfanıza ekleyiniz.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.IO;
using System.Drawing;
using System.Drawing.Imaging;
using System.Windows.Forms;

ExportWebPageToImage.aspx adında bir web sayfası oluşturun. İçeriği :

<%@ Page Language="C#" AspCompat="true" AutoEventWireup="true" CodeFile="ExportWebPageToImage.aspx.cs"
   Inherits="ExportWebPageToImage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
   <title></title>
   <style type="text/css">
       .style1
       {
           width: 100%;
       }
   </style>
</head>
<body>
   <form id="form1" runat="server">
   <div>
       <asp:TextBox ID="txtUrl" runat="server" Width="208px"></asp:TextBox><br />
       <asp:Button ID="btnConvert" runat="server" Text="Resim formatına çevir" OnClick="btnConvert_Click" />
   </div>
   </form>
</body>
</html>

ExportWebPageToImage.aspx.cs yani ExportWebPageToImage.aspx sayfamızın arkaplan kodları...

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.IO;
using System.Drawing;
using System.Drawing.Imaging;
using System.Windows.Forms;

public partial class ExportWebPageToImage : System.Web.UI.Page
{
   protected void Page_Load(object sender, EventArgs e)
   {

   }

   public System.Drawing.Bitmap CaptureWebPage(string URL)
   {
       System.Windows.Forms.WebBrowser web = new System.Windows.Forms.WebBrowser();
       // ScrollBar'ın resimimizde gözükmesini istemiyorsak false değerini veriyoruz.
       web.ScrollBarsEnabled = false;
       // Hiçbir hata bildirimi isteimyorsak true değerini veriyoruz.
       web.ScriptErrorsSuppressed = true;
       // Sayfamızı load up yapabiliriz.
       web.Navigate(URL);

       // Sayfa tamamıyla load up olana kadar bekle.
       while (web.ReadyState != WebBrowserReadyState.Complete)
           System.Windows.Forms.Application.DoEvents();
       System.Threading.Thread.Sleep(1500); // Sayfa scripti yüklenene kadar beklenecek süre bildirimi.

       // Sayfa Görünümü

       //Web sayfamızın boyutlarıyla resmimizin boyutlarının aynı olması için gerekli tanımlamalar.
       int width = web.Document.Body.ScrollRectangle.Width;
       int height = web.Document.Body.ScrollRectangle.Height;
       web.Width = width;
       web.Height = height;
       // Sayfamızın bitmap formatında oluşturulması.
       System.Drawing.Bitmap bmp = new System.Drawing.Bitmap(width, height);
       // ve sonunda bitmap olarak resmedilmesi.
       web.DrawToBitmap(bmp, new System.Drawing.Rectangle(0, 0, width, height));

       return bmp; // Sonuç olarak bitmap donderilmesi.
   }
   protected void btnConvert_Click(object sender, EventArgs e)
   {
       Bitmap bitmap = new Bitmap(CaptureWebPage(txtUrl.Text));
       Response.ContentType = "image/jpeg";
       bitmap.Save(Response.OutputStream, ImageFormat.Jpeg);
       bitmap.Dispose();
       bitmap.Dispose();
       Response.End();
   }
}

Kolay gelsin.