Giriş Yap

**Enes Bayraktar** · 10-07-2016 Saat: 01:00

Öncelikle merhaba benim 2 adet cok yakın tanıdıgım abiler var bunlar front end konsunda bayağı bilgili abiler grunt dan tutun angulara vs tüm herşeyi biliyorlar ve belgeleri vs var google yarışmalarıdır vs herneyse bunlardan ben mesai saatleri dışı yakalrasam destek aliyorum ancak şuan jquery ve javascript içindeki bir kütüphaneden bir anda javascript öğrenmeye calistim (Json , Ajax vs gibi şeyleri ve değişken tanımlama (ileri seviyede olan ayrıntılı görüşrüüz) ve bu konuda yardıma ihtiyacım cok var diyebilirim yani page speed'e taktım çözümü biliyorum ancak php de var bu çözüm ben html templateler yaptıgım için uyuşmuyor diyebiliriz yani yapmak istedigim olayı anlatayım..

Benim 700 satırlık dolu dolu bir html dosyam var ve bunun içinde 5-6 tane js 6-7 tane css ve 2-3 tane font dosyası cekiliyor aynı zamanda içinde birsürü text vs var sıkntı yok ancak page speed'e gelince bu site kadar düşün olmasada (100/15 bu site) 100 üzerinden 67 civarı aliyor bende bunu tamamen aşşagıda işleyen sisteme göre yaptım..

Eski Sistem:
- Tüm pageleri bir html de yazıyordum sonra hepsini hide fonksiyonu ile gizleyip butonlarına tıklayınca toggleClass ile sınıf verip gösteriyordum ve digerleirnin hepsini kapatıyordum bu sistem işe yariyor ancak yukarıda dedigim bir sıkıntı var sadece index.html dosyam vardı başka bir dosya olmadan 10 sayfa civarı sayfam var.

Yeni Sistem:
Diyorumki merkezli bir sisteme geçiyim index.html dosyam olsun ancak mesela pages klasöründe header footer ve content yer alsın header ve footer sabit değişken content ise normal bir header deki butona basınca değişen birşey olsun ve bunlar ayrı html den olsun yani böylece html dosyaları az yer kaplicak ve daha fazla tasarruf sağlayıp page speed im artıcak aynı zamanda kodların düzenlenmesi içinde iyi birşey örnek vermek gerekirse.

<html>
<header dosyasının çekimi (include fonksyionu gibi php'deki)>
<content mesela page-include değişkeni olucak <content page-include="kartlar.html"></content>
gibi yani istedigim cekilecek dosya'yı hızlı yoldan çekmeye calismak bunun için javascript'ile birşeyler yapılır diye biliyorum en kötü ihtimal php ile yapicagım ama öylede olursa html template olmasının bir anlamı kalmaz minik bir scripte dönüsür (dosyaları cek ve yaz esasına dayali bir script yani sadece veritabanı ile o dosyaların içlerini değiştirmek için admin paneli eklemek kaliyor bir scriptten kalır yanı böylede istemiyorum) bu konuda google'da ayrıntılı bir araştırma yaptım ancak bilinemz bir şekilde nasil arayacagımı hangi kelime ile arayacagımı hangi fonksiyon oldugunu bilmiyorum ve pek fazlada birşey yok hepsi ya w3-include adli framework'ü (W3C)'nin yada .load fonksyonunu bu konuda yardımınız lazım eğer tanıdık biriler varsa yönlendirirseniz sevinirim.

ancak sorunum jquery'deki .load fonksiyonun biraz delaylı olması ve pek güvenemem.ü

@Admin @Tarruz

**kaRanLık-61** · 10-07-2016 Saat: 16:43

Php ve inculede halledebilirsin.wordpressteki gibi.header.php yap footer php çok uzatmak İstemiyorsan her sayfaya bunları include et hem hızlı olur içerik kısmını da gittiği sayfaya ekle sorun kalmaz.jqyery uğraşmazsın hız istiyorsan jqyery ve ekstralar yavaşlatacaktır.bu kadar çokta css kullanma mobil surum yapınca ayrı css çekmek yerine başka sayfa şablonu yap onu açsın.html template yapmak istiyorsan hazır tema motorları var onları kullan sen diyorsun ki html olsun veri çeksin zaten jquery php yada asp olmadan yetersiz kalacaktır.sen naparsan yap ya kendi sistemini yapıp html öyle çalıştırcan yada hazır kullanacaksın.ne amaçladığını tam söyle yönlendirme yapabilirim

**Enes Bayraktar** · 10-07-2016 Saat: 18:06

@kaRanLık-61-EA motorlardan kastınız nedir ? framework'mü ? öncelikle yanıtınız için teşekkürler ben zaten responsive yaparken

.header {background#fff; diyelim}

@media query screen and vs vs koduyla değiştiriyorum ince ayar yapiyorum ayrı bir css dosyası olmuyor.

dediginiz gibi ya java ile bir sistem yapacagım okadarda performanslı olucagına bende inanmıyorum ancak include hakkında bir sorum var benim istedigim değişken içerik 1 html de birden fazla html içerigi gibi düşünebilirsiniz eğer skype adresiniz varsa yaptıgım temayı gösteririm ne demek istedigimi anlarsınız (enes.bayraktar9) yani include'u ben butona basınca uygulanmasını istiyorum böyle birşey yapılabilirmi ? document.write fonksiyonu ile yapilabilirse öyle birşey denemek isterim ancak php ile yapincada html template yani html to php yapan yada html to wordpress yapan kişiler'e zorluk cıkmazmı ? beni aydınlatırsanız sevinirim.

**kaRanLık-61** · 11-07-2016 Saat: 01:30

(10-07-2016 Saat: 18:06)Enes Bayraktar Nickli Kullanıcıdan Alıntı: @kaRanLık-61-EA motorlardan kastınız nedir ? framework'mü ? öncelikle yanıtınız için teşekkürler ben zaten responsive yaparken

.header {background#fff; diyelim}

@media query screen and vs vs koduyla değiştiriyorum ince ayar yapiyorum ayrı bir css dosyası olmuyor.

dediginiz gibi ya java ile bir sistem yapacagım okadarda performanslı olucagına bende inanmıyorum ancak include hakkında bir sorum var benim istedigim değişken içerik 1 html de birden fazla html içerigi gibi düşünebilirsiniz eğer skype adresiniz varsa yaptıgım temayı gösteririm ne demek istedigimi anlarsınız (enes.bayraktar9) yani include'u ben butona basınca uygulanmasını istiyorum böyle birşey yapılabilirmi ? document.write fonksiyonu ile yapilabilirse öyle birşey denemek isterim ancak php ile yapincada html template yani html to php yapan yada html to wordpress yapan kişiler'e zorluk cıkmazmı ? beni aydınlatırsanız sevinirim.

Alıntı:Benim 700 satırlık dolu dolu bir html dosyam var ve bunun içinde 5-6 tane js 6-7 tane css ve 2-3 tane font dosyası cekiliyor aynı zamanda içinde birsürü text vs var sıkntı yok ancak page speed'e gelince bu site kadar düşün olmasada (100/15 bu site) 100 üzerinden 67 civarı aliyor bende bunu tamamen aşşagıda işleyen sisteme göre yaptım..

6-7 tane css olduğunu siz söylediniz.bende tek bir css olması daha iyi yada mobil detecte edip mobil kısmına yönlendirme bu yöntem en hızlısıdır.frameworkleri kastediyorum.media screen kullandığınız halde neden 6-7 tane css dosyası var onu anlamlandıramadım ama neyse.

dediğiniz gibi değişken kısımlarını jquery görünür yaparsanız.hatta ister sayfada bunlar bulunsun tek bir html yada başka dosyalarda çekersiniz.sizin galiba script gibi bir şey düşünmediğinizi anlıyorum sözlerinizde o zaman tek sayfada herşey olacaksa php dahi gerek olmaz.

Yani mesala şirketlerin belli başlı bilgilerini yazar hazır html template gibi bir şey diyorsunuz bende en kolay yolunun jquery göster gizle yaparak yapabilirsiniz.
yani bilgiler tek bir sayfada olur tıklandıkca biri görünmez tıklanan ilişkili olan görünür olur.bu siizn işinizi görür anlattıklarınızdan yola çıkarak document write ve ready işinizi görür.

**Enes Bayraktar** · 11-07-2016 Saat: 02:03

Merhaba hocam şimdi css dosyalarım 5 adet var ve hepsi minified edilmiş bu durumdan dolayı birşey yok 4-5 bytelik dosyalar yani bir dosya 20 byte (örnek) olursa hepsinin birleşimi çekmek daha zor olucaktır.

CSS Dosyalarım;
- Animate.css (Danedenin)
- Framework.min.css (Material Master)
- Project.min.css (Material Master)
- İcons.css (İcon Setim İçin)
- Style.css (Kendi CSS Dosyam)

hocam şimdi ben çözümü şöyle buldum sizin dediginiz gibi yapmıştım dedigim gibi değerler 100 üzerinden 67 telefon için 100 üzerinden 88 bilgisayar için cikti bende json da çözümü buldum json dosyam var ondan çekiyorum örnek json kodum.

PHP Kod:

var doc = document;

var text = '{"source":[' +
  '{"page_id":"1","page_content":"<div class=source-middle><h1>Merhaba Ben Enes</h1><div class=slim></div><p>Bir Gelecegi Yazanlar Üyesi</p></div>" },' +
  '{"page_id":"2","page_content":"arsivcontent" },' +
  '{"page_id":"3","page_content":"<div class=card>enes</div>" },' +
  '{"page_id":"4","page_content":"pagecontent" }]}';

obj = JSON.parse(text);
    document.getElementById("change-content").innerHTML = obj.source[0].page_content;

$("#1").click(function () {
    document.getElementById("change-content").innerHTML =  obj.source[0].page_content;
});

$("#2").click(function () {
    document.getElementById("change-content").innerHTML =  obj.source[1].page_content;
});

$(".email").click(function () {
    document.getElementById("change-content").innerHTML =  obj.source[2].page_content;
});

$("#3").click(function () {
    document.getElementById("change-content").innerHTML =  obj.source[3].page_content;
});

böyle daha hızlı olucagına inanıyorum şahsen json dosyamı başta <head> bölmüne import edicem zaten diger js ler en altta duruyor olay çözümlendi birde böyle denemek istiyorum suanda blog template'im üzerinde calismaktayım bitsin paylasıcagım aynı şekilde yardımınız için teşekkürler.

Giriş Yap
Kullanıcı Adı:
Şifreniz:	Şifremi Unuttum?
	Beni Hatırla