İlk olarak kullanmak istediğiniz fontu ayarlayın. Sevdiğiniz, tasarıma uygun bir font belirledikten sonra aşağıdaki CSS kodları ile fontumuzu nasıl kullacağımıza bir bakalım.

@font-face {
font-family: ‘elma’;
src: url(‘fonts/fontadi.otf’);
}

font-family: ‘elma’; Burada belirleyeceğimiz CSS kodları arasında fontumuzu nasıl çağırmak istiyorsan o isimi veriyoruz. Mesela h1 içerisinde bu @font-face özelliğini kullanmak istiyorsak h1′in fontunu şu şekilde belirlememiz gerekir; font-family:’elma’;

src: url(‘fonts/fontadi.otf’); Burada ise sayfamıza bir resim eklediğinizi düşünün. Resimi images klasörüne eklersiniz değil mi? Aynın onun gibi fonts adında bir klasör oluşturun ve fontunuzu o klasörün içerisine ekleyin. Fontu klasörden çağırırken debu şekilde çağırmanız gerekir.

Biz örnek olması açısından h1 içerisinde kullanalım. h1 kodları iseaşağıdaki gibi olmalıdır:

h1 {
font-family:”elma”;
}

h1 ve @font-face kodlarımızı yazdıktan sonra fontumuzu html kodlarımızın içerisinde kullanabiliriz. H1 içerisinde her hangi bir cümle yazarak ve sayfanıza yukarıdaki CSS kodlarını ekleyerek çalışmanızı test edebilirsiniz.

Benim hazırladığım örneğin kodları ve ekran görüntüsü aşağıdaki gibidir. Kullandığım font ise GoodDog. Fontu buradan indirebilirsiniz.

52 views

Bildiğiniz gibi jQuery ile çeşitli slider çalışmaları yapabiliyorsunuz. Fotoğraflarla, yazılarla, hem yazı hem fotoğraflarla falan çeşitli çalışmalar ortaya çıkabiliyor. Ben size bu yazıda biraz daha (hatta çok kolay) kolay bir şekilde jQuery ile slider hazırlamanın küçük bir yolundan bahsedeceğim.

Bahsettiğim şey aslında bir program. WOW Slider aslında ücretsiz bir program yapılmış. Programı ücretsiz olarak bilgisayarınıza indirip kullanabilirsiniz.

Kısaca WOW Slider jQuery Slider programınn bir kaç özelliği:

• İstediğiniz kadar fotoğraf ekleyebilirsiniz.
• Geçiş efektlerini var olanlar arasından seçebiliyorsunuz.
• Görüntülenme süresini ayarlıyorsunuz. Mesela her fotoğraf 3 saniye görüntülensin gibi.
• Flickr, Picasa, Photobucket gibi fotoğraf sitelerinden slider için birkaç tıklama ile fotoğraf ekleyebiliyorsunuz.
• Direkt kendi bilgisayarınıza yayınlayarak, istediğiniz gibi değiştirip kullanabilirsiniz.
• Var olan bir html, php, asp vs sayfanızın bir bölgesine ekleyebiliyorsunuz
• Direkt bir server’a bağlanarak oraya yükleyebiliyorsunuz.
• Joomla modülü haline getirebiliyorsunuz.
• Ve daha bir çok güzel özelliği var programın.

406 views

Sağ üst köşede yazılı olan “NEW!” yazısını kaldırabilir, sağ ve sol okları kaldırabilir ve hatta isterseniz (biraz jquery bilgisiyle) slaytın altında ki noktaları da kaldırarak kullanabilirsiniz. Slaytta yer alan fotoğraflara isterseniz bağlantı da ekleyebilirsiniz.

Oldukça şık ve çekici bu slideshow’un ana sayfası burası. İndirmek için kendi sayasına gidebilirsiniz. Kendi sayfasında demosu mevcut. Her ihtimale karşı ben bloguma da yükledim dosyaları. Gerekli dosyaları buradan indirebilirsiniz.

185 views

960 GS‘den bahsetmek istiyorum biraz. Bilenler, duyanlar vardır elbet bunu fakat oturup da bu 960 GS’nin nasıl çalıştığını anlatan yoktu ben burada görene kadar. İzlen Öğren sitesinin blogunda yer alan bir kaç videodan bahsedeceğim size. Sitede şuanda 3 farklı video ile Dreamweaver ve 960gs ile Çalışmak başlığı ile eğitim videoları başlamış durumda. Birinci, ikinci ve üçüncü videoları izleyerek 960 GS hakkında başlangıç seviyesinde bilgi edinebilirsiniz. Videolar oldukça eğitici. Aslında videolarda size bir yol gösteriliyor ve o yolda baya bir ileriye gitmek de sizin hayal gücünüze bırakılıyor.

Videoları izlemenizi ve devamını beklemenizi öneririm. (Umarım devamı daha profesyonelce çalışmalar oluşturmamıza neden olur.) Aynı zaman da sitede başka konularda da video destekli eğitimler mevcut.

204 views

CSS3′ün bazı yeniliklerini uygulayarak görebiliyor ve istediğiniz gibi bu yeniliğin kodunu alıp kullanabiliyorsunuz. İlk önce CSS özelliğini seçiyorsunuz, ortada o özelliği üzerinde uygulayacağınız bir önizleme alanı çıkıyor. Oradan önizlemeyi görebilirsiniz. En sağda da ortada ki önizlemeye ait kodlar bulunuyor. Onları kullanabilirsiniz.

CSS3 Maker sitesi gibi “hazır kod üreteci” gibi kullanılmak üzere hazırlanmış bir çok web sitesi var. Bu tarz siteler, siz kod yazarken sizin hızlanmanızı sağlar. Faylanmanız sizin yararınıza olur.

68 views

Evet, başlıktan da belli olacağı üzere bu bir davettir. Ücretsiz olarak değerlendirebileceğiniz mükemmel bir davet. Sadece bir gününüzü ayırarak çok güzel bilgiler edinebilirsiniz. Kendiniz için bir gününüzü feda etmenize değer bir davet.

Müşteri web tasarımcısından web sitesi ister. Web tasarımcısı da tasarımı hazırlar html formatına dönüştürür. Fakat müşteri “yönetilebilir” bir web sitesi istediği anda web tasarımcısında kayışlar kopar. Kodlama bilgisi pek olmadığı için işin içinden çıkmak için uğraşır. Ya bir kodlama yapabilecek bir arkadaş  bulmalıdır ya da ücretsiz sistemlerden faydalanmalıdır. İşte tam bu noktayı anlatıyor bu davet. Diyorlar ki, gelin sizinle beraber oturup bir web site tasarımı hazırlayayım. Daha sonra bunu WordPress’e uygun hale getirip müşteriye yönetilebilir bir web sitesi sunalım. Hem siz rahat edin hemde müşteriniz.

Canlı yayın Adobe Günlüğü üzerinden olacaktır. 8 Temmuz günü sabah saat 10:00′da başlayacak ve tahmini olarak 17:00′de bitecektir. Adobe günlüğünde okuduğuma göre böyle bir şeyi ilk defa yapıyorlar ve bitiş saatinin değişebileceği söyleniyor. Erken de olabilir daha geç de olabilir.

Aşağıda ufak bir öneri ve hemen ardından günün programı mevcut.

Son olarak teknik gereksinimlerinizi belirtmemizde fayda var. Yapacağımız çalışmayı 8 kamera ile yayınlayacağız. Bilgisayar başından takip edenler bunları 2 ayrı ekrandan izleyecekler. Birinde sürekli olarak bilgisayar ekranını görüntülerken, diğerinden de konuları anlatan ve izleyen kişileri yayına vereceğiz. Dolayısıyla sağlıklı bir izleme için minimum 1 Mbit bağlantı hızına ihtiyacınız olacak. Eğer hattınız 1Mbit ve üstü ise lütfen bu sırada başka amaçlarla kullanılmadığından emin olun.

“Dreamweaver ve WordPress ile dinamik siteler tasarlamak” Canlı Yayın Taslak Programı

• TARİH: 8 Temmuz 2010, Perşembe,
• SAAT: 10:00 – 17:00,
• YER: AdobeGunlugu.com
• KONUŞMACILAR: Barış Özcan (Adobe), Halid Özgür (Medyasoft), Hakan Çamoğlu (Vidobu.com), Erhan Meydan (Vidobu.com)

1. Açılış

Barış Özcan, 15 dakika

· Canlı yayın projesi tanıtımı ve amacı

· Ekip ve Stüdyo

2. Dreamweaver Nedir? WordPress ile ilişkisi nasıldır?

Barış Özcan, 30 dakika

· Dreamweaver tanıtımı

· WordPress tanıtımı

· WordPress kaynakları

· WordPress örnekleri

3. WordPress Kurulumu

Erhan Meydan, 30 dakika

· Local PHP kurulumu

· Local MySQL kurulumu

· WordPress paket kurulumu

· WordPress tema kurulumları

· WordPress eklenti kurulumları

4. Blog Arayüz Tasarımı

Halid Özgür, 90 dakika

· Blog tasarımında dikkat edilmesi gereken konular

· Tasarım sürecinde kullanılabilecek programlar

· Program entegrasyonları

5. Arayüz Tasarımının HTML’e dökülmesi

Hakan Çamoğlu, 45 dakika

· Temel DIV yapısı oluşturmak

· CSS ile menü tasarımı

· Alt sayfaların oluşturulması

6. Hazırlanan HTML tasarımın WordPress ile Entegrasyonu

Hakan Çamoğlu, 45 dakika

· Ana sayfa hazırlanması

· Alt sayfaların hazırlanması

· Modüllerin oluşturulması

7. HTML5 ile Hazırlanan Tasarımı İnteraktif Hale Getirmek

Hakan Çamoğlu, 45 dakika

· HTML5 ile degrade kullanımı

· HTML5 ile yuvarlak köşeler

· HTML5 ile animasyon

8. Tamamlanan Projenin Yayınlanması

Hakan Çamoğlu, 30 dakika

· Hosting ve Domain ile ilgili temel bilgiler ve ayarlar

· Dosyaların upload edilmesi

· MySQL database oluşturmak

· SEO çalışmaları

Bu konunun Adobe Günlüğünde ki genel açıklaması ise burada.

102 views

Web sitelerinin -daha çok- header alanında, fotoğraflarla hazırlanmış slaytlar görüyorsunuz. Bunların bazıları kendi kendine hareket ederken bazıları ise kullanıcı tarafından değiştiriliyor. Aynı bu mantığa dayalı bir form hazırlanmış. Online demosuna buradan bakabilirsiniz.

Aşamalı olarak form bilgilerini eksiksiz doldurtuyorsunuz kullanıcıya. Sırasıyla bütün alanları doldurarak gönderme işlemini gerçekleştiriyor. Eksik alan olduğunda da uyarı veriyor ve bilgileri göndermiyor. Aslında bu tarz formlar çok kullanışlı. Demoyu incelediğinizi düşünerek söylüyorum. 5 farklı alan belirlenmiş, her birinde ayrı ayrı bilgiler alınıyor kullanıcıdan. Aynı formu düz html ile yapmaya kalksaydık daha fazla yer kaplayacaktı. Bu şekilde yerden kazanç sağlıyor daha estetik duruyor.

Bu güzel form çalışmasını buradan veya buradan indirebilir, kullanabilirsiniz. Çalışmanın ayrıntılı açıklama sayfası ise burası.

50 views

89 views

Bu güzel scriptin birkaç özelliğini şöyle sıralayabilirim:

• Çoklu dil seçeneği ve yeni dil ekleme özelliği.
• Sepete ekle modülünün olması.
• Üye olmadan ürün siparişi verme özelliği.
• Sınırsız kategori ve altkategori oluşturma.
• Her ürün için resim, kısa açıklama ve uzun açıklama ekleyebilme.
• Admin panelinden gelen siparişleri yönetmek.
• Belli başlı kargo firması ve fiyatı eklemek.
• Sabit sayfa eklemek, güncellemek, silmek.
• Site içi arama yapabilmek.
• Sayfaları yazdırma özelliği.
• İletişim formu bulunması.
• Farklı birkaç tema ile çalışma özelliği.

Saydığım özelliklere ek olarak daha farklı özellikleride bulunabilir belki ama benim görebildiklerim ve aklıma gelenler bu kadar. Artık gerisi size kalmış. İster kullanın ister kullanmayın.

Online Demo: http://opensolution.org/Quick.Cart/demo/?sLang=en
Download: http://opensolution.org/download,en,18.html?sFile=Quick.Cart/Quick.Cart_v3.4.zip
Temalar: http://opensolution.org/download,en,18.html?sDir=Quick.Cart/skins
Bilgi: http://opensolution.org/quick.cart,en,9.html
Diğer Download: http://opensolution.org/download,en,18.html?sDir=Quick.Cart

130 views

Sadece bir örnek vererek açıklamanın uygun olacağını düşünüm. Zamanla sindire sindire tek tek örnekler yaparak ve bunlarıda siz uyguladığınızda tam bir öğrenme olacaktır, eminim.

İlk olarak web sitesi yapımı için kullandığınız editörünüzü açın. Sadece bir tane html sayfası oluşturun. Html sayfası içerisine ilk olarak aşağıdaki CSS kodlarını </head> tagından önce sayfaya yerleştirin.

[css]

<style type=”text/css”>
body {
background: #F8F8F8; /*sayfa arkaplan rengi*/
}
#menu a{
font: 11px Verdana; /*menu font özellikleri*/
color: #191919; /*yazının rengi*/
padding: 10px; /*menünün içten olan boşluğu*/
background: #CECECE; /*arkaplan rengi*/
text-decoration: none; /*yazının alt çizgisinin iptal edilişi*/
}
#menu a:hover{
background: #191919; /*arkaplan rengi*/
color: #CECECE; /*yazının rengi*/
}
</style>

[/css]

CSS kodları içerisinde gerekli açıklamları yaptım. Siz bu kodlar arasındaki bütün sayısal değerleri değiştirerek farklı yöntemler deneyebilir ve yazılan o satırdaki kodun tam olarak ne işe yaradığını daha iyi kavrayabilirsiniz. Bunu kesinlikle yapın. Mesela padding: 10px; olan kod satırını padding: 100px; yapın. Sayfayı kaydedin inceleyin. Sonra eski haline getirin. İkisi arasındaki farkları inceleyin. Bu şekilde birşeyleri kurcalayarak daha iyi ve kalicı şekilde öğrenebilirsiniz. Ben bazen bu şekilde yapıyorum.

Aşadağıki kodları ise html sayfanızın <boy> tagından sonraki alana ekleyin. Kodlarımız bizim menümüzü oluşturuyor.

[html]

<div id=”menu”>
<a href=”#”>Anasayfa</a>
<a href=”#”>Hakkýmýzda</a>
<a href=”#”>Hizmetler</a>
<a href=”#”>Referanslar</a>
<a href=”#”>Ýletiþim</a>
</div>

[/html]

Kodların hepsini yerleştirdiyseniz sayfanızı kaydedip deneyebilirsiniz. Burada önemli olan CSS kodlarının ne işe yaradığı. Az öncede dediğim gibi kodları bol bol kurcalayın, sayısal değerleri ile oynayın, aradaki farkları kavrayarak daha iyi öğrenin. Hazırladığımız bu menünün demosunu bu sayfada bulabilirsiniz. İndirmek için ise bu adresi kullanabilirsiniz.

***

Bu arada söylemeden edemeyeceğim. RSS abone sayım şuanda bu yazıyı yazarken tam olarak 74. Bu sayı her geçen gün arttıkça benimde yazma hevesim artıyor. Bana göre bu arak çok düşük. Şuanda en kötü ihtimalle 300 felan olmalıydı. Bu da bu blogdan henüz pek fazla kişinin haberdar olmadığını gösteriyor bana göre. Eğer bu blogu sevdiyseniz tanıdıklarınıza önerebilir ve RSS abonesi kazandırabilirsiniz. Teşekkürler.

103 views