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.

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

Firefox Dev Edition, Linux Mint Üzerine Kurulumu

  Aralık 11, 2017    


Sadece kısa bir kaç yöntemle Firefox Developer Edition 'ı Linux Ubuntu ya da Mint üzerine kurulumunu anlatacağım sizlere.

Öncelikle CTRL+ALT+T ile terminali açın ve aşağıdaki komutları sırası ile girin:

$ sudo add-apt-repository ppa:ubuntu-desktop/ubuntu-make
$ sudo apt-get update
$ sudo apt-get install ubuntu-make
Ubuntu-make 'i kurduktan sonra aşağıdaki komut ile Web aracı Firefox-Dev 'yi kurmasını söylüyoruz.

$ umake web firefox-dev --lang tr
Komutu girdiğinizde karşınıza şöyle bir çıktı gelecektir. Değilse bile aşağıdakine göre ayarlayın(Kullanıcı adı yazan kısım sizin kendi kullanıcı adınız).

$ Choose installation path: /home/kullaniciadi/.local/share/umake/web/firefox-dev
Daha önce kurduğumuz dizindeki klasörü /opt kasörüne taşıyoruz.

$ sudo mv /home/kullaniciadi/.local/share/umake/web/firefox-dev /opt/firefox-dev

Ubuntu için

$ sudo gnome-desktop-item-edit /usr/share/applications --create-new

Mint için Masaüstüne sağ tıklayıp "Burada yeni bir başlatıcı oluştur..." diyoruz ve aşağıdaki gibi uyguluyoruz.

Name: Firefox Dev
Command: /opt/firefox-dev/firefox
İkon üzerine tıklayıp: /opt/firefox-dev/browser/chrome/icons/default/ dizinindeki .png dosyasını seçiyoruz.
Artık masaüstündeki kısayoldan Firefox Dev 'yi başlatabilirsiniz.


  

  Yorum Yok

CSS Nasıl Kullanılır ?

  Aralık 11, 2017    

Tarayıcı içinde bir stil dosyası tanımladığınızda, tarayıcı içeriği o dosyaya göre biçimlendirecektir. CSS kodlarını sayfa içerisinde kullanmanın üç farklı yöntemi mevcuttur.

1. HTML etiketi içerisine doğrudan stil girmek.

Herhangi bir HTML etiketinin başlangıç etiketi içerisine “style” özelliği ekleyerek CSS kodlarının yazılmasıdır.

Kod:

<p style="color:red;"> mavitasarimofisi.com </p>

Yukarıdaki “p” etiketine stil atadık.

2. <head> etiketi içerisinde <style> etiketi kullanımı.

Sayfa içerisindeki herhangi bir nesneye stil ataması yapmak için <style> CSS kodları </style> HTML etiketini kullanırız.

Kod:<head>
<style>
p {

color:red;

}
</style>
</head>
Bu etiket normal olarak <head> etiketi içerisinde kullanılır. Ancak sayfa içerisinde herhangi bir yerde de kullanılırsa da çalışır ama W3 standartlarına uymaz, yinede tarayıcı bunu hata olarak algılasa da hatayı bastırır. En doğru olanı standarda uygun kullanmak ya da 3. yöntemi uygulamak.

3. <head> etiketi içerisinde çağırılması.

Bir CSS dosyasının “head“ etiketi içerisinde çağrılmasıdır ve yöntem olarak en uygun olanı budur.
Aşağıdaki kodu;
<link href="css/style.css" rel="stylesheet" type="text/css">
<head> etiketinin içerisine yerleştirirsiniz.

Örnek Kod:
<head>

<link href="css/style.css" rel="stylesheet" type="text/css">

</head>
Böylece sayfa içerisinde css dizinindeki “style.css” dosyasını çağırmış oluyoruz.


   /

  Yorum Yok

Kaydol: Kayıtlar (Atom)