Rakkoc.Com Recep Akkoç / Rakkocun Yazıtları

20Ara/150

Bootstrap Nedir, Ne iş yapar, Neden kullanılır

Sevgili Blogum, okurlarım, google bot Bootstrapresponsive ve mobile-first projeler geliştirebileceğimiz en popüler framework'lerden biridir. Kendileri twiter tarafından responsivite amaçlı geliştirilmiştir. Özellikle Google'ın 21 nisan güncellemesi ile arama algoritmasında değişikliğe gidip, mobil arayüzü desteği olmayan siteleri 2. plana atacağını söylemesiyle birlikte her zamankinden daha fazla ihtiyaç duyuldu.

Responsive, duyarlı / uyumlu web tasarım, yani mobil cihazlarda iyi bir deneyim sunan web siteleridir.
Mobile-first, Web teknolojilerinde önceliği cep telefonuna ver, pc tarafını ondan sonra planla demektir.

Bootstrap ve buna benzer tüm plugin veya framework'leri belgemize dahil etmenin 2 yolu vardır. İlki CDN kullanmak, ikincisi de kütüphane dosyalarını kendi sunucumuzda host etmek. Benim kişisel önerim tüm plugin veya framework'leri kendi sunucunuza çekmeniz şeklindedir. Nedeni ise geliştirme süreçinde internet bağımlılığından kurtulma; kullanılan versionun desteğinin kalkması gibi durumlardan etkilen meme ve gerektiğinde uygulamaların yanlız intranet (iç network) üzerinden erişimi. en son aklıma gelen de https bağlantılarında cdn'in eklentısını kontrol etme gereksiniminden kurtulma (bu sonuncusu tembellikten başka bir şey değil)

Peki bu işler nasıl yapılır; GetBootStrap sayfasındaki Download bölümüne girip Download Bootstrap dersın ve gelir. güncel versionda 'bootstrap-3.3.6-dist' dosyası gelmekte.

CSS\bootstrap.css
CSS\bootstrap-theme.css
JS\bootstrap.min.js

bu dosyalari sayfaniza dahil ettikten sonra Jquery'yi de dahil etmeniz gerekmektedir. visual studio da bir MVC projesi açtığımızda nasıl gözüküyor neler çekiyor bir bakalım:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home Page - My ASP.NET Application</title>
    <link href="/Content/bootstrap.css" rel="stylesheet" />
    <link href="/Content/bootstrap-theme.css" rel="stylesheet" />
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="/">Application name</a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a href="/">Home</a></li>
                    <li><a href="/Home/About">About</a></li>
                    <li><a href="/Home/Contact">Contact</a></li>
                </ul>
                    <ul class="nav navbar-nav navbar-right">
        <li><a href="#" id="registerLink"><span class="glyphicon glyphicon-user"></span> Register</a></li>
        
        <li><a href="/Account/Login" id="loginLink">Log in</a></li>
    </ul>

            </div>
        </div>
    </div>
    <div class="container body-content">
        


<div class="jumbotron">
    <h1>ASP.NET</h1>
    <p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.</p>
    <p><a href="http://asp.net" class="btn btn-primary btn-lg">Learn more »</a></p>
</div>

<div class="row">
    <div class="col-md-4">
        <h2>Getting started</h2>
        <p>
            ASP.NET MVC gives you a powerful, patterns-based way to build dynamic websites that
            enables a clean separation of concerns and gives you full control over markup
            for enjoyable, agile development.
        </p>
        <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301865">Learn more »</a></p>
    </div>
    <div class="col-md-4">
        <h2>Get more libraries</h2>
        <p>NuGet is a free Visual Studio extension that makes it easy to add, remove, and update libraries and tools in Visual Studio projects.</p>
        <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301866">Learn more »</a></p>
    </div>
    <div class="col-md-4">
        <h2>Web Hosting</h2>
        <p>You can easily find a web hosting company that offers the right mix of features and price for your applications.</p>
        <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301867">Learn more »</a></p>
    </div>
</div>

        <hr />
        <footer>
            <p>© 2015 - My ASP.NET Application</p>
        </footer>
    <script src="/Scripts/jquery-1.11.3.js"></script>
    <script src="/Scripts/bootstrap.js"></script>
</body>
</html>

7. ve 8. satırlarda

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

<link href="/Content/bootstrap-theme.css" rel="stylesheet" />

72 ve 73 de

<script src="/Scripts/jquery-1.11.3.js"></script>

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

Content demesenin sebebi mvc projesinde cssleri default projede orada toplamışlar. Sayfayı bir gözden geçircek olursak ana tablo altında bir grid yapısı vs mevcut. bunları da anlatacağım ama hızlı olarak tab anlamarını söyliyim ve bu günlük bitiriyim.

.col-xs-*(extra small) - ekstra küçük cihazlar(telefonlar)
.col-sm-*(small) - küçük cihazlar(tabletler)
.col-md-*(medium) - orta boylu cihazlar(netbook'lar)
.col-lg-*(large) - geniş cihazlar(masaüstüler)

test ve görsel : http://www.bootply.com/xOLRwoOKFx

10Mar/120

Jquery mobile 2. sayfa – Jquery mobile çoklu sayfa örneği

Merhaba arkadaslar;

daha önce sizinle jquery mobile giris dersini paylaşmıştım şimdide çoklu sayfa örneği paylaşmak istedim. örnegin kodlarını sunmadan önce size görüntüsünü ve calışan linkini vermek istedim.

Link : http://rakkoc.com/jquerymobile/coklusayfa.htm

kodlar :

<html> 

 <head> 

  <title>Mobile Jquery Örneği</title> 

  <meta http-equiv=content-type content=text/html;charset=iso-8859-9>

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />

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

  <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>

 </head> 

 <body> 

 <!-- İlk sayfamız başlangıç -->

 <section id="ilksayfa" data-role="page">

 <header data-role="header"><h1>Header alanımız</h1></header>

  <div class="content" data-role="content">

   <p>İlk sayfamız</p>

   <a href="#ikincisayfa">İkinci sayfaya git</a>

  </div>

  <footer data-role="footer"><h1>Footer alanımız</h1></footer>

  </section>

  <!-- İlk sayfamız bitiş -->

  <!-- İkinci sayfamız başlangıç -->

  <section id="ikincisayfa" data-role="page">

   <header data-role="header"><h1>Header alanımız</h1></header>

  <div class="content" data-role="content">

  <p>İkinci sayfamız</p>

  </div>

  <footer data-role="footer"><h1>Footer alanımız</h1></footer>

  </section>

  <!-- İkinci sayfamız bitiş -->

</body>

</html>

Dikkat ederseniz data-role="page" niteliği olan iki section tag’imizden sadece ilki göründü. JQuery Mobile otomatik olarak bir HTML sayfası içerisinde yer alan birden fazla data-role="page" niteliğindeki tag’lerden sadece ilkini görüntüler. İlk section tag’imiziçerisinden a tag’inin href niteliği ile ikinci section tag’imize çağrıda bulunduğumuzda JQuery Mobile mobil tarayıcımızda ikinci bir sayfa olarak görüntüleme yapar. İkinci sayfamızda bizim yazmadığımız fakat kendiliğinden beliren bir navigasyon butonu yer almakta, bunu JQuery Mobile kendisi sayfalarımızda herhangi bir yönlendirme olduğunda otomatik olarak sayfamıza eklemektedir. Bir sayfadan diğerine geçişlerde istersek birbirinden farklı efektler uygulayabiliriz. Bunun için yapmamız gereken tek şey a tag’imize data-transition niteliğini eklememiz. Bu niteliğe uygulayabileceğimiz efekt listesi.

slide Sayfalarımız içerisinde herhangi bir link’e tıkladığımızda soldan sağa, sayfa header’ında yer alan navigasyon butonuna tıkladığımızda ise sağdan sola sayfalarımızı kaydırarak getirir. Eğer sayfalarımızdaki a taglarımıza herhangi bir data-transition belirtmezsek sayfamızda varsayılan olarak bu efekt kullanılır.
slideUp Sayfalarımız içerisinde herhangi bir link’e tıkladığımızda aşağıdan yukarı, sayfa header’ında yer alan navigasyon butonuna tıkladığımızda ise yukarıdan aşağı sayfalarımızı kaydırarak getirir.
slideDown Sayfalarımız içerisinde herhangi bir link’e tıkladığımızda yukarıdan aşağı, sayfa header’ında yer alan navigasyon butonuna tıkladığımızda ise aşağıdan yukarı sayfalarımızı kaydırarak getirir.
pop Sayfalarımız içerisinde herhangi bir link’e tıkladığımızda içeriden dışarı doğru büyüyerek, sayfa header’ında yer alan navigasyon butonuna tıkladığımızda ise dışarıdan içeri doğru küçülerek sayfalarımızı getirir.
fade Sayfalarımız içerisinde herhangi bir link’e veya navigasyon butonuna tıkladığımızda soldurarak sayfalarımızı getirir.
flip Sayfalarımız içerisinde herhangi bir link’e veya navigasyon butonuna tıkladığımızda çevirerek sayfalarımızı getirir.

İkinci örneğimizde yer alan a tag’imize bir efekt uygulamak istersek kod bloğumuz aşağıdaki gibi düzenlenmelidir.

<a href="#ikincisayfa" data-transition="fade">İkinci sayfaya git</a>

Yukarıda belirtilen tablodaki sayfa geçiş efektlerimizi daha eğlenceli bir hale getirmek için açılan sayfalarımızı köşeleri yuvarlanmış bir dialog penceresi içinde de gösterebiliriz. Bunun için yapmamız gereken tek şey a tag’imize data-rel niteliğini eklemektir. İşin eğlenceli yani ise her bir efekt sayfamızda açılacak olan dialog penceresi için farklı geçişler sağlayacaktır. Sayfamızda data-transition niteliğini kullanmadan dialog penceresi içerisinde sayfamızı görüntülemek istediğimizde varsayılan efekt olarak “pop” efekti uygulanacaktır. İkinci örneğimizde yer alan son sayfamızı bir dialog penceresi içerisinde göstermek istersek kod blogumuz aşağıdaki gibi düzeltilmelidir.

<a href="#ikincisayfa" data-rel="dialog" data-transition="flip">İkinci sayfaya git</a>

 

21Şub/120

Mobile JQuery’e giris

Merhaba arkadaslar Mobile JQuery hakkında kendi calismalarimla baslayarak sizinle bildiklerimi ve ogrendiklerimi paylasmak istedim.

MobileJQuery Nedir

Mobile JQuery; JQuery Javascript framework'unun mobil cihazlara entegre edilmis halidir. Sadece javascript kodlari acisindan degil; ona gore duzenlenmis css ler butonlar ve imagelarida icerisinde barindirir.

Kendim ilk testlerimi yapmak icin http://restorant.rakkoc.com adresini kullaniyordum. kendi projem olan restorant uygulamasini bu framework uzerinde gelistiriyorum.

Nasil Kullanilir

Ben bu yazimi yazarken aktif olan 1.0.1 versionunu kendi siteme upload ettim ve burdan indire bilirsiniz.

illa bu dosyaya ihtiyaciniz yok; Jquery'nin kendi serverlarindan da bu islemleri gerceklestirme yoluna gide bilirsiniz bunun icin asagidaki kodu head taginizin arasina ekleyiniz.

Copy-and-Paste Snippet for CDN-hosted files (recommended):

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>

Bu kodlari ekledikten sonra mobile jquery'nin baslangicini yapiyor oluyoruz.

Örnek sayfa yaratma

örnek olarak bir sayfa yaratacak olursak; İstediginiz bir metin editorune asagidaki ornek sayfa kodunu yapistirip kaydedin. Tarayiciniz ile acin ve artik sizde bir mobil web sayfasi gelistiricisiniz 🙂

<!DOCTYPE html>
<html>
	<head>
	<title>My Page</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
	<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
</head>
<body> 

<div data-role="page">

	<div data-role="header">
		<h1>My Title</h1>
	</div><!-- /header -->

	<div data-role="content">
		<p>Hello world</p>
	</div><!-- /content -->

</div><!-- /page -->

</body>
</html>

suan mobil jqueryli ilk sayfamizi yapmis bulunmaktayiz 🙂