Tekrar hoş geldiniz.
Flask'ın temellerini öğrendik.
Sunucuların ne yaptığını anlıyoruz ve tarayıcıların ne yaptığını da biliyoruz.
Ama dürüst olalım.
Bu biraz sıkıcı.
Yani, bu etkileyici değil.
Bunu olası bir işverene gösterirseniz, size deli gözüyle bakacaklardır.
Öyleyse şimdiye kadar öğrendiklerimizden yola çıkarak güzel görünen bir portföy oluşturalım.
Şimdi, size küçük bir hediyem var.
Bu, kendi HTML, CSS ve JavaScript'inizi yazmak zorunda kalmayacağınız gerçeğidir, çünkü yine, bu bir web geliştirme
kursu değildir.
Neyse ki Google'da ücretsiz şablonlar veya HTML ücretsiz şablonlar gibi bir arama yaparsanız, ücretsiz olarak
kullanabileceğiniz gerçekten güzel görünümlü web siteleri bulabilirsiniz.
Örneğin, şuradaki Universe'e bakalım ve bu kaynağa bağlantı vereceğim, böylece önizleme
yaparsam kendiniz de bakabilirsiniz.
Şuna bir bak.
Sadece kullanabileceğiniz güzel bir web siteniz veya portföy sayfanız var.
Ne kadar havalı değil mi?
Ve aslında zaten tablet ve mobil uyumludur, yani her şey sizin için önceden oluşturulmuştur.
Bu çok güzel, değil mi?
Peki bunu nasıl kullanabiliriz?
İndirelim o zaman.
Ve bu arada, takip ederken aslında bunlardan istediğinizi kullanabilirsiniz.
Ama şimdilik sadece evren olanını kullanalım.
Burada küçük bir astronot olduğu için oldukça havalı görünüyor.
Bunu indirelim ve ne olacağını görelim.
Pekala, şablonu nasıl indirmek istediğimize dair küçük bir soru alıyorum.
Bizim durumumuzda, bir HTML seçmek istiyoruz.
Ve işte oldu.
Güzel, küçük bir sıkıştırılmış klasör elde ediyoruz ve şimdi bunu indirdik.
O zaman bunu açalım.
Bu da bir sürü dosya ve klasör demek.
Peki bundan sonra ne yapmalıyız?
Birkaç şey var.
İlk olarak, bu örnek sayfadır.
Aslında buna ihtiyacımız yok, o yüzden çöpe atalım.
Sırada varlıklarımız var.
Bunlar, astronot sayfası gibi sayfamızın çalışması için farklı varlıklardır.
Bu yüzden onu etrafta tutacağız.
Ve sonra HTML sayfalarımız var.
Ki buna kesinlikle ihtiyacımız var.
Ve sonra bazı JavaScript dosyalarımız ve CSS dosyalarımız var gibi görünüyor.
Şimdi burada bir GZ noktası var, bu sıkıştırılmış dosya dediğimiz şey, GZ sıkıştırılmış dosya.
Yani bu sadece sunucunun bir dosyayı veya JavaScript dosyasını göndermesinin bir yoludur, ki bu dosyanın 138 kilobayt olduğunu görebilirsiniz,
ancak sıkıştırılmış bir biçimde, yani 44 kilobayt.
Bu şekilde ön uca daha az veri gönderiyoruz.
Ayrıca hata ayıklama sırasında bize yardımcı olan MAP gibi bir şeyimiz de var.
Ancak bizim durumumuzda, şimdilik bu konuda endişelenmemize gerek yok.
O halde tüm GZIP ve harita dosyalarını kaldıralım.
Bu yüzden bunları çöp kutusuna taşıyacağız, böylece yalnızca bir CSS dosyamız ve bir JavaScript dosyamız olacak ve diğerleri
de farklı sayfalarımız için HTML dosyaları olacak.
Şimdi yapacağımız şey bunu kopyalamak ve proje klasörümüze taşımak.
Şuradaki dosyayı hatırlıyor musun?
Yani ideal olarak HTML dosyalarını şablonlara ve statik dosyalara, yani CSS ve JavaScript dosyalarına ve belki
de buradaki varlıklara taşırız.
İşte buradaki görüntüler bunlar.
Hadi yapalım şunu.
Web sunucum burada.
İlk olarak az önce kopyaladığımız şeyi kopyalayıp yapıştıracağım.
Ve tüm HTML dosyalarımızı taşıyalım.
Şablonlarımıza.
Ve biliyor musunuz, mevcut şablonlarımızı da kaldıralım çünkü artık onlara ihtiyacımız yok.
Artık güzel bir HTML dosyamız var.
Ve sonra bunların hepsine sahip ol.
Yeni bir endeksimiz var. eski web sitelerimizden çok daha güzel olacak, bu yüzden bunu kullanmak
istiyoruz.
O halde tüm bunları şablonlara taşıyalım.
Ve sonra JS ve CSS dosyasının yanı sıra varlıklar klasörünü statik içine yapalım.
Harika.
Şimdi bunu ayarladığımıza göre, projemize geri dönelim ve buna bakalım.
Yazmadığımız çok daha fazla HTML var, ama neyse ki bizim için zaten oluşturulmuş.
Şimdi son olarak dosyalarımızın yerini değiştirdiğimiz için HTML, CSS, JavaScript ve tüm varlık dosyaları arasındaki
bağlantıları ayarlamamız gerekiyor.
Yani HTML dizinine gidersek kaydırma yaparsak.
Vatikan'ı ve Fab ikonunun varlıklarını aradığımızı görüyoruz.
Ancak bu statik klasöründe olduğu için buraya statik eklememiz gerekiyor.
Öyleyse buradaki varlıkları başka nerede kullandığımızı bulalım.
Tamam.
Görünüşe göre bunu biraz daha büyütelim.
Yani arka plan resmimiz için buraya benziyor.
Bir kez daha uzay görüntüsünü arıyoruz, ancak bu bildiğimiz gibi statik klasörde.
Bakalım burada başka nerelerimiz varmış.
Statik yapalım.
Devam edelim.
Statik.
Tamam.
Her şey yolunda.
Şimdi statik klasörümüz var.
Bir de noktanın önüne eğik çizgi eklediğimizden emin olmalıyız.
Nokta sadece geçerli dizin anlamına gelir ve ardından statik klasöre bakın.
O halde geri dönelim ve bunu her şey için yaptığımızdan emin olalım.
İşte oldu.
Ve işte başlıyoruz.
Şimdi bunu kaydedelim.
Henüz tamamen bitirdiğimizi sanmıyorum ama şimdilik sunucumuza girelim.
Noktalı pasta.
Ve ev rotamız için, daha önce sahip olduklarımızı kaldıralım.
Ve buna benim ev fonksiyonum diyelim.
Bu hiçbir parametre gerektirmez ve bunun yerine sadece bizim için geri dönecektir.
Endeksimiz.
Parametrelerde geçmiş olmadan HTML.
O zaman kurtaralım.
Sayfamıza geri dönün.
Ya da web sitem.
Ve yenilediğimizde ne elde ettiğimize bakın.
Tamam.
Bu oldukça, oldukça çirkin bir web sitesi, ama en azından bir şeyler gösteriyoruz gibi görünüyor.
Ancak hemen fark ediyoruz ki CSS uygulanmamış gibi görünüyor.
Bazı HTML'lerimiz var gibi görünüyor, ancak bağlantılar da çalışmıyor.
Bir kez daha, bunun nedeni dosyalar arasındaki bağlantıları güncellememiz gerektiğidir.
Yapacağımız şey aslında index dot HTML'e geri dönmek ve head etiketinde stil sayfamızın, yani CSS dosyamızın olduğunu
görmek.
Ancak yine de, statikte olması için bunu güncellememiz gerekiyor.
Klasör.
JavaScript dosyasının yanı sıra, en alta kadar kaydırırsak, burada JS dosyasına sahibiz.
Bu da bir kez daha statik klasörde olacaktır.
Pekala, kaydedelim.
Ve geri dönün ve bunun işleri daha iyi hale getirip getirmediğine bakın.
Hey, şuna bak.
Bu çok güzel.
Dikkatinizi çekerim, bu biraz büyük görünüyor çünkü daha iyi görebilmemiz için web sitemin boyutunu artı
ve eksi komutları vererek artırıyorum.
Ama bu oldukça harika.
Şimdi, diyelim ki işlere tıklarsam.
Hmm, iş istasyonunu anladım.
HTML diye bir şey yok.
Peki bunu nasıl düzeltebiliriz?
Bunu nasıl yapacağımızı zaten biliyoruz, değil mi?
Tek yapmamız gereken bu farklı rotaları uygun şablona işaret edecek şekilde güncellemek.
Şimdi, bir sonraki videoda size bunu nasıl yapacağınızı göstereceğim, ancak bunu kendiniz yapmaya çalışmanızı
istiyorum, çünkü bunu şimdiye kadar öğrendik.
Bu yüzden web sitesinin tam olarak bizim yaptığımız gibi çalışmasını sağlamaya çalışın.
Karışık şablonlarımız burada ve bir sonraki videoda görüşmek üzere.