Hamza ERBAY

Web Designer Aranıyor…

Hamza ERBAY — Fri, 27 Jan 2012 00:36:26 +0000

Önerebileceğim firmalardan biri olan Net Solutions Ankara’da ikamet eden web tasarımı (web 2.0 stillerini uygulayabilen), jquery, xhtml, css konularında tecrübeli referans çalışmalarını sunabilen takım arkadaşı arıyor.

Aranan Nitelikler

İyi derecede Html, Xhtml, css ve web 2,0 bigisine sahip
Flash Tasarım(Adobe Flash) ve Tercihen Action Script konularına hakim
Özgün Tasarım yeteneğine sahip
Windows platformunda Photoshop, illustrator, Flash gibi tasarım araçlarını çok iyi seviyede kullanabilen
Güncel Web tasarım araçlarını iyi seviyede kullanabilen
Yüksek algılama, hayal ve gösterim yeteneğine sahip
Tercihen Asp.net için uygun tasarım yapabilen

İşin Tanımı

Geliştirilecek olan web uygulamalarının tasarım çalışmalarının yürütülmesi
Kurumsal web sitelerinin hazırlanması

İrtibat & Başvuru

Başvuru için tıklayın.

www.ns.com.tr

Notebooklarda Güç Ayarı Nedir?

Hamza ERBAY — Thu, 26 Jan 2012 00:17:43 +0000

Genelde notebooklarda standart olarak pil tasarruf ya da ofis programlarının çalıştırılması modunda çalışır. Bu modlar kullanılma sebebi ise pil ömrünü uzatmak daha doğrusu yaptığımız işe göre uygun performansta kullanıp pil ömrünü maksimum seviyede kullanmamız için sunulmuştur. İster var olan güç planlarını seçebiliriz istersek de kendi güç planımızı oluşturabiliriz.

Not:Büyük hallerini görmek için resimlere tıklayınız.

Güç planı nasıl oluşturuyoruz ?

Güç ayarı için görev çubuğunda sağ alttaki pil simgesine tıklıyoruz. Açılan pencereden diğer güç seçeneklerine tıklıyoruz.

İstersek sağ taraftaki hazır güç planlarından birini seçebiliriz. Notebook u tam performans kullanmak için Yüksek Performans (High Performance ) seçeneğini seçmemiz yeterli diğerlerinden farkı ise örneğin Güç Tasarrufu seçeneğinde notebook işlemci, ekran aydınlık ayarı, notebook kapağı kapatıldığında ne yapılacağına karar verme gibi bir çok ayarı pili uzun ömürlü kullanmaya yönelik ayarlar. Yani düşük performansta bir bilgisayar kullanmış oluyoruz. Seyahat esnasında film izlerken veya ofis programlarıyla çalışırken bu modda olması pilinizi daha uzun ömürlü kullanmanızı sağlayacaktır. Ya da soldaki menüden kendimize özel güç planı oluşturabiliriz. Bunun için Güç Planı Oluşturun’ a tıklıyoruz. Burada bizi çok uğraştırmamak için temel olarak hangi güç planından ayarları örnek almak istediğini soruyor kendimize uyanı seçip isim veriyoruz planımıza ve ileri diyoruz.

Şimdi listede kendi güç planımız gözükecektir. Burada Plan Ayarını Değiştir’ e tıklıyoruz ve kendimize özel ayarları yaparak kaydediyoruz.

Youtube’ da istediğimiz dakikadan itibaren videoyu izlemek

Hamza ERBAY — Sun, 11 Dec 2011 11:58:35 +0000

Google yardım videolarını izlerken bir link ile karşılaştım. Youtube’ daki video baştan değilde belirtilen dakikadan itibaren oynatılmaya başlıyor. Bunu linkin sonuna &t=2m12s şeklinde parametreleri ekliyoruz. 2m 2. dakika 12s 12. saniyeden itibaren başlamasını ayarlıyoruz.

PDF dosyasının içeriğini düzenleme

Hamza ERBAY — Tue, 16 Nov 2010 16:20:46 +0000

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.

Outlook mail şablonu (mail template) hazırlama

Hamza ERBAY — Wed, 20 Oct 2010 00:40:53 +0000

Outlook için mail template hazırlamak için html olarak hazırladığımız şablonu ProgramFiles\Common Files\Microsoft Shared\Stationary dizinine atmamız yeterli olacaktır. Mail template hazırlarken dikkat etmeniz gereken div yerine table kullanma biraz daha işimizi kolaylaştırıyor.

Css konusunda biraz problem yaşanıyor bunun için campaignmonitor.com adresindeki css tablosunda hangi sağlayıcının hangi elementi desteklediği gösterilmiş. Template i hazırlarken erişebilirlik problemleri yaşamamak için css kodunuzu tagları arasına ve class ve id kullanımında referans almak yerine (#box .leftblock) direk class ismini vermeniz ( .lefblock ) problemin önüne geçecektir.

Outlook için mail template hazırladıktan sonra “C:\ProgramFiles\Common Files\Microsoft Shared\Stationary” dizinine atıyoruz (office 2010 kullanıcıları “C:\Users\{kullanıcıAdı}\AppData\Roaming\Microsoft\Stationery” dizinine atmaları gerekiyor… teşekkürler akif abi) ve outlook da araçlar –> seçenekler –> posta biçimi –> ileti örneği –> yazı tipleri butonundan açılan pencerede kişisel ileti örneği sekmesine tıklıyoruz ve tema butonu ile açılan pencereden yapmış olduğumuz htm dosyasını seçiyoruz.

Browser farklılıkları css reset dosyası

Hamza ERBAY — Sun, 01 Aug 2010 09:57:56 +0000

Web tasarımında en problemli kısım yaptığımız tasarımı browserlarda farklılık göstermeden yayınlanmasını isteriz. Fakat çoğu zamana tasarım uygulamada problemli olur. Bunun nedeni ise browserların (firefox,internet explorer,chrome,safari…) html dosyayı farklı şekilde yorumlamaları ve bazı tagların standart değerlerini farklı yorumlamalarıdır. Ben bunun için Fatih Hayrioğlu’ndan öğrendiğim css sıfırlama metodunu kullanıyorum ve yer yer ekleme yapıyorum en son css sıfırlama kodum u ekliyorum yer yer güncelliyeceğim. Tabi inernet explorer da sıfırlama metodu versiyonlara göre değişebiliyor ve bunun için browser versiyonlarına göre yeni style dosyalarını hazırlamanız gerekecektir.

/* 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 */

8. Altın Örümcek web ödüllerinde Cssaddons finalde

Hamza ERBAY — Mon, 07 Jun 2010 20:59:25 +0000

CSS ve XHTML standartlarından geçmiş, tarayıcı farklılıkları olmayan web 2.0 uygulamalanı yayınlayan ve benimde gelişiminde rol aldığım cssaddons.com adlı projemiz 8. Altın Örümcek web ödülleri yarışmasında Bilgi Teknolojileri Donanım/Yazılım kategorisinde ilk altıya girerek finale kalma başarı göstermiş.

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.

Minimal tasarımlar için ikonlar

Hamza ERBAY — Thu, 22 Apr 2010 22:11:23 +0000

Minimal tasarımlarınızda kullanmak için derlenmiş ikon setleri indirnek için tıklayınız.

Adobe browserlab

Hamza ERBAY — Wed, 14 Apr 2010 23:08:23 +0000

Web projelerinizin diğer browserlarda nasıl göründüğünü test etmek istiyorsanız işinize yarıyacak bir uygulama adobe browserlab.

Browserlab Özellikleri

2-up View ile 2 farklı browserdaki görünümü görebiliyoruz
Onion skin özelliği ise 2 görüntüyü üst üste getiriyor ve ikisinin arasındaki farkı daha kolay görmemizi sağlıyor
Farklı işletim sistemlerindeki ve farklı browserlardaki önizleme görüntülerini görebiliyoruz.
Browser Sets ile hızlı erişim için kullanmak istediğimiz browserları listeliyoruz.

Bu sayede bilgisayarınıza tüm browserları yüklemenize gerek kalmıyor. Kullanım için üye olmanız yeterli. Adobebrowserlab

Css3 hakkında

Hamza ERBAY — Sat, 10 Apr 2010 01:07:20 +0000

Css3 ün gelmesi tasarımcılar açısından birçok kolaylık getirdi. Bunlara örnek vermek gerekirse

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/