<![CDATA[MyBB Depo Forum - Grafik & Tasarım Araçları]]> https://mybbdepo.com/ Thu, 08 Oct 2026 13:18:46 +0000 MyBB <![CDATA[Woob10 Forum Çizim Çalışması [Kodlama aşamasında]]]> https://mybbdepo.com/woob10-forum-cizim-calismasi-kodlama-asamasinda-konusu.html Sat, 07 Sep 2019 19:44:04 +0300 https://mybbdepo.com/woob10-forum-cizim-calismasi-kodlama-asamasinda-konusu.html Oğuzhan AKA tarafından çizilmiş ve tarafımca da kodlanmaktadır. Yorum yaparken hem tasarım hem kodlama hakkında görüşlerinizi bildirirseniz sevinirim.
Oğuzhan AKA Adlı Kullanıcıdan Alıntı:Script myBB olduğu için temanın bazı yerlerinde sınırlı kalmak zorunda kaldım yorumlarınızı bekliyorum ayrıca behance'ı olanlar oradan oylarsanız sevinirim. Ayrıca bu linkten hepsini birden görebilirsiniz, tek tek linklere tıklamanıza gerek yok ^^ Yorumlarınızı bekliyorum.
https://www.behance.net/gallery/84915023/WOOB10

ANASAYFA (ZİYARETÇİ OLARAK) > https://resim.sinemaovasi.com/files/4Y4Y7u.png
ANASAYFA (ÜYE OLARAK) > https://resim.sinemaovasi.com/files/8Q2I1z.png
ANASAYFA (ÜYE OLARAK + KAYAN MENÜLÜ) > https://resim.sinemaovasi.com/files/3Q10M10a.png

-------------------------

FORUM İÇİ > https://resim.sinemaovasi.com/files/1B3S4j.png
LOGIN > https://resim.sinemaovasi.com/files/3I5P10i.png
KAYIT OL SAYFASI > https://resim.sinemaovasi.com/files/6W9Y4c.png
KULLANICI PANELİ > https://resim.sinemaovasi.com/files/7Q3B7x.png
POSTBIT > https://resim.sinemaovasi.com/files/2W10K5e.png
PROFİL > https://resim.sinemaovasi.com/files/2V6W7i.png
YÖNETİCİ LİSTESİ + ÜYE LİSTESİ > https://resim.sinemaovasi.com/files/o4X9H3.png

KODLAMDAN GÖRÜNTÜ(INDEX) -
resim]]> Oğuzhan AKA tarafından çizilmiş ve tarafımca da kodlanmaktadır. Yorum yaparken hem tasarım hem kodlama hakkında görüşlerinizi bildirirseniz sevinirim.
Oğuzhan AKA Adlı Kullanıcıdan Alıntı:Script myBB olduğu için temanın bazı yerlerinde sınırlı kalmak zorunda kaldım yorumlarınızı bekliyorum ayrıca behance'ı olanlar oradan oylarsanız sevinirim. Ayrıca bu linkten hepsini birden görebilirsiniz, tek tek linklere tıklamanıza gerek yok ^^ Yorumlarınızı bekliyorum.
https://www.behance.net/gallery/84915023/WOOB10

ANASAYFA (ZİYARETÇİ OLARAK) > https://resim.sinemaovasi.com/files/4Y4Y7u.png
ANASAYFA (ÜYE OLARAK) > https://resim.sinemaovasi.com/files/8Q2I1z.png
ANASAYFA (ÜYE OLARAK + KAYAN MENÜLÜ) > https://resim.sinemaovasi.com/files/3Q10M10a.png

-------------------------

FORUM İÇİ > https://resim.sinemaovasi.com/files/1B3S4j.png
LOGIN > https://resim.sinemaovasi.com/files/3I5P10i.png
KAYIT OL SAYFASI > https://resim.sinemaovasi.com/files/6W9Y4c.png
KULLANICI PANELİ > https://resim.sinemaovasi.com/files/7Q3B7x.png
POSTBIT > https://resim.sinemaovasi.com/files/2W10K5e.png
PROFİL > https://resim.sinemaovasi.com/files/2V6W7i.png
YÖNETİCİ LİSTESİ + ÜYE LİSTESİ > https://resim.sinemaovasi.com/files/o4X9H3.png

KODLAMDAN GÖRÜNTÜ(INDEX) -
resim]]> <![CDATA[Play Tema [Video - Film - Dizi] Forumlarına Özel]]> https://mybbdepo.com/play-tema-video-film-dizi-forumlarina-ozel-konusu.html Sun, 01 Sep 2019 20:08:13 +0300 https://mybbdepo.com/play-tema-video-film-dizi-forumlarina-ozel-konusu.html Forum sitenizi artık görünüş olarak film, dizi ve video paylaşan sitelere çevirmeye ne dersiniz? Açık Ağızlı Gülümseme


Film dizi ve video paylaşan forum siteleri için özel tasarlanmış bir tema halen kodlama aşamasında olup sadece index kısmı paylaşılmıştır.

Konu altına lütfen yorumlarınızı yazınız, bekliyoruz. Temanın gidişatı nasıl ve neler eklenmesini isterdiniz?


resim
resim

resim




Postbitten Görüntüler
resim

Bir MD Graphic Projesi 
]]> Forum sitenizi artık görünüş olarak film, dizi ve video paylaşan sitelere çevirmeye ne dersiniz? Açık Ağızlı Gülümseme


Film dizi ve video paylaşan forum siteleri için özel tasarlanmış bir tema halen kodlama aşamasında olup sadece index kısmı paylaşılmıştır.

Konu altına lütfen yorumlarınızı yazınız, bekliyoruz. Temanın gidişatı nasıl ve neler eklenmesini isterdiniz?


resim
resim

resim




Postbitten Görüntüler
resim

Bir MD Graphic Projesi 
]]> <![CDATA[Cs 6 Ve Rank Hakkında]]> https://mybbdepo.com/cs-6-ve-rank-hakkinda-konusu.html Sat, 21 May 2016 17:00:41 +0300 https://mybbdepo.com/cs-6-ve-rank-hakkinda-konusu.html
resim

Diğer rankları nereden görebilirim acaba ?]]>
resim

Diğer rankları nereden görebilirim acaba ?]]> <![CDATA[İlk kez tema çizimi yaptım]]> https://mybbdepo.com/ilk-kez-tema-cizimi-yaptim-konusu.html Tue, 02 Feb 2016 01:43:02 +0200 https://mybbdepo.com/ilk-kez-tema-cizimi-yaptim-konusu.html

D10 sitesinde hesabım #Warf nickidir ama logoyu yinede Akito diye koydum.


link : http://i.hizliresim.com/3YG7b0.png


resim]]>

D10 sitesinde hesabım #Warf nickidir ama logoyu yinede Akito diye koydum.


link : http://i.hizliresim.com/3YG7b0.png


resim]]> <![CDATA[Yaptığım rank [İlk kez]]]> https://mybbdepo.com/yaptigim-rank-ilk-kez-konusu.html Mon, 01 Feb 2016 19:16:32 +0200 https://mybbdepo.com/yaptigim-rank-ilk-kez-konusu.html

resim



İyi kötü görüşlerinizi bekliyorum lütfen kötü olan yerleri söyleyin ki düzelteyim.

D10 #Warf benim.]]>

resim



İyi kötü görüşlerinizi bekliyorum lütfen kötü olan yerleri söyleyin ki düzelteyim.

D10 #Warf benim.]]> <![CDATA[Bu rankın psd'si var mı?]]> https://mybbdepo.com/bu-rankin-psd-si-var-mi-konusu.html Sun, 06 Dec 2015 17:28:07 +0200 https://mybbdepo.com/bu-rankin-psd-si-var-mi-konusu.html

resim


Elinde bu rankların psd'si olan varsa lütfen hemen yazabilirmi? Çok seri olursa sevinirim acelem var da... Gülümseme]]>

resim


Elinde bu rankların psd'si olan varsa lütfen hemen yazabilirmi? Çok seri olursa sevinirim acelem var da... Gülümseme]]> <![CDATA[960 Grid Sistemi]]> https://mybbdepo.com/960-grid-sistemi-konusu.html Mon, 05 Oct 2015 22:07:14 +0300 https://mybbdepo.com/960-grid-sistemi-konusu.html
Tasarımda(Temada) çözünürlük konusu can sıkan konulardan birisidir. Her evdeki bilgisayar ? artık bilgisayar kısıtlaması yok tablet, telefon, televizyon gibi çeşitli ekranlardan internete internetten sayfalara giriyoruz herkesin materyali farklı.

Bizde bugün bu işin tasarıma düşen kısmındaki önemli detay çözünürlük konusunu ( bunu yazarken buraya devam edecek cümle bulamadım üzgün ) halledelim.

Birden çok materyal saydım internet sitelerine girebilmek için, ama hepsi aynı boyutta değil. 

Siteleri nasıl yapacağız ? 
Siteler her materyalde aynı boyutta mı çıkıyor ?

Siteleri nasıl yapacağız sorusu çok çeşitli isteğinize bakar "Blog, forum, sosyal medya, video vb." budarada kullandığınız sistemi belirlersiniz ve hazırlarsınız bizim konumuz diğer soru..

Siteler her materyalde aynı boyutta mı çıkıyor ?

Eveeeeeeeeet sayın seyirciler biz sitemizi kurduk ( şuanda MyBBDepo Forumundayız -size özel yazıyorum başka sitelerde paylaşmıyorum- )
Sitemizin güzelliği için bir tema lazım (Beyaz sayfaya girecek halimiz yok) size bu yazıda tema yapmayı öğretiyormuyum ? azıcık Açık Ağızlı Gülümseme
Sistemleri bilen neye tema yapacağını bilen kişilere yazıyorum aslında daha iyi bir tema yapmaları için.

960 Grid Sistemi

 Kullanacağımız sistem "960 Grid" bu sistemi şöyle tanımlayalım;

Dünyadaki insanların interneteki sitelere erişim sağladığımız araçların ekran boyutlarını tek bir ekrana sınırlandıramayız bu bir kuraldır. Kuralı bozmamak için 960 Grid sisteminden yardım alabiliyoruz.

-Net bir cümle kurmak yerine halk dili ile anlatmak sizi sıkmayacağını düşündüm Gülümseme - 

Bu sistemi ;

1-Tema Tasarlarken Kullanacağız - Adobe Photoshop -
2-Tema Kodlarken Kullanacağız - HTML & CSS -

*Programlar / Diller önerdiklerim (benim bildiklerim anlatacaklarım) sisteminize göre değişir programlar/diller


Nasıl kullanacağımızıda anlattık hafiften bu sistemi indire koyulalım

Kod:
http://960.gs/

siteye girelim zaten anlarsınız ama ben tarif edeyim.

resim

"Big ol'DOWNLOAD button Gülümseme" yazan butona basıyorum ve indiriyoruz bulamadıysanız aşağı linkliyorum up up Açık Ağızlı Gülümseme

Kod:
https://github.com/nathansmith/960-Grid-System/archive/master.zip

.zip dosyamızı indirdik içindeki hediyelere bakalım yupppi Açık Ağızlı Gülümseme

"960-Grid-System-master" klasörünün içinde ;

1- "app_plugins" - "Uygulama Eklentileri"
2- "code" - "Kod"
3- "licenses" - "Lisanslar"
4- "logo_files" - "Logo Dosyaları"
5- "sketch_sheets" - "Kroki(Taslak) Sayfaları"
6- "templates" - "Temalar"
7- iki tane zımbırtı var kusura bakmayın bilmiyorum anlatacaklarımla da alakası yok Açık Ağızlı Gülümseme

Bu klasörleri aşama aşama içindekileri açıklayarak gideceğim sizde kullanırken zorluk çekmeyeceksiniz.

**
1- "app_plugins" - "Uygulama Eklentileri"

İki tane program dosyası çıkıyor içlerindeki dosyalar ile uygulamamzda 960 Grid sisteminin sütunlara ulaşa biliriz.

2- "code" - "Kod"

Burada bir kaç tanım ekliyorum 960 Grid sistemi ile alakalı

*12 16 24 Sütunlar
*12'li Tek Sutun 60px Genişlik , 16'lı Tek Sütun 40px Genişlik , 24'lü Tek Sütun 30px Genişlik (24'lü sütun yerine 12 ve 16 iş görüyor)
*Her sütun arası sağında 10px solunda 10px boşluk vardır.
*Sütun isimleri grid_numara olarak geçer

Burada 2 Klasör 4 .html sayfası bizi karşılıyor.

-css klasöründe css kodlarının bulunduğu yer
-img klasöründe sütunların .gif hali bulunuyor

ilk önce yapıyı öğrenmek için gözlem yapalım "demo.html" açalım;

12 Column Grid - 16 Column Grid

2 adet bizi şekil karşıladı buna sayfada diyebiliriz.Sayfalarda kolonların ölçüsü ve çeşitleri verilmiş.

Bu kısımda dikkat etmemiz gereken nokta ölçüler ve kaç stun kapladığı

Küçük bir örnekle bunu pekiştirelim;

12 Sütunludan bir örnek vereceğim bu 16 ve 24 içinde geçerlidir...

Forum ya da websitesi fark etmez 

sol tarafta bir panel - sağ tarafda yazı içerikleri forumlar..

resim

Kırmızı: 3 Sütun sol alan 220px - 9 Sütun sağ alan 700px

Mavi: 4 Sütun sol alan 300px - 8 Sütun sağ alan 620px

Biz tasarımı yaparken böyle bölümlere ayırıcaz sonradan kodlara geçireceğiz

ÖRN: 
Grid 960 anlatım sayfasından 2 Kolonlu ilk Örn. (12'li Sütun) bakınız!!! 
Sayfaya ulaşmak için konunu en altındaki "Örnek Çalışma Dosyam" a bakınız!!!
Kırmızı içine aldığım yeri 
 " Kırmızı: 3 Sütun sol alan 220px - 9 Sütun sağ alan 700px "

kodlarken şöyle sistem yapıyoruz

Kod:
<div class="container_12">
<div class="grid_3">
220px
</div> 
<!-- end .grid_3 --> 
<div class="grid_9">   
700px
</div>
 <!-- end .grid_9 -->
</div>
<!-- end .container_12 -->

<div class="container_12"> -> Kaçlı sütun kullandığımızı belirtiyoruz [16 ve 24 de eklene bilir, yapmak isteyenler "container_12" 12 yerine 16 ya da 24  dü yazabilirsiniz]
<div class="grid_3"> -> Kaçıncı sırayı sütünu kullanacağımzı belirtiyoruz [ 1. sütundan 3. sütuna kadar, bunu siz istediğiniz noktaya çekebilirsiniz ÖRN: 5. sütuna kadar kullanmak için "grid_3" 3 yazan yere 5 yazıyoruz]
<div class="grid_9"> -> Kaçıncı sırayı sütünu kullanacağımzı belirtiyoruz [ 1. sütundan 9. sütuna kadar, bunu siz istediğiniz noktaya çekebilirsiniz ÖRN: 8. sütuna kadar kullanmak için "grid_9" 9 yazan yere 8 yazıyoruz]

12 li sütun belirttik

3 ve 9 sütun kullandık 12 yi tamamladık pixel ler ile uğraşmak yok sistem hazır Açık Ağızlı Gülümseme

siz istediğiniz gibi sütunların adetini değiştire bilirsiniz çok önemli nokta sütun sayısını kaç belirlediysek okadar 12 ise 12 , 16 ise 16 ,24 ise 24 tane sütun vardır 12 yapıp 9 + 8 yapamazsınız!!

ÖRN:
Grid 960 anlatım sayfasından 3 Kolonlu İlk Örn. (12'li Sütun) bakınız!!! 
Sayfaya ulaşmak için konunu en altındaki "Örnek Çalışma Dosyam" a bakınız!!!


Solda menüler ortada forum sağda istatistik 3 kolonlu bir yapı;

12 li sütun kullanalım

3 + 6 + 3 şeklinde belirledim

Kod:
<div class="container_12">
<div class="grid_3">
220px 
</div> 
<!-- end .grid_3 -->  
<div class="grid_6">   
460 px
</div>
 <!-- end .grid_6 -->
<div class="grid_3">
220px 
</div>
<!-- end .grid_3 -->  
</div>
<!-- end .container_12 -->


16 lı da ise
Grid 960 anlatım sayfasından 3 Kolonlu İlk Örn. (16'li Sütun) bakınız!!! 
Sayfaya ulaşmak için konunu en altındaki "Örnek Çalışma Dosyam" a bakınız!!!


3 + 9 + 4 şeklinde belirledim

Kod:
<div class="container_16">
<div class="grid_3">
160 px  
</div> 
<!-- end .grid_3 -->  
<div class="grid_9">   
700px
</div>
 <!-- end .grid_9 -->
<div class="grid_4">
220px
</div>
<!-- end .grid_4 --> 
</div>
<!-- end .container_16 -->

Bu kodlarımızı "demo.html" yi notdefteri ya da kullandığınız notepad++ gibi programlarla açıp inceleyiniz.

Html kısım bu (head body taglarını onları siz eklersiniz bilmiyorsanız google amcadan yardım isteyiniz)

Css kısımına bakalım

css klasörümüzü açalım ve içindekilere bakalım ( bir sürü .css Açık Ağızlı Gülümseme )

biz öğrenmek amacıyla buradayız bir kaç farklılık söylemeliyim ;

*rtl ibareli css dosyalarımız (isimlerinde rtl yazanlar ÖRN: 960_rtl.css) sağdan sola doğru kullanımlıdır (ÖRN: biz soldan sağa doğru kullanırız ama arapça sağdan sola kullanılır)
*reset.css text.css gibi dosyalar bizim temamızda kullanıcağımız boşluklar düzetlmeler yazı karekterleri renkler gibi çeşitli ibareleri barındırır onlar sabit durmasını öneririm (renklerde karetketlerler oynama sıkıntı çıkarmayacak pixel (px) değerlerini oynamak sıkıntı olabilir bilmiyorsanız) ama siz farklı bir şekilde kullanım yapacaksınız engellemiyorum.

960.css i açalım

aşağı doğru uzayan bir sürü kod bizi karşıladı bunları açıklaya açıklaya gidelim

/* `Grid >> Children (Alpha ~ First, Omega ~ Last)

burada biz kullandığımız sütunların içine bir başka sütun daha eklersek sayısıda çok olursa sıralama yapmamızı sağlar.

ÖRN: Grid 6 yı kullanıcağım içinde 3 tane grid 2 yerleştiriceğim

Grid 960 anlatım sayfasından ALPHA ve OMEGA (12'li Sütun) a bakınız!!! 
Sayfaya ulaşmak için konunu en altındaki "Örnek Çalışma Dosyam" a bakınız!!!


grid 6 içindeki;
grid 2 lerin birincisine Alpha
grid 2 lerin sonununcusuna Omega ekliyoruz

ve bir düzen içerisinde hepsi sıralanmış olacaktır.


Kod:
<div class="container_12">
<div class="grid_6">
<div class="grid_2 alpha">  
ALPHA 140 px
</div>
 <!-- end .grid_2 -->
<div class="grid_2">  
140 px
</div>
 <!-- end .grid_2 -->
<div class="grid_2 omega">   
OMEGA 140 px
</div>
 <!-- end .grid_2 -->
</div>
<!-- end .grid_6 -->
<div class="grid_3">
220 px 
</div> 
<!-- end .grid_3 --> 
<div class="grid_3">
220px 
</div> 
<!-- end .grid_3 --> 
</div> 
<!-- end .container_12 -->

size 2 hata çeşidini söylemeliyim bunlar
Grid 960 anlatım sayfasından ALPHA ve OMEGA Hata (12'li Sütun)1- ve [b][i]ALPHA ve OMEGA Hata (12'li Sütun)2-  bakınız!!! [/i][/b]
Sayfaya ulaşmak için konunu en altındaki "Örnek Çalışma Dosyam" a bakınız!!!


1. Hatalı örnek alpha ve omega kullanmayanlar için
2. Hatalı örnek fazla grid göz çıkartır Açık Ağızlı Gülümseme


/* `Prefix Extra Space >> 12 Columns ve /* `Prefix Extra Space >> 16 Columns
/* `Suffix Extra Space >> 12 Columns ve /* `Suffix Extra Space >> 16 Columns

bu kodlarımızın global olanlarını anlatmayacağım zaten anlatacaklarım size yetecektir.

Bu kodlarımızın amacı bizim gridlerimizin genişlemesini sağlamak.
Farklı bir amacı varsa bana yazınız.

prefix-> soldan genişletir

suffix-> sağdan genişletir

Prefix ÖRN:
Grid 960 anlatım sayfasından  Prefix Örn. (12'li Sütun) a bakınız!!! 
Sayfaya ulaşmak için konunu en altındaki "Örnek Çalışma Dosyam" a bakınız!!!


Grid 12 içerisine 4 ve 6 ekledim 10 oldu ben grid 4 e prefix 2 eklemek istedim ve grid_4 yanına prefix_2 yazdım;

Kod:
<div class="container_12">
<div class="grid_4 prefix_2">
prefix 300px 
</div> 
<!-- end .grid_4 -->  
<div class="grid_6">   
460 px
</div>
 <!-- end .grid_6 -->
</div>
<!-- end .container_12 -->

Suffix ÖRN:
Grid 960 anlatım sayfasından  Suffix Örn. (12'li Sütun) a bakınız!!! 
Sayfaya ulaşmak için konunu en altındaki "Örnek Çalışma Dosyam" a bakınız!!!


Grid 12 içerisine 4 ve 6 ekledim 10 oldu ben grid 6 ya suffix 2 eklemek istedim ve grid_6 yanına suffix_2 yazdım;


Kod:
<div class="container_12">
<div class="grid_4 ">
300px 
</div> 
<!-- end .grid_4 -->  
<div class="grid_6 suffix_2">   
460 px suffix
</div>
 <!-- end .grid_6 -->
</div>
<!-- end .container_12 -->

NOT: 12 ve 16 da kodlar değişmiyor sayısı ve boyutları değişiyor bunları css kodlarından detaylıca bakablirsiniz.


/* `Push Space >> 12 Columns ve /* `Push Space >> 16 Columns
/* `Pull Space >> 12 Columns ve /* `Pull Space >> 16 Columns

bu kodlarımızın global olanlarını anlatmayacağım zaten anlatacaklarım size yetecektir.

prefix ve suffix den farkı genişletmiyor kaydırıyor

push-> sol dan ittirme -Soldan sağa doğru-

pull-> sağdan ittirme -Sağdan sola doğru-

Push Örn:
Grid 960 anlatım sayfasından  Push Örn. (12'li Sütun) a bakınız!!! 
Sayfaya ulaşmak için konunu en altındaki "Örnek Çalışma Dosyam" a bakınız!!!


Sağa doğru kaydırma Soldan ittirme
Grid 12 içerisine 4 ve 6 ekledim 10 oldu ben grid 6 ya push 2 eklemek istedim ve grid_6 yanına push_2 yazdım;

Kod:
<div class="container_12">
<div class="grid_4">
300px 
</div> 
<!-- end .grid_4 -->  
<div class="grid_6 push_2">   
Push 460 px 
</div>
 <!-- end .grid_6 -->


Pull Örn:
Grid 960 anlatım sayfasından  Pull Örn. (12'li Sütun) a bakınız!!! 
Sayfaya ulaşmak için konunu en altındaki "Örnek Çalışma Dosyam" a bakınız!!!
Sola doğru kaydırma Sağdan ittirme
Grid 12 içerisine 4 ve 6 ekledim 10 oldu ben grid 6 ya pull 2 eklemek istedim ve grid_6 yanına pull_2 yazdım;

Kod:
<div class="container_12">
<div class="grid_4">
300px 
</div> 
<!-- end .grid_4 -->  
<div class="grid_6 pull_2">   
Pull 460 px 
</div>
 <!-- end .grid_6 -->

NOT: 12 ve 16 da kodlar değişmiyor sayısı ve boyutları değişiyor bunları css kodlarından detaylıca bakablirsiniz.
NOT2: ittirme işlemlerini dikkatli yapmanız gerekir yanlış yeri ittirmek alan dışı bıraka bilir sizi!!!


Ve css kısımını bitirdik 
bu kısımda kodlarken grid 960 nasıl kullanacağınızı anlattım.



3- "licenses" - "Lisanslar"

960 grid lisansları vardır.



4- "logo_files" - "Logo Dosyaları"

960 grid logosunun dosyaları



5- "sketch_sheets" - "Kroki(Taslak) Sayfaları"

960 grid sayfaların taslakları



6- "templates" - "Temalar"

burada çeşitli programlara özel grid 960 ın 12 16 ve 24 lü tasarımları vardır.



7- iki tane zımbırtı var kusura bakmayın bilmiyorum anlatacaklarımlada alakası yok Açık Ağızlı Gülümseme



Video olarak tavsiye:
Kod:
https://youtu.be/yhpE4U3acqI

Kaynak
Kod:
http://www.clubosc.com/
Kod:
http://www.w3schools.com/
Kod:
http://960.gs/

Örnek Çalışma Dosyam -Ek'e ekleye bilirsiniz-
"Dosya Code tagında"

Örnek Çalışma Dosyası için adımlara gidiniz 
960-Grid-System-master.rar ı açın içindeki   Sağ Ok 960-Grid-System-master klasörüne giriniz Sağ Ok code klasörüne giriniz Sağ Ok grid960anlatim.html açınız
Kod:
https://drive.google.com/file/d/0B9qLo_2bINfzUjgyWG53YVF2bUU/view?usp=sharing

Eksik Hata kusur varsa bildiriniz Eklemek istediklerinizi yoruma yazarak konuya katkı yaparsınız ve bende bu konuya altıntı yaparım.

Temada (Tasarımda) Çözünürlük Konusu bu işin ayrı parçasıdır buyrunuz ;

Kod:
http://mybbdepo.com/temada-tasarimda-cozunurluk-konusu.html


İyi Günler]]>
Tasarımda(Temada) çözünürlük konusu can sıkan konulardan birisidir. Her evdeki bilgisayar ? artık bilgisayar kısıtlaması yok tablet, telefon, televizyon gibi çeşitli ekranlardan internete internetten sayfalara giriyoruz herkesin materyali farklı.

Bizde bugün bu işin tasarıma düşen kısmındaki önemli detay çözünürlük konusunu ( bunu yazarken buraya devam edecek cümle bulamadım üzgün ) halledelim.

Birden çok materyal saydım internet sitelerine girebilmek için, ama hepsi aynı boyutta değil. 

Siteleri nasıl yapacağız ? 
Siteler her materyalde aynı boyutta mı çıkıyor ?

Siteleri nasıl yapacağız sorusu çok çeşitli isteğinize bakar "Blog, forum, sosyal medya, video vb." budarada kullandığınız sistemi belirlersiniz ve hazırlarsınız bizim konumuz diğer soru..

Siteler her materyalde aynı boyutta mı çıkıyor ?

Eveeeeeeeeet sayın seyirciler biz sitemizi kurduk ( şuanda MyBBDepo Forumundayız -size özel yazıyorum başka sitelerde paylaşmıyorum- )
Sitemizin güzelliği için bir tema lazım (Beyaz sayfaya girecek halimiz yok) size bu yazıda tema yapmayı öğretiyormuyum ? azıcık Açık Ağızlı Gülümseme
Sistemleri bilen neye tema yapacağını bilen kişilere yazıyorum aslında daha iyi bir tema yapmaları için.

960 Grid Sistemi

 Kullanacağımız sistem "960 Grid" bu sistemi şöyle tanımlayalım;

Dünyadaki insanların interneteki sitelere erişim sağladığımız araçların ekran boyutlarını tek bir ekrana sınırlandıramayız bu bir kuraldır. Kuralı bozmamak için 960 Grid sisteminden yardım alabiliyoruz.

-Net bir cümle kurmak yerine halk dili ile anlatmak sizi sıkmayacağını düşündüm Gülümseme - 

Bu sistemi ;

1-Tema Tasarlarken Kullanacağız - Adobe Photoshop -
2-Tema Kodlarken Kullanacağız - HTML & CSS -

*Programlar / Diller önerdiklerim (benim bildiklerim anlatacaklarım) sisteminize göre değişir programlar/diller


Nasıl kullanacağımızıda anlattık hafiften bu sistemi indire koyulalım

Kod:
http://960.gs/

siteye girelim zaten anlarsınız ama ben tarif edeyim.

resim

"Big ol'DOWNLOAD button Gülümseme" yazan butona basıyorum ve indiriyoruz bulamadıysanız aşağı linkliyorum up up Açık Ağızlı Gülümseme

Kod:
https://github.com/nathansmith/960-Grid-System/archive/master.zip

.zip dosyamızı indirdik içindeki hediyelere bakalım yupppi Açık Ağızlı Gülümseme

"960-Grid-System-master" klasörünün içinde ;

1- "app_plugins" - "Uygulama Eklentileri"
2- "code" - "Kod"
3- "licenses" - "Lisanslar"
4- "logo_files" - "Logo Dosyaları"
5- "sketch_sheets" - "Kroki(Taslak) Sayfaları"
6- "templates" - "Temalar"
7- iki tane zımbırtı var kusura bakmayın bilmiyorum anlatacaklarımla da alakası yok Açık Ağızlı Gülümseme

Bu klasörleri aşama aşama içindekileri açıklayarak gideceğim sizde kullanırken zorluk çekmeyeceksiniz.

**
1- "app_plugins" - "Uygulama Eklentileri"

İki tane program dosyası çıkıyor içlerindeki dosyalar ile uygulamamzda 960 Grid sisteminin sütunlara ulaşa biliriz.

2- "code" - "Kod"

Burada bir kaç tanım ekliyorum 960 Grid sistemi ile alakalı

*12 16 24 Sütunlar
*12'li Tek Sutun 60px Genişlik , 16'lı Tek Sütun 40px Genişlik , 24'lü Tek Sütun 30px Genişlik (24'lü sütun yerine 12 ve 16 iş görüyor)
*Her sütun arası sağında 10px solunda 10px boşluk vardır.
*Sütun isimleri grid_numara olarak geçer

Burada 2 Klasör 4 .html sayfası bizi karşılıyor.

-css klasöründe css kodlarının bulunduğu yer
-img klasöründe sütunların .gif hali bulunuyor

ilk önce yapıyı öğrenmek için gözlem yapalım "demo.html" açalım;

12 Column Grid - 16 Column Grid

2 adet bizi şekil karşıladı buna sayfada diyebiliriz.Sayfalarda kolonların ölçüsü ve çeşitleri verilmiş.

Bu kısımda dikkat etmemiz gereken nokta ölçüler ve kaç stun kapladığı

Küçük bir örnekle bunu pekiştirelim;

12 Sütunludan bir örnek vereceğim bu 16 ve 24 içinde geçerlidir...

Forum ya da websitesi fark etmez 

sol tarafta bir panel - sağ tarafda yazı içerikleri forumlar..

resim

Kırmızı: 3 Sütun sol alan 220px - 9 Sütun sağ alan 700px

Mavi: 4 Sütun sol alan 300px - 8 Sütun sağ alan 620px

Biz tasarımı yaparken böyle bölümlere ayırıcaz sonradan kodlara geçireceğiz

ÖRN: 
Grid 960 anlatım sayfasından 2 Kolonlu ilk Örn. (12'li Sütun) bakınız!!! 
Sayfaya ulaşmak için konunu en altındaki "Örnek Çalışma Dosyam" a bakınız!!!
Kırmızı içine aldığım yeri 
 " Kırmızı: 3 Sütun sol alan 220px - 9 Sütun sağ alan 700px "

kodlarken şöyle sistem yapıyoruz

Kod:
<div class="container_12">
<div class="grid_3">
220px
</div> 
<!-- end .grid_3 --> 
<div class="grid_9">   
700px
</div>
 <!-- end .grid_9 -->
</div>
<!-- end .container_12 -->

<div class="container_12"> -> Kaçlı sütun kullandığımızı belirtiyoruz [16 ve 24 de eklene bilir, yapmak isteyenler "container_12" 12 yerine 16 ya da 24  dü yazabilirsiniz]
<div class="grid_3"> -> Kaçıncı sırayı sütünu kullanacağımzı belirtiyoruz [ 1. sütundan 3. sütuna kadar, bunu siz istediğiniz noktaya çekebilirsiniz ÖRN: 5. sütuna kadar kullanmak için "grid_3" 3 yazan yere 5 yazıyoruz]
<div class="grid_9"> -> Kaçıncı sırayı sütünu kullanacağımzı belirtiyoruz [ 1. sütundan 9. sütuna kadar, bunu siz istediğiniz noktaya çekebilirsiniz ÖRN: 8. sütuna kadar kullanmak için "grid_9" 9 yazan yere 8 yazıyoruz]

12 li sütun belirttik

3 ve 9 sütun kullandık 12 yi tamamladık pixel ler ile uğraşmak yok sistem hazır Açık Ağızlı Gülümseme

siz istediğiniz gibi sütunların adetini değiştire bilirsiniz çok önemli nokta sütun sayısını kaç belirlediysek okadar 12 ise 12 , 16 ise 16 ,24 ise 24 tane sütun vardır 12 yapıp 9 + 8 yapamazsınız!!

ÖRN:
Grid 960 anlatım sayfasından 3 Kolonlu İlk Örn. (12'li Sütun) bakınız!!! 
Sayfaya ulaşmak için konunu en altındaki "Örnek Çalışma Dosyam" a bakınız!!!


Solda menüler ortada forum sağda istatistik 3 kolonlu bir yapı;

12 li sütun kullanalım

3 + 6 + 3 şeklinde belirledim

Kod:
<div class="container_12">
<div class="grid_3">
220px 
</div> 
<!-- end .grid_3 -->  
<div class="grid_6">   
460 px
</div>
 <!-- end .grid_6 -->
<div class="grid_3">
220px 
</div>
<!-- end .grid_3 -->  
</div>
<!-- end .container_12 -->


16 lı da ise
Grid 960 anlatım sayfasından 3 Kolonlu İlk Örn. (16'li Sütun) bakınız!!! 
Sayfaya ulaşmak için konunu en altındaki "Örnek Çalışma Dosyam" a bakınız!!!


3 + 9 + 4 şeklinde belirledim

Kod:
<div class="container_16">
<div class="grid_3">
160 px  
</div> 
<!-- end .grid_3 -->  
<div class="grid_9">   
700px
</div>
 <!-- end .grid_9 -->
<div class="grid_4">
220px
</div>
<!-- end .grid_4 --> 
</div>
<!-- end .container_16 -->

Bu kodlarımızı "demo.html" yi notdefteri ya da kullandığınız notepad++ gibi programlarla açıp inceleyiniz.

Html kısım bu (head body taglarını onları siz eklersiniz bilmiyorsanız google amcadan yardım isteyiniz)

Css kısımına bakalım

css klasörümüzü açalım ve içindekilere bakalım ( bir sürü .css Açık Ağızlı Gülümseme )

biz öğrenmek amacıyla buradayız bir kaç farklılık söylemeliyim ;

*rtl ibareli css dosyalarımız (isimlerinde rtl yazanlar ÖRN: 960_rtl.css) sağdan sola doğru kullanımlıdır (ÖRN: biz soldan sağa doğru kullanırız ama arapça sağdan sola kullanılır)
*reset.css text.css gibi dosyalar bizim temamızda kullanıcağımız boşluklar düzetlmeler yazı karekterleri renkler gibi çeşitli ibareleri barındırır onlar sabit durmasını öneririm (renklerde karetketlerler oynama sıkıntı çıkarmayacak pixel (px) değerlerini oynamak sıkıntı olabilir bilmiyorsanız) ama siz farklı bir şekilde kullanım yapacaksınız engellemiyorum.

960.css i açalım

aşağı doğru uzayan bir sürü kod bizi karşıladı bunları açıklaya açıklaya gidelim

/* `Grid >> Children (Alpha ~ First, Omega ~ Last)

burada biz kullandığımız sütunların içine bir başka sütun daha eklersek sayısıda çok olursa sıralama yapmamızı sağlar.

ÖRN: Grid 6 yı kullanıcağım içinde 3 tane grid 2 yerleştiriceğim

Grid 960 anlatım sayfasından ALPHA ve OMEGA (12'li Sütun) a bakınız!!! 
Sayfaya ulaşmak için konunu en altındaki "Örnek Çalışma Dosyam" a bakınız!!!


grid 6 içindeki;
grid 2 lerin birincisine Alpha
grid 2 lerin sonununcusuna Omega ekliyoruz

ve bir düzen içerisinde hepsi sıralanmış olacaktır.


Kod:
<div class="container_12">
<div class="grid_6">
<div class="grid_2 alpha">  
ALPHA 140 px
</div>
 <!-- end .grid_2 -->
<div class="grid_2">  
140 px
</div>
 <!-- end .grid_2 -->
<div class="grid_2 omega">   
OMEGA 140 px
</div>
 <!-- end .grid_2 -->
</div>
<!-- end .grid_6 -->
<div class="grid_3">
220 px 
</div> 
<!-- end .grid_3 --> 
<div class="grid_3">
220px 
</div> 
<!-- end .grid_3 --> 
</div> 
<!-- end .container_12 -->

size 2 hata çeşidini söylemeliyim bunlar
Grid 960 anlatım sayfasından ALPHA ve OMEGA Hata (12'li Sütun)1- ve [b][i]ALPHA ve OMEGA Hata (12'li Sütun)2-  bakınız!!! [/i][/b]
Sayfaya ulaşmak için konunu en altındaki "Örnek Çalışma Dosyam" a bakınız!!!


1. Hatalı örnek alpha ve omega kullanmayanlar için
2. Hatalı örnek fazla grid göz çıkartır Açık Ağızlı Gülümseme


/* `Prefix Extra Space >> 12 Columns ve /* `Prefix Extra Space >> 16 Columns
/* `Suffix Extra Space >> 12 Columns ve /* `Suffix Extra Space >> 16 Columns

bu kodlarımızın global olanlarını anlatmayacağım zaten anlatacaklarım size yetecektir.

Bu kodlarımızın amacı bizim gridlerimizin genişlemesini sağlamak.
Farklı bir amacı varsa bana yazınız.

prefix-> soldan genişletir

suffix-> sağdan genişletir

Prefix ÖRN:
Grid 960 anlatım sayfasından  Prefix Örn. (12'li Sütun) a bakınız!!! 
Sayfaya ulaşmak için konunu en altındaki "Örnek Çalışma Dosyam" a bakınız!!!


Grid 12 içerisine 4 ve 6 ekledim 10 oldu ben grid 4 e prefix 2 eklemek istedim ve grid_4 yanına prefix_2 yazdım;

Kod:
<div class="container_12">
<div class="grid_4 prefix_2">
prefix 300px 
</div> 
<!-- end .grid_4 -->  
<div class="grid_6">   
460 px
</div>
 <!-- end .grid_6 -->
</div>
<!-- end .container_12 -->

Suffix ÖRN:
Grid 960 anlatım sayfasından  Suffix Örn. (12'li Sütun) a bakınız!!! 
Sayfaya ulaşmak için konunu en altındaki "Örnek Çalışma Dosyam" a bakınız!!!


Grid 12 içerisine 4 ve 6 ekledim 10 oldu ben grid 6 ya suffix 2 eklemek istedim ve grid_6 yanına suffix_2 yazdım;


Kod:
<div class="container_12">
<div class="grid_4 ">
300px 
</div> 
<!-- end .grid_4 -->  
<div class="grid_6 suffix_2">   
460 px suffix
</div>
 <!-- end .grid_6 -->
</div>
<!-- end .container_12 -->

NOT: 12 ve 16 da kodlar değişmiyor sayısı ve boyutları değişiyor bunları css kodlarından detaylıca bakablirsiniz.


/* `Push Space >> 12 Columns ve /* `Push Space >> 16 Columns
/* `Pull Space >> 12 Columns ve /* `Pull Space >> 16 Columns

bu kodlarımızın global olanlarını anlatmayacağım zaten anlatacaklarım size yetecektir.

prefix ve suffix den farkı genişletmiyor kaydırıyor

push-> sol dan ittirme -Soldan sağa doğru-

pull-> sağdan ittirme -Sağdan sola doğru-

Push Örn:
Grid 960 anlatım sayfasından  Push Örn. (12'li Sütun) a bakınız!!! 
Sayfaya ulaşmak için konunu en altındaki "Örnek Çalışma Dosyam" a bakınız!!!


Sağa doğru kaydırma Soldan ittirme
Grid 12 içerisine 4 ve 6 ekledim 10 oldu ben grid 6 ya push 2 eklemek istedim ve grid_6 yanına push_2 yazdım;

Kod:
<div class="container_12">
<div class="grid_4">
300px 
</div> 
<!-- end .grid_4 -->  
<div class="grid_6 push_2">   
Push 460 px 
</div>
 <!-- end .grid_6 -->


Pull Örn:
Grid 960 anlatım sayfasından  Pull Örn. (12'li Sütun) a bakınız!!! 
Sayfaya ulaşmak için konunu en altındaki "Örnek Çalışma Dosyam" a bakınız!!!
Sola doğru kaydırma Sağdan ittirme
Grid 12 içerisine 4 ve 6 ekledim 10 oldu ben grid 6 ya pull 2 eklemek istedim ve grid_6 yanına pull_2 yazdım;

Kod:
<div class="container_12">
<div class="grid_4">
300px 
</div> 
<!-- end .grid_4 -->  
<div class="grid_6 pull_2">   
Pull 460 px 
</div>
 <!-- end .grid_6 -->

NOT: 12 ve 16 da kodlar değişmiyor sayısı ve boyutları değişiyor bunları css kodlarından detaylıca bakablirsiniz.
NOT2: ittirme işlemlerini dikkatli yapmanız gerekir yanlış yeri ittirmek alan dışı bıraka bilir sizi!!!


Ve css kısımını bitirdik 
bu kısımda kodlarken grid 960 nasıl kullanacağınızı anlattım.



3- "licenses" - "Lisanslar"

960 grid lisansları vardır.



4- "logo_files" - "Logo Dosyaları"

960 grid logosunun dosyaları



5- "sketch_sheets" - "Kroki(Taslak) Sayfaları"

960 grid sayfaların taslakları



6- "templates" - "Temalar"

burada çeşitli programlara özel grid 960 ın 12 16 ve 24 lü tasarımları vardır.



7- iki tane zımbırtı var kusura bakmayın bilmiyorum anlatacaklarımlada alakası yok Açık Ağızlı Gülümseme



Video olarak tavsiye:
Kod:
https://youtu.be/yhpE4U3acqI

Kaynak
Kod:
http://www.clubosc.com/
Kod:
http://www.w3schools.com/
Kod:
http://960.gs/

Örnek Çalışma Dosyam -Ek'e ekleye bilirsiniz-
"Dosya Code tagında"

Örnek Çalışma Dosyası için adımlara gidiniz 
960-Grid-System-master.rar ı açın içindeki   Sağ Ok 960-Grid-System-master klasörüne giriniz Sağ Ok code klasörüne giriniz Sağ Ok grid960anlatim.html açınız
Kod:
https://drive.google.com/file/d/0B9qLo_2bINfzUjgyWG53YVF2bUU/view?usp=sharing

Eksik Hata kusur varsa bildiriniz Eklemek istediklerinizi yoruma yazarak konuya katkı yaparsınız ve bende bu konuya altıntı yaparım.

Temada (Tasarımda) Çözünürlük Konusu bu işin ayrı parçasıdır buyrunuz ;

Kod:
http://mybbdepo.com/temada-tasarimda-cozunurluk-konusu.html


İyi Günler]]> <![CDATA[Flats Theme İndex]]> https://mybbdepo.com/flats-theme-index-konusu.html Fri, 04 Sep 2015 19:20:18 +0300 https://mybbdepo.com/flats-theme-index-konusu.html
İndexdeki diğer herşey default olacaktır. Çizim kabataslak yapılmıştır,kaymalar vs olabilir kodlanırsa düzeltilir.]]>
İndexdeki diğer herşey default olacaktır. Çizim kabataslak yapılmıştır,kaymalar vs olabilir kodlanırsa düzeltilir.]]> <![CDATA[Forum Rankları Ücretsiz.]]> https://mybbdepo.com/forum-ranklari-ucretsiz-konusu.html Wed, 12 Aug 2015 19:01:13 +0300 https://mybbdepo.com/forum-ranklari-ucretsiz-konusu.html
resim


PHP Kod:
İNDİRME LİNK ; 
http://bc.vc/stF7rN 


PHP Kod:
JOTTİ TARAMASI ; 
http://bc.vc/rblH8z 
]]>
resim


PHP Kod:
İNDİRME LİNK ; 
http://bc.vc/stF7rN 


PHP Kod:
JOTTİ TARAMASI ; 
http://bc.vc/rblH8z 
]]> <![CDATA[Premium Tema Çizimi]]> https://mybbdepo.com/premium-tema-cizimi-konusu.html Mon, 13 Jul 2015 09:14:37 +0300 https://mybbdepo.com/premium-tema-cizimi-konusu.html

Kodlayacak varsa öm atsın , birde temayı lisanslamak istiyorum nasıl lisanslarım ?]]>

Kodlayacak varsa öm atsın , birde temayı lisanslamak istiyorum nasıl lisanslarım ?]]> <![CDATA[MyBB Tema Çizimim]]> https://mybbdepo.com/mybb-tema-cizimim-21191-konusu.html Thu, 21 May 2015 16:38:53 +0300 https://mybbdepo.com/mybb-tema-cizimim-21191-konusu.html resim
HD:http://i.imgur.com/QjbSslj.png
resim
HD:http://i.imgur.com/ihk7fjk.jpg]]> resim
HD:http://i.imgur.com/QjbSslj.png
resim
HD:http://i.imgur.com/ihk7fjk.jpg]]> <![CDATA[Temada (Tasarımda) Çözünürlük]]> https://mybbdepo.com/temada-tasarimda-cozunurluk-konusu.html Mon, 05 Jan 2015 21:36:32 +0200 https://mybbdepo.com/temada-tasarimda-cozunurluk-konusu.html
Tasarımda(Temada) çözünürlük konusu can sıkan konulardan birisidir.
Bizler tema çizerken (Tasarlarken) standart ölçülere uygun bir tama yapmaya yöneliriz.

Ölçü ?
Şu anda şu ölçü en standart şudur diyen kişi yoktur.
Genişlik Bakımından bakarsak kimisi 1024 px der kimisi 1000 px kimisi 960 px der hangisini seçeceğiz ?

- Ben diyorum ki ifadesiyle cümle başlatmak istemiyorum sadece düşünelim şuan en küçük ekran boyutları olan bilgisayarların monitör boyutlarına bakıp,(Büyük)Tabletlere bakmakta fayda var.

Benim önerim 960 px dir.Araştırmalarım sonucunda buna yöneldim.

Ölçümüz Belli Tasarımı Kodlarken Hata Yaparsak Nasıl Göreceğiz?
Biz yaptığımız temayı kodluyoruz ama biz kendi ekranımızda görüyoruz herkes bizim ekranımızdan kullanmıyor aynı tarayıcı vs vs bir sürü ıvır zıvır..

Yapabileceğimiz Yöntemler (Ek yöntem biliyorsanız ekleriz)
1-Tarayıcı büyültüp Küçültmek
Kolay bir yöntem sitenizin görünümündeyken tarayıcınızı büyültüp küçültün doğruyu verir mi verir ama sizden büyükler için göremezsiniz çünkü en büyük sizsiniz Dil Çıkarma

2-Ekran çözünürlüğü düşürüp büyültmek
Masaüstünü bozan bir uygulama denerdim ama sürekli masaüstü ögelerini düzeltmekten bıkardım etkilidir sizden büyük ve küçükleri görürsünüz.
ünlem Dikkat Monitörünüzün Desteklemediği Frekansa çıkarsanız "out of range"(Yanlış Yazmadıysam Her Monitörde Aynı Yazı İse) hatası alırsanız sistem geri yükleme vs uğraşırsınız!! ünlem

3-Bir site aracılığı ile
veeeeee en kolay ve güzel bir yöntem yok onu büyült yok bunu geçin bunları bir web sitesi var mmmmmm tadından yenmiyor Açık Ağızlı Gülümseme

Kod:
quirktools

isimli site size istediğiniz ölçüleri veriyor ve tarayıcı önemi kalmıyor ortada nötrden bir bakış gibi kullanımı basit ve kolay;

Kod:
http://quirktools.com/screenfly/

resim

Kırmızı Kutu İçine Aldığım Yer
İlk önce karşınıza gelen arama yerine sitenizin veya görmek istediğiniz adresi yazın
(easy php'de tasarım yaparken "127.0.0.1" adresinden tema mı görebiliyordum ve localhost vs her türlü link yazabilirsiniz)

resim

Mor Kutu İçine Aldığım Yer
Soldan sağa
PC > TABLET > MOBİL
kategorileri vardır ve belli başlı ölçüler hazır bulunur kolayca seçme imkanı verir.

Koyu Yeşil Kutu İçine Aldığım Yer
Televizyon ekranları için ayarlanmış ölçüler.

Turkuaz Kutu İçine Aldığım Yer
Bizim için serbest değer bölümü istediğimiz ölçüyü yazabiliriz.


4-Kendimize Biraz Çöpü Batıralım... Kararsız
Kodlamamız ne kadar temiz ve güzel olursa hata payı 0 olur birazcıkta yaptığımız kodlamaya çamuru atarak konuyu bitiriyorum..

Bu konu hassas bir konu dikkat edilmediğinde kötü sonuçlar doğabilir böyle siteler daha var mı bilemiyorum ama bu sitelerin ömrünün çok uzun olduğunu görmedim.
İnşallah uzuuuun yıllar hizmet verir.

Not: 960 Grid sistemini mybb üzerinde entegre etmek istedim yalnız her şablona kodlar eklemek yerine bunun mybb'ye gerek olmadığını gördüm.. Çünkü Mybb Sistemi 960 grid sistemi gibi size alanlar vermiş özellikle 1.8.x de..

ünlem Önerdiğim Yöntem 3. yöntemdir.. ünlem

İyi Günler

Güncelleme 26-07-2015
Güncelleme 19-09-2016]]>
Tasarımda(Temada) çözünürlük konusu can sıkan konulardan birisidir.
Bizler tema çizerken (Tasarlarken) standart ölçülere uygun bir tama yapmaya yöneliriz.

Ölçü ?
Şu anda şu ölçü en standart şudur diyen kişi yoktur.
Genişlik Bakımından bakarsak kimisi 1024 px der kimisi 1000 px kimisi 960 px der hangisini seçeceğiz ?

- Ben diyorum ki ifadesiyle cümle başlatmak istemiyorum sadece düşünelim şuan en küçük ekran boyutları olan bilgisayarların monitör boyutlarına bakıp,(Büyük)Tabletlere bakmakta fayda var.

Benim önerim 960 px dir.Araştırmalarım sonucunda buna yöneldim.

Ölçümüz Belli Tasarımı Kodlarken Hata Yaparsak Nasıl Göreceğiz?
Biz yaptığımız temayı kodluyoruz ama biz kendi ekranımızda görüyoruz herkes bizim ekranımızdan kullanmıyor aynı tarayıcı vs vs bir sürü ıvır zıvır..

Yapabileceğimiz Yöntemler (Ek yöntem biliyorsanız ekleriz)
1-Tarayıcı büyültüp Küçültmek
Kolay bir yöntem sitenizin görünümündeyken tarayıcınızı büyültüp küçültün doğruyu verir mi verir ama sizden büyükler için göremezsiniz çünkü en büyük sizsiniz Dil Çıkarma

2-Ekran çözünürlüğü düşürüp büyültmek
Masaüstünü bozan bir uygulama denerdim ama sürekli masaüstü ögelerini düzeltmekten bıkardım etkilidir sizden büyük ve küçükleri görürsünüz.
ünlem Dikkat Monitörünüzün Desteklemediği Frekansa çıkarsanız "out of range"(Yanlış Yazmadıysam Her Monitörde Aynı Yazı İse) hatası alırsanız sistem geri yükleme vs uğraşırsınız!! ünlem

3-Bir site aracılığı ile
veeeeee en kolay ve güzel bir yöntem yok onu büyült yok bunu geçin bunları bir web sitesi var mmmmmm tadından yenmiyor Açık Ağızlı Gülümseme

Kod:
quirktools

isimli site size istediğiniz ölçüleri veriyor ve tarayıcı önemi kalmıyor ortada nötrden bir bakış gibi kullanımı basit ve kolay;

Kod:
http://quirktools.com/screenfly/

resim

Kırmızı Kutu İçine Aldığım Yer
İlk önce karşınıza gelen arama yerine sitenizin veya görmek istediğiniz adresi yazın
(easy php'de tasarım yaparken "127.0.0.1" adresinden tema mı görebiliyordum ve localhost vs her türlü link yazabilirsiniz)

resim

Mor Kutu İçine Aldığım Yer
Soldan sağa
PC > TABLET > MOBİL
kategorileri vardır ve belli başlı ölçüler hazır bulunur kolayca seçme imkanı verir.

Koyu Yeşil Kutu İçine Aldığım Yer
Televizyon ekranları için ayarlanmış ölçüler.

Turkuaz Kutu İçine Aldığım Yer
Bizim için serbest değer bölümü istediğimiz ölçüyü yazabiliriz.


4-Kendimize Biraz Çöpü Batıralım... Kararsız
Kodlamamız ne kadar temiz ve güzel olursa hata payı 0 olur birazcıkta yaptığımız kodlamaya çamuru atarak konuyu bitiriyorum..

Bu konu hassas bir konu dikkat edilmediğinde kötü sonuçlar doğabilir böyle siteler daha var mı bilemiyorum ama bu sitelerin ömrünün çok uzun olduğunu görmedim.
İnşallah uzuuuun yıllar hizmet verir.

Not: 960 Grid sistemini mybb üzerinde entegre etmek istedim yalnız her şablona kodlar eklemek yerine bunun mybb'ye gerek olmadığını gördüm.. Çünkü Mybb Sistemi 960 grid sistemi gibi size alanlar vermiş özellikle 1.8.x de..

ünlem Önerdiğim Yöntem 3. yöntemdir.. ünlem

İyi Günler

Güncelleme 26-07-2015
Güncelleme 19-09-2016]]> <![CDATA[Tema Yapılcak Fiyat Önemli Değil]]> https://mybbdepo.com/tema-yapilcak-fiyat-onemli-degil-konusu.html Sat, 26 Jul 2014 18:07:48 +0300 https://mybbdepo.com/tema-yapilcak-fiyat-onemli-degil-konusu.html
SKYPE
PHP Kod:
dogan_ronaldo@msn.com 

FACEBOOK
PHP Kod:
https://www.facebook.com/dogan.oral.12 
]]>
SKYPE
PHP Kod:
dogan_ronaldo@msn.com 

FACEBOOK
PHP Kod:
https://www.facebook.com/dogan.oral.12 
]]> <![CDATA[Tasarımcı arkadaşlar için araç]]> https://mybbdepo.com/tasarimci-arkadaslar-icin-arac-konusu.html Fri, 25 Jul 2014 14:36:59 +0300 https://mybbdepo.com/tasarimci-arkadaslar-icin-arac-konusu.html -Border radius
-text shadow
-box shadow
-transition
Kullanımı da gayet kolay. Buyrun site:

Kod:
http://css3generator.com/

Kolay gelsin.
İyi günler.]]> -Border radius
-text shadow
-box shadow
-transition
Kullanımı da gayet kolay. Buyrun site:

Kod:
http://css3generator.com/

Kolay gelsin.
İyi günler.]]> <![CDATA[YouTube Stili Tema]]> https://mybbdepo.com/youtube-stili-tema-konusu.html Wed, 23 Jul 2014 12:14:55 +0300 https://mybbdepo.com/youtube-stili-tema-konusu.html Bunu Temaya Çevirebilcek Varmı Ama MyBBİçin Deyil YouTube Stili Site AÇıcam Da Ondan Biri Kodlarsa Çok Mutlu Olurum.]]> Bunu Temaya Çevirebilcek Varmı Ama MyBBİçin Deyil YouTube Stili Site AÇıcam Da Ondan Biri Kodlarsa Çok Mutlu Olurum.]]> <![CDATA[Doğal Kağıt Baskılı Logo Mockup]]> https://mybbdepo.com/dogal-kagit-baskili-logo-mockup-konusu.html Thu, 26 Jun 2014 16:08:52 +0300 https://mybbdepo.com/dogal-kagit-baskili-logo-mockup-konusu.html Bu gün sizlere Natural Paper Printed Logo Mockup‘u sunacağım. Tasarımcıların sunumunda işine yarayacak diye umuyorum.

resim

Boyut: 2300×1500 PX
Tür: PSD

indir-download
Kod:
https://www.mediafire.com/?f79nmnn18asurbl

Kaynak:
Kod:
http://www.grafikbook.net/natural-paper-printed-logo-mockup/
]]> Bu gün sizlere Natural Paper Printed Logo Mockup‘u sunacağım. Tasarımcıların sunumunda işine yarayacak diye umuyorum.

resim

Boyut: 2300×1500 PX
Tür: PSD

indir-download
Kod:
https://www.mediafire.com/?f79nmnn18asurbl

Kaynak:
Kod:
http://www.grafikbook.net/natural-paper-printed-logo-mockup/
]]> <![CDATA[RawShed Tasarım V1 Footer Sade Ve Şık Tasarım Psd'Li]]> https://mybbdepo.com/rawshed-tasarim-v1-footer-sade-ve-sik-tasarim-psd-li-konusu.html Fri, 20 Jun 2014 18:50:15 +0300 https://mybbdepo.com/rawshed-tasarim-v1-footer-sade-ve-sik-tasarim-psd-li-konusu.html Merhaba Arkadaşlar;

Bugün İlk Kez Yaptığım Footeri Ve İlk Kez Kodlama Yaptım.Biliyorum Eksiklerim Var Ama Daha Yeniyim Bu İşlerde Ve Her Türlü Yoruma Açığım.

Not:Yapımcı 'RawShed'tir Yani Ben İzin Almadan İsim Değiştirmeyin Ama Başka Yerlerde Paylaşabilirsiniz.Adımı Belirtmek Şartıyla.

Demo;

resim

Linkler;

Kod:
https://yadi.sk/d/pAuVSmQKUFi29


Kod:
http://www.dosya.tc/server31/lwkl4g/Fuat97Footer.rar.html

Kod:
http://dosya.co/tlrzyp3cqseb/Fuat97_Footer.rar.html

Kod:
http://www.mediafire.com/download/ffb5gt7675rgf21/Fuat97+Footer%282%29.rar

Psd;

Kod:
http://s3.dosya.tc/server24/t0TNYQ/footerpsd.rar.html

Virüs Total;

Kod:
http://virusscan.jotti.org/tr/scanresult/475a2eaf697af4c39c68478d173f700b4502e4b0
]]> Merhaba Arkadaşlar;

Bugün İlk Kez Yaptığım Footeri Ve İlk Kez Kodlama Yaptım.Biliyorum Eksiklerim Var Ama Daha Yeniyim Bu İşlerde Ve Her Türlü Yoruma Açığım.

Not:Yapımcı 'RawShed'tir Yani Ben İzin Almadan İsim Değiştirmeyin Ama Başka Yerlerde Paylaşabilirsiniz.Adımı Belirtmek Şartıyla.

Demo;

resim

Linkler;

Kod:
https://yadi.sk/d/pAuVSmQKUFi29


Kod:
http://www.dosya.tc/server31/lwkl4g/Fuat97Footer.rar.html

Kod:
http://dosya.co/tlrzyp3cqseb/Fuat97_Footer.rar.html

Kod:
http://www.mediafire.com/download/ffb5gt7675rgf21/Fuat97+Footer%282%29.rar

Psd;

Kod:
http://s3.dosya.tc/server24/t0TNYQ/footerpsd.rar.html

Virüs Total;

Kod:
http://virusscan.jotti.org/tr/scanresult/475a2eaf697af4c39c68478d173f700b4502e4b0
]]> <![CDATA[GFOX Tema Çizim]]> https://mybbdepo.com/gfox-tema-cizim-konusu.html Sat, 14 Jun 2014 10:11:51 +0300 https://mybbdepo.com/gfox-tema-cizim-konusu.html Merhaba Arkadaşlar Bir Tasarım Yapdım Basitce Sitemi İdare Edecek Sekilde Ama Kodlama Bilgim Yok Kodlama Bilgisi Olan Arkadaş Temayı Kodluyabilirmi ?

Grafik İşlerini Bırakmıştım Epey Vakit Sonra Başlayınca Böyle birşey Çıktı .


Tasarım :

resim]]> Merhaba Arkadaşlar Bir Tasarım Yapdım Basitce Sitemi İdare Edecek Sekilde Ama Kodlama Bilgim Yok Kodlama Bilgisi Olan Arkadaş Temayı Kodluyabilirmi ?

Grafik İşlerini Bırakmıştım Epey Vakit Sonra Başlayınca Böyle birşey Çıktı .


Tasarım :

resim]]> <![CDATA[Arkadaşlar Font Nasıl Yüklenir ?]]> https://mybbdepo.com/arkadaslar-font-nasil-yuklenir-konusu.html Tue, 04 Mar 2014 16:46:33 +0200 https://mybbdepo.com/arkadaslar-font-nasil-yuklenir-konusu.html Arkadaşlar Benim sitemde Çok Az Font(Yazı Türü) Var . Bende yeni bir tane yüklemek istiyorum. Bu sitede Birsürü Font Var
Ama Nasıl Yükleyeceğimi Bilmiyorum.
Filezilla Kullanmayı Biliyorum Ama Tam Usta Değilim Gülümseme
Sitem:
https://www.gameofplay.com]]> Arkadaşlar Benim sitemde Çok Az Font(Yazı Türü) Var . Bende yeni bir tane yüklemek istiyorum. Bu sitede Birsürü Font Var
Ama Nasıl Yükleyeceğimi Bilmiyorum.
Filezilla Kullanmayı Biliyorum Ama Tam Usta Değilim Gülümseme
Sitem:
https://www.gameofplay.com]]> <![CDATA[tasarımmı Kodlucak varmı]]> https://mybbdepo.com/tasarimmi-kodlucak-varmi-konusu.html Sun, 23 Feb 2014 22:36:55 +0200 https://mybbdepo.com/tasarimmi-kodlucak-varmi-konusu.html
resim


http://www.facebook.com/SuskunReis28]]>
resim


http://www.facebook.com/SuskunReis28]]>