Web Geliştirici Kaynakları Bir Mega-Derleme

İnternet sürekli büyüyor ve yaklaşmakta olan web geliştiricileri için yüzbinlerce toplu kaynak var. Çevrimiçi makalelerden, öğreticilerden, araçlardan, kılavuzlardan videolara, Web üzerinden hemen her şeyi öğrenebilirsiniz. Online atlamak hiç bu kadar kolay olmamıştı!

Aşağıda, bazı çok yararlı web geliştirici kaynaklarından oluşan büyük bir koleksiyonu bir araya getirdim. Bunlar arasında JavaScript ve PHP programlama için daha karmaşık teorilerin yanı sıra HTML5 / CSS3'ün başlangıç materyali yer almaktadır. Birkaç hevesli geliştiricinin bu dilleri incelemesi ve Twitter ya da Tumblr gibi çılgınca popüler web uygulamaları oluşturması mümkündür. Modern web geliştiricileri için faydalı varlıklarla ilgileniyorsanız, bu güvenilir kaynak derlemesini seveceksiniz.

Faydalı Çevrimiçi Dergiler

Blog dünyası internete giren yüz binlerce yeni yazarla patladı. Bu çevrimiçi blogların çoğu, tasarım ve web geliştirme üzerine odaklanmıştır. Bu RSS akışlarını çevirerek birçok yararlı kaynak bulabilirsiniz..

Ne tür bir dil kodladığınıza bağlı olarak, bu bloglardan herhangi birine olan ilginizi belirleyecektir. Web geliştirmeye odaklanabilir ve bunun tüm ön uç çalışmalarını (HTML5 / CSS3 / JavaScript) ve basit arka uç komut dosyalarını (PHP / RoR / Python / SQL) içerdiğini varsayabiliriz. Hem ön uç hem de arka uç koduna odaklanan en popüler dev bloglarının tek bir listesini oluşturma özgürlüğünü kullandım..

Nettuts+
24 Yolları
Webmonkey
Parçalamak Kodlama
Webitect
Öğeyi İncele
Kodlayan Kediler
Line25 Web Tasarım Blogu

Dikkate alınması gereken kesinlikle çok fazla var. Tercih ettiğiniz geliştirme diliyle ilgili dersleri ve makaleleri ararken Google’a gitmenizi öneririm. Ardından, Google Reader gibi bir RSS yayın toplayıcısı kullanarak bu dergilerdeki en son makalelerin listesini oluşturabilirsiniz. Bu, çalışma gününüze başlamanın, hatta öğreticilerden ayrılma zamanını öldürmenin harika bir yoludur.

jQuery Eklentiler Galore

Hem jQuery çekirdek kütüphanesi hem de jQuery Mobile, geçtiğimiz yıl çok fazla çekiş kazandı. Bu açık kaynak kütüphaneleri, zengin animasyon ve uygulaması kolay Ajax özellikleri ile dolu bir ön uç deneyimi tasarlamaya çalışmaktadır, ancak mobil kütüphane eklentileri ve üçüncü taraf kodları açısından ebeveynleriyle tam olarak yetişmedi..

Benzer şekilde başka bir fantastik ürün bgStretcher, dinamik bir arka plan betiği olarak kullanılabilir. Bir dizi görüntü ve kullanıcının ekran çözünürlüğüyle orantılı olarak bazı ölçeklendirmeler alır. Bu eylem görmek için harika demo göz atın. Bu eklentilerin her ikisini de indirmek ücretsizdir ve jQuery'den oluşturulan harika 3. parti kod için basit örnekler olarak davranın. Bu kaynaklarla çalışmak, proje çalışmasında size zaman kazandırır, böylece tekerleği yeniden icat etmeniz gerekmez.

Genel olarak, JavaScript kod parçacıkları / eklentileri için Ajax Blender ve Dynamic Drive web sitelerine göz atmanızı da öneririz. Kütüphane büyük değil ama sürekli olarak kullanıcı tarafından gönderilen yeni içerikten büyüyor. Siteler sadece jQuery eklentilerini değil, MooTools ve Prototip kütüphanelerini de içeriyor.

JQuery Mobile kütüphanesiyle çalışmaya başlarsanız, başka bir araç jqmPhp önermek istiyorum. JQuery Mobile ile çalışan HTML5 kodunun satırlarına ve satırlarına basit işlevlere başvurabileceğiniz dinamik bir PHP sınıfıdır. Bir PHP kabuğuna yerleştirilmiş dinamik mobil uygulamaları prototiplemenin en kolay yolu dürüst olmak gerekirse. Site blogunda araştırılacak çok sayıda örnek referans var.

HTML5 ve CSS3'te Oluşturma

Ön uç web geliştirme hakkında konuştuğumuzda, genellikle hepsi verimlilikle ilgilidir. Bir arka uç Ruby uygulamasını kodladığınız gibi HTML / CSS'de bir web sitesi oluşturmada aynı sorunla karşılaşmazsınız. HTML'de gerçek bir mantık ya da hata işleme yoktur - bu, genellikle tüm tarayıcılarda mizanpaj tasarımını ne kadar çabuk ölçekleyebileceğinizle ilgilidir..

İlk önce HTML5 Boilerplate'i önererek başlamalıyım. Bu tüm içeren bir soyulmuş çıplak kemikler şablonu. “standart” HTML5 web sayfası öğelerini tek bir pakette. Bu, varsayılan bir stil sayfası, JavaScript, favicon, Apple touch simgeleri ve birçok başka kalıbı içerir. % 100 ücretsiz bir proje ve onların Github repolarına bile katkıda bulunabilirsiniz. Herhangi bir ciddi web projesine başlamadan önce bu, tüm geliştiriciler için sahip olunması gereken bir kaynaktır.

Şimdi eğer bu kazan plakasında çalışırsanız, kendi özel kodunuzu ekleme seçeneğiniz vardır. Ancak bir sonraki adıma geçmenizi ve Initializr gibi bir uygulamayla geliştirmenizi öneririm. Bu, tipik bir web sitesi düzeni oluşturacak ve hatta, kazan plakası paketinize hangi öğelerin dahil edileceğini özelleştirmenize izin verecektir. Google Analytics kodu, küçültülmüş jQuery, .htaccess veya web.config dosyaları ve yaklaşık bir düzine başka seçenek mevcuttur.

CSS Tasarımcıları

Şimdi biraz HTML5 kodlamasına baktık, ayrıca popüler CSS3 çerçevelerinden bazılarını da göz önünde bulundurmalıyız. CSS ile çok daha fazlasını yapabildiğiniz için bunlar HTML şablonlarından daha açık uçludur. Tasarımcılar ayrıca tüm modern web tarayıcıları için standartlara uygun kodlar oluşturmanın zorluğunu da fark edecektir..

Golden Grid Sistemi, duyarlı web tasarımları için bir çerçeve olarak harika. Bu düzenler mobil ekranlara uyarlanır ve tarayıcı penceresini yeniden boyutlandırırken içeriye doğru katlanır. Ayrıca, her sütun alanının genişliğinin ve boyutunun planlanmasına yardımcı olur. Plan, kontrol etmeniz gereken başka bir kullanışlı CSS çerçevesidir. Özel web siteleri oluşturmak için harikadır ve harika belgeler sunar.

Bununla birlikte, CSS araçları söz konusu olduğunda, CSS3 PIE'nin en sevdiğim üç favorim arasında olması gerekiyor. Internet Explorer 6-9'da desteklenen CSS3 efektlerini oluşturmak için uygun kodu veren basit bir web uygulamasıdır. Özelleştirilebilir ayarlarla dinamik doğrusal degradeler, yuvarlak köşeler ve kutu gölgeler oluşturabilirsiniz. Bunları da kontrol etmek istiyorsanız, sitenin IE örnekleri vardır..

Geliştiriciler ayrıca üretim için dosya boyutlarını daraltmak isteyeceklerdir. Temiz CSS, kodunuzu basitleştirmek ve dosya boyutunu küçültmek için sayısız seçenek arasından seçim yapabileceğiniz bir kaynaktır. Başka bir alternatif Kod güzelleştirici, çok fazla seçenek sunmaz, ancak kullanımı daha kolay olabilir.

WordPress ile Temaları Özelleştirme

WordPress yayıncılık bu dönemde kolayca en popüler CMS'dir. Muhtemelen bu fantastik içerik yönetimi çözümü ile güçlendirilmiş milyonlarca yeni blog ve web sitesi gördük. Bu nedenle, WordPress geliştiricileri, özel gereçler ve web sitesi temaları oluşturmak için yüksek talep görüyor..

Constellation Theme'ın yeni sürümü, WordPress geliştiricilerine varsayılan şablonlardan daha kolay bir başlangıç noktası veriyor. Yeni Yirmi Onbir tema çok kurnaz ve minimalisttir, ancak HTML5Boilerplate üzerine inşa edilmiş bir tema şablonuyla rekabet edemez. Constellation WP teması, iPhone ve iPad tabletleri gibi çeşitli cihaz çözünürlükleri için medya sorguları bile içeriyor.

Wonderflux, geliştirilmekte olan bir başka WordPress teması şablonudur. Daha yeni bazı beta dokümantasyonların yanı sıra beta sürümünden v1.0 sürümüne de piyasaya sürüldü. Bu tema, mizanpaj üzerinde size daha fazla kontrol sağlayan Constellation'tan biraz daha karmaşık. Geliştiriciler, WordPress sitenizi daha dinamik hale getirmek için özel PHP kancaları, işlevleri ve filtreleri içeriyor.

Ciddi WP geliştiricileri, birinin gelecekteki proje çalışmalarına yardımcı olup olmayacağını görmek için her iki çözümü de incelemelidir..

Web Geliştirici Freebies'i Bulmak

PSD'ler ve grafiklerle karşılaştırıldığında, web geliştirme topluluğu, freebie galerilerinde biraz eksik görünüyor. Her zaman Github'da harika scriptler bulabilirsin, fakat genellikle etrafta araştırma yapmak ve bunları kendin denemek zorundasın..

Ücretsiz indirmeler ve demolar ve script örnekleri sunan web siteleri bulmak zor. En sevdiğim yeni kaynak, CodeVisually’in, kullanıcı tarafından gönderilen geliştirme araçlarını, eklentileri, kitaplıkları ve diğer güzel şeyleri katalogladığı. Düzen, her sayfanın ürüne, demo ekran görüntüsüne ve bazı detaylara bağlantı içeren bir galeri gibi kurulur..

Galeri, yüzlerce HTML / HTML5 şablon kodu örneği, CSS3 kütüphanesi ve kesinlikle bol miktarda jQuery öğesi içeriyor. Ayrıca, açık kaynak kodunuzu halka göndermek için harika bir web sitesi olduğunu da tespit ettim. İsminiz gönderime bağlıdır, ayrıca kullanıcıların koda erişebilecekleri kendi web sitenize bağlantılar yerleştirebilirsiniz..

Web Uygulaması API'leri

Modern web geliştirmede çok popüler bir trend, üçüncü taraf uygulaması olarak API'leri oluşturmaktır. Yaygın sosyal ağ markalarının çoğu, web sitelerinde çalışan bir API ve dokümantasyon segmentini içerir. Ayrıca, Github'da tüm büyük arka uç programlama dillerinde yazılmış tonlarca ücretsiz sarmalayıcı sınıfı vardır..

Geliştiriciler, talep arttıkça bu tür kod kütüphaneleriyle çalışmak konusunda kendilerini rahat hissetmelidirler. OAuth sistemini kullanarak, bu uygulamaların çoğundan hızlı bir şekilde bir kullanıcı tabanı oluşturabilirsiniz. Aşağıda popüler çevrimiçi API'lere ve bunların tüm belgelerine yapılan birkaç referansı listeledik.

Twitter API'si
CloudApp API
Instagr.am API
eBay API
Foursquare API'si
API'yi dağıtma
Github API

Mümkün olduğunda yeni projelerdeki bu kaynaklardan yararlanın. Web bağlantısı giderek artmakta ve kullanıcılar her zaman bir sonraki büyük uygulamaya geçmektedir. Ziyaretçilerinizin tamamen yeni bir hesap açması gerekmediğinde ve doğrudan Twitter veya Facebook üzerinden kayıt olabilirken, uygulamanıza binlerce daha fazla özel üye işe alabilirsiniz..

Sorular ve Cevaplar Kaynakları

Geliştiriciler arasında en faydalı deneyim, soru sormak ve yeni teknikler öğrenmektir. Geliştirici topluluğu her zaman yeni gelenlere çok yardımcı olur ve birçok durumda kendi uzmanlıklarını sunmaya isteklidir. Bir projeyle ilgili herhangi bir sorunuz ya da spesifik sorunuz varsa, ilgili web geliştiricisinin forumu için Google’da arama yapın.

Zaten üye değilseniz, şahsen Stack Exchange topluluğuna katılmanızı tavsiye etmem gerekiyor. Bu, temelde her konuda programlama yardımı alabileceğiniz Stack Overflow ve Süper Kullanıcı gibi harika web sitelerini içerir. Topluluk üyeleri, jQuery ve daha küçük PHP sınıfları dahil olmak üzere tüm ana web dillerinde bilgi sahibidir..

Öğrendiğim düzgün bir numara, Google’da arama yapmak ve sorununuzun çözülüp çözülmediğini görmek. Google aramanıza birkaç anahtar kelime girin ve son eki ekleyin site: stackoverflow.com. Geri gönderilen tüm arama sonuçları Yığın Taşması arşivlerinden gelen sorular olacaktır - eğer şanslıysanız mevcut sorununuza tam olarak çözüm bulabilirsiniz.

Çevrimiçi Sayfa Hızını Test Etme

Google Geliştiricileri tarafından ortaya konan bu yeni araç gerçekten etkileyiciydi. Sayfa Hızı Çevrimiçi uygulaması, web sitenizin içeriğini analiz eder ve hızlarınızla ilgili bir analiz raporu oluşturur. Bu, yükleme sürelerini azaltmak ve ziyaretçilerinizi sitede daha uzun süre tutmak için olası çözümleri içerir.

Ayrıca, hemen çıkma oranları ve düşük dönüşümlerle ilgili sorunları belirlemenize yardımcı olabilir. Google Analytics herhangi bir web sitesi için bir zorunluluktur, ancak Sayfa Hızının daha yüksek bir analiz düzeyine ulaştığını hissediyorum.

Rapor çıktısı yüksek-düşük önceliğe göre sıralanır ve genellikle birçok farklı öğe içerir. LAMP kurulumlarını anlıyor ve Apache sunucularında çalışıyorsanız, mod_pagespeed modülünü de düşünebilirsiniz. Yükleme sürelerini azaltmak ve önemli web verilerini (resimler, simgeler, komut dosyaları) önbelleğe almak için bu optimizasyonların çoğunu otomatik olarak web sitenizde gerçekleştirir..

En İyi Geliştirici Yazılımı

En popüler iki İşletim Sistemi arasında düzinelerce program bulabilirsiniz. Grafik yazılımlarından kaynak kod editörlerine ve IDE'lere, web geliştiricileri için aralarından seçim yapabileceğiniz birçok kaynak vardır. Ancak popüler öneriler arıyorsanız, aşağıdaki başlıkları öneririm.

Mac OS X

Panic, Coda'yı üreten bir yazılım şirketidir - Mac için bugüne kadarki en iyi web geliştirme uygulaması. Doğrudan sunucu dosyalarında değişiklik yapabileceğiniz kaynak kod düzenleyicisine, terminale ve FTP istemcisine erişebilirsiniz. Coda ayrıca HTML, XML, CSS, JavaScript, PHP, SQL ve daha fazlası gibi dilleri vurgulayan uzun bir sözdizimi listesini de destekler..

Bununla birlikte, ücretsiz bir çözüme ihtiyacınız varsa, Komodo Edit'i kontrol etmelisiniz. Yazılım, Windows ve Mac için geliştirilmiş, açık kaynaklı ve tamamen ücretsizdir. Sözdizimi vurgulama için aynı desteği ve Coda ile aynı özelliklere sahiptir (ne yazık ki FTP yok). TextWrangler, denemek isteyebileceğiniz başka bir ücretsiz çözümdür, aynı zamanda basit bir metin editörüdür..

Ücretsiz bir FTP uygulaması için Mac App Store'da Cyberduck'e göz atın. Her ne kadar kişisel olarak Yummy FTP veya Transmit gibi ücretli bir alternatif tercih ediyorum.

Microsoft Windows

Web tasarımı ve geliştirmesi hakkında düşündüğünüzde Adobe yazılım paketi her zaman aklınıza gelir. Windows kullanıcıları Dreamweaver'a birçok alternatif sunar ve çoğu tamamen ücretsizdir..

Notepad ++, bazı açık kaynaklı Win32 yazılımlarına harika bir örnektir. Proje halen aktif bir gelişim içindedir ve sık sık güncellemeler yayınlar (neredeyse her ay). Sekmeli arayüzlerini çok seviyorum ve pek çok ek eklentiyi destekliyorum. Yukarıda da belirttiğim gibi Komodo Edit, Windows XP / Vista / 7 için de sunuluyor, alternatif olarak deneyebilirsiniz.

Windows'taki web geliştiricileri de bir FTP istemcisi değildir. Filezilla muhtemelen en popüler ücretsiz alternatiftir. Alternatifler için, ücretsiz FTP istemciler listemize benzer araçlarla göz atın.

Diğer Yararlı Yazılım Kaynakları

100 Temel Web Geliştirme Araçları
2011'in En İyisi: En İyi Faydalı jQuery Eklentileri ve Rehberleri
Ruby on Rails Web Geliştirme Başlayanlar İçin Rehberler
7 2011 için Heyecan Verici Web Geliştirme Trendleri

Sonuç

Şimdiye kadar 2012'nin ilk çeyreği bir patlama ile başladı! Tüm dünyadan tasarımcılardan ve web geliştiricilerden çıkan harika içerikler görmüştük. Web için çalışan profesyonellerin emrinde 1-2 yıl öncesine kıyasla çok fazla araç var.

Umarım bu büyük araç ve kaynak derlemesi daha iyi bir gelişim için metodolojinizi zorlar. Web geliştiricileriyle çalışmayı ve her zaman yeni projeler öğrenmeyi seviyorum. Ancak içerebileceğimiz yeni kaynaklar için çok fazla yer var, bu yüzden birkaç cevabı kaçırdım. İlgili web geliştirici kaynakları için fikir veya önerileriniz varsa, tartışma sonrası alanda bize bildirin..