Profil
e-destek, web üzerindeki bütün konular ve araştırdığınız bütün herşey burada
e-destek
istanbul
Türkiye
Bedava-Sitem
01 Mart 2009, 11:48. 0 fav. e-destek.
Etiketler:
bedava-sitem
Değerli Arkadaşlar bedava-sitem.com Türk İnternet Kullanıcılarına Çok Büyük bir imkan sunuyor.
bedava-sitem.com ile artık web sitesi yAapmak çok basit. Şahane bir sitenin temelini atmak için sadece 5 dk nızı harcamanız yeterli olacak.
Tr.gg Uzantılı örneğin; toplist-site-ekle.tr.gg -> alan adıda gayet güzel olan bir web site sahibi olmanız artık çocuk oyuncağı oldu . bedava-sitem.com'un imkanları saymakla bitmez. Web tasarım bilginiz olmasına hiç gerek yok. Çok baist bir admin panelide var buradan sitenizi çok kolay bir şekilde yönetebiliyorsunuz.
Aşşağıdaki linke tıklayarak sizde hemen web sitenizi internette yayınlamaya başlayabilirsiniz.
www.bedava-sitem.com
BEDAVA-SİTEM SELİN KİMDİR ?
Selin Bedava-Sitem.com'un Türkiye'deki sorumlusudur.
Tercümeleri yapar, ve forumda Teknik Çalışmalar hakkında Bilgi Verir.
Yönetim Bilisim Sistemleri bölümünde master yapmaktadir ve bircok projede calismaktadir.
Cunobag (Cüneyt BAĞCI) KİMDİR ?
Cüneyt Öğretmen:
Bir edebiyat öğretmeni, bir yazar ve bir şairdir..
Ayrıca Bedava-sitem.com'un türkiye uzantısı TR.GG sitelerinin, forum yöneticisidir..
Günün hemen hemen her saatinde forumda cüneyt ( cunobag ) hocamızı görebilirsiniz 
Google Web Yoneticisi Araclari
01 Mart 2009, 11:47. 0 fav. e-destek.
Etiketler:
google web yoneticisi araclari
Google web yöneticisi araçları hesabınız, eklediğiniz siteler, Site Haritaları, bunların son güncellemeleri hakkında bilgi verir ve Google tarafından taranmak üzere yeni Site Haritaları eklemenize olanak tanır.Giriş yapmak için bir Google Hesabı gerekir. Henüz Google Hesabınız yoksa Hesaplar ana sayfamızdan bir hesaba kaydolabilirsiniz.Gmail, Orkut, Gruplar, Arama Geçmişim veya Uyarılar kullanıyorsanız, bu, zaten bir Google Hesabınız olduğu ve hemen oturum açıp Google web yöneticisi araçlarını kullanmaya başlayabileceğiniz anlamına gelir.
Hesabınıza bir site eklediğinizde ve sitenin sahibi olduğunuzu doğruladığınızda, size sitenizle ilgili istatistik bilgileri veririz.Ayrıca tarayamadığımız URL'leri listeler ve bu URL'leri tarayamama nedenlerimize ilişkin bilgiler sunarız.
Ayrıca, bize sitenizdeki sayfalar hakkında daha fazla bilgi vermek için hesabınıza bir site haritası ekleyebilirsiniz.Bu Site Haritasını işleme alırken karşılaştığımız hataları size gösteririz.
Bir siteye ilişkin istatistikleri ve hataları görüntülemek için Site sütununda o sitenin bağlantısını tıklayın.Sitenin doğrulanıp doğrulanmadığına bağlı olarak görebileceğiniz bilgiler değişir.
Siteniz doğrulanmadıysa görüntüleyebileceğiniz bilgiler şunlardır:
- Site Haritası ayrıntıları ve hatalar
- Sitenize ilişkin temel dizin bilgileri
- robots.txt analizi
Siteniz doğrulandıysa görüntüleyebileceğiniz bilgiler şunlardır:
- Sitenize ilişkin gelişmiş dizin bilgileri
- Sitenize ilişkin sorgu istatistikleri
- Sitenize ilişkin tarama istatistikleri
- Sitenizin sayfa analizi
- Sitenizdeki tarayamadığımız URL'ler ve bunları tarayamama nedenimiz
Başlamak için sitenizi Google web yöneticisi araçları hesabınıza ekleyin ve doğrulayın.
css nedir
01 Mart 2009, 11:16. 0 fav. e-destek.
Etiketler:
css nedir
CSS Nedir?
Not: Bu belge geliştirilmektedir. Belgenin en yenisi hep www.toplist-site-ekle.tr.gg adresinde olacaktır. Belge ile ilgili görüş, öneri, istek soru ve değerlendirmeleriniz için:
Binlerce sayfayı tek merkezden yönetebilirsiniz
Müşteriniz teklifinizi onayladı. Tasarım tamamlandı. Siteyi tam yayınlayacakken, genel müdür sizi toplantıya çağırdı. Tasarımda bazı değişiklikler yapılmasını istedi. Eğer, biçimlendirmeleri yapmak için aşağıdaki geleneksel yolları tercih ettiyseniz, yöneticinin istediği değişiklikleri yapmak çok uzun sürecektir. Her sayfanın kodlarına ulaşıp, aşağıdaki işaretli yerlerdeki kodları düzenlemeniz gerekecektir. Yüzlerce sayfaya girerek, yapılması gereken kod değişikliklerini teker-teker yapmaktan başka çareniz yoktur:
<html>
<body>
<table bgcolor="#CC6600" border="0" cellpadding="0" cellspacing="0" width="760">
<tr> <td> <font color="#CC6600" face="Verdana, Arial, Helvetica, sans-serif"> Müdürlüğümüzün çalışmaları, her yıl faaliyet raporlarında belgelenir. Görüntülemek istediğiniz faaliyet raporunu tıklatın:
</font> </td> </tr>
</table>
<body> </html>
CSS kullanılmış yöntem ise aşağıdaki gibi olabilirdi:
<html> <head> <link rel="stylesheet" rev="stylesheet" href="kabuk.css" type="text/css" />
</head> <body> <div id="kabuk"> <p class="spot"> Müdürlüğümüzün çalışmaları, her yıl faaliyet raporlarında belgelenir. Görüntülemek istediğiniz faaliyet raporunu tıklatın:
</p> </div> <body> </html>
CSS kullanılmış olan bu yöntemde
<body> ... </body>
...arasındaki arasındaki kaynak kodunun, CSS kullanıl-ma-mış olan önceki yönteme göre çok daha sade olduğunu farketmişsinizdir. Kaynak kodunun sade olmasının avantajları için burayı tıklatın. Bu sadeliğin nedeni, biçimlendirme ile ilgili tüm ifadelerin (bgcolor, color, size, border, width vb), CSS içerisinde merkezîleştirilmiş olmasıdır:
kabuk.css
#kabuk{
width:760px;
background-color:#CC6600;
}
.spot{
color:#CC6600;
font-family:Verdana, Arial, Helvetica, sans-serif;
}Müşterinin istediği değişiklikleri yapmak için, bu CSS dosyası içerisindeki ifadelerin (color, background-color vb) değiştirilmesi yeterli olacaktır. Bu CSS'i kullanan tüm sayfalarınızın görüntüsü bir anda değişecektir.
Sitenin genelinde bu kadar büyük değişiklikleri yapmanın çok kolay olduğunu müşterilerinize sezdirmeyin. Başka değişiklikler de isterler! Aksi de olabilir; müşteriler istedikleri değişikliklerin ne kadar uğraştırabileceğini bilmezler (Hatta bazen biz bile sezemeyiz!). Çok sayıda müşterisi olan tasarım şirketleri CSS'ten yararlanırlarsa, işleri kolaylaşır.
Yazıcı-dostu sayfalar oluşturmak çok kolaylaşır
Yazıcı dostu sayfalar, kağıt ve mürekkep israfını önler. Web sayfasındaki içeriğin, kağıttayken de anlaşılır ve kolay okunur kılar. Bir yazıcı-dostu sayfanın diğer sayfalardan farkı; yazıcı-dostu sayfalar sadedir. Resimler ve renkler kaldırıldığında, metinler kağıda sığar hale getirildiğinde vs sayfa yazıcı-dostu hale gelmiş olur. Konuyu örneklendirmek gerekirse... Sağdaki sayfa, soldaki sayfanın yazıcı-dostu haline gelmiş durumudur. Numaralandırılmış metinler dışında herşey kaybolmuş durumdadır:
Şekil 1: Yazdırılacak bir sayfa. |
 |
Şekil 2: Yazıcıya gönderilecek hali. |
Şekil 1'deki sayfanın (kaynak kodu) yazıcı-dostu halini üretmek için aşağıdaki yapılması gerekiyor;
Gereksiz kısımların yazdırılmaması : Daire ile işaretlenmiş bölgelerin yazdırılmasının engellenmesi gerekli. Bu ise yazıcıdan gizleme yöntemiyle halledilir. Web tarayıcınız, yazıcıya göndermeden önce sayfa üzerinde istediğiniz biçilendirmeleri yapmanıza imkan tanır. Bu imkandan, daha sonra anlatılacak
media="print"
ayarıyla faydalanılabilir. Örnekte;
<link href="/lib/css/kent.css" rel="stylesheet" type="text/css" media="screen" />
<link href="/lib/css/kent_yazdir.css" rel="stylesheet" type="text/css" media="print" />
Renkleri kaldırma : Numaralandırılmış bölgelerdeki metinlerin siyah-beyaz halde yazdırılması ve kağıttaki tüm satırı doldurması sağlanmalı.
Bu iki biçimlendirme yapıldığında, sayfa yazıcı-dostu hale gelmiş olur. Şekil 2 incelenebilir. Numaralanmış bölgeleri inceleyiniz.
CSS yöntemi tercih edilmiş bu sayfayı görüntülemek için burayı tıklatın. Bu sayfa, renkleri ve resimleriyle, bilindik bir sayfa görüntüsüne sahip gibi görünebilir. Farkını görmek için "Yazdırma önizleme" yapın; sayfanın yazıcı-dostu halde görüntülendiğine şahit olacaksınız (Şekil 2'deki gibi). Bu sayfanın kaynak kodunu inceleyelim ve kendiliğinden yazıcı-dostu hale dönüşmesini sağlayan unsurları görelim. Kaynak kodundaki açıklamaları dikkatle okuyunuz:
... <html> ... <head> ... <!-- Firefox, IE, Opera ve diğer tüm tarayıcılar P, H1, FORM... gibi tüm HTML etiketleri için kendilerine has biçimlendirmeler atarlar (margin, padding vb değerler). Tasarımda 1 pikselin bile büyük önemi varken, her tarayıcının "kendi kafasına göre belirlediği" bu varsayılan değerler, sayfalarınızın farklı tarayıcılarda farklı-farklı görünmesine ve hatta sayfanın kaymasına neden olabilir. Bu sorunun üstesinden gelmek amacıyla, tüm etiketler için varsayılan biçimlendirmeleri biz belirliyoruz ki; tarayıcıların, görünüme kendilerinin karar vermesine mahal kalmasın. (Bu satırdaki media="screen" ayarının ne işe yaradığı aşağıda anlatılacak.) --> <link href="/lib/css/kent_sifirla.css" rel="stylesheet" type="text/css" media="screen" /> <!-- Başka bir CSS daha bağlanıyor. Ama media="screen" ayarı tercih edilerek, bağlanan bu CSS içindeki biçimlendirmelerin yalnızca, ziyaretçi sayfada gezinirken uygulanması sağlanıyor. Bu ayardan dolayı, ziyaretçi sayfayı yazdırdığında; tarayıcınız, bu CSS içerisindeki tüm biçimlendirmeleri kaldırdıktan sonra sayfayı yazıcıya gönderecektir. Böylece; renklendirmeler, nesnelerin arkasına döşenen estetik resimler, mesafe ayarları vb kalkacak ve sayfa biraz sadeleşecektir. --> <link href="/lib/css/kent.css" rel="stylesheet" type="text/css" media="screen" /> <!-- Başka bir CSS daha bağlanıyor. Ama tıpkı bir önceki satırda olduğu gibi media="print" ayarı tercih edilerek, bağlanan bu CSS içindeki tüm biçimlendirmelerin yalnızca, ziyaretçi sayfayı yazdırdığında uygulanması sağlanyor. Bu ayardan dolayı, ziyaretçi sayfayı yazdırdığında; tarayıcınız, bu CSS içerisindeki tüm biçimlendirmeleri uyguladıktan sonra sayfayı yazıcıya gönderecektir. Bu CSS içerisindeki biçimlendirmeleri incelediğinizde, bu biçimlendirmelerin, sayfadaki bazı nesnelerin gizlenmesine yönelik biçimlendirmeler olduğuna şahit olacaksınız. Bu gizlemelerin amacı sayfayı biraz daha sadeleştirmek ve sayfada yalnızca metinlerin kalmasını sağlamaktır. --> <link href="/lib/css/kent_yazdir.css" rel="stylesheet" type="text/css" media="print" /> ... </head> ... <body> ... </body> </html>
Eskiden, resimlerle ve renklerle dolu bir sayfanın yazıcı-dostu sürümünü oluşturmak için şu aşamalar izlenirdi; sayfanın kopyası alınırdı... Bu kopyadaki tüm resimler ve renkler kaldırılarak sayfa siyah-beyaz hale getirilirdi. Asıl sayfadan bu sadeleştirilmiş kopyaya bir bağlantı verilir ve Ziyaretçi'den bu sadeleştirilmiş kopyayı yazdırması istenirdi. "Basit ve kolay anlaşılır" denilebilecek bu geleneksel yöntemin birçok dezavantajı vardır;
- İş gücü kaybı. Kopyası alınan asıl sayfadaki; metinlerde veya Programcının geliştirdiği kaynak kodlarda bir düzenleme/düzeltme yapılması gerektiği zaman, yazıcı-dostu kopyada da aynı düzenlemeyi yapmak gerekir ki bu durum, bakımın-onarımın müşakkatli bir iş haline gelmesine neden olur.
- Arama motorları nezdinde potansiyel sorunlar. İlave önlemler almadığınız sürece (META, Javascript vb yollarla), arama motorları bu yazıcı-dostu kopyaları da indeksleyecek ve belki de ziyaretçiler arama sonucunda doğrudan yazıcı-dostu sayfanıza yönlendirilecekler.
- Hükmedilmesi gereken dosya sayısında artış. Site ne kadar az dosyadan oluşursa o kadar iyidir. Dosya sayısı artınca, sitenin taşınması zorlaşır (başka bir sunucuya aktarma vb). Sitenizin toplam Megabayt büyüklüğü artar ve bu nedenle sitenin yedeğinin alınması zorlaşır. Eğer siteniz çok dilli ise üstelik programlama da (ColdFusion, ASP.NET, PHP, JSP vb) kullanılmıyorsa işiniz daha da zor demektir.
Tasarımcılar artık alışkanlıklarını değiştirmek zorundalar... Eski/geleneksel yöntemler terk edilip CSS'li yönteme geçildiğinde tüm bu badirelerden kurtulunabilir... CSS yardımıyla regarenk sayfaların kendiliğinden yazıcı-dostu hale dönüşmesini sağlamak mümkün (yukarıdaki yazdırma örneğinde olduğu gibi)
Sayfalarınızı, mobil cihazlar ile gezilebilir hale getirebilirsiniz
[Mobil cihaz sunum görüntüleri]
Artık sayfalarınızı, ilave çok fazla iş yapmaksızın mobil cihazlardan (XHTML uyumlu cep telefonlarından vb) erişilebilir hale getirmek mümkün. CSS standartlarına uyumlu web tarayıcıları, her aygıt için farklı biçimlendirmeler uygulamanıza imkan tanır. Örnek aygıtlar:
- Screen: Bilgisayar ekranı.
- Print: Yazıcı
- Projection: Sunum cihazları (projektörler)
Eğer sayfanız bir cep telefonu tarafından görüntüleniyorsa, cep telefonunun içindeki tarayıcı yüksek ihtimalle CSS'i desteklemiyor olacağından hiçbir CSS biçimlendirmesini ve Javascript unsurunu yorumlamayacaktır. Bu nedenle; sayfalarınızın cep telefonlarından da gezinilebilmesini istiyorsanız, tüm biçimlendirmeleri (renklendirmeler, arka plan resimleri vb) CSS ile yapmalı ve mecbur kalmadıkça Javascript kullanmamalısınız.
Aygıta özel biçimlendirmeler yapmak için CSS'te birkaç farklı yazım seçeneği vardır;
<!-- Yukarıdaki örnekte faydalanılan imkan --> <html> <head> <link href="/lib/css/genel.css" type="text/css" media="print"/> </head> <body> ... </body> </html> <!-- Bir başka ifade imkanı. Bir önceki imkanla hemen-hemen aynı durumlarda faydalanılmalı. --> <style stype="text/css"> @import url(/lib/css/genel.css) print; </style> <!-- Bir başka ifade imkanı. Bir <style>...</style> etiketi arasında veya bir CSS içerisinde kullanılabilecek ifade yöntemi. --> <style stype="text/css"> media print { /*yazıcı için biçimlendirmeler buraya*/ } </style> <!-- Bir başka ifade imkanı. Bir sayfaya özel yazıcı-dostu biçimlendirmeleri yapmak istediğinizde bu ifade imkanını kullanabilirsiniz. --> <style type="text/css" media="print"> /*yazıcı için biçimlendirmeler buraya*/ </style>
Aygıtlara özel CSS biçimlendirmesi konusu W3C belgelerindeki 7.2 Specifying media-dependent style sheets başlığı altında arz edilir. Daha ayrıntılı ve güncel bilgi için söz konusu belgeye başvurulabilir.
Tarayıcıya gönderilen kodunuzu sadeleştirebilirsiniz
Sayfadaki tüm içerikler, biçimlendirmeler, resimler vb istemciye (sayfayı görüntülemek isteyen ziyaretçinin web tarayıcısına) HTML/XHTML kodları halinde gönderilir. Bu kodların sade ve basit oluşunun, yüksek ziyaret alan web siteleri için önemleri büyüktür;
- İnternete çıktığı bant genişliği kısıtlı olan ziyaretçiler (örn: 56 Kbit'lik çevirmeli bağlantılar, GPRS kullanan cep telefonları vb), daha az sayıda karakter içeren sayfalarınızı daha kısa sürede indirebilecektir. Sayfalar, internetten, daha kısa sürede indirilecek, ziyaretçiniz, toplam sürede, daha fazla sayfa ziyaret edecektir. Sayfalarınızın hızlı yüklenmesi, ziyaretçinizin siteniz hakkındaki memnuniyetini artıracaktır.
- HTML kodlarınız ağırsa (sade değilse), ziyaretçileriniz siteyi gezerken, sunucunuzun bant genişliğini "sömüreceklerdir".
- Cep telefonları gibi basit işlemcilere sahip cihazlar, sayfayı yorumlarken zorlanmazlar.
Sayfa tasarımı konularındaki tekrar kullanılabilirlik artar
...
Sayfa arayüzleri için tema hazırlamak kolaylaşır
CSS ile tasarım uygulanmamış bir tablo, yukarıdaki gibi olabilirdi. Tablo, cep telefonlarında bu şekilde görünür. Çünkü, sayfada CSS kullanılmış olsa bile, cep telefonları tabloyu yukarıdaki gibi gösterecektir. Bunu CSS ile onlarca farklı temaya büründürebiliriz. Tıklatarak sayfanın kodunu ve CSS'ini incelemek üzere sayfayı açabilirsiniz. "Link edilen" CSS dosyası olduğunu göreceksiniz.
Tema 1:
Tema 2:
Teknik ekibin beraber iş yapması kolaylaşır
Eskiden, oluşturulmuş bir web sitesinin tüm yaşamı boyunca (!), programcı tasarımcı ve içerikçiler birlikte siteyi idame ettirirlerdi. Fakat günümüzde, CMS'ler sayesinde, içerikçiler siteyi tek başlarına yıllarca idame ettirebilmektedirler. Fakat, bazen müşteriler sitelere öyle içeriklerin eklenmesini isterler ki; bu içeriğin bir tasarımsal çalışması ile siteye eklenmesi ihtiyacı doğar. Eğer tasarımcı, her türlü içeriğin siteye şıklıktan taviz vermeden eklenebilmesi için bir CSS-style-class kütüphanesi oluşturursa, içerikçiler, metin editörlerinde (FCK, RadEditor, SoEditor vs) aşağıdaki gibi CSS-class atamaları yaparak, sayfanın otomatik olarak şık hale gelmesini sağlayabilirler. Böylece, CSS tasarından önceden hazırlanmış olan CSS biçimlendirmeleri sayesinde, içerikçinin tasarımcıya ihtiyacı kalmaz:
<table class="icerikdokumu">
<thead>
<tr>
<td>İsim
</td/>
<td>Telefon
</td/>
</tr>
</thead>
<tbody>
<tr>
<td>Eşref Atak
</td/>
<td> +90 0211 324 43 34
</td/>
</tr>
<tr>
<td>Kemal Güler
</td/>
<td> +90 0211 123 34 56
</td/>
</tr>
</tbody>
<tfoot>
<tr>
<td>2 kişi
</td/>
<td>
</td/>
</tr>
</tfoot>
</table> Yukarıdaki kod, aynı zamanda, tema örneğindeki sayfaların da kaynak kodudur.
Benzer şekilde; site henüz yeni inşa edilirken tasarımcı ile geliştirici kendi aralarında anlaşıp mutabakat yaparak, geliştiricinin hızlı ilerlemesini sağlayabilirler. Örneğin; eğer sayfaya bir haberin başlığı ve spotu bastırılacaksa, tasarımcı der ki; sitenin hangi sayfasında olursa olsun, başlık için <P> etiketine "baslik" class'ını ayarla, spot için ise "spot" class'ın ayarla. Sayfa otomatik olarak biçimlenecektir. Geliştirici tasarımcının dediklerini yapar:
<p class="spot">Erken seçim yapmayacak olan başbakan, bunu cumhurbaşkanına da anlatacak</p>
Bu sayede, site teknik ekibinin işleri kolaylaşır.
Erişilebilir sayfalar hazırlamak
[...]
CSS demek TABLE'ları unutmak demek değildir
[Workcube'deki tablolar. O tabloları DIV ile yapmaya çalışmak bir çılgınlıktır. Tablolar, içerik sergilemek içindir. Yerleşimi ve estetiği ayarlamak için değil. Sıkıştığında başvurulacak bir kaçış noktası hiç değildir.]
...
Araçlar
- Firefox Web Develop Tool
- Firefox DOM Inspector
- Validation Tools
- http://www.w3.org/Status
Tarayıcı varsayılan biçimlendirmelerini sıfırlamak
[...]
STYLE etiketi ve STYLE niteliği: <STYLE></STYLE> ve STYLE=""
İkisi de aynı şey;
STYLE niteliği ile CSS biçimlendirmesi yapmak:
STYLE-class belirterek CSS biçimlendirmesi yapmak:
<style type="text/css">
.gorunmeyenoge{
display: none;
}
</style>
<div class="gorunmeyenoge">Başbakan Tayyip Erdoğan köşkte</div>
Peki, arasındaki fark ne?
- Tekrar kullanılabilirlik biter
- Merkezileştirme biter
Gölgelerin gücü adına: Javascript ve CSS
Bir nesneyi gizlemek için
<script type="text/javascript">
//nesne gizlenir
document.getElementById('islemyapiliyor').style.display = 'block';
//nesne gizlenir
document.getElementById('islemyapiliyor').className = 'gorunmeyenoge';
</script>
<style type="text/css">
.gorunmeyenoge{
display: none;
}
</style>
<div id="islemyapiliyor">Başbakan Tayyip Erdoğan köşkte</div>
Dahası var... AJAX ve CSS kullanılarak, masaüstü EXE yazılımlar ile aynı hızda ve performansta çalışan web uygulamaları geliştirmek mümkün hale gelmiştir. Gmail, bunun en büyük örneğidir.
CSS'i bildiğiniz kadar XHTML'i de iyi bilmelisiniz
[HTML'deki h1, h2, h3 etiketlerini Javascript ile parse etmek suretiyle İçindekiler listesini hazırlayan örnek]
...
CSS deyince neden hep <DIV> <UL> <LI> etiketleri?
CSS destekli sayfalarda çoğunlukla DIV, UL ve LI etiketleri kullanılmaktadır. Çünkü, CSS biçimlendirmeleri kullanılarak, bu etiketler istenilen yöne doğru dizilebilmektedir:
Soldan sağa:
Sağdan sola:
Yukarıdan aşağıya:
Bu bir esnekliktir. Bu özelliğinden dolayı, DIV, UL, LI etiketleri sık sık tercih edilmektedir. Yukarıdaki örnekte görüldüğü üzere, eğer hazırladığınız dinamik sayfa Arapça, Farsça gibi sağdan sola doğru yazılan bir dilde yayınlanacaksa, DIV-UL-LI etiketlerinin bu özelliği sayesinde, yazıları sağan sola doğru dizebilirsiniz. Üstelik bunu yapmak için, geliştiricinin herhangi bir değişiklik yapmasına gerek yoktur!
DIV-UL-LI etiketlerinin gücünü göstern bir örnek uygulama için burayı tıklatın: DIV-UL-LI etiketleri ile yaslama
Bölgeleri belirleyin
Sayfalardaki ortak bölgeleri belirleyin ve klasikleştirin. İşte, her projede oluşturulan bazı klasik bölgeler…
- Uyarı ve bilgilendirme şeritleri
- Geçerlilik denetimi (validasyon) mesajları
- Formlardaki bilgilendirme metinleri
- Sayfalamalar (Pagination)
- “Teknik sorun var” sayfaları
- Başlıklar (H1, H2, H3…), Spotlar vs
- Formlar, metin kutuları, açılır listeler, düğmeler…
- …
Bu bölgelere birer isim verin. CSS Class Name’lerinde ve CSS ID’lerinde kullanacağınız bu isimleri standartlaştırın ve klasikleştirin. Her projede isimleri ve bölgeleri yeniden keşfetmeyi bırakın. Ekipteki herkes, isimleri ezberlesin. En azından, elinde özet bir doküman olsun.
 |
 |
 |
 |
Uygulamalı Örnek: Validasyon mesajları:
 |
 |
CSS:
|
HTML:
|
CSS'çiler neyi yapmaz?
- <p> </p> kullanmazlar.
- <br /> kullanmazlar
- spacer.gif resimcikleri kullanmazlar
CSS, anlatmakla neden bitmez?
- CSS'in yeni sürümü CSS3 yolda.
- Yeni yeni standartlaşıyor.
- AJAX.
- Geleneksel teknolojilerin CSS'e uyumu
JavaScript Nedir
01 Mart 2009, 11:16. 0 fav. e-destek.
Etiketler:
javascript nedir
DERS 1: JAVASCRİPT NEDİR?chemas-microsoft-com
fficeffice" />
Dersin sonunda yapabilecekleriniz:
-JavaScript dilinin temellerini açıklamak.
-JavaScript'in Web sayfalarında nerede kullanılacağını açıklamak.
-Temel bileşenler hakkında genel bilgiler vermek.
I. JAVASCRİPT DİLİ
Netscape Navigator 2.0 ile birlikte geliştirilen JavaScript dili istemci taraflı (client-side) script dilidir. Web sayfalarında dinamik içerik sağlamak ya da kullanıcıyla iletişim kurmak için kullanılır.
İlk başta yalnızca Netscape tarayıcıları için tasarlanan JavaScript, daha sonra diğer tarayıcılar tarafından da desteklenen genel bir scripting dili haline gelmiştir. Şu anda Navigator 4.0 tarafından desteklenen JavaScript 1.2 sürümü vardır. Microsoft Internet Explorer 3.0 ile JavaScript 1.0'ı desteklemektedir.
İPUCU: HTML kodları arasına yerleştirilen küçük kodlardır. Tek başına .js uzantılı JavaScript kodları da yazılabilir.
JavaScript, Java dilinin bir Light versiyonu değildir. JavaScript kendi başına bir script dilidir. Genellikle HTML sayfalarında kullanıcı kontrolleri eklemek, formları kontrol etmek, hesaplamalar yapmak gibi işler için kullanılır.
Tablo: Tarayıcılar ve JavaScript desteği.
Tarayıcı Versiyonu JavaScript Desteği
Netscape 2.0 1.0
Netscape 3.0 1.1
Netscape 4.0 1.2
Internet Explorer3.0 JScript 1.0 (approx. 1.0)
Internet Explorer4.0 JScript 2.0 (approx. 1.1 + full DOM)
A. JAVASCRİPT NEREDE KULLANILIR?
JavaScript kullanımının iki ana alanı vardır: istemci taraflı ve sunucu taraflı script yazmak. Şu anda HTML sayfalara gömülü yazılan scriptlerin çoğu JavaScript kullanılarak yazılmaktadır. Bunlar da genellikle kullanıcı bilgilerinin doğru girilip girilmediği ya da kullanıcıya veri girişinde ya da menü kullanımında seçenekler sağlamaktır.
Sunucu taraflı JavaScript, aynı ASP gibi çalışmaktadır.
Sunucu Taraflı JavaScript
Sunucu taraflı JavaScript (SSJS) ise temel JavaScript'e ek olarak nesneler ve işlevler katılarak veritabanlarına erişim, e-mail gönderme ve diğer işlemlerin yapılması sağlanır. SSJS, veritabanı temelli Web uygulamalarının yaratılmasını sağlar.
B. <SCRIPT> ETİKETİ
Bir tarayıcının anlayacağı temel dil HTML'dir. JavaScript dilinin HTML belgesi içinde yazılabilmesi için <SCRIPT> etiketleri kullanılır.
<HTML>
<SCRIPT>
...
JavaScript kodu
....
</SCRIPT>
</HTML>
Örnek:
<HTML>
<SCRIPT>
document.write ("Merhaba");
</SCRIPT>
</HTML>
D. HTML BELGESİ İÇİNDE JAVASCRIPT YAZMAK
Bir Web sayfası organizasyonunda JavaScript'leri Web sayfasına eklemek için değişik yollar vardır:
. HEAD bölümünde
. BODY bölümünde
. BODY içinde URL olarak.
<HEAD> İçinde:
Bir HTML belgesinde HEAD bölümü içinde <SCRIPT> etiketi kullanarak istediğiniz JavaScrip kodunu HTML belgesine ekleyebilirsiniz. Bu kodlar HTML sayfasının BODY kısmı yüklendikten sonra kullanıma hazır hale gelir.
Örnek:
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
function AlertTest( )
{
alert("Dikkat!");
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<BODY> İçinde
HTML belgesinin BODY kısmında JavaScript kullanmak için iki yol vardır:
Doğrudan çalışacak kodlar ve kullanıcı tarafından çalışacak kodlar:
Doğrudan çalışacak JavaScript kodları <SCRIPT> etiketi kullanılarak HTML belgesinin istenilen yerine yazılır. Bu cümleler tarayıcı tarafından okunduğu anda yerine getirilir:
<SCRIPT LANGUAGE="JavaScript">
<!--
document.write("Son okunma tarihi" + document.lastModified)
//-->
</SCRIPT>
Daha çok kullanılan diğer bir yöntem ise kullanıcı tarafından bir olayın başlatılmasıyla bir JavaScript kodunun çalıştırılmasıdır. Örneğin bir düğmeye tıklamak gibi:
<FORM>
<INPUT TYPE="BUTTON" NAME="TestButton"
VALUE="Tıkla" onClick="AlertTest()">
</FORM>
Örnek:
<SCRIPT Language="JavaScript">
function Onceki() {
if (xmldso.recordset.bof){
alert("Dosya başındasınız.");
}else{
xmldso.recordset.movePrevious()
if (xmldso.recordset.bof){
xmldso.recordset.moveFirst();
alert("Bu ilk kayıt.");
}
}
}
function Sonraki() {
if (xmldso.recordset.eof){
alert("Dosya sonundasınız.")
}else{
xmldso.recordset.moveNext()
if (xmldso.recordset.eof){
xmldso.recordset.moveLast();
alert("Bu son kayıt.");
}
}
}
</SCRIPT>
<BODY> İçinde URL Olarak
JavaScript kodu URL olarak da kullanmak mümkündür:
<A HREF="javascript: alert('Son!')">Siteden Çık</A>
UYGULAMA: Belgenin arka rengini değiştirmek:
II. JAVASCRİPT DİLİNİN ÖZELLİKLERİ
JavaScript dilinin temel gramer yapısına bir bakalım:
İşletme Sırası:
HTML belgesinde JavaScript eklendiğinde, kodun işletimi sırasıyla yapılır. Ancak fonksiyon ve belli bir olaya (ONCLICK gibi) bağlı olan JavaScript kodlarının işletimi o anda yapılır.
Değişkenler:
Bir değeri içeren bellek adlarını ifade ederler.
İşleçler (Operators):
Değerler ya da değişkenler arasında toplama, çıkarma gibi işlemlerin yapılmasını sağlarlar. İşleçler +, *, /, - gibi işaretlerle kullanılır.
İfadeler (Expression):
Değişkenlerin, işleçleri ve deyimlerin bir araya gelerek oluşturdukları yapılara ifade derin. Örneğin: "Ucret = Gün * Yevmiye" formülü bir ifadedir.
Deyimler (Statements):
Deyimler belli bir komut ya da söz dizimi bileşenlerinin grubuna verilen addır. Örneğin bir komut ya da bir IF yapısı deyimi oluşturur:
if (toplam>20) {deyimler;} else {deyimler;}
Nesneler (Objects)
Kendi değerleri, özellikleri ve işlemleri olan bileşenlere nesne (object) denir. JavaScript dilinde çok sayıda yerleşik nesne vardır.
Fonksiyonlar (Functions)
Bir JavaScript fonksiyonu diğer dillerdeki bir fonksiyon yordam ya da bir alt yordam anlamına gelir. Bir fonksiyon bir dizi işlemi yerine getirir ve bir sonuç döndürür. Ayrıca fonksiyonlar, parametre olarak kabul edilen birçok değer kabul ederler.
function adi( ) {
deyim 1
deyim 2
...
deyim N
}
Case Sensitivity
JavaScript case sensitive (büyük küçük harf duyarlı) bir dildir. Değişkenler ve diğer öğeler küçük ya da büyük yazılabilirler. Ancak A değişkeni ile a değişkeni birbirinden farklıdır.
<SCRIPT LANGUAGE="JavaScript">
<!--
test= "küçük harf";
TEST= "BÜYÜK HARF";
document.writeln("test = "+test+"<BR>");
document.writeln("TEST = "+TEST+"<BR>");
//-->
</SCRIPT>
Açıklamalar
Bütün programlama dillerinde olduğu gibi, kod yazarken açıklama yazmak için kullanabileceğimiz bir karakter vardır. JavaScript'te bu <!- ve //-->. işaretlerinin arasıdır.
<!-bu bir açıklamadır //-->.
JavaScript kodu diğer programlama dillerinde olduğu gibi deyimlerden (statements) oluşur. Bu deyimler atama, değerleri karşılaştırma ve işlemlerin yapılması için komutlar anlamına gelmektedir.
A. DEĞİŞKENLER VE VERİ TÜRLERİ
Değişkenler verileri saklarlar ve onlara erişimi sağlarlar. Bir değişken bir değeri işaret eder. Örneğin Ucret adlı değişkene bir kişinin ücret bilgisi konur. Değişkenler adlarıyla işaret edilirler. Bir JavaScript değişkeni belli kurallara uymak zorundadır:
Kapsam
Bir değişkene bir değer verildiğinde bu değer ne kadar zaman geçerli olacak? Bu sorunun yanıtı kapsam (scope) kavramını ortaya çıkarır. Bir değişkenin kapsamı global ya da lokal olabilir. Bir global değişkene sayfa üzerinde herhangi bir JavaScript'ten erişilebilir. Lokal değişken ise değerin atandığı yordam içinde geçerlidir.
Bir değişkene kendisine atama yaparak değer verilir:
Ucret= 1000000;
Bir fonksiyon yazıyorsanız, yerel bir değişken yaratmak istersiniz. Bu yerel değişkenler var sözcüğüyle tanımlanır:
function YeniFonksiyon()
{ var dongu=1;
toplam=0;
...deyimler...
}
Yukarıdaki örnekte döngü adlı değişken YeniFonksiyon için yerel, toplam değişkeni ise tüm sayfa için genel (global) olacaktır.
Değişkene bir değer atanır. Bu herhangi bir tür veri olabilir. Bununla birlikte JavaScript, verinin değişik türlerde olmasını bekler. Verinin türüne bağlı olarak değer üzerinde belli işlemler yapılabilir ya da yapılamaz. Örneğin iki string değer üzerinde aritmetik işlem yapılamaz.
Tablo: Değişken Türleri
Numbers Integer ve kayan noktalı sayılar içerir. Positif, 0 ya da negatif olabilir.
Booleans True ya da False.
Strings Karakter bilgi içeren bir değişkendir.
Objects nesne= new Object();
Null Değersiz.
Undefined Bir değişken yaratıldıktan sonra içerdiği tanımsın değer.
İşleçler (Operators)
İşleçler, iki ya da daha fazla değer üzerinde işlem yapılmasını sağlar. JavaScript içinde aritmetik ve hesaplama işleçleri olmak üzere iki tür işleç kullanılır:
Tablo: İşleçler
+ Toplama
- Çıkarma
* Çarpma
/ Bölme
% Bölmede kalanı verir.
Örneğin: 10 % 3 işlemi 1 değerini verir.
++ Tek artırım. Değer 1 artırılır.
-- Tekli azaltma.
- Negatifleştirme: İşlenenin negatif değerini döndürür.
Karşılaştırma
Karşılaştırma işleci, iki ya da daha çok değeri birbiriyle karşılaştırarak True ya da False olarak mantıksal bir değer döndürür. İşlenenler sayısal ya da karakter değer olabilir.
Sivil Toplum Kuruluslari
01 Mart 2009, 11:15. 0 fav. e-destek.
Etiketler:
sivil toplum kuruluslari
 |
Vakıflar Vakıf statüsünde kurulmuş sivil toplum kuruluşları. Vakıflar için tıklayınız. |
|
Dernekler Dernek statüsünde kurulmuş sivil toplum kuruluşları. Dernekler için tıklayınız. |
|
Sendikalar İşçi Sendikalar, İşveren Sendikaları, İşçi Federasyonları, İşveren Federasyonları, TÜRK-İŞ, DİSK, TİSK, HAK-İŞ, KAMU-SEN, KESK... |
|
Meslek Kuruluşları Meslek Kuruluşları, Odalar, Birlikler, Mühendis Odaları, TMMOB Türk Mühendis ve Mimar Odaları Birliği, TOBB Türkiye Odalar ve Borsalar Birliği... |
Siyasi Partiler
01 Mart 2009, 11:14. 0 fav. e-destek.
Etiketler:
siyasi partiler
Mecliste bulunan partiler başta olmak üzere siyasi partilerin isimleri aşağıda listelenmiştir.
|
Kaymakamliklar
01 Mart 2009, 11:14. 0 fav. e-destek.
Etiketler:
kaymakamliklar
| Adana Ceyhan, Yüreğir ,Yumurtalık, Tufanbeyli, Seyhan, Saimbeyli, Pozantı, Kozan, Karataş, İmamoğlu, Doğankent Ağrı Adıyaman Afyon Aksaray Ankara Antalya Ardahan Artvin Diyarbakır Düzce Edirne İstanbul |
Silahli Kuvvetler
01 Mart 2009, 11:14. 0 fav. e-destek.
Etiketler:
silahli kuvvetler
Genelkurmay, Kuvvet Komutanlıkları
Askeri Okullar
|
Valilikler
01 Mart 2009, 11:13. 0 fav. e-destek.
Etiketler:
valilikler
|
Bakanlıklar
01 Mart 2009, 11:13. 0 fav. e-destek.
Etiketler:
bakanlıklar
|
