Pdf dosyasının içinde ufak tefek yazılarda düzenlemem gereken yerler olduğundan dolayı pdf düzenleme ile ilgili öğrendiğim bir kaç yolu not aldım. Bunlar;

1. Adobe Acrobat Pro ile düzenleme;

Tools –> Advanced Editing –> TouchUp Text Tool

Aracıyla yazı içerisinde istediğiniz yeri düzenliyebilirsiniz. Advanced Editing menüsü altındaki diğer kullanışlı araçlarla yazıyı obje olarak döndürebilir pdf in belli bir alanını kırpma gibi bir kaç küçük işlem yapılabiliniyor.

2. ABBYY FineReader ile düzenleme;

FineReader  progamı kısaca .pdf, .jpg, .png, … uzantılı dökümanları doc,txt… gibi metin tabanlı uzantılara çevirebiliyor. Kullanımı basit bir program.

3. Adobe İllustrator ve Adobe Photoshop ile düzenleme;

Pdf dökümanı bazı export seçenekleri ile kayıt edildiği durumlarda iki programda da tek katmanlı olarak görebiliyor. Bazı durumlarda ise yazıları değiştirme imkanımız olabiliyor.

/* Css Sifirlama */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,  caption, tbody, tfoot, thead, th {margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; text-decoration:none;}

ol, ul { list-style: none; }
blockquote, q { quotes: none; }
/* remember to define focus styles! */
:focus, a:focus, a:active{    outline: 0; }

/* remember to highlight inserts somehow! */
ins{ text-decoration: none; }
del{ text-decoration: line-through; }

/* tables still need 'cellspacing="0"' in the markup */
table{border-collapse: collapse; border-spacing: 0;}

/* float uygulanan elemanlari kapsayamama sorunu */
.kapsayamamaSorunu:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
.kapsayamamaSorunu {display: inline-block;}
/* IE-mac de bu bolumu sakla \ */
* html .kapsayamamaSorunu {height: 1%;}
.kapsayamamaSorunu {display: block;}
/* IE-mac bu bolumu saklam artik */

/* Css Sifirlama */

Aşağıdaki linkten diğer 5 adayı görebilirsiniz
http://www.altinorumcek.com/halkoylamasi/halkinfavorileri2009.html#bilgi_teknolojileri_donanim_yazilim

Türkiye’de böyle bir mantıkla kurulmuş ilk proje olan cssaddons.com zaman geçtikçe içindeki bilgiler ile internette yerini gitgide sağlamlaştırmakta. Bizim gibi duyarlı internet kullanıcıları sayesinde çok daha iyi yerlere geleceğinden eminim.

Projeye destek vermek istiyorsanız ve oylamak istiyorsanız cep telefonunuzun mesaj bölümüne girip ALTIN yazıp bir boşluk bırakarak 150 yazıp 3969 ‘a kısa mesaj olarak yollayabilirsiniz.
Destekleriniz için teşekkürler.

• Text Shadow,
• Border Radius
• Box shadow
• Opacity
• Multi Column
• Border image
• Font-face

Text Shadow:

Photoshopta kullandığımız drop shadow etkisini pratik bir şekilde uygulayabiliyoruz.

text-shadow:1px 1px 1px #eee;

1. değer x ekseninde aralık vermek için

2. değer y ekseninde aralık vermek için

3. değer ise verdiğimiz etkinin bulanıklaşması için kullandık

4. değer #fff verdiğimiz gölge etkisinin rengi için kullandık

Border Radius

Border radius web 2.0 stili tasarımlarda en çok kullanılan özelliklerden birisi tablo ve div lerde verdiğimiz kenarlıkları ovalleştirerek daha şık bir görünüm vermemizi sağlıyor.

border:2px solid #ccc;
-moz-border-radius:4px 4px 4px;//firefox için
-webkit-border-radius:4px 4px 4px;//safari ve chrome için

Border ImageBazı tasarımlarda gördüğüm kenarlıklar yerine resim kullanılıyor. Css 3 ile bunu yapmak mümkünmüş…

Round özelliği için

border:1.0em double; -moz-border-image: url(border.png) 28 round round;

Stretch border için

border:1.0em double; -moz-border-image: url(border.png) 28 stretch stretch;

Box ShadowText shadow tekniğine benzer bir örnek

-moz-box-shadow:1px 1px 3px rgba(0, 0, 0, 0.7);

1. değer x ekseni için

2. değer y ekseni için

3. değer blur

4. değer ise renk kodu

Opacity

Web 2.0 ile birlikte tasarımlarda yer yer transparan objelerde kullanılmaya başlandı eskiden transparan background için transparan png dosyasını kullanıyorduk fakat css3 opacity ile tasarımlarımızdaki transparan alanlar oluşturabiliyoruz.

opacity:0.2//%20 lik bir görünürlük değeri vermiş olduk.

Multi Column

Tasarımlarımızda kolonlu yapı için genellikle div, span ile ya da table ile kolonlu yapılar oluşturabiliyoruz fakat dinamik yapı kullandığımız zaman kolondan taşan yazının devamının bir sonraki kolonda çıkması problem oluşturabiliyor. Bu sorunu Multi Column ile çözebiliyoruz.

-moz-column-count:3;/* Kolon Sayısı*/
-moz-column-rule: solid 1px #fff; /*Kolonlar arasında aytaç için beyaz border kullandım */
-moz-column-gap:20px; /*kolonlar arası boşluk*/

@Font-Face

Web tasarımlarında yenilenen tasarım trendleriyle birlikte tipografide öne çıkmaya başladı dolayısıyla font seçimi önem kazandı ve sistem fontları yetersiz kalmaya başladı. Ancak web tasarımında özgürce font kullanılamıyor ya sistem fontu olması gerekiyor ya da resim olarak fontu siteye eklememiz gerekiyordu. Sistemde olmayan fontların kullanılmasını sağlamak için javascript ve flash kullanılarak bir çok teknik geliştirildi (sIFR, Cufon, Typeface…). Yalnız bu teknikler tam anlamıyla verimli olamıyor ya css desteği tam olmuyor ya da google tarafından indexlenmesinde problem çıkıyordu.Css 3 ile de artık sistem fontu olmayan fontlar eklenebiliyor. Fakat halen problemler devam ediyor…

dipnot:@font-face Css2 ile gelmişti fakat bazı problemlerden dolayı Css 2.1 de kaldırıldı Css3 ile tekrar geldi. – Fatih Hayrioğlu

style dosyamızda tanımlamamızı yapıyoruz

@font-face { font-family: Delicious; src: url('Delicious-Roman.otf'); }
@font-face { font-family: Delicious; font-weight: bold; src: url('Delicious-Bold.otf'); }

Kullanımı

h3 { font-family: Delicious, sans-serif; }

Not: Bir kaç şekilde renk kodunu verebilirsiniz. rgb(0,0,0) = black = #000

Örnek Sayfa

Faydalı Linkler:

http://www.fatihhayrioglu.com/

http://www.css3.info

http://sixrevisions.com/css/basic-css3-techniques-that-you-should-know/

http://www.1stwebdesigner.com/css/css3-techniques/

Çok Sayıda RAW Dosyayı Hızlıca ve Kolayca JPG Formatına Dönüştürme from Halid Özgür on Vimeo.

Umarım bu tarz anlatımlar devam eder. Raylı eğitim sisteminin devamlı olması dileyiğle…

kaynak:http://www.camoglu.net/?p=415&cpage=1#comment-1267

öncelikle html kısmını yazalım 2 adet kutu oluşturuyorum.

<div style="margin=auto; width:500px; height:200px; display:block; position:relative;"><!--kapsayıcı kutu-->
 <div>Taşı</div>
 <div>Sepete Ekle</div>
</div>

ve css ile biçimlendiriyorum

.dosya {
 position: absolute;
 top: 5px;
 left: 5px;
 border: 2px solid #C4D7ED;
 background-color: #E1E6FA;
 width: 75px;
 height: 75px;
 margin: 10px;
 z-index: 100;
}
.drop {
 background-color: #e9b96e;
 border: 3px double #c17d11;
 width: 150px;
 height: 100px;
 margin: 10px;
 position: absolute;
 top: 5px;
 right: 5px;
 opacity: 0.7;
 overflow:auto;
}
.droppable-active {
 opacity: 1.0;
}
.droppable-hover {
 outline: 1px dotted black;
}

sonra dosyamıza jquery dosyalarını ekliyoruz

<script src="http://code.jquery.com/jquery-latest.js"></script>

<script src="http://ui.jquery.com/latest/ui/ui.core.js"></script>
<script src="http://ui.jquery.com/latest/ui/ui.draggable.js"></script>
<script src="http://ui.jquery.com/latest/ui/ui.droppable.js"></script>

son olarak da scriptimizi yazıyoruz

<script>

 $(document).ready(function(){
 $(".dosya").draggable({helper: 'clone'});//sürüklenen objenin kopyalanmasi için
$(".drop").droppable({
 accept: ".dosya",// buraya sürükle bırak olayı için eklenecek class lari koyuyoruz
 activeClass: 'droppable-active',
 hoverClass: 'droppable-hover',//kutunun üstüne gelindiği zaman çalıştırılacak class
 drop: function(ev, ui) {
 $(this).append("<br>Eklendi!");
 }
 });
 });
 </script>

dosyamızı görmek için tıklayınız (Link Güncellenmiştir 17.06.2010)

MVC (Model View Controller) Genelde büyük çaplı projelerde projenin kontrolünü kolaylaştırması açısından çalışacak kodların sınıflandırılması performans ve güvenlik açısından daha iyi bir yapı oluşturabiliriz denilebilir. Model kısmı işlemlerin gerçekleştiği kısım, View kısmı kullanıcı tarafından görüntülenen kısım (kullanıcı ile iletişime geçen kısım ) ve Controller kısmıda bu işleyişi yürüten kısımdır.Bunun faydası ise projelerde güvenli her parçanın ayrı ayrı ele alınabilir olması buda benim çok işime yarıyor arkaplan kodlarından temizlenmiş sadece değişkenlerin ve kısa mantıksal sorguların olduğu bir sayfayı düzenlememe olanak sağlıyor.

Çalışma mantığı kısaca şu şekilde oluyor örneğin kullanıcı bir form doldurdu ve gönderdi form kayıt edildi ve ekrana “verileriniz kaydedildi.. ” iletisini vermek için

User--->View (a)--->controller(b)--->model (c) --->controller(d)--->View(e)--->user

a- form doldurup gönder butonuna bastığında değerleri controller içindeki bir fonksiyona gönderiyor

b- gelen verileri belirlenen fonksiyonun içindeki model a gönderiyor

c- gelen verileri veritabanına kaydediyor ve kayıt durumu hakkında bilgi veriyor (kayıt başarılı- kayıt başarısız)

d- kayıt gelen veriyi view e gönderiyor

e- kayıt durum bilgisi ekrana yazılıyor

mvc ile birlikte bu kadar çok dosyanın kontrolunun kolaylaşması (kod dosyaları ayrı dizinde, )için çeşitli Framework’ ler(çatı) kullanılıyor örneğin kohana,symphony, Zend, CodeIgnitor, CakePHP.