11 Temmuz 2020 Cumartesi

VueJs Öğrenmeye Devam

Merhaba ,

Daha önce Vue .js üzerinde çalışma yapmıştım. Bu sefer başka bir kurs üzerinden tekrar sıfırdan başlayarak bilgimizi ilerletmeye devam ediyoruz. Önce ortamı hazırlayalım. Bu bölüm için bir klasör tanımlayalım ve içinde ilk adında bir klasör ekleyerek başlayalım. Bu klasöre denemelerimizi yapmak için index.html adında bir yeni dosya ekleyelim. Favori editörümüzde index.html dosyasını düzenlemek için açalım. Benim favori editörüm Sublime, size de tavsiye ederim. Önce basit temel HTML sayfa yapısını bir tanımlayalım.

ilk/index.html
<!DOCTYPE html>
<html>
    <head>
        <title>VueJs Öğreniyorum</title>
    </head>
    <body>

    </body>
</html>

Ben kodlarımda Türkçe kelimeler kullanmayı seviyorum. Ancak tarayıcılarda sorun yaşamak istemiyorsanız bütün kod yazdığınız dosyaları UTF-8 encoding ile kaydetmelisiniz. Özellikler Windows kullananlarda "yeni dosya" diyerek üretilen dosyalar Türkçe için Wimdows hazretlerinin Türkçe'ye uygun gördüğü encoding formatlarından birinde üretiliyor ve tarayıcılar bu kodlamayı tanımıyor ya da tanıması için kodumuza ekstra ilavelerle tarayıcıya anlatmamız gerekiyor.


22 Haziran 2020 Pazartesi

BackboneJs dedikleri nedir

Selam ,

Önceki yazıyı bitirir bitirmez yeni yazım için sabırsızlıkla başlıyorum. Backbon.js web uygulama iskeleti.

Bu yazımı daha iyi anlayabilmeniz için biraz JavaScript ve biraz da jQuery bilmek yeterli olacaktır. Bu konuda daha önce yazdığım JavaScript'e Giriş ve JavaScript Orta Seviye yazılarım yeterli olacaktır.

Backbone.js ve Vue.js benim en favori JavaScript iskeletlerim. Çünkü anlaması ve kullanması kolay. Backbone.js hakkında da bir yabancı sitede çok yararlı olduğunu düşündüğüm bir döküman buldum ve bunun üzerinden gideceğim.

Backbone.js'de en sevdiğim özellik Node gerekmeden standart bir web sayfası olarak çalıştırabilmek. Node kullanmayacak mıyız? Biraz kullanacağız, ama sadece bize bir server ile test etmek gerektiğinde. O da daha bu yazının çok ilerilerinde olacak.

Backbone.js MVC yapılardan bir tanesi (Model View Controller). Bu yapıdan kısaca bahsedersek, model verilerin saklanması ve işlenmesini sağlar, controller program lojiğini içerir ve view kullanıcıya gösterilen görselleri içerir.


Backbone'da view ve controller parçaları bir arada gibidir. Ayrıca Router denilen bir yapı da var ki bununla tek sayfalık uygulamalar yapılabilir. Bunlar tek bir web sayfasından oluşan uygulamalardır. Bu halleriyle masaüstü uygulamasına benzerler. Bir örnek GMail internet sayfasına bakabilirsiniz.

Backbone temelde şu parçalardan oluşuyor,

  • Olaylar - Nesnelere belirlenen olaylar sonucunda işlemler yapabilme kabiliyeti kazandırır.
  • Modeller - Uygulama verilerini saklar ve bağlantılı lojiği içerir.
  • Kolleksiyonlar - Modellerden oluşan bir topluluk. Model ile belirlenen verileri saklamak için kullanılır.
  • Görseller - Modelleri kullanıcıya göstermek için gereken görsel kodlarını ve kullanıcı etkileşimi için olaylara dayalı lojiği kapsar.
  • Router'lar - Tek sayfalık uygulamalar için kullanılan program yönlendiricileri. Adres olarak değişik değerler vererek aynı sayfa içinde kullanıcıya başka şeylerin gösterilmesini ve işlevlerin değişmesini sağlarlar.

8 Haziran 2020 Pazartesi

JavaScript Orta Seviye

Merhaba,

JavaScript'e Giriş yazımızın ardından şimdi de orta seviyede bir yazıyla öğrenmeye devam ediyoruz. Bu bölümde temel bilgilerden hariç iş yapan kodlar göreceğiz. DOM , JSON , AJAX , jQuery gibi yeni kelimeler göreceğiz.

Başlayalım.



DOM


Document Object Model kelimelerinin baş harflerinden oluşan DOM ile HTML elemanlarına ulaşarak onlar üzerinde JavaScript ile işlemler yaparız. 

DOM neye benziyor derseniz geliştirici araçlarını açtığımızda elements sekmesinde görünen liste DOM'un ta kendisidir. 


Tree ve Branch

Ağaç ve Dal. HTML yapısı XML yapılara benzer. Elemanlar ve onların içlerinde elemanlar vardır. Bu yapı bir ağaca ve dallarına benzer. Bir tane ana eleman vardır html. Onun head ve body dalları vardır. Bunların her biri içinde de kendi dalları vardır. Bu sebepten DOM için bazen DOM Tree denir. 

DOM'u değiştirmek demek, onun bir elemanını seçip birşeylerini değiştirmek demektir ve bu çoğunlukla JavaScript ile yapılır. . 

2 Haziran 2020 Salı

CSS Orta Seviye

Merhaba,

HTML orta seviye yazımız gibi bu yazımızda da pek zorlayıcı bir şey yok, ama başlangıç seviyesine göre daha kapsamlı.


class ve id seçicileri


Başlangıç yazımızda tag seçicilerini görmüştük. Ama bunlar sayfadaki aynı tipteki elemanların hepsini seçiyor ve değiştiriyordu. class ve id özelliklerini kullanarak istediğimiz elemana nokta atış yapabiliriz. CSS'de class seçiciler nokta karakteri ve ardından bitişik gelen class değeri ile ifade edilirken id değeri # işareti ile başlayan şekilde ifade edilir. 

Buna göre CSS kodumuzu şöyle düşünelim

style2.css
#top {
    background-color: #ccc;
    padding: 20px;
}

.intro {
    color: red;
    font-weight: bold;
}



30 Mayıs 2020 Cumartesi

HTML Orta Seviye

Merhaba.

Daha önce yayınladığım HTML'ye giriş yazımda HTML kodlarına temel bir giriş yapmıştık. Şimdi daha ileri ama tam ileri olmayan orta seviye bir yazı ile devam edeceğiz.


Span ve Div


HTML web sayfası içeriğine anlam kazandırır. <p> içeriğini paragraf yapar, <h1> içeriğini başlık yapar. span ve div tag'leri ise bir anlam kazandırmaz. Sadece içeriği kapsarlar. Ancak CSS ile birlikte kullanıldıklarında işe yararlar. Yani aslında bu tag'ler CSS yardımıyla içeriklere stil vermek amaçlı üretilmişlerdir. 

Genel olarak içeriklerinde bir kısım HTML kodu bulunur, class veya id adlandırılmış özellikleri ile CSS kodunda bu elemanlara ulaşılır. 

span ve div arasındaki farka gelince, span satır içi stillendirme amacıyla kullanılır. Mesela bir paragrafın içinde bir ya da bir kaç kelimelik yazıyı daha küçük, başka renk ve başka font yapmak için. div ise daha geniş HTML bloklarını içerir. Örneğin bir kaç paragraflık yazılar sayfanın solunda ya da sağında buluna menüler gibi. 

<div id="makas">
    <p>Bu çok <span class="kağıt">çılgınca</span></p>
</div>


29 Mayıs 2020 Cuma

Vue.js TEMELLERİ

Pandemi dolu evdekal günlerimde sıkıldıkça yeni bir şeye sarıyorum. JavaScript iskeletler bugünlerde çok popüler. Node Angular React deneyip dururken Vue.js'nin benim programlama mantığıma çok yakın geldiğini gördüm.

Bu yazımda da Vue.js öğrenmeye çalışacağım. Ben böyle yazmadan öğrenemiyorum, gençliğimden beri böyle. Vue.js açık kaynaklı bir JavaScript front-end iskeleti. Eğlenceli bir yapı. Vue , bir MVC uygulamasının görsel tarafını oluşturmak içindir. (Model View Controller - Rails gibi üzerine bir kitap yazılır, ayrı konu). Vue şu sıralar en hızlı yükselen ve en popüler JavaScript kütüphanesi. Benim gönlimde jQuery kütüphanesini salladı. Vue'nin arkasında React'ın arkasındaki Facebook ya da Angular'ın arkasındaki Google gibi koca bir firma yok. Evan You tarafından yazılmış ve arkasında geniş bir açık kaynak topluluğu var.



Kurulum


26 Mayıs 2020 Salı

ORTA SEVİYE BİR RAİLS TUTORIAL - 7

Önceki bölümü okumadan buraya geldiyseniz hiç kasmayın geri dönün




Anlık mesajlaşma


Kullanıcılar gönderi yayınlayabiliyor veya diğer kullanıcıların gönderilerini okuyabiliyor. Fakat diğerleri ile iletişim kurma imkanları yok. Kolay ve hızlı olsun diye basit bir mail kutusu kurabiliriz. Ama bu birileriyle iletişim kurmanın çok eski bir yolu. Anlık mesajlaşma hem kullanım olarak rahat hem de geliştirme için daha heyecan verici.

Neyseki Rails gerçek zaman özelliklerini kolayca uygulayabilen Action Cables‘a sahip. Ana prensibi HTTP protokolü yerine WebSockets protokolü kullanması. WebSockets’in ana konsepti bir client-server bağlantısı kurar ve onu açık tutar. Bunun anlamı ilave veri alışverişi yaparken sayfa yeniden yüklenmeyecektir.


25 Mayıs 2020 Pazartesi

JavaScript'e Giriş

Merhaba bundan önceki HTML'ye giriş ve CSS'ye giriş yazılarımızda olduğu gibi bu bölümü de okuyabilmeniz için fizik , kimya , biyoloji , matematik ve pedagoji dallarının hepsinde uzman olmanız gerekmiyor, 2 tanesinde uzman olsanız yeter.

Başlıyoruz. Bu bölümde web sayfalarındaki görsel konulardan biraz lojik konularına doğru geçeceğiz. JavaScript web tarayıcı uygulamalarında web sayfaları gösterilirken çalıştırılabilen programlama dillerinden en önemli ve yaygın olanı. Bu yazıda JavaScript dilinin genel bir girişini yapacağız, web sayfası ile etkileşimleri ise daha ileri bölümlerde ele alacağız.



Nasıl çalışır


JavaScript'i denemenin birkaç değişik yolu var. Bunları gördükçe kendinize en uygun olanı tercih edersiniz. Fakat ilk önce JavaScript programı HTML ve CSS ile nasıl bağlı?

23 Mayıs 2020 Cumartesi

CSS'e Giriş

Daha önceki HTML'ye Giriş yazımızda olduğu gibi bu eğitime başlarken de bilgisayar ve internet kullanmayı bilmekten başkasına ihtiyaç yok. Ama önceki yazıyı okumuş olsanız iyi olur.

CSS ya da Cascading Styles Sheets HTML belgelerin görünümlerine stil vermeye yarar. HTML bir sayfanın anlamı yada içeriği olarak düşünülürse CSS de sayfanın sunumudur. Stiller HTML kodlara benzemez. Genel formatları özellik: değer; şeklindedir. Bu özelliklerin büyük çoğunluğu bir çok HTML elemanlanına aynı şekilde uygulanabilir.


Elemana CSS uygulamak


HTML'ye CSS uygulamanın 3 yolu vardır. Satır içi - imline , belge içi - internal ve belge dışı - external


21 Mayıs 2020 Perşembe

HTML'ye Giriş

Merhaba,

Her zaman çok ileri seviye yazılar yazdığım için, bu sefer başlangıç seviye yazayım dedim (?..). Bu web siteleri nasıl yapılıyor diye merak edenler için biraz HTML , CSS ve JavaScript anlatayım diye yola çıktım. HTML ile başlıyorum.

HyperText Markup Language (kısaca HTML) web sayfası tasarımının başladığı yerdir. Sayfa içeriğini oluşturmanın en basit ve başlangıç yoludur. 

Bir benzetme yapmak gerekirse HTML temel manayı verirken CSS de onun sunumunu yapar. 

Web sitelerinde bulunan şeylerin bilgisyarımızda bulunan şeylerden pek farkı yok. Bir sürü klasörler içnde bulunan bir sürü dosyalar. HTML dosyalar basit text dosyalarından başka bir şey değildir. Bu yüzden Notepad gibi çok basit bir editörle HTML döküman hazırlayabiliriz. Text editörümüzü açalım ve şunu yazalım

Bu benim ilk web sayfam.



6 Mayıs 2020 Çarşamba

PySimpleGUI ile KOLAY PYTHON GUI - 3

<< 2. Bölüm

Merhaba. Devam edelim. Önceki iki bölümden sonra örnek GUI reçeteleri ile devam ediyoruz.



Reçete - Ismarlama Progressbar


Daha önce bir progressbar görmüştük ama onunyanında bir sürü istatistiki bilgi de vardı. Kendi isteğimize özel görünümde bir progressbar elde etmek için bu reçeteyi kullanabiliriz. 


CustomProgressbar.py
import PySimpleGUI as sg

layout = [  [sg.Text("Bir ısmarlama progres metre")],
            [sg.ProgressBar(1000, orientation="h", size=(20, 20), key="-PROGBAR-")],
            [sg.Cancel()]  ]

window = sg.Window("Ismarlama progressbar", layout)

for i in range(1000):
    event, values = window.read(timeout=0)
    if event in (None, "Cancel"):
        break
    window["-PROGBAR-"].update_bar(i + 1)

window.close()
Resimi yakalamaya uğraşıyorum. Hayır, ne zorum varsa, timeout=0 yerine timeout=10 yap yavaş ilerlesin di mi..



PySimpleGUI ile KOLAY PYTHON GUI - 2

<< 1. Bölüm 

Merhaba,

Geçen bölüm kaldığımız yerden devam ediyoruz. Yeni bir reçete ile başlıyoruz.



Reçete - Program ayarlarını kaydetmek ve yüklemek


Bazı programlar son durumunu ya da bazı ayarlarını saklayıp sonraki kullanımda tekrar aynı yerlerden devam etme ihtiyacı duyar. 

Bu program reçete olarak biraz uzun ama bize bir çok fikir verecek.

Ana düşüncemiz programa ait ayarları bir dictionary'de saklamak. Bu dictionary diske kaydedilecek ve oradan yüklenecek. 

Bu özelliğe ihtiyaç duyan uygulamalardan biri rainmeter stili dediğimiz görsellikte olan uygulamalar. Bu küçük programlar her zaman bir ayarları kaydetme ihtiyacı duyarlar. 

Yapı oldukça basit. Ayarlarımızı bir dictionary'ye koyarız. GUI ayarlarında yapılan değişiklikler bu dictionary'yi değiştirir ve daha sonra tekrar kullanmak üzere diske kaydederiz. Böylece programı her açtığımızda tekrar aynı ayarlamaları yapmak zorunda kalmayız.

Verileri kayıt/yükleme için kullanacağımız paket bir JSON paketi olacak. Bunlar Python dictionary'lerini yazmayı ve okumayı çok kolay kılar. Ayrıca oluşan dosyaları manual olarak da çok kolay değiştirebiliriz. 

Bu raçete tarifinde programımızı şöyle düzenlememiz gerekiyor.
  1. Default ayarlar en üstte olacak
  2. Key ve değerlerden oluşan bir tablo hazırlayacağız
  3. Ayarlar dosyası adı
  4. Ayarlar penceresi
  5. Ana program

30 Nisan 2020 Perşembe

PySimpleGUI ile KOLAY PYTHON GUI


Merhaba , karantina günlerinde Rails için yazılar yazarken internette gözüme takılan bir şey çok ilgimi çekti. PySimpleGUI adında bir Python GUI kütüphanesi. Aynı Ruby'nin Shoes kütüphanesi gibi kolayca GUI uygulaması yapılabiliyor. Hatta bir konsol uygulamasında bile kullanıcıya soru sormak, dosya seçtirmek vs işler için kolayca kullanılabilir.

Hadi beraber kurcalayalım. İlk önce kurulum tabi ki.

    
    pip install pysimplegui
    veya
    pip3 install pysimplegui
    

Reçete-1A Tek Atımlık Pencere (en basit tasarım)



27 Nisan 2020 Pazartesi

ORTA SEVİYE BİR RAİLS TUTORIAL - 6


Önceki bölümü okumadan buraya geldiyseniz hiç kasmayın geri dönün

Ana sayfa güncellemesi


Hali hazırda ana sayfada birkaç rastgele gönderi görebiliyoruz. Tüm kolleksiyonlardan birkaç gönderi gösterebilmek için ana sayfayı değiştirelim.

_main_content.html.erb dosyasının içeriğini şöyle değiştirelim:

app/views/pages/index/_main_content.html.erb
<div id="main-content" class="col-sm-9">
    <h3 class="page-name"><%= link_to "Hobi Arkadaşı", hobby_posts_path %></h3>
    <div class="row">
        <%= render @hobby_posts %>
        <%= render no_posts_partial_path(@hobby_posts) %>
    </div><!-- row -->

    <h3 class="page-name"><%= link_to "Çalışma Arkadaşı", study_posts_path %></h3>
    <div class="row">
        <%= render @study_posts %>
        <%= render no_posts_partial_path(@study_posts) %>
    </div><!-- row -->

    <h3 class="page-name"><%= link_to "Takım Arkadaşı", team_posts_path %></h3>
    <div class="row">
        <%= render @team_posts %>
        <%= render no_posts_partial_path(@team_posts) %>
    </div><!-- row -->

</div><!-- ana içerik -->


25 Nisan 2020 Cumartesi

ORTA SEVİYE BİR RAİLS TUTORIAL - 5

Önceki bölümü okumadan buraya geldiyseniz hiç kasmayın geri dönün





Tasarım Değişikliği


Bu yazıda kolleksiyon sayfalarında gönderiler için başka bir stil deneyeceğiz. Ana sayfada kart tasarımını kullanmıştık. Kolleksiyonlarda liste tasarımı kullanalım. Böylece kullanıcı çok daha fazla gönderiyi görebilir ve içlerinde daha etkili gezinebilir.

Görsellerin olduğu posts klasöründe post adında bir alt klasör tanımlayalım ve içne _home_page.html.erb adında bir parça görsel dosyası tanımlayalım.

Daha önce yazdığımız _post.html.erb parça görselindeki kodu kesip buraya yapıştıralım.

app/views/posts/post/_home_page.html.erb
<div class="col-sm-3 single-post-card" id=<%= post_path(post.id) %>>
    <div class="card">
        <div class="card-block">
            <h4 class="post-text">
                <%= truncate( post.title, :length => 60 ) %>
            </h4>
            <div class="post-content">
                <div class="posted-by">Gönderen <%= post.user.name %></div>
                <h3><%= post.title %></h3>
                <p><%= post.content %></p>
                <%= link_to "İlgileniyorum", post_path( post.id ),
                    class: "interested" %>
            </div>
        </div>
    </div><!-- card -->
</div><!-- col-sm-3 -->


21 Nisan 2020 Salı

ORTA SEVİYE BİR RAİLS TUTORIAL - 4

Önceki bölümü okumadan buraya geldiyseniz hiç kasmayın geri dönün




JavaScript Stiller


Ana sayfamız hala sade bir görüntüye sahip. Biraz kontrast yaratmak için gönderileri renklendireceğiz. Fakat CSS yardımıyla sabit renk vermek yerine sayfa her yenilendiğinde başka renk paterni alması için JavaScript kullanacağız (ki öğrenmiş olalım).

assets klasörü altındaki javascripts klasörü içine posts adında bir alt klasör ekleyelim ve içine style.js adında bir yeni dosya ekleyelim. Ayrıca javascripts klasöründeki default .coffee dosyalarını da silebiliriz çünkü kullanmayacağız.

19 Nisan 2020 Pazar

ORTA SEVİYE BİR RAİLS TUTORIAL - 3

Önceki bölümü okumadan buraya geldiyseniz hiç kasmayın geri dönün

Ana Sayfa Listesi


Ana sayfada gönderiler listesi yayınlamak istiyoruz. Bu listede tüm gönderileri kart formatında göstereceğiz.

İşe gönderileri kaydedecek Post modelini tanımlayarak başlıyoruz. Konsolda
rails g model post

ORTA SEVİYE BİR RAİLS TUTORIAL - 2

Önceki bölümü okumadan buraya geldiyseniz hiç kasmayın geri dönün

Gönderiler


Artık blog özelliğini eklemeye başlayabiliriz. Uygulamamızın amacı aynı fikirde olan insanları bir araya getirmek olduğundan, bu mesajların yazarlarının tanımlanması gerekiyor. Bunun için kullanıcı yetkilendirme sistemi gerekiyor (authentication).

Kullanıcı Yetkilendirmesi


Kullanıcı yetkilendirme sistemi kurmak için Devise gem kullanacağız. Kendi kendimize de yetkilendirme sistemi kurabiliriz ama bu çok vakit ve kod alacaktır. Bu kolay bir yol ve Rails topluluğu tarafından çok kullanılıyor.

18 Nisan 2020 Cumartesi

ORTA SEVİYE BİR RAİLS TUTORIAL - 1

Merhaba,

Öğrenirken sizlerle paylaşmaya devam ediyorum. Çoook uzun bir çalışma olacak bu yazı bir sürü bölümlerden oluşuyor. Amacımızda sadece bir yönü öne alarak Ruby on Rails uygulaması yapmak değil görsel stillleri JavaScript kodları vs. ile gelişmiş bir web sitesi tasarımı nasıl yapılır. Santim santim orta seviye bir uygulama nasıl gelişir göreceğiz. Ben bu tutorial'ı freecodecamp'ta buldum. Hadi birlikte devam edelim. 

20 Mart 2020 Cuma

JEKYLL İLE STATİK WEB SİTESİ YAPIMI

Bu Covid-19 belasıyla uğraştığımız günlerde evlere kapanmışken, birşeyler öğrenmenin tam zamanı. Geçen Grails için bir yazı yazmıştım bu sefer Jekyll üzerine yazayım bakalım. Jekyll, Ruby dilini kullanan ve statik web siteleri tasarlamak amacıyla kullanılan bir yapı. Neden statik site yapmak için böyle yapılar icat edilmiş adım adım ilerledikçe göreceğiz. Burada Jekyll sitesindeki adım adım öğreticiyi takip ettim.

Kurulum için konsolda
gem install jekyll bundler
yazarak Ruby gem olarak sistemimize ekliyoruz. Bendeki Ruby versiyonu ile uyumlu olmadığı için son versiyon olan 4.0.0 yerine 3.1.1 kurdum.


15 Mart 2020 Pazar

GRAILS WEB İSKELETİ

RubyOnRails iskeletinin Ruby dili kullanması gibi Grails de Groovy dilini kullanan bir web iskeletidir. Yapı olarak RubyOnRails yapısına çok benzer.

Grails kurulumu öncesi Groovy dilinin kurulu olması ve bir miktar temel özelliklerini de öğrenmek iyi olacaktır. Daha sonra Grails sitesinden binari dağıtım zip dosyasını indirip klasörü açarız. 



Ortam değişkenlerinde GRAILS_HOME değişkenine zip dosyayı açtığımız klasörün path'ini veririz.