bildirgec.org

Günümüz Web sitelerinin vazgeçilmez elemenlarından olan Web formları, web sitesi ile kullanıcı arasında cereyan eden interaktif etkileşim için, olmazsa olmaz bir web elemanı konumundalar.

En fazla kullanıldığı yerler olan, üyelik işlemleri gibi bilgi girişlerinin yoğun bir şekilde yapıldığı yerlerde kullanılan web formlarında bulunması gereken en önemli işlevsel özellik ise; kullanıcılar tarafından girilen bilgilerin, web geliştiriciler tarafından belirlenmiş geçerlilik kıstaslarına uyup uymadığının kontrol edilmesi.

Oldukça önemli olan bu işlevin tam olarak yerine getirilesini sağlamak amacı ile geliştirilmiş bir kütüphane olan ValidForm Builder, PHP ve JavaScript (JQuery) ile geliştirilmiş ve hem istemci taraflı hem de sunucu taraflı olarak, geçerlilik denetlemesini yapabilmekte.

youconvertit en kısa ve en türkçe tanımıyla “çevrimiçi dönüştürgeç”. marifetlerinin hepsini kısaca anlatmak bırakın iki sözcüğü bir bildiriye bile sığmayabilir.

sitenin dört ana bölümü var.

1. bölüm:dosya dönüştürücü (convert file(s))
e-posta adresinizi yazıyor, dosya ya da dosyalarınızı yüklüyor, hangi formata dönüştürmek istediğinizi seçiyor ve gönderiyorsunuz. sayısız belge formatı, ses dosyaları, video dosyaları, resim dosyaları ve hatta arşiv (sıkıştırılmış format) dosyaları için bunu yapabilirsiniz.

Eğer web tasarımı ile uğraşıyorsanız @font-face tanımlamaları ile istediğiniz fontları sitenizde kullanmanın olağan olduğunu biliyorsunuzdur. OTF ve TTF gibi değişik uzantılı fontları birçok tarayıcıda sorunsuz olarak gösterebiliyorsunuz. Fakat iş bu fontları Internet Explorer’da kullanmaya gelince malesef tahmin edeceğiniz gibi yine bir sorunla karşı karşıya kalıyoruz.

@font-face desteği aslında Internet Explorer 4’ten beri Microsoft’un desteklediği bir deklerasyon. Fakat bu destekleri biraz tutucu. Çünkü IE serisi sadece EOT (Embedded Open Type) fotmatlı fontları desteklemekte. Bu formatın seçilmesinin nedeni ise bu formatlı font dosyalarının kopyalanarak kişisel kullanıma izin vermemesidir.

Bu yazıda sevdiğiniz fontları nasıl EOT formatına çevireceğinizi ve sitelerinizde nasıl kullanacağınız konusunda ipuçlarını kullanarak sitelerimizin albenisini arttıracağız.

Tarayıcılar ve desteklenen formatlar

Birinci Adım: Ücretsiz bir font seçin
Internet’te birçok ücretsiz font sunan site var. Lisans problemleri ile karşılaşmak istemiyorsanız tamamen ücretsiz lisansla yüklenmeye sunulan fontları bularak sitelerinizde kullanmaya bakın. Bu tarz fontların sıralandığı fontex.org mutlaka göz atılması gereken kaynaklardan.

Daha önce [1] [2] [3] yüksek kaliteli css ve xhtml web şablonlarını görmüştük. Dünya genelinde bu çalışmaları ücretsiz olarak bizlere sunan tasarımcılara teşekkürlerimizi iletiyoruz. Şablonları kullanmadan önce kullanım talimatlarını ve lisans anlaşmalarını okuduğunuzdan emin olun. Aşağıda yüksek kaliteli xhtml ve css şablonlarına ulaşabilirsiniz.

1. T-20

test | indir

2. Shape

test | indir

Firebug

Firebug daima web geliştiricileri arasında en yoğun kullanılan en popüler araçlardan birisi olmuştur. Firefox‘u muhteşem yapan eklentilerden birisi bence. Bu yazıda firebug kullanmanız için sizi ikna edebilecek 10 konudan bahsedeceğim.

Sebep 1: Konsol

Firebug – Konsol

firebug’ı açınca ilk farkedeceğiniz şey (ister sağ alttaki simgeye tıklayarak açın, ister ctrl+f12 kısayolunu kullanın) karşınıza çıkacak olan konsol paneli olacaktır. Firefox’un hata konsolu ile çok benzeştiğini düşünseniz de, ortak özellikleri şunlar:
– Hata, uyarı, ikaz görüntüleme
– Javascript kodu çalıştırabilme
Ancak firefugkonsolu eşsiz kılan ek özellikler şunlar:
– Javascript, CSS, XML, xmlhttprequest (ajax) ve firefox’un kendi iç hatalarını görüntüleyebilir.
– mevcut sayfa üzerinde javascript kodu çalıştırabilir.
Örnek bir sayfa üzerinde incelemek gerekirse.

sebep 2: HTML

Firebug – Html

Firebug’un panelleri arasında belki de en çok zaman geçireceğiniz panel html paneli.
– 1. Ögeyi incele olarak çevirebileceğimiz bu düğme, hem hangi ögeyi incelediğinizi kısaca size gösterirken, hem de istediğiniz tag’i seçme konusunda inanılmaz bir kolaylık sağlıyor.
– 2. Burada seçili olan tag’in hiyerarşik yapısını görebilir ve üzerinde değiştirmekten silmeye kadar her türlü işlemi yapabilirsiniz.

CMS (İçerik Yönetim Sistemi) genellikle bir Web uygulaması olarak, HTML içeriği oluşturmak ve yönetmek için kullanılır. Günümüzde tercih edilen birçok sistem (özellikle ; Drupal,Joomla!) yeni başlayanların karşısına çok zorlu engeller (kurulum,kullanım,geliştirmek) ile çıkarlar. Eğer, küçük-orta derece de bir web sitesi tasarlanmak, kullanmak ve geliştirmek istiyorsanız, kolay kurulum ve kullanımları ile tercih edilebilecek, web tasarımcıları ve geliştiricileri için aşağıda listelenmiş xml tabanlı cms‘ler işinize yarayacaktır.

web üzerine öğrenip öğrenebileceğiniz neredeyse herşey bu sitede anlatılıyor ve hepsi de ücretsiz. anlatılan konular üzerinde size temel ve orta seviyede uygulama bilgisi anlatılıyor. ve bu bilgiler oldukça değerli olduğu için de, çabuk ve kolay bir öğretim sergiliyorlar. peki bir web geliştiricisi nereden başlamalı? w3schools bu soruyu sizin için cevaplayacak ve sizin profesyonel bir web geliştiricisi olmanızı sağlayacak kesin bir kaynak ve sizi geleceğe hazırlayacak. her konuda web öğretimleri, kendi kendinize yapabileceğiniz kolay örnekler, web geliştirmesi üzerine standart referanslar ve belki de en önemlisi web sertifikasyonları yapıyorlar.

1. HTML Öğretimleri
   – html öğrenin!
   – xhtml öğrenin!
   – css öğrenin!
   – tcp/ip öğrenin!
2. XML Öğretimleri
   – xml öğrenin!
   – dtd öğrenin!
   – xml dom öğrenin!
   – xslt öğrenin!
   – xquery öğrenin!
   – xlink öğrenin!
   – xforms öğrenin!
   – soap öğrenin!
   – wsdl öğrenin!
   – rss öğrenin!
   – wap öğrenin!
   – web servisleri öğrenin!
3. İstemci Script Öğretimleri
   – javascript öğrenin!
   – html dom öğrenin!
   – dhtml öğrenin!
   – vbscript öğrenin!
   – ajax öğrenin!
   – e4x öğrenin!
   – wmlscript öğrenin!
4. Sunucu Script Öğretimleri
   – sql öğrenin!
   – asp öğrenin!
   – ado öğrenin!
   – php öğrenin!
   – asp.net öğrenin!
   – .net mobil öğrenin!
5. Multimedya
   – medya öğrenin!
   – smil öğrenin!
   – svg öğrenin!
   – flash öğrenin!
6. Web Geliştirme
   – web geliştirme öğrenin!
   – web i̇stemcileri öğrenin!
   – web sertifikasyonu öğrenin!
   – web sağlayıcı öğrenin!
   – web w3c öğrenin!
   – web kalitesi öğrenin!
   – web semantic öğrenin!
7. Web Standart Referansları
8. Karakter Setleri
9. Örnekler
10. İstatistikler
    – istemci istatistikleri
    – platform istatistikleri
    – çözünürlük istatistikleri
11. Sınavlar
12. Sertifikasyon
13. Doğrulama

Her Internet kullanıcının, web sayfasından ilk beklentisi, içeriğin hızlı olarak sunulmasıdır,
Bu konuda sizlere Web sayfalarının optimizasyonu konusunda çeşitli bilgi taktik ve püf noktalardan bahsedeceğim, ilk dersimiz CSS

CSS’in varlığı, başlı başına optimizasyon ihtiyacımızı karşılamaktır..
Küçük ayrıntılara dikkat ederek, web sayfasının hızlı yüklenmesi ve bandwidth kullanımından kar elde edebiliriz.
Böylece daha mutlu kullanıcılar ve daha az band kullanımı sağlamış oluruz.

Fakat her ne kadar, css/still dosyaları sitede kullanılan resimler kadar bandwidth kullanımına etki etmese de,
onbinlerde kullanıcının request gönderdiği sayfalarda (facebook, yahoo vb) en ufak optimizasyon çalışması büyük getirileri olacaktır.

xhtml ve css tema

Bu yazımda sizlere yeni başadığım bir sitenin başlangıç kodlarını paylaşacağım, öncelikle websitemizin tasarımını belirleyeceğiz, klasik bir örnek seçiyorum , websitemizin boyutlarını belirlemek için bir kapsayici katman atıyoruz ve sayfayı üçe bölüyoruz , ilk kısım header yani başlık: buraya bir flash banner ,foto galeri vs. koyalım, ikinci kısım orta alan olarak belirlensin: bu alanda da iki adet div kullanıp sitemizin sol tarafına bir sidebarve sağ tarafına da bir içerik alanı oluşturacağız. orta alanı da bitirdikten sonra hemen altına foote yani altlık ayarlayalım .footer alanı genelde kapsayıcı alanın en altında durur fakat sitenin biraz daha kullanışlı olabilmesi için footer alanını biraz yukarıda bırakıcaz.
gelelim kodlamaya :
XHTML Kodlarımız şu şekilde olacak

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

<body>
<div id="kapsayici">
<div id="header">
 <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="720" height="200" title="eca-banner">
    <param name="movie" value="herhangi-bir.swf" />
    <param name="quality" value="high" />
    <embed src="http://arsiv.pilli.com/eca.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="720" height="200"></embed>
  </object>
</div>
<div id="navigasyon" class="ClearFix">  
      <div id="sarkan_menu">
             <ul>
              <li><a href="#">Anasayfa</a></li>
              <li><a href="#" class="">Hizmetler</a></li>
              <li><a href="#">Hakkinda</a></li>
              <li><a href="#">Iletisim</a></li>
            </ul>
    </div>

</div>
<div id="orta">
     <div class="kutu" id="sol-menu">
                <div class="kutu" id="menu">
                <h4 align="center">MENÜ</h4>
                <div>
                    <ul>
                        <li> <a href="javascript:void(alert('bu bölüm henüz hazir degil !'));">XHTML NEDIR?</a> </li>
                        <li> <a href="javascript:void(alert('bu bölüm henüz hazir degil !'));">CSS</a> </li>
                        <li> <a href="javascript:void(alert('bu bölüm henüz hazir degil !'));">XHTML ve CSS</a> </li>
                        <li> <a href="javascript:void(alert('bu bölüm henüz hazir degil !'));">TASARIM</a> </li>
                   </ul>
                </div>
           </div>
	</div>
	<div id="icerik"></div>
</div>
<div id="footer">altlik -  telif hakki vs... </div>
</div>
</body>

Sitemizin header yani başlık kısmına bir de navigasyon alanı yerleştirdim bu alana eburhan ‘ın sarkan menulerini koydum .
Gelelim CSS kodlarımıza :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

body { margin:0;
padding:0;
background-image:url(arka-body.png); background-repeat: repeat-x;
	font-family: Arial, Helvetica, sans-serif;
}

td {
	font-family: Arial, Helvetica, sans-serif;
}

th {
	font-family: Arial, Helvetica, sans-serif;
}
#kapsayici{
 margin: 0 auto; width:720px; height:960px; }
#header{height:200px; background-color:#3399FF;}
#navigasyon{height:40px; background-color:#FF9900;}
#orta{height:620px; width:720px; background-image:url(arka-orta.png); background-repeat:repeat-x;}
#sol-menu{ width:200px; float:left; height:600px; background-image:url(arka-orta.png); background-repeat:repeat-x;}
#sol-menu > menu >h4{background-color:#999999;}
.kutu{ margin:0; padding:0;}
#icerik{ width:518px; height:600px; float:right;}
#footer{background-color:#FF9900; height:25px;}
      #sarkan_menu ul {
          margin: 0;
          padding: 0;
          height: 100%;
          overflow: hidden;
          list-style: none;
      }

      #sarkan_menu ul li {

          float: right;
          margin-right: 1px;
          font: bold 12px/14px Arial, Helvetica;

      }
      #sarkan_menu ul li a {
          display: block;
          padding: 5px 0;
          width: 85px;
          border-top: 8px solid #3f3f3f;
          color: #3f3f3f;
          text-align: center;
          text-decoration: none;
      }
      #sarkan_menu ul li a:hover,
      #sarkan_menu ul li a.aktif {
          padding-bottom: 8px;
          border-top: 8px solid #101010;
          background: #101010 url(mouse-over.png) 
           bottom no-repeat;
          color: #fff;
      }

arkaplan da kullandığım resim dosyalarını vermedim , bunların yerine geçici olarak renk verebiliriz. kabaca bir şablon hazırlamaya çalıştım , eleştirilerinizi ve önerilerinizi her zamanki gibi bekliyorum 🙂

HTML( HyperText Markup Language ) İnternet üzerinde tasarımlarınızı oluşturmanız için gereken basit betik dilidir. Web sitelerinin temel taşıdır. Kısacası Webde herşey HTML üzerine kuruludur.

HTML’in birkaç versiyonu bulunmaktadır.

Son versiyonlar :

• HTML 4.01 Transitional
• HTML 4.01 Strict
• XHTML 1.0 Transitional
• XHTML 1.0 Strict
• XHTML 1.1
• XHTML 1.0 Mobile

olmak üzere 6 ya ayrılıyor.( HTML 5 henüz genel kullanıma alınmadı. )

Strict’in kuralları katıdır ve W3C kurallarına tam olarak uymak zorundadır.