İçerik
- 01. Deniz Feneri
- 02. Polimer
- 03. APIs Explorer
- 04. Çarpıntı
- 05. Google GitHub
- 06. Kuklacı
- 07. Çalışma Kutusu
- 08. Kod laboratuvarları
- 09. Renk Aracı
- 10. Tasarım Sprintleri
- 11. İnsanlar + Yapay Zeka Rehberi
- 12. Google Asistan
- 13. PageSpeed Insights
- 14. Google'da AMP
- 15. Google DevTools
- 16. Materyal Tasarımı
Web üzerinde çalışmak, genellikle Google ile bir şekilde veya biçimde çalışacağınız anlamına gelir. Ve Google Chrome'un rekabette öne çıkan caddeler olduğu için, tasarımcıların ve geliştiricilerin projelerinin tarayıcıyla nasıl çalışacağını düşünmeleri gerekiyor. Nasıl görünecek? Hangi teknolojileri destekliyor, ne kadar güvenli ve nasıl performans gösterecek?
Neyse ki Chrome, herhangi bir sitenin veya uygulamanın en iyi durumda olmasını sağlamak için araçlar sağlar. DevTools, tasarımcıların ve geliştiricilerin bir web sayfası hakkında bilgi edinmesini sağlar: DOM'u işleyebilir, CSS'yi kontrol edebilir, canlı düzenlemeyle tasarımlar üzerinde deney yapabilir, JavaScript hatalarını ayıklayabilir ve performansı kontrol edebilirsiniz. (Bu Google web araçlarını nasıl kullanacağınızla ilgili daha fazla bilgiyi burada bulabilirsiniz ve sıfırdan başlıyorsanız, en iyi web oluşturucuları listemize de bakın).
Ancak Google, tarayıcıdan daha fazlasını sunar. Tasarım ve geliştirme hayatınızın neredeyse her yönüne yardımcı olacak araçlara ve kaynaklara sahiptir. Performansı nasıl iyileştireceğinizi öğrenmek ister misiniz? Deniz Feneri yardım etmek için burada. Daha iyi performans gösteren mobil siteler mi oluşturmak istiyorsunuz? Ardından AMP'ye merhaba deyin. Güzel PWA'lar mı arıyorsunuz? Ardından Flutter, Material Design ve Workbox devreye girmeye hazır.
Google araçlarını, kaynaklarını, kitaplıklarını ve çerçevelerini kullanmanın güzelliği, bunların gezegendeki en popüler tarayıcı olan Chrome tarayıcısıyla iyi çalışacağını bilmenizdir. Daha fazla araç için web tasarım araçları özetimize bakın.
01. Deniz Feneri
Performans, bir sitenin başarısında önemli bir faktördür ve Lighthouse, Google'ın web sayfalarının kalitesini iyileştirme aracıdır (doğru web barındırma hizmeti de yardımcı olacaktır). Peki, Deniz Feneri'ni nasıl kullanıyorsunuz ve ne yapabilir? En basit haliyle, Lighthouse'u Denetimler sekmesinden çalıştırabilir ve önerilen iyileştirmelerle nihai bir rapor oluşturmak için performans, erişilebilirlik ve SEO için onay kutularının yanı sıra masaüstü veya mobil gibi çeşitli seçenekler arasından seçim yapabilirsiniz.
02. Polimer
Polimer, web bileşenleriyle yaptığı çalışmalarla tanınmaktadır, ancak proje şimdi repertuarını bir kitaplık, araç ve standart koleksiyonunu kapsayacak şekilde genişletmiştir. Neler dahil? LitElement, web bileşenlerini tanımlamayı kolaylaştıran bir düzenleyicidir, lit-html ise kullanıcıların JS'de yeni nesil HTML şablonları yazmasını sağlayan bir HTML şablon oluşturma kitaplığıdır. Ayrıca, bir PWA Başlangıç kiti, orijinal Polimer kitaplığı ve web bileşenleri setleri de bulacaksınız.
03. APIs Explorer
Google, geliştiricilerin kullanabileceği geniş bir API kitaplığına sahiptir, ancak ihtiyacınız olanı bulmak kolay bir iş değildir. Bu, Google'ın APIs Explorer'ın bir yardım eli sunmak için devreye girdiği yerdir. Kaydırılabilen uzun bir liste var, ancak daha hızlı erişim için API listesini filtrelemek için bir arama kutusu var. Her giriş, API'nin nasıl kullanılacağına ilişkin daha fazla ayrıntı içeren bir referans sayfasına bağlanır.
04. Çarpıntı
Tek bir kod tabanından mobil, web ve masaüstü için iyi görünümlü uygulamalar oluşturmak istiyorsanız, Flutter sizin için olabilir. Site, Flutter ile çalışmaya ve onu inşa etmeye tam bir referanstır. Ne yapacağına dair bir fikrin yok mu? Dokümanlar, bir kullanıcıyı kurulumdan oluşturmaya götürür ve birçok örnek ve öğreticiyle desteklenir.
05. Google GitHub
Çoğunun bileceği gibi GitHub, kod ve dosyaları depolamak ve paylaşmak için barındırma platformu / deposudur. Ve mutlu bir şekilde Google'ın platformda gözden geçirebileceği 260'tan fazla depoya sahip kendi yeri var. Arama sürenizi kısaltmak ve oynamak veya katkıda bulunmak istediğiniz arşive yaklaşmak için filtreyi kullanın.
06. Kuklacı
Dahili Düğüm olan Puppeteer, başsız Chrome'a, geliştiricilerin komut satırı aracılığıyla kontrol edebilecekleri kullanıcı arayüzü olmadan etkili bir şekilde Chrome'a erişmenizi sağlayan üst düzey bir API sunar. Peki Kuklacı ile ne yapabilirsiniz? Sayfaların ekran görüntülerini ve PDF'lerini oluşturmak, form gönderimini otomatikleştirmek ve otomatik bir test ortamı oluşturmak için birkaç seçenek mevcuttur.
07. Çalışma Kutusu
Bir PWA oluşturmak istiyorsanız, bu harika bir başlangıç noktasıdır. Workbox, web uygulamalarına çevrimdışı destek eklemek için bir dizi JavaScript kitaplığı sağlar. Bir dizi ayrıntılı kılavuz, bir hizmet çalışanı dosyasının nasıl oluşturulacağını ve kaydedileceğini, istekleri nasıl yönlendireceğinizi, eklentileri nasıl kullanacağınızı ve Workbox ile paketleyicileri nasıl kullanacağınızı gösterir. Ayrıca kontrol edilecek bir dizi örnek önbelleğe alma stratejisi de vardır.
08. Kod laboratuvarları
Bir Google ürünü için pratik rehberliğe mi ihtiyacınız var? Codelabs "rehberli, öğretici, uygulamalı bir kodlama deneyimi" sağlar. Site, düzgün bir şekilde kategorilere ve etkinliklere ayrılmıştır, bu da istediğinizi bulmanızı hızlı ve kolay hale getirir. Analitik, Android, Asistan, artırılmış gerçeklik, Flutter, G Suite, Arama, TensorFlow ve sanal gerçeklik içerir. Bir seçenek seçin ve küçük uygulamalar oluşturmak için ihtiyacınız olan kodu ve talimatları alın.
09. Renk Aracı
Renk Aracı, erişilebilirliği kontrol etmenin yanı sıra bir palet oluşturmanıza, paylaşmanıza ve uygulamanıza olanak tanıyan basit bir araçtır. Kullanıcılar, Malzeme paletinden önceden tanımlanmış bir palet seçebilirler. Basitçe bir renk seçin ve ardından onu ana renk düzenine uygulayın, ikincil seçeneğe geçin ve tekrar seçin. Son olarak, her iki şema için metin renklerini seçin. Alternatif olarak, renklerinizi seçmek için Özel'e geçin. Ardından, son olarak paleti dışa aktarmadan önce her şeyin iyi olduğunu kontrol etmek için Erişilebilirliğe geçin.
10. Tasarım Sprintleri
Tasarım Sprint Kiti, tasarım sprintlerine nasıl katılacağını veya koşacağını öğrenenler içindir. İlk kez gelenlerden deneyimli sprint kolaylaştırıcılarına kadar tüm bilgi tabanlarını kapsıyor gibi görünüyor. Metodoloji hakkında bilgi edinin veya brifing yazma, veri toplama ve araştırmanın yanı sıra sprint sonrası ne yapılacağı da dahil olmak üzere doğrudan planlama aşamasına geçin. Ayrıca araçlar, şablonlar, tarifler ve kendi yönteminizi gönderme seçeneği gibi bir dizi kaynak içerir. Ayrıca, muhtemelen kaynakları depolamak ve paylaşmak için bir yere ihtiyacınız olacaktır, bu nedenle bulut depolama seçiminizin yerinde olduğundan emin olun.
11. İnsanlar + Yapay Zeka Rehberi
Bu kılavuz, Google'daki People + AI Research girişiminin bir çalışmasıdır ve insan merkezli AI ürünleri oluşturmak isteyenlere yardım sunmayı amaçlamaktadır. Kapsamlı kılavuz kitap, kullanıcı ihtiyaçlarını, veri toplama ve değerlendirmeyi, zihinsel modelleri, güveni, geri bildirimi ve zarif başarısızlığı kapsayan altı bölüme ayrılmıştır. Her bölüme alıştırmalar, çalışma sayfaları ve bunun gerçekleşmesi için gereken araçlar ve kaynaklar eşlik ediyor.
12. Google Asistan
Bu, Google Asistan'ın geliştirici platformudur ve içeriğinizi ve hizmetlerinizi Google Asistan ile nasıl entegre edeceğiniz konusunda bir kılavuz sunar. Mobil uygulamanızı nasıl genişleteceğinizi, Arama ve Asistan için zengin yollarla içerik sunmayı, evdeki ışıkları, kahve makinelerini ve diğer cihazları nasıl kontrol edeceğinizi ve akıllı hoparlörler, ekranlar ve telefonlar için sesli ve görsel deneyimler oluşturmayı gösterir.
13. PageSpeed Insights
PageSpeed Insights, web içeriğini analiz eder ve ardından daha hızlı yüklenmesi için öneriler sunar. Bir URL ekleyin, Analiz düğmesine basın ve sihrin gerçekleşmesini bekleyin. PageSpeed API'nin nasıl çalıştığı ve onu kullanmaya nasıl başlayacağınız konusunda daha iyi bir fikir edinmek için Dokümanlar'a bakın.
14. Google'da AMP
AMP, Google'ın (umarız) arama sıralamalarının en üstüne çıkacak hızlı yüklenen mobil sayfalar oluşturma aracıdır. Hızlı, kullanıcı öncelikli siteler oluşturmayı, AMP'yi Google ürünleri arasında entegre etmeyi, AMP sayfalarını daha hızlı hale getirmek için Google AMP Önbelleğini kullanmayı ve diğer Google ürünleriyle AMP sayfalarından para kazanmayı öğrenin.
15. Google DevTools
Her tasarımcı ve geliştirici, Chrome'un doğrudan tarayıcıya yerleşik bir dizi araçla birlikte geldiğini bilir (veya en azından bilmelidir). Chrome’un Geliştirme Araçları, bir sayfayı oluşturan öğeleri incelemek, CSS'yi kontrol etmek, sayfaları anında düzenlemek ve çok daha fazlası için idealdir.
Öğeler sekmesi, DevTools'a giriş niteliğindedir. Seçilen sayfayı oluşturan HTML kodunu görüntüler. Seçilen sayfadaki her bir div veya etiketin özelliklerine ilişkin bir fikir edinin ve canlı düzenlemeye başlayın. Bu, tasarımları denemek için mükemmeldir. Layout'u (Flexbox veya Grid kullanıyor olsanız da) kontrol edin ve örneklerle ilgili yazı tiplerine göz atın ve animasyonları inceleyin.
Başka bir yerde CSS'yi görüntüleyebilir ve değiştirebilirsiniz. Öğeler panelindeki Stiller sekmesi, DOM Ağacı'nda seçili öğeye uygulanmakta olan CSS kurallarını listeler. Tasarımları denemek için özellikleri açın ve kapatın (veya yeni değerler ekleyin). Bu, canlı tasarıma herhangi bir değişiklik uygulamadan önce her şeyin beklendiği gibi çalışmasını sağlamak için mükemmel bir araçtır.
Ayrıca JavaScript'te hata ayıklayabilir, web sitesi hızını optimize edebilir ve ağ hızını inceleyebilirsiniz. İşte iş akışınızı anında hızlandırmak için kullanabileceğiniz hızlı bir ipucu. Kaynaklar sekmesine gidin, Yeni Kod Parçacığı'nı tıklayın ve sık kullanılan kodu ekleyin. Kod parçacığını adlandırın ve kaydedin. Gerektiği kadar tekrarlayın. Şimdi tekrar yazmak yerine bu kod parçacığını alabilirsiniz.
Her iyi tarayıcı gibi, Chrome da sürekli gelişiyor ve her yeni sürüm yeni özellikler getiriyor. Chrome durum platformunda neler olduğunu öğrenin
16. Materyal Tasarımı
Geliştirme Google'ın tercih ettiği çocuğu olarak görülebilir, ancak ne yapıyorsanız, yaratıyor veya oluşturuyorsanız, iyi görünmesi ve kullanıcıya onu kullanmak istemesini sağlayacak bir deneyim sunması gerekir. Materyal, Google'ın kararlı ürününe daha yeni bir eklemedir, ancak hayati bir tasarım kitine dönüşen bir tasarım sistemidir.
Herhangi bir iyi tasarım sistemi gibi, daha heyecan verici şeylere geçmeden önce bakmanız gereken kendi yönergeleri vardır. Farklı öğelerin nasıl kullanılacağına, Materyal temasının ne olduğuna, bir temanın nasıl uygulanacağına ve erişilebilirlik dahil kullanılabilirlik kılavuzlarına genel bir bakış edinin. Başka yerlerde, tasarımın düzen, gezinme, renk, tipografi, ses, ikonografi, hareket ve etkileşim gibi kilit alanlarını içeren Material Foundation hakkında bir fikir var. Her kategori, yapılması ve yapılmaması gerekenleri ve dikkat etmeniz gereken yerleri açıklar. Neyin bekleneceği konusunda bir fikir vermek için Düzen kategorisi, düzeni anlama, piksel yoğunluğu, sütunlar, oluklar ve kenar boşlukları, kesme noktaları, kullanıcı arabirimi bölgeleri ve birkaç ad verilecek boşluk yöntemleri dahil duyarlı bir düzen ile nasıl çalışılacağı üzerine bölümler sunar.
Tasarım bölümünün ötesinde, bir tasarım oluşturmak için gereken fiziksel yapı taşlarını sağlayan Bileşenler vardır. Burada neler var? Düğmeler, afişler, kartlar, diyaloglar, bölücüler, listeler, menüler, ilerleme göstergeleri, kaydırıcılar, atıştırmalık çubukları (bunlar ekranın altındaki uygulama işlemleri hakkında kısa mesajlardır), sekmeler, metin alanları ve araç ipuçları. Kuşkusuz, kapsamlı bir bileşen koleksiyonu.
Ve geliştiriciler, Android, iOS, Web ve Flutter gibi farklı platformlar için nasıl geliştirme yapılacağına dair ayrıntılar ve öğreticilerle unutulmadı. Ve son olarak, seçtiğiniz tasarımın gerçekleşmesine yardımcı olacak bir dizi kaynağa ayrılmış bir sayfa var.
Bu makale ilk olarak net dergisinde yayınlandı. Sorunu satın al 326.
