bildirgec.org

HTML5, henüz geliştirilme ve dağıtım aşamasında olsa, hatta birçok tarayıcı sürümü tarafından desteklenmemiş olsa da oldukça sevilen bir dil halini aldı. Klasik web yapısını tümüyle değiştiren bu farklı dil ile herhangi bir eklentiye gerek kalmadan tümüyle dinamik tasarımlar oluşturulabiliyor. Tamamen açık kaynak kodlu olduğu için aşağıdaki uygulamaları inceleyebilir ve siz de benzer çalışmalar yapabilirsiniz. Muhteşem HTML5 Efektleri;

Breathing Galaxies

Noise Field

Keylight

İlk önce SEO kelimesinin nerden geldiğini söyleyelim. Search Engine Optimization İngilizce kelimelerin baş harflerinden gelir. Türkçeye çevirecek olursak Arama Motoru Optimizasyonu anlamına gelir.

seo

Şimdi biraz SEO kelimesinin anlamına gelelim. SEO tamamen pazarlama alanına giren bir konudur. Web sitenizi daha iyi pazarlamanıza yarayan kuralları içeren bir sektördür. Evet artık SEO bir sektör haline gelmiştir. Doğru yapıldığında hedeflenen kitleye kitlesel medya araçlarından ulaşılması daha avantajlıdır. Düz anlatmak gerekirse doğru yapıldığı takdirde müşterinize daha hızlı ulaşırsınız böylelikle daha fazla para kazanırsınız ve siteniz daha tanınmış olur. Şimdi SEO’da önemli olan uygulamalardan bahsedicem.
Anlatacaklarımın daha iyi anlaşılabilmesi için başlıklar halinde sıraladım.

• web siteniz nasıl olmalı

1.) Bir web sitesinin kolay kullanılabilir olması için ziyaretçi “aradığımı bulabilmek için buraya mı yoksa buraya mı tıklamalıyım” sorusu kafasından geçmemelidir. Öncelikle zaman herkes için çok önemlidir.

CSS3‘ün en büyük sorunlarından biri birden fazla tarayıcıda çalışmasını sağlayabilmektir. bu şu anlama geliyor: en basitinden bir gölge efekti verebilmek için çapraz tarayıcı uyumlu bir şekilde kod yazmanız gerekiyor.

bu yazıda ise basit kullanıcı arabirimleri ile tamamen özelleştirilebilir kodlar üretebileceğiniz CSS3 araçları yer almaktadır.

CSS3 Generator
Efektlerin hepsini tamamen özelleştirebileceğiniz ve popüler CSS3 özellikleriden istediğinizi seçebileceğiniz bir araçtır.

CSS3 Please
bir kod düzenleyicisinde kod yazıyormuşsunuz gibi görünümü olan araç sağ üst köşede size önizleme olanağı sunmaktadır.

CSS3 Click Chart by Impressive Webs
çok fazla özelleştirilebilir değil fakat kodunu görmek istediğiniz efekte tıklamanız yeterlidir. ama şu da bir gerçek fazlasıyla efekt örneği var.

chrome‘da yazdırma önizleme özelliği ister misiniz? ben çok isterim. ancak biraz daha beklememiz gerekecek. çünkü buna benzer özellikler chrome 6 ile birlikte gelecek.

bilindik yazılım geliştiriciliği, insanların dikkatini daha fazla çekmek için eğlenceli özellikler ekleme noktasında birleşmeye başladı. bu noktanın odağında, kalıplaşmış kod kullanımıyla chrome’un altıncı sürümü, önemli bir kilometre taşı olacağa benziyor.

google, bu tarayıcıyı sürekli geliştirmeye tabi tutacağına inanıyor. bu inanç, microsoft internet explorer, opera, mozilla firefox ve apple safari gibi kullanışlı yazılımların yarattığı çıtayı bir anda yakalamaya yetti. tarayıcı mayıs ayında elde ettiği %7.0’lık kullanım oranını, haziranda %7.2’ye taşımayı başardı.

Henüz tam olarak yaygınlaşmayan ve geliştirme süreci devam eden HTML5 ve CSS3 ile şu anki durumda bile muhteşem uygulamalar yaratılmakta. Web sayfalarını tamamen interaktif ve etkileşimli hale getiren ayrıca görsel açıdan farklı ögeler yaratan bu tasarım dilleri yeni sürümleri ile oldukça fark yaratmakta. Aşağıdaki uygulamaların nasıl yapıldıklarını inceleyebilir veya tamamı ücretsiz olarak dağıtıldığı için siz de web sitenizde kullanabilirsiniz. İlgi Çekici HTML5 ve CSS3 Uygulamaları;

CanvasMol

Slidenafill, aklınıza gelebilecek her molekülü size gösterebilen harika bir html5 uygulaması. ATP, TNT, DNA gibi bazı molekülleri 3 boyutlu olarak gösterir. Ayrıca isterseniz renklendirmeyi değiştirebilir; x,y,z eksenleri etranfında oynatmayı durdurabilirsiniz. Birbirine bağlı birçok bloktan oluşan uygulama içinde bir periyoduk cetvelde bulunmakta.

GoogleBox

Google‘ın 3 boyutlu heryönden gözükebilen şekli olan Googlebox bir css3 uygulamasıdır. Kutuyu istediğiniz gibi görebilmenizin yanında boyutlarını değiştirebiliyorsunuz.

Yapmak istediğim şu;

sağdaki menü alanındaki linke tıklayınca sol bölümdeki div alanına ilgili html sayfasının çağrılması.Her link bir html sayfasını çağıracak.
Örneğin: Link1–>1.html, Link2–>2.html…..
Aslında bir tek link için yapmıştım ama öteye taşıyamadım.Kodlar şöyle idi;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://arsiv.pilli.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
    $('a').click(function(){
        $('#metin').load('index.html');
    });
});
</script>
</head>
<body>
<a href ="#index.html">tıkla</a>
<br />
<br />
<p id="metin">ben <strong>eski</strong> bir içeriğim</p>
</body>

Bunu istediğim tarzda nasıl yapabilirim.Yardımcı olabilecek arkadaşlara teşekkürler.

Web önyüzü(frontend) temel olarak üç öğeden oluşur. İşaretleme dili HTML, XHTML, WML gibi işaretleme dilleri. Bunlar sayfanın ana iskeletini oluşturur

Stil dosyaları
CSS. Bunlar ise iskeletin üzerine giydirilen görsel öğeleri belirler.

Dinamik öğeler
JavaScript . JavaScript ise sayfalarda, istemci(client) tarafında dinamik istekler yapmamıza yardımcı olur.

Web önyüz kodlamada yapılan en büyük yanlışlardan birisi de bu üç öğenin birbiri içersinde gereğinden fazla yer almasıdır. Bu üç öğenin etkileşimi kaçınılmaz olsa da, bu etkileşimi en aza indirmek, hem daha güzel/anlaşılır kodlar üretmek, hem de daha hızlı ve kararlı web önyüzleri üretmemizde faydalı olur.

Bu yazıda, nasıl daha standart, anlaşılabilir, güzel, sade web önyüz kodları üretebileceğinizi anlatmaya çalışağım. Bir web önyüzü;

jsTree, jQuery eklentisi olarak paketlenen çapraz tarayıcı ağaç bileşenidir.Javascript tabanlı olan bu uygulama üzerinde kategorili listeleme yapabileceğiniz gibi üzerinde kayıtlı bulunan tüm girdiler üzerinden eşzamanlı olarak işlem yapabilirsiniz.

Listeleme, Site Haritası hatta menü olarakta kullanılabilecek çok yönlü bir uygulama olan jsTree, ücretsiz olarak dağıtılmakta, ayrıca GPL ve MIT lisanslarına sahip bir jQuery uygulamasıdır.

Kategoriler ekleme, anında isim değişikliği, dosya ve klasörleri düzeltebilme/silebilme, sürükle-bırak özelliği ile içerisindeki nesneleri herhangi bir klasör yada katagori içerisinden bir başkasına taşıyabilme gibi birçok özelliği bulunmaktadır.

Tema desteği sayesinde tamamen kişiselleştirilebilir ve HTML, JSON, XML gibi verikaynaklarının birçoğunu destekler. Ayrıca değiştirilebilen animasyonlu açılışı ve sayfa harici yükleme özelliği bulunmakta. Arama fonksiyonu, çerezleri optimize etme, klavye ile işlem yapma gibi özellikleri ile jsTree muhteşem bir uygulamadır.

Her geçen gün ajax ile yapılan dolayısıyla jQuery ile yapılan uygulamalar artmakta. Artık flash alternatifi olarak görülen jQuery ile inanılmaz uygulamalar yapılmakta. jquery.com‘dan derlenen haziran ayının en iyi jQuery uygulamaları;

dualSlider – Demo

Çift taraflı jQuery tabanlı bir taraflı olan dualSlider ile hem manşet için hazırladığınız alt metin hem de manşetin kendisi küçük bir zaman aralığı ile kayma efektini gerçekleştirir. Birçok sayfa kullanabileceğiniz bu uygulamada resim yerine herhangi bir html dosyası, video, metin gibi birçok alternatif tercihte bulunabilirsiniz. Ayrıca slayt özelelliğini, “Play/Stop” (Başlat/Bitir) tuşu ile başlatıp durdurabilirsiniz.

jQuery Easy Confirm Dialog – Demo

jQuery ile hazırlanan bu farklı tooltip uygulamasını web sayfalarınızdaki ziyaretçilerinize uyarı niteliğinde sunabilirsiniz. Farklı uyarılar olarak kullanabilir veya belirli soruları sormak için kullanabileceğiniz muhteşem bir jQuery tooltip uygulaması.

Şahsen yıllardır ayıklayıp biriktirdiğim, binlerce yer imi arasından seçip ayıkladıklarımı; siz değerli bildirgec.org kullanıcılarına sunuyorum. Artık paylaşmalıyım dedim ve buraya yazdım.
Görüleceği üzere çoğunluğu bildirgec.org mimlerinin oluşturduğu derleme, umarım faydalı olur.
Unutmadan belirteyim, içerikler tasarım ağırlıklıdır..

Şimdiden teşekkürler..

http://djdesignerlab.com/2010/04/25/25-fresh-and-useful-jquery-plugins/

http://www.nobledesktop.com/download/shortcut_guides/indesign_cs4_shortcuts_pc.pdf

http://acrisdesign.com/2009/09/70-dazzling-light-effect-photoshop-tutorials/

http://arsiv.pilli.com/yazi/karikatur-karakterleri-yaratma-dersleri