Web Dev. GökhanKR

Kişisel web tasarım ve kodlama blogu. Web tasarımı ve kodlama araçları ile ilgili bilgiler ve yardımcı dökümanlar.

Kod yazmak sanattır...

gokhankr.com

Blogger tarafından desteklenmektedir.

Sitene Facebook Paylaş Butonu Ekle

  Ekim 15, 2018    



Nette pek güncel kaynak bulamadığım için biraz araştırmak durumunda kaldığım konulardan birisini de ilerde ihtiyacı olanlar için paylaşmak istedim. Facebook paylaş butonunu kendi projem üzerinde kullandım. Aslında çok kolay bir yolu var ama insan farklı işlerle uğraşırken bir de bunu mu öğrenelim şimdi demekten geri duramıyor.

Neyse uzatmadan kısaca anlatacağım. Dev/Facebook adresindeki bu makaleyi açalım. Buradaki işlemleri yapacağız. Öncelikle ben kendi Facebook Uygulamam üzerinden kodları aldım. Anlatımı da böyle yapacağım.

1. Aşağıda "head" tagı arasına eklemeniz gereken "meta" tagları var benim için lazım olanlar url, type, title ve description 'ndı. Daha fazlası makale içerisinde var. Bunları "head" içerisine ekliyoruz ve bulunduğunuz sayfanın bilgilerini etikette belirtildiği gibi "content" içerisine eklemeniz gerekiyor.

Örneğin ben sayfamın linkini ve listelemem gereken konunun bilgilerini PHP ile url bilgisi ile listelediğim verileri veritabanından çağırıp gerekli yerlere uyguladım.

<head>
<title>Site Başlığı</title>
<meta property="og:url" content="https://www.siten.com/icerik.html" />
<meta property="og:type" content="article" />
<meta property="og:title" content="İçerik başlığı" />
<meta property="og:description" content="İçeriğin açıklaması" />
<meta property="og:image" content="https://www.siten.com/resim.jpg" />
</head>

2. Uygulamanızın JS kodunu ve Paylaş Butonu kodunu "Share Button Configurator" alanından, gerekli ayarlamaları yapıp ve uygulamanızı seçip Get Code diyerek alın.



Aşağıdaki gibi bir JS kodu verecektir. "head" tagı içerisine ekleyin.
<!-- Facebook JS SDK Yükle -->
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id))
return;
js = d.createElement(s);
js.id = id;
js.src = "https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.0"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script>

Son olarak paylaş butonunu da hangi sayfada kullanacaksanız oraya ekleyip kullanabilirsiniz.
<!-- Paylaş Butonu -->
<div class="fb-share-button"
data-href="https://www.your-domain.com/your-page.html"
data-layout="button_count"> </div>


Bundan sonra sorunsuz çalışacaktır. Butonun türünü de yine kodları aldığınız api üzerinden ayarlayabilirsiniz.

  Yorum Yok

LG G3 D855 Hardbrick Kurtarma

  Nisan 05, 2018    

Bu yazımda sizlere kendime ait olan LG G3 model cep telefonumu hardbrick haldeyken nasıl açtığımı paylaşacağım. Umarım faydalı olur çünkü bu yazıyı aslında Boarddiag programının cep telefonunu görmemesi sorunu dolayısı ile paylaşıyorum. Boarddiag ile AP_Check yapmaya çalışmam sonucu "No Response from the device. Check PMIC first and if still boot problem, replace AP." uyarısı ile karşılaştım.
Bu yüzden de bu program yerine farklı uygulamalar kullanacağım. Böylelikle fazladan bir .tot dosyası indirmenize de gerek kalmayacak.

Birçoğunuz biliyorsunuzdur LG, G3 modeline Android 6 'dan sonra destek vermeyi kesti. Hal böyle olunca ben de meraklı bir vatandaş olarak Lineage OS kurma girişiminde bulundum ancak maalesef acemiliğimden dolayı telefonu root ettikten sonra netten kabaca indirdiğim TWRP Bootloader 'i flashlamam sonucu cihaza ilk önce uyarı verdirdim ve daha sonra da tekrar .kdz yüklemeye çalışırken tamamen açılmaz hale geldi.

Sonuç olarak yaklaşık üç gün telefonumu açmaya uğraştım, nette yabancı kaynakları alt üst ettim ve çok şükür üçüncü gün telefonumu bu durumdan kurtardım dahası Android 8.1(Lineage OS) sürümünü de başarılı bir şekilde kurdum şu anda sorunsuz kullanmaktayım.

Ek olarak nasıl buldun diye soracak olursanız biraz daha ağır çalışmasını beklerken tam tersine çok performanslı bir şekilde çalıştığını gözlemledim. Yani rahatlıkla yükleyebileceğinizi bildirmek isterim. (Bu arada telefonum G3 D855 16GB)

Başlayalım;

Öncelikle hiç bilmeyen birisine göre anlatmaya çalışacağım. Aşağıdaki linklerden dosyaları bilgisayarınıza indirin.

LG Mobile Driver İndir

HS-USB QDLoader Driver İndir

Android 5.0 Lolipop(.kdz) İndir

 

LG Smart Boot Diag Tool İndir Şifre: osmanusta123*

LGUP İndir

Güncelleme: Çalışmayan linkler güncellenmiştir.

1. Adım

İndirmeler tek dosya halinde değil ama idare edin artık. Öncelikle telefonunuz QDLoader 9008 sürücüsü ile aygıt yöneticisinde gözükür durumda olmalı. Bu yüzden HS-USB driver kurulumunu yapın ve telefon kapalı şekilde power tuşuna basılı tutarak ardından ses açma ve ses kapama tuşlarına aynı anda basın. LG logosu geldikten 1 sn sonra power tuşundan parmağınızı çekip tekrar basılı tutun.

Böylece ekran karanlık olacak ve daha önce yanıp sönen mavi+kırmızı ışık yanmayacak aygıt yöneticisinde şöyle bir donanım gözükecektir. Tam bu esnada parmağınızı tüm tuşlardan çekin.

Not: Eğer telefonunuzun ekranı hiç gelmiyor ise sadece USB kablosunu takmanız yeterli olacaktır.

 

2018-04-03 22_11_47-Bilgisayar Yönetimi.png














2. Adım

androidbrick_G3_fix.7z arşivini çıkarın. Şimdi Smart Tool aracını açın ve yukarıdaki işlemleri tekrar yaparak bağlantıyı yenileyin. "Not Ready !" yazan kısım COM X olarak değiştiği zaman telefonunuzun bağlantısını görecektir. Şimdi sağ üst Model info kısmından All EU Global_XXXX_XXXX seçerek gelen uyarıya Evet diyin. Kısa bir işlem yapacak ve ardından Could you fix it ? uyarısında da Evey diyin.
Açılan seçim penceresinden arşivden çıkardığınız AP_Chip > MSM8974_G3 > Recovery > All EU Global_XXXX_XXXX klasörünü seçin ve indirme işlemi yapacak işlemlerin tamamlanmasını bekleyin.

Picture4

Not: Daha önce telefonunuzun ekranı hiç gelmiyorsa bu işlemden sonra ekran da gelecektir.



3. Adım

İşlemler tamamlandıktan sonra LGUP aracını bilgisayarınıza yükleyin telefonunuzu Download Mod 'a alın ve LGUP programını çalıştırın.

 


Burada UPGRADE seçili iken aşağıdan "..." kısmına tıklayıp .kdz dosyasını seçiyoruz ve başındaki tik işarini kaldırıyoruz. Ardından REFURBISH kısmını aktif edip Start diyoruz. Bu işlemlerden sonra telefonunuz yeniden açılacak ve sıfırdan Android 5 Lollipop kurulmuş olacaktır.

Umarım işinize yarar elimden geldiğince sade anlatmaya çalıştım herhangi bir sorun ile karşılaşırsanız yorum olarak bildirin elimden geldiğince yardımcı olmaya çalışırım.

  8 Yorum

HTML Editörleri

  Aralık 13, 2017    

Not defteri veya Metin Düzenleyici kullanarak HTML yazma

Web sayfalarını profesyonel editörler kullanarak oluşturabilir veya düzenleyebilirsiniz. Ancak HTML öğrenirken basit yazı editörleri olan Not Defteri(PC) veya TextEditör(Mac) kullanmanızı öneririm.

Not Defteri veya TextEdit ile  ilk Web sayfanızı oluşturmak için lütfen aşağıdaki dört adımı uygulayın.


1. Adım: Not Defteri'ni açın (PC)

Windows üzerinden:

Başlat > Programlar > Donatılar > Not defteri

1. Adım: TextEdit'i açın (Mac)

Finder'ı açın > Uygulamalar > TextEdit

Ayrıca, dosyaları doğru kaydetmek için bazı tercihleri ​​de değiştirin.
Tercihler> Biçim > "Düz Metin" seçeneğini seçin.

Daha sonra "Aç ve Kaydet" in altında "HTML dosyalarında zengin metin komutlarını yok say" yazan kutuyu işaretleyin.

Sonra kodu yerleştirmek için yeni bir belge açın.

2. Adım: Örnek HTML Kodu Ekleme

Aşağıdaki örnek HTML kodunu yada istediğiniz herhangi bir kodu açtığınız belge içerisinde yapıştırın.

<!DOCTYPE html>
<html>
<body>

<h1>Yeni bir başlık</h1>

<p>Yeni bir paragraf.</p>

</body>
</html>

Önizleme:












3. Adım: HTML Sayfasını Kaydetme

Dosyayı bilgisayarınıza kaydedin. Dosya > Farklı kaydet deyin.

Dosyayı "index.htm" olarak adlandırın ve kodlamayı UTF-8 (HTML dosyaları için tercih edilen kodlama) olarak ayarlayın.

Not: Dosya uzantısını .html veya .htm olarak kullanabilirsiniz. İkisi arasında hiç bir fark yoktur.

Adım 4: HTML Sayfasını Tarayıcınızda Görüntüleme

Kaydettiğiniz HTML dosyasını tarayıcınızda açın (dosyaya çift tıklayın veya sağ tıklayın - "Birlikte aç" ı seçin.

Sonuç olarak şöyle görünecek:













HTML 'i başarılı bir şekilde çalıştırdınız. Sonraki derslerde kodlarınızı dosyalar halinde kaydederek klasör içerisine arşivleyebilir ve tekrar tekrar gözden geçirebilirsiniz.

   /

  Yorum Yok

HTML 'e Giriş

  Aralık 13, 2017    

HTML Nedir ?

HTML, Web sayfalarını oluşturmada kullanılan standart bir biçimlendirme dilidir. Genel olarak HTML 'in özellikleri şunlardır:
  • HTML, açılımı Hyper Text Markup Language 'dir.
  • HTML, işaretlemeyi kullanarak Web sayfalarının yapısını yorumlar.
  • HTML öğeleri etiketlerle gösterilir.
  • HTML etiketleri "başlık", "paragraf", "tablo" gibi içerik parçalarını etiketlemektedir.
  • Web tarayıcıları ise HTML etiketlerini görüntülemez, bu etiketlere göre sayfayı yorumlayarak kullanıcıya sunmaktadır.

Öncelikle basit bir HTML örneği gösterelim:

See the Pen wpBJNE by Gokhan (@Gokhank58) on CodePen.



Örneğin Açıklaması

<!DOCTYPE html> Bu sayfanın HTML5 olarak bildirildiğini belirtir.
<html> HTML sayfasının kök unsuru olarak açılan etikettir. Tüm etiketler <html> içerisine yazılır.
<head> Belgenin ilgili meta bilgileri içerir.
<title> Doküman için bir başlık belirtir.
<body> Görünen sayfa içeriklerinin olduğu kısım.
<h1> Bir başlık tanımlar.
<p> Bir paragraf tanımlar.

Yukarıdaki örnekte gördüğünüz gibi bazı temel etiketler var ve bu etiketlerin içerisinde de kullanılan başka etiketler var. Bu yapıyı aşağıda inceleyeceğiz.

HTML Etiketleri

Bazı istisnalar dışında HTML etiketleri genellikle bir açma ve bir kapama etiketinden oluşur. Aşağıdaki örneği inceleyin.

<etiketadı> içerik buraya girilir... </ etiketadı>


İnternet Tarayıcıları

İnternet tarayıcılarının(IE, Chrome, Firefox, Safari) amacı, HTML belgelerini okumak ve görüntülemektir. Tarayıcı HTML etiketlerini kullanıcıya göstermez. Bu etiketleri yalnızca sayfanın nasıl görüntüleneceğini belirtmek için kullanır ve ekranda gösterir.



HTML Sayfa Yapısı

Aşağıda bir HTML sayfa yapısının görselleştirilmesi verilmiştir:
<Html>
<Head>
<title> Sayfa başlığı </ title>
</ Head>
<Body>
<h1> Bu bir başlık </ h1>
<p> Bu bir paragraf. </ p>
<p> Bu bir başka paragraf. </ p>
</ Body>
</ Html>

Yalnızca <body> etiketi içerisindeki alan ekranda görüntülenir.


<! DOCTYPE> Bildirim Etiketi

<! DOCTYPE> etiketi tarayıcıların belge türünü belirlemelerine ve web sayfalarını doğru şekilde görüntülemelerine yardımcı olur.

Sayfanın en üstünde (herhangi bir HTML etiketinden önce) yalnızca bir kez eklenmelidir.

<! DOCTYPE> bildirimi büyük / küçük harf duyarlı değildir.

HTML5 için <! DOCTYPE> bildirimi şöyledir:

<!DOCTYPE html>

HTML Sürümleri

İnternetin başından beri HTML 'in bir çok sürümü vardır:

Versiyon Yıl
HTML1991
HTML 2.01995
HTML 3.21997
HTML 4.011999
XHTML2000
HTML52014

   /

  Yorum Yok

CSS 'te karartma efekti yapmak

  Aralık 12, 2017    

Karartma Öncesi

Karartma Sonrası

Çok kolay bir yöntemle CSS kullanarak karartma efekti yapacağız. İhtiyacımız olan sadece iki adet HTML etiketi olacak. Örneğin bir adet div açalım ve bu etikete bir arka plan resmi belirleyelim.

<div id="header-panel">
<div class="container">
<p style="text-align:center;color:#fff;"> Gokhankrll </p>
</div>
</div>

HTML etiketinden sonra CSS 'leri ekleyelim. #header-panel 'e position:relative; ekliyoruz. Daha sonra aynı etikete ::before ile aşağıdaki değerleri atıyoruz. Burada dikkat edilmesi gereken alan .header-panel yani hemen önceki (veya :before yada :after eklenmemiş olanına) etikete position:relative; özelliğinin eklenmesi gerektiğidir.

#header-panel {
        position:relative;
        background-image:url(/resim.jpg);
        width:100%;
        height:500px;
}

#header-panel::before {
        content:"";
        position:absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        width:100%;
        height:100%;
        background:#000;
        opacity:.4;
}

İsterseniz ::before yerine herhangi bir HTML etiketi kullanıp absolute değeri atayarak da aynı sonucu elde edebilirsiniz.İşlemler tamanlandıktan sonra yazının başındaki gibi bir görüntü elde edeceksiniz.




  

  Yorum Yok

Profesyonel Bir Tasarım Nasıl Olmalı ?

  Aralık 12, 2017    

Arayüz geliştiriciliği kolay bir iş değildir. Bir Web Tasarımcısı olmak kodlamayı, tasarlamayı, düzenlemeyi, planlamayı ve daha bir çok alanı bir arada yürütmeyi becerebilen kişidir. Bu durum da saydığımız bu alanlar içinde usta olmayı gerektirir.

Tasarımın bazı kuralları vardır. Bu kurallar hem geliştiricinin hem de kullanıcının yararına olan çalışmalardır. Aynı zamanda bu kurallar tasarımın suitable yani "satılabilirliğini" gösterir. Gelin bu önemli kuralları hep beraber gözden geçirelim.

1. Kodlamada İşlevsellik


Tasarımın en önemli noktalarından birisi neyi nerede kullanacağımızı tam olarak bilmektir. Örneğin HTML 'de h1 etiketi başlığı içerir, p ise paragrafı siz burada her ikisini de p veya h1-2-3 gibi etiketler ile tasarlayabilirsiniz. Ancak bu işlem düzene aykırı olur.


 2. Tasarımda Tutumluluk

Belki de en çok önemsemediğimiz alan budur. Bir tasarımcı, proje üzerinde gereksiz kod yazılımından kaçınmalıdır.

Tasarımda hangi kodu nerede kullanacağımızı iyi bilmeliyiz. Aksi taktirde 1-2 satır yerine 5-10 satır kodlamalarla tasarımı karmaşık ve düzensiz bir hale getirebiliriz. Örneğin elimizde iki adet kalın yazılmış cümle olsun.

<b>Gokhan</b>
<b>Gokhan</b>

Bu iki kelime sayfada şu şekilde görünecektir:
GokhanGokhan

Peki bu iki kelimeyi birer nesne olarak düşünün. Birinci nesneyi üste çıkarmak için ne yapardınız.
En bilindik şekli ile float:left; & width:100%;

Ama kolayca şunu da verebilirdiniz display:block; ve aynı işlemi yapacaktır.


3. HTML Validate


HTML 'de kodlamanın bir yapısı vardır. Bu yapıya aykırı bir düzende kodlama yapmak yanlıştır. BU yapıyı basitçe ifade etmek gerekirse örneğin bir listeleme(ul-ol) elemanı içerisinde form(input-textarea) elemanı kullanamazsınız. Bu HTML 'in standardına aykırıdır.

Aynı şekilde kodlama yaparken <style> etiketini body tag 'ı içerisinde kullanamazsınız. Bu etiket yalnızca head tag 'ı içerisinde kullanılır.

Bir diğer unsur da etiket kapatırken yaptığımız hatalardır. Örneğin div etiketi içerisinde bir link tanımlayalım ancak o anki esnada şöyle bir yanlış yaptınız.

<div><b>Detaylı Bilgi için: </b><a href="#">  Buraya Tıklayınız...  </div></a>

Normalde div etiketi içinde olması gereken a etiketi dışarda kaldı. Bu da yanlış bir kodlamadır ve tarayıcılar bu hataları bastırsa da kodlama içeriği düzeltilmelidir. Bu yanlışları önlemenin en kolay yolu da gelişmiş bir IDE kullanmaktır.


4. Temiz Tasarım


Tasarımda düzen hem bir kodlayıcı için hemde kullanıcı için önemini koruyan bir kavramdır. Bir tasarımın belirli bir düzen ile kodlanması, gerekli yerlerde açıklayıcı alanlar bulunması, kodlamaların gruplar halinde başlangıç ve bitiş etiketlerinin/yorumların bulunması çok önemlidir.


5. Dosyalama


Dosyalama sisteminin düzenli olması js, css, img ve fonts tarzında klasörler ile tasarım dosyalarının düzenlenmesi gerekmektedir. Bir tasarıma ait dosyalar bu düzen içerisinde kolayca erişilebilir olmalıdır.


6. Cross Browser Ayarları


Vee, zurnanın öttüğü yere geldik. Bu kısım bir tasarımcının can alıcı noktasıdır. Web tarayıcıları, örneğin her CSS özelliğini diğer tarayıcılar ile birlikte desteklemez. Bu şu demek, örneğin siz CSS3 ile gelen yeni bir özelliği Chrome üzerinde kullanabilirken(transition, animation, Opacity vs.) Explorer 'da kullanamayabilirsiniz. Bu yüzden bir Web sayfasını her tarayıcıda görüntülenebilecek şekilde kodlamalısınız.

Bazı özellikleri her tarayıcıda kullanmanız gerekmeyebilir. Bazı özellikleri de kullanmak istersiniz ve kullanmak için aşağıdaki gibi bir kodlamaya ihtiyaç duyabilirsiniz.

background:linear-gradient(#fff,#eee);
background:-webkit-linear-gradient(#fff,#eee); /* Webkit tabanlı tarayıcılar */
background:-moz-linear-gradient(#fff,#eee); /* Firefox */
background:-o-linear-gradient(#fff,#eee); /* Opera */
background:-ms-linear-gradient(#fff,#eee); /* Internet Explorer */
İşte bu şekilde kodlamaya da "Tarayıcıdan Bağımsız" kodlama diyoruz.

  

  Yorum Yok

Modern Tasarımlar İçin Kullanılan Kütüphaneler

  Aralık 12, 2017    

Modern olarak nitelendirilen son zamanların trendi haline gelmiş çeşitli tasarımlar ister istemez çeşitli yerlerde karşımıza çıkıyor. Nette gördüğümüz bu tasarımlar bizde şu soruyu da bırakmadan gitmiyor tabi. Nasıl ?

Bir siteye giriş yapıyorsunuz ve bir de bakıyorsunuz ana sayfada kendi kendine horon tepen bir paragraf var. Aynı şekilde aşağı iniyorsunuz ve otomatik bir sayaç işliyor. Az daha iniyorsunuz ve sağdan soldan sütunlar animasyon ile önünüze geliveriyor.

Evet aslında sadece hazır temalar değil, ticari anlamda öne çıkan web sitelerinde de bu yenilikleri görmek mümkün. Sonuçta geliştirici demek yenilikleri de takip etmek demek. Bu yenilikleri de kullanıcıya sunması demek. Burada trend dedik ama aslında bir tasarımcı olarak bakacak olursak trendin adı JavaScript. Evet JS son zamanlarda öyle bir gelişim gösterdi ki bu durum GitHub gibi Git teknolojisi kullanan sitelerin adeta bir JS kütüphanesine dönmesine yol açmış durumda.

Bugün burada bu kütüphaneleri ve işlevlerini açıklayacağım. Eksik olan kütüphaneler olabilir yazıyı elimden geldiğince kısa zaman aralıklarında güncellemeye çalışacağım.


Animate.css



Animate.css 'ten başlamazsak olmaz. Son zamanlarda kullanım oranı belirli oranda düşse de halen kullanılmaya devam eden bir animasyon kütüphanesidir. Çok çeşitli efektleri resmi arayüzü üzerinden inceleyebilirsiniz.

Detaylı kullanım dökümanlarını da Github üzerinden inceleyerek uygulayabilirsiniz.


Wow.Js


Wow ise Animate.css ile birlikte çalışan bir kütüphanedir. Aslında Animate 'i anlamlandıran JS kütüphanesidir de diyebiliriz. Nette dolaşırken çeşitli web sayfalarında gördüğümüz scroll hareketi ile gösterime giren alanlar gibi, Wow.Js ile de HTML etiketi içerisinde belirttiğimiz alanlar tetiklenir ve aktif olan alan ile beraber Animasyonlar gösterime girer.

Detaylı kullanım dökümanı için Github


Sticky.Js



Bu kütüphane ile CSS 'te yaptığımız fixed işlevini otomatik olarak yapıyoruz. Ancak kütüphane olarak çok önemli farklılıkları var. Bunlardan en önemlisi JS 'nin dinamik şekilde çalışmasından dolayı kullanıcı tarafının daha iyi olmasıdır. Örneğin bir web sayfasının ortasına gelin ve tarayıcınızın yenile düğmesine basın. Eğer sabitleme işlemini CSS ile yaptıysanız elementin tekrar karşınıza gelmesi için bir scroll veya yön hareketi belirtmeniz gerekir. Sticky 'de ise sayfayı yenileseniz de sizin sayfa konumunuz otomatik olarak bilineceğinden sabit element direkt karşınıza gelecektir.

Bunların yanında efekt olarak ta Sticky, CSS kullanımından avantajlıdır. Detaylı kullanım dökümanı için Github


Loading Page ve Img

Loading icon cubeLoading icon four squareLoading icon rubik's cubeLoading icon rectangle square dotsLoading icon tetris gameloading icon snake gameloading icon suffling rubik's cubeLoading icon rotating circlesloading icon fadein faceout circlesrotating two circles loaderLoading icon revolving circleshangout loader iconloading icon zoom in zoom out circlesLoading icon bouncing circleloading icon kinetic rotation circle crossgoogle like loaderloading icon conectric circles fading out













Ufak bir çalışmayla web sayfalarınıza yükleniyor simgesi ekleyebilirsiniz. Aynı zamanda web sayfanızdaki resimlere de yükleniyor ibaresi ekleyerek tasarımınızı daha gösterişli hale getirebilirsiniz. Gerekli bilgiler ve dökümanlar için burayı ziyaret edin.

Farklı loading image 'leri edinmek için https://icons8.com/preloaders/ adresinde çeşitli ücretsiz .gif 'ler edinebilirsiniz. http://loadergenerator.com/ ve https://loading.io/ adreslerinden de istediğiniz bir .gif 'i özelleştirip edinebilirsiniz.


 OwlCarousel.Js



Yoğun olarak kullanımda olan bu kütüphane ile çeşitli gösterimlerle modern sliderlar üretebiliyorsunuz. Hem de çok basit HTML kodlamaları ile bu işlemler yapılabilmekte. Resmi sitesi üzerinden slider çeşitlerini inceleyebilirsiniz.

Bunlarla beraber slick.js ve react-slick olarak farklı seçenekler de mevcut. Owlcarousel.js dökümanlarına ulaşmak için Github


Typed.Js



Yine son zamanların popüler kütüphaneleri arasını girmiş olan dinamik yazı özelliği. Bu özellik ile ekranda belirlediğiniz bir yazıyı dinamik bir biçimde gösterime koyabilir, film şeridi gibi kullanıcıya yazdırarak gösterebilirsiniz.

Typed.Js dökümanları için Github


Stellar.Js



Stellar.Js ise elementlere ekranda parallax efekti vermeye yarayan bir kütüphanedir. Aynı şekilde kullanmak isteyeceğiniz en hoş özelliklerden birisi de Parallax Backgrounds özelliğidir.

Stellar.Js dökümanları için Github


Nette daha bir çok kütüphane mevcut ve halen de yeni özellikler çıkmaya devam etmekte. Bu gelişmelere bakarak, ilerleyen zamanlarda konunun bir ikincisini de yayımlayabilirim.

  

  Yorum Yok

Kaydol: Kayıtlar (Atom)