• RSS
  • Facebook
  • Twitter
  • Linkedin

8 Şubat 2016 Pazartesi

Zopim Destek Eklemek


prosmart yazılım destek bölümü için hazırlamış oluğum zopim destek ekleme dökümanlarını sizlerle paylaşıyorum umarım işinize yarar, şimdiden kolay gelsin. İlk adım olarak zopim destek sitesine üye olmanız gerekmektedir, aşağıda anlatmış olduğum üye olma şekli için öncelikle gmail adresinizin açık olması gerekmektedir, zopim destek sayfasına üye olacağınız gmail adresinizi açın, daha sonra zopim destek sayfasına www.zopim.com adresinden giriş yapın, zipim desteğin türkçe siteside bulunmaktadır ben size orjinal site üzerinden anlatacağım, bu sayfada siteyi Türkçe seçeneğine alıyorsunuz.


 


Zopim i deneyin butonu ile devam ediyoruz




üyelik sayfa üstünde bulunan şimdi kaydolun linki ile kaydımızı başlatalım


Gerekli olan bilgileri alanlara girelim ve kaydedelim



kaydetme işleminden sonra mailinize, mail onayınız için gönderilen onay işlemini gerçekleştirelim



mailinizi onayladıktan sonra karşınıza gelecek olan Zopim'e hoş geldiniz yazısını ileri butonu ile geçelim



Zopim destek için kullanacağımız adımızı soyadımız bu gerçek adınız soyadınızda olabilir ve zopim destekte görünmesini istediğiniz adınızı yazın ve ileri diyerek bu bilgileride kaydetmiş ve diğer sayfaya geçmiş olacağız



 burada zopim bize sitemize ekleyeceğimiz kodu veriyor (resmin sağ kısmında yazan kırmızı yazılar sizin için geçerli değildir) zopim kodunu kopyalayarak sayfanızın <head> </head> tagları arasına yapıştırın.



zopim kodunu sayfanıza yapıştırdıysanız artık sizinde sitenizde zopim destek var demektir, şimdi bakalım zopim desteği nasıl kullanacağız, Ana Sayfa butonu altında sitemizi ziyaret eden ziyaretcileri görebiliriz



Ziyaretçi Listesi, bu alanda gerçek zamanlı ziyaretçileri, sitemizi ziyaret ettikleri anda görebiliriz



Geçmiş butonu bize geçmişte yaptığımız konuşmaları ve çevrim dışı olduğumuz durumlarda yazılan mesajları gösterecektir



Pencere ögesi, sayfamıza eklemiş olduğumuz zopim destek menüsünün rengini şeklini beğenmedik veya sitemize uyum sağlasın istedik, işte o zaman Pencere ögesi butonuna tıklıyoruz ve ayarlarımızı yapıyoruz, ayarları yaparken siteden sonuçları bakmamıza gerek bırakmamak için zopim ayarların yanına yaptığımız değişiklikleri göreceğimiz sonuç penceresini de hemen sağ tarafa eklemiş



Kişisel butonu altında kişisel bilgilerimizi yeniden düzenleyebiliriz




buda prosmart yazılım için hazırlamış olduğum zopim destek paneli, sonucu da görmüş olduk.




21 Ocak 2016 Perşembe

CSS Hazır Menüler (link yenilenmiştir)




Önceden eklemiş olduğum css menülerin indirme sürelerinin dolmuş olduğunu görünce, elimde bulunan işinize yarayacağını düşündüğüm css (bootstrap) uyumlu menülerden yeniden indirmeniz için yükledim.



Menüleri buradan indirebilirsiniz

15 Mayıs 2015 Cuma

Less ile Bootstrap Etiketlerini Kullanmak




Less ile Bootstrap Etiketlerini Kullanmak

Öncelikle

www.getbootstrap.com adresinden Download Bootstrap butonuna tıklayarak dowloand sayfasına gelin burada Source code seçeneği tıklayarak dökümanı indirin, indirdiğiniz dökümandan less klasörünü alın ve bootstrap uygulayacağınız çalışma klasörünüzün içene atın.

İkinci aşama olarak

www.lesscss.org adresinden Get Less.js başlığı altında bulunan Browser dowloads seçeneklerinden Download source code linkini tıkladığınızda size less.js dosyasını indirecektir.
İndirdiğiniz  klasör içerisinde bulunan dist klasörü içerisinde less.min.js dosyasını, bootstrap tan indirdiğiniz less klasörü içerine atın.

Son aşamamız

www.winless.org adresinde bulunan winless programını download butonu yardımıyla indirin, indirdiğiniz programının kurulumunu yaptıktan sonra programı çalıştırın,
programın üst kısmında iki seçenek bulunmaktadır buradan Less Files seçeneğinin seçin  ve  sol alt kısmında bununan Add Folder seçeneğinden, daha önce bootstrap sayfasından indirmiş olduğunuz less klasörünü seçerek programa dahil edin.
Daha sonra dosyaların listelendiği kısmın üzerindeki File seçeneğinden eklemiş olduğumuz listenin tamamının işaretini kaldırıp sadece kullanacağınız bootstrap.less dosyasını işaretleyin, işaretledikten sonra sağ alt kısımda bulunan Compile butonuna basın, bu işlemi yaptıktan sonra programın sol üst kısmında bulunan Less Files sekmesi yanında Compiler sekmesini göreceksiniz bu sekmeye tıklayarak burada bulunan özelliklerden dosyanın yolunu ve son derleme zamanını görebilirsiniz.
Daha sonra bootstrap’ın sitesinden indirmiş olduğunuz bootstrap.less dosyasının bulunduğu klasörün içine baktığınızda size bootstrap.css diye bir dosya oluşturduğunu göreceksiniz bu dosya yolunu, üzerinde çalışma yapacağınız sayfanın üst kısmına ekleyin.  
örneğin less klasörü içerisinde var olan dosya yolumuzu bu şekilde ekleyeceksiniz.
 <link href="less/bootstrap.css" rel="stylesheet">   

Program açıkken örneğin variables.less dosyasında yapacağınız bütün yenilikleri bootstrap.css dosyasına atayacaktır, bu atamayı iki şekilde yapar,  bootstrap.css dosyası açık ise yenilikleri kaydetmek istediğinizi soracaktır,  bootstrap.css dosyası kapalı ise program kendiliğinden otomatik değişiklikleri kaydedecektir.

Çalışma sayfalarınızın üst kısmına bootstrapla ilgili yalnızca aşağıdaki kodu eklemeniz yeterlidir.

<link href="less/bootstrap.css" rel="stylesheet">   

En alt kısmına da bootstrapla ilgili aşağıdaki kodu eklemeniz yeterli olacaktır.

<script src="js/bootstrap.js"></script>

28 Mart 2015 Cumartesi

JavaScript Kullanım Özellikleri





Bu yazımda JavaScript kullanım özelliklerine iki örnek vereceğim.

Birinci yöntem; javascript kodunu kullanacağınız elamana yazarak alacağınız sonuçtur.

aşağıda bulunan örnekte button elemanının onclick özelliğene “document.getElementById” ile bir id veriyoruz daha sonra “.innerHTML” ile html bir döküman ekliyoruz.
 son olarak button elemanına vermiş olduğumuz id ile kullanmak istediğimiz p etiketinin id eşleştiriyoruz.

<button type="button" onclick="document.getElementById('birinci').innerHTML = 'eleman ile deneme'">
eleman deneme </button>

<p id="birinci">eleman ile deneme sonucu buraya gelecek</p>

ikinci yöntem; javascript kodunu fonksiyon oluşturarak alacağınız sonuçtur. aşağıda bulunan örnekte fonsiyonun ismi “ikinci” button elemanının onclick özelliğine yazılarak, fonksiyonun yapacağı işlemler onclick özelliğine atıyoruz.
daha sonra fonksiyonumuzda bulunan “document.getElementById” id ile kullanmak istediğimiz p etiketinin id eşleştiriyoruz.

<script>
function ikinci() {
document.getElementById("ikincideneme").innerHTML = "fonksiyon ile deneme";
}
</script>

<button type="button" onclick="ikinci()"> fonksiyon deneme </button>
<p id="ikincideneme">fonksiyonun sonucu buraya gelecek</p>

Yukarıda bulunan iki örnek arasındaki fark; Javascrip kodunu fonksiyon olarak kullandığınızda, atamak istediğiniz elemana bütün kodları tekrar tekrar yazmak yerine sadece id isimlerini eşleştirerek kullanabilirsiniz, bu şekilde yapacağınız işlemleri daha düzenli ve daha hızlı bir şekilde yapmış olursunuz.

Çalışmalara ait örnek link

10 Mart 2015 Salı

CorelDraw Arayüz Tanıtım, Video Ders


CorelDraw Arayüz Tanıtım

Bu videoda Coreldraw genel kullanım özellikleri, menülerin yerleşim ve genel kullanım özellikleri anlatılmıştır. Daha sonraki videolarda münüler ve araçlar hakkında detaylı anlatım yapılacaktır.

VİDEO DERSİ BURADAN İZLEYEBİLİRSİNİZ


28 Ocak 2015 Çarşamba

Responsive Template Çalışmam


html, jquery, booststrap, less  ile yapılmıştır.

TEMAYA AİT DEMOYU BURADAN GÖREBİLİRSİNİZ



8 Ocak 2015 Perşembe

Html5 Ses ve Video Ekleme






Html5 ile gelen ses ve video etiketlerine ait en önemli özellikler.

Sitenize ses dosyası eklemek
<audio> </audio>  ses dosyası etiketidir.

Ses dosyası yolunu göstermek
<source src=""></source> ses dosyası kaynağını belirtir.

Ses etiketini ekranda göstermek veya gizlemek
Controls : etiketi audio etiketine ait görüntünün ekranda görünmesini sağlar bu etiketi eklemeseniz de audio ses özelliği çalışacaktır fakat ekranda ses etiketine ait hiçbir görüntü bulunmayacaktır, buda arkaplanda çalan ses efekti gibi olacaktır.

Ses dosyasını otomatik başlatmak
Autoplay: etiketi audio etiketinin sayfaya yüklendiği an otomatik çalışmasını sağlar.

Sesin tekrar başlaması
Loop: yüklemiş olduğunuz ses dosyası bittikten sonra tekrar başlamasını sağlar.

Örnek :
<audio autoplay="" controls="">
<source src="”ses.mp3″"></source>
</audio>

Sitenize video dosyası eklemek
<video> </video>  video dosyası etiketidir.

Video dosyası yolunu göstermek
<source src=""></source> video dosyası kaynağını belirtir.

Video etiketini ekranda göstermek veya gizlemek
Controls : etiketi video etiketine ait çerçeve görüntüsünün ekranda görünmesini sağlar bu etiketi eklemeseniz de video görüntüsü ekranda çalışacaktır fakat video etiketine ait hiçbir görüntü bulunmayacaktır.

Ses dosyasını otomatik başlatmak
Autoplay: etiketi audio etiketinin sayfaya yüklendiği an otomatik çalışmasını sağlar.

Sesin tekrar başlaması
Loop: yüklemiş olduğunuz ses dosyası bittikten sonra tekrar başlamasını sağlar.

Video boyutlandırma
Width: videolarınızı kullanacağınız alana göre boyutlandırmanızı sağlar.

Örnek:
<video autoplay="" controls="" width="”400″">
<source src="”video.flv”"></source>
</video>


4 Ocak 2015 Pazar

CSS Box (kutu) Modeli




css ile nasıl kutu modelleyebiliriz, şimdi size bundan bahsedeceğim.

Border: kenar çizgisi, bordere vereceğiniz değerler border kalınlığını belirler, border alabileceği değerler: kalınlık, çizgi şekli, renk. Konuyla ilgili detaylı bilgiyi border konusundan bakabilirsiniz.

Border: bütün kenarlara çizgi uygular.
Border-left: sol kenara çizgi uygular.
Border-right: sağ kenara çizgi uygular.
Border-top: üst kenara çizgi uygular.
Border-bottom: alt kenara çizgi uygular
border:10px 20px: üst ve alt çizgi kalınlığı10px, sağ ve sol çizgi kalınlığı 20px olacaktır.
Border:1px 0 5px 2px: üst çizgi kalınlığı 1px, sağ çizgi yok, alt çizgi kalınlığı 5px, sol çizgi kalınlığı 2px olacaktır. Tabi çizgi şekli ve kalınlığı atamayada unutmamak gerekiyor.

Width ve height: orta alan genişliğini belirler. Width değeri vermediğiniz durumlarda kutu o anki alanın boşluğunu kaplayacak kadar sağa doğru uzayacaktır. Height değerini vermediğinizde ise kutuya eklediğiniz içerik kadar yükseklik değeri alacaktır.

padding: orta alan ile kenar çizgisi arasındaki boşluğu belirler bu alana yazı veya resim gibi herhangi bir şey eklenemez, border için vereceğiniz değer width ve height değeri üzerine eklenir,
padding: bütün kenar boşlukları
padding-left: sol kenar boşluğu
padding-right: sağ kenar boşluğu
padding-top:üst kenar boşluğu
padding-bottom: alt kenar boşluğu
padding:10px 20px, üst ve altan 10px, sol ve sağdan 20 px boşluk verecektir
padding:1px 0 5px 2px, üsten 1px, sağda yok, alttan 5px, soldan 2px boşluk verecektir.

Margin: kenar çizgisi veya kenar çizgisi kullanılmayan durumlarda kenar sınırı ile kutu etrafında bulunan başka etiketlerle olan boşluğu belirler,
margin: bütün kenar boşlukları
margin-left: sol kenar boşluğu
margin-right: sağ kenar boşluğu
margin-top: üst kenar boşluğu
margin-bottom: alt kenar boğluğu
margin:10px 20px, üst ve altan 10px, sol ve sağdan 20 px boşluk verecektir
margin:1px 0 5px 2px, üsten 1px, sağda yok, alttan 5px, soldan 2px boşluk verecektir.

css kodu

.kutu {
background-color:yellow;
width: 100px;
padding: 50px;
border: 50px solid red;
margin: 50px;
}

html kodu

&lt;div class="kutu"&gt; kutu &lt;/br&gt; kutu &lt;/br&gt; kutu &lt;/br&gt; kutu &lt;/div&gt;


çalışmalara ait örnek link:


27 Aralık 2014 Cumartesi

Grafik Tasarım Öğrenmek İsteyenlere Tavsiyeler





Grafik tasarım günümüzde oldukça yaygın bir meslek haline gelmiştir, reklam sektörü yanısıra bir çok firmada kendi bünyelerinde grafik tasarımcı bulundurmaktadır. Grafik tasarım mesleğini okullardan veya kurslardan öğrenenler kadar alaylı dediğimiz çıraklıktan başlayanlarında sayısı oldukça fazladır, grafik tasarımcı herkes olabilirmi diye sorarsak buna hem evet hemde hayır cevabını verebiliriz. Evet, grafik tasarım programlarını kullanmayı öğrenebilirsiniz ve size grafik tasarımcı diyebilirler. Hayır, grafik tasarım programlarını kullanmak sizi grafik tasarımcı yapmaz.

Öncelikle grafik tasarımcı olmak isteme nedeniniz önemlidir, neden bu mesleği tercih ediyorsunuz, günümüzde revaşta olan bir meslek olduğundan mı yoksa ilgi duyduğunuz bir meslek olduğundan mı, peki her iki durum size neler sunar.

Şayet revaşta bir meslek olduğunu düşünerek başlıyorsanız, bir yerden sonra meslekten sıkılmaya başlayacağınız kesindir, bunun yanı sıra kendinizi geliştirmeyede uğraşmayacaksınızdır. Biz yinede revaşta bir meslek olduğunu düşünenlere bir kaç öneriyle yol gösterelim. Proramları öğrendiğinizi varsayarak, mesleğinizi yürütmek adına öncelikle hazır şablonlara fazlasıyla ihtiyaç duyacaksınız en azından bunun için internetten bol bol hazır şablon indirip kendinize arşiv yapmanız gerekecek, yine hazır yapılmış tasarımları kendinize örnek olacaksınız, bir nevi kopya çekerek mesleğinizi yürüteceksiniz, şayet kopya çekmekle ilgili sıkıntınız yoksa ve çektiğiniz kopyaları kendinize uyarlama yeteneğine sahipseniz işinizi bir şekilde yürütürsünüz. Ama grafik tasarımcı aslında olmamış olursunuz, bunu sorun etmiyorsanız sıkıntı yok demektir.

Bu meslek ilginizi çektiği için başlamak istiyorsanız, yine programları öğrendiğiniz varsayarak, öncelikle araştırmanız gerek yada bilmeniz gereken bazı konular bulunmaktadır, bunları sıralamak gerekirse.
Renk uyumu: bununla ilgili internette kaynak bulunduğu gibi göze hoş gelen uyumlu renkleri kendinizde anlayabilirsiniz, renklerle yapılabilecek en yanlış şey ise renklerin insanlar üzerindeki etkisini bilmeden bu işe başlamak olacaktır, her renk insanlar üzerinde farklı bir duygu ve his oluşturmaktadır, örneğin kırmızı renk dikkat çekici olduğu kadar insanlarda bir süre sonra tehlike yani tedirginlik hisside uyandırmaktadır ve siz bunu bilmeden yapacağınız bir çalışma size beklediğiniz sonucu vermeyecektir.
Typography: forma uygun yazmak demektir, bu konuda bilgi sahibi olmanız gerekmektedir, konunun internette fazla kaynağı olmasada, ne olduğunu ve nasıl kullanacağınızı anlayabileceğiniz kadar bilgi bulunmktadır, typography nin size getirilerine bakacak olursak, yaptığınız çalışmalarda yazı tipinin, punto büyüklüğünün, satır uzunluğunun ve satır arası boşlukların ne kadar olması gerektiği konusunda bilgi sahibi olmanıza yardımcı olacaktır, örneğin bir billboard çalışmasına uzun yazı koymanız gerekmektedir, işte burada insanların o yazıyı okurken gözlerinin bir süre sonra yorulup sıkılıp girmemeleri için yazı tipinin, puntosunun, satır uzunluğunun ve satır arası boşlukların nasıl olması gerektiğini bilmeniz gerekir, çünkü böyle bir yazı mecbur olmadığı sürece kimse okumayacaktır, bir ipucu daha uzun bir metni BÜYÜK harflerle yazarsanız bütün harfler aynı boyda olduğu için okuyan kişi bu yazıyı okuma güçlüğü çekecektir, bu nedenler uzun yazıları “BÜYÜK” harf yerine “küçük” harflerle yazmalısınız.
Vurgu: belirtmek istediğiniz yada dikkat çekmek istediğiniz olay, düşünce, ürün diyebiliriz. Ön planda olmasını istediğiniz durumu tasarım içerisinde bulunan diğer nesnelere göre daha göze çarpıcı hale getirmelisiniz, bunun yanısıra vurguyu bir iki kelime yazı ilede yapma imkanınız vardır. Kısaca vurgu yaptığınız çalışmanızda ilk göze çarpan yazı veya nesnedir.

Ve bunlar dışında öğrenmeniz gereken bir çok konu var diyebilirim fakat fazla uzatmak istemediğimden temel bilmeniz gereken konular üzerinde durmak istedim, yine bir öneri olarak bol bol tasarım yapın ve kendi kütüpanelerinizi kendiniz hazırlayın, yapılmış tasarımlara bakarak nelere dikkat edildiğini az çok kafanızda oluşturun. Sizden istenen tasarımlarda ürünü veya olayı tanıyın, anlayın daha sonra hedef kitleyi az çok tanıyın, unutmayınki 7 yaşındaki çocuğun dikkatini çekmek veya ona ulaşmakla 70 yaşındaki bir yetişkinin dikkatini çekmek ona ulaşmak aynı yolla olmayacaktır veya köyde yaşayan bir insanla şehirde yaşayan bir insanın ihtiyacı aynı değildir, kime nasıl ulaşacağınızı, olayın veya ürünün kimlere en doğru şekilde hitap edeceğini yapacağınız tasarımdaki kullanacağınız başlıklar, sloganlar, yazılar ve görsellerle belirleyeceksiniz. Bu nedenle gerçek bir grafik tasarımcı olmak için işinizi severek yapmalısınız ve kendinizi sürekli geliştirmelisiniz.

Peki hangi proramları kullanmalısınız, ilk olarak kesinlikle photoshop bilmeniz gerekir her an işinizin düşeceği bir programdır, özellikle resimlerde yapacağınız değişikler için mutlaka photoshop bilmeniz gerekir, zaten iyi bir grafiker resimler üzerinde istediği gibi oynamayı bilmelidir, tabi photoshop sadece resim için kullanılmaz tasarımda yapabileceğiniz bir programdır fakat vector tabanlı olmaması size vector tabanlı bir program öğrenmek zorunda bırakır, size tavsiye edebileceğim vector tabanlı üç program bulunmaktadır, corelDraw, illustrator bu iki program çok yaygın olarak kullanıldığından mutlaka ikisinide öğrenmenizi tavsiye ederim, ayrıca birini öğrenince diğerinide öğrenmek bana göre o kadarda zor değil, gerçi bu bana görede olabilir fakat vektor tabanlı programlar aynı özellikleri hemen hemen aynı ikonlar altınada kullandığından ve özellikler isim olarak aynı olduğundan en azından yerlerini bulmak ve uygulama açısından fazla zorluk çekmezsiniz, ayrıca programların kullanımlarıyla ilgili internette bir çok dökümanda bulunmaktadır, gelelim üçüncü vector tabanlı programa indesign diyebilirim, program daha çok kullanım alanı çoklu sayfa yani kitap gibi fazla sayfası bulunan çalışmalarda kullanılır.


Şimdilik bu kadar diyorum ve daha sonra prgramların genel kullanımı ve en çok işinize yarayacak özelliklerini anlatan bir yazı hazırlayacağım.



25 Aralık 2014 Perşembe

Web Tasarım Nedir, Nereden Başlamalı





internet dünyası 1990 yılında html ile başlamıştır ve zamanla bugünki halini almıştır. İnternet dünyası başta bilgi paylaşım olarak başlamış olsa da günümüzde daha çok ticari amaca yönelmiş durumdadır. Bir çok kişi ve firmalar internet üzerinden maddi kazanç sağlayacak web siteleri yayınlanmaktadırlar. Hergün sayısı artan ve vazgeçilmez hale gelen web siteleri, web programcılığının yanı sıra web tasarımını da kullanıcıya hitap etmesi açısından önemli olduğunu kabullenmiştir.
Arka planda güçlü bir yazılım olması kadar, ön planda kullanıcıların beğenisine ve kullanım kolaylığına da önem verilmesi web tasarımcılara büyük sorumluluk yüklemektedir. Özellikle son zamanlarda responsive kullanımı ile birlikte web tasarımcıların yükü artmıştır.

Web tasarımla ilgilenmek isteyen web tasarımcı adayları için nereden başlamaları gerektiğine dair bir kaç öneride bulunmak gerekirse, eğer niyetiniz sadece şablon çıkarmaksa sizin için photoshop yeterli olacaktır, photoshopta tasarladığınız şablonu slice tool aracıyla parçaladıktan sonra web formatında kaydetmeniz yeterli, fakat şablon çıkarmaktan fazlasını düşünüpte kodlamaya geçmek istiyorsanız o zaman html den başlamanız gerekmektedir.

Olmazsa olmazımız html
Html, web tasarım gibi web programcılığında temelidir, html oldukça basit ve anlaşılır bir dil yapısına sahip olduğundan öğrenilmesi de kolaydır, en son html5 ile gelen yenilikler ile daha da güçlendirilmiştir.

Sayfalarımıza şablon hazırlamak için css
Css, şablon hazırlamak için kullanılır, yazı rengi, stili, boyutlandırma gibi özellikler atamanıza yarar, kullanım olarak sayfa tasarımlarınızı stil dosyalarında bir kere tanımlayarak her istediğiniz sayfaya link yoluyla dosyayı çektikten sonra, kullanıcı tarafında görünmesini istediğiniz özellikleri class ve id isimleri ile tanımlayabilirsiniz buda sayfaların ve sizin çalışma yükünüzü hafifletmiş olacaktır, en son css3 ile daha da zenginleştirilmiştir.

Animasyonlarımız için Jquery
Jquery, javascript kütüphanesidir, genel olarak animasyonlarda kullanılmaktadır, flash programına alternetif programdır, daha önce flash programıyla yapılan animasyonlar sayfaları ağırlaştırdığından, jquery günümüzde flash ile yapılan çalışmaların yerine tercih edilmeye başlamıştır. Jquery öğrenmeden önce mutlaka javascript konusunda bilginiz olması gerekmektedir. Html ve css dillerine göre biraz daha karmaşık bir yapısı vardır, fakat mantık olarak anlaşılması zor değildir.


Ve son olarak responsive ve bootstrap
responsive, web tasarımda uyumluluk, duyarlılık anlamına gelir, yani ekran boyutuna göre şekil alan yapı da diyebiliriz. Günümüzde responsive tasarımdan adını sıkça duyduğumuz twitter bootstrap yapısıdır, bootstrap’ın sitesinden indirdiğiniz hazır kütüphaneleri sayfanıza ekledikten sonra sitede bulunan örneklerden yola çıkarak ekran boyutunu rahatlıkla uyumlu hale getirebiliyorsunuz, şayet bootstrap’ın vermiş olduğu kütüphanelerde değişiklik yapmak isterseniz, hazır kütüphanelere dokunmadan kendi stil dosyanızı oluşturarak değiştirmek istediğiniz class veya id adıyla uygulamak istediğiniz özelliği tanımlamanız yeterli olacaktır. Bootstrap hakkında fazla türkçe kaynak bulunmamaktadır fakat kendi sitesinden örneklere bakarak ta nasıl kullanılacağı hakkında bilgi edinmeniz zor olmayacaktır.