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>

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

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

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

• ORTA SEVİYE BİR RAİLS TUTORIAL - 1 (Kurulum, ilk stiller)
• ORTA SEVİYE BİR RAİLS TUTORIAL - 2 (Kullanıcı girişi - Bootstrap CSS)
• ORTA SEVİYE BİR RAİLS TUTORIAL - 3 (Blog altyapısı)
• ORTA SEVİYE BİR RAİLS TUTORIAL - 4 (JavaScript stiller)
• ORTA SEVİYE BİR RAİLS TUTORIAL - 5 (Kolleksiyon sayfaları)
• ORTA SEVİYE BİR RAİLS TUTORIAL - 6 (Ana sayfa güncellemesi)

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.

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ı?

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. 

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.

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 

3. 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