Geliştirici Bülteni 15 – Geliştiriciye Özel Gelişmeler

Bu hafta mobil tanıtım ekran görüntüleri oluşturabilmek için bir araştırma içerisindeydim ve bazı farklı farklı kaynaklara ulaştım bunlardan bazılarına makale içerisinde yer verdim ayrıca her zaman olduğu gibi farklı javascript kütüphaneleri ve farklı online hizmetler yine bülten içerisinde yer alıyor.

📂 Geliştirici Bülteni 15 – Geliştiriciye Özel Gelişmeler

Geliştirici Bülteni 15 - Haftalık Geliştiriciye Özel Gelişmeler

🆕🔥 Artık bültenlerimiz içerisinde sizlere önerdiğimiz kaynaklardan bir tanesi için ❤️ Bülten Favorisi başlığı ile bülten içeriğinin en altında ilgili kaynak için daha detaylı bilgi sizlerle paylaşılacak. Bülten içerisinde paylaşılan birçok farklı kaynak mevcut olabiliyor örnek olarak bu bültenden yola çıkarsak bu bülten içerisinde irili-ufaklı birçok kaynak paylaştık kimisi web, kimisi desktop birçok kaynak mevcut. Benim amacım üzerinde en çok efor sarfedildiğini düşündüğüm ve bizler için en faydalı araç olarak gördüğüm kaynağı favori olarak belirlemek. Koşullardan bazıları emek harcanmış projenin büyük olması, kullanışlı ve kullanıcı dostu olması, open-source bir içerik olması gibi bazı koşullar sonrası bülten favorisinin belirleneceğini belirtmek isterim.


📃 PicApp

logo.5.3

Uygulama ekran görüntüleriniz için telefon, tablet, notebook, akıllı saat giydirmenize imkan sağlayan bu platform’u bu tür bir ihtiyacınız olduğunda deneyebilirsiniz.

🌍 Site: http://picapp.net
🏳 Türkçe Dil Desteği: Mevcut Değil
🏳 Çalışma Ortamı: Web

📃 App Store Screenshot Generator

picapp.net sitesinde olduğu gibi uygulama ekran görüntüleriniz için kullanabileceğiniz bazı cihaz çerçeveleri mevcut. picapp.net sitesine göre avantajı ekran görüntülerine çerçeve ayarlamak haricinde isterseniz bazı açıklamalar da girebilirsiniz.

🌍 Site: https://www.appstorescreenshot.com
🏳 Türkçe Dil Desteği: Mevcut Değil
🏳 Çalışma Ortamı: Web

📃 hogan.js

hogan.js Mustache template engine için oluşturulmuş bir javascript compiler’ıdır. hugan.js kütüphanesine ait örnek kod bloğu ise şu şekildedir.

🌍 Site: https://github.com/twitter/hogan.js
🏳 Türkçe Dil Desteği: Mevcut Değil
🏳 Çalışma Ortamı: JS Library

📃 ShotBot

icon shotbot

Üstte sizlere sunduğumuz 2 farklı uygulama ekran görüntülerine alternatif olarak kullanabileceğiniz daha gelişmiş bu aracı da isterseniz deneyebilirsiniz. Üstteki 2 alternatife kıyasla ekstra özelliklerinden bazıları şöyle hazır bazı template’leri kullanabilirsiniz. Kendi hesaplarınız ile giriş yaparak oluşturduğunuz ekran görüntüleri sonrasında tekrar dönüp düzenleme yapmanıza imkan tanımaktadır.

🌍 Site: https://shotbot.io/
🏳 Türkçe Dil Desteği: Mevcut Değil, Mevcut
🏳 Çalışma Ortamı: Web

📃 Appure

Yine üstteki 3 alternatif ekran görüntüsü oluşturma aracına ek olarak çok fazla özelliği bulunmaktadır bir üstteki shotbot gibi kendi hesaplarınızı oluşturup Android ve iOS için özel projeler oluşturup ekran görüntüsünün özelliklerini baştan sonra özellik penceresinden dizayn etmenize imkan tanımaktadır. Bu araç ile sizlere sunduğumuz 4 farklı alternatif arasında en güçlü ve en donanımlı araç şuan için budur diyebiliriz yani daha iyisi çıkana kadar en iyisi bu 😄

🌍 Site: https://screenshots.appure.io
🏳 Türkçe Dil Desteği: Mevcut Değil
🏳 Çalışma Ortamı: Web

📃 Tailwind CSS

Tamamen özelleştirilebilir bir CSS framework arıyorsanız class’lar ile html elementleri özelliklerle donatabileceğiniz bir framework olduğu söyleyebilirim. Çok fazla component yer almasada şans verilmeye değer bir css framework’ü olduğunu düşünüyorum.

🌍 Site: https://tailwindcss.com
🏳 Türkçe Dil Desteği: Mevcut Değil, Mevcut
🏳 Çalışma Ortamı: CSS Library

📃 Semantic UI

Projeleriniz için Bootstrap kullanmaktan sıkıldınız mı? yada Bootstrap elementleri sizin için yetersiz kalıyorsa o zaman Semantic UI’ya bir şans vermelisiniz. Çünkü çok fazla elementi bulunmaktadır neredeyse bir projede ihtiyaç duyabileceğiniz her şey mevcut ve baştan sonra Responsive olarak hazırlanmış tüm elementlerden faydalanabilirsiniz. Sunduğu animasyon desteği sayesinde kullanıcı deneyimini üst seviyeye çıkaracağınız animasyonlu elementleri kullanabilirsiniz. CSS UI kit konusunda uzun süredir favorim olarak yer almaktadır.

🌍 Site: http://semantic-ui.com
🏳 Türkçe Dil Desteği: Mevcut Değil
🏳 Çalışma Ortamı: CSS Library

📃 UIkit

Lightweight bir CSS UI paketi arıyorsanız UIKit’e bir şans verebilirsiniz ve projelerinizde güvenle tercih edebileceğiniz paketlerden biridir ama SemanticUI’ın sunduğu özelliklerin yanında çok light kalıyor ki zaten sırf bu yüzden paragraf başına Lightweight CSS UI paketi olduğunu dile getirdim.

🌍 Site: http://getuikit.com
🏳 Türkçe Dil Desteği: Mevcut Değil
🏳 Çalışma Ortamı: CSS Library

📃 LibPixel

Fotoğraf üzerinde kodla renklendirme işlemleri, eğip bükme, bulanıklaştırma, ışık seviyesini ayarlama, renk tonlarını düzenleme, yeniden boyutlandırma ve boyutlandırırken belirli bir merkeze göre odaklanıp resize etme gibi gibi birçok işlemleri yapmak zor olabiliyor. Saydığım senaryo haricinde görsel üzerinde gerçekleştirebileceğiniz birçok işlem için hazır işlemler oluşturulmuş ve size sadece görsellerinizin bulunduğu kendi domaininizi girmek kalıyor. Tabi bu işlemler için biraz da ücret talep ediyor 🙂

🌍 Site: https://libpixel.com
🏳 Türkçe Dil Desteği: Mevcut Değil
🏳 Çalışma Ortamı: Web

📃 Crello

Animasyonlu yada animasyonsuz Banner’lar yada image çalışması yapmak için bir çok yazılım mevcut ama masaüstü için kullanabileceğiniz bu tür yazılımlar çok pahalı olabiliyor yada çok fonksiyonlu olamayabiliyor. O yüzden online olarak sunulan çözümleri denemek bence daha mantıklı olabiliyor. Crello ile online olarak etkileyici banner’lar oluşturabiliyorsunuz.

🌍 Site: https://crello.com
🏳 Türkçe Dil Desteği: Mevcut Değil
🏳 Çalışma Ortamı: Web

❤️ Bülten Favorisi

📃 Semantic UI

Projeleriniz için Bootstrap kullanmaktan sıkıldınız mı? yada Bootstrap elementleri sizin için yetersiz kalıyorsa o zaman Semantic UI’ya bir şans vermelisiniz. Çünkü çok fazla elementi bulunmaktadır neredeyse bir projede ihtiyaç duyabileceğiniz her şey mevcut ve baştan sonra Responsive olarak hazırlanmış tüm elementlerden faydalanabilirsiniz. Sunduğu animasyon desteği sayesinde kullanıcı deneyimini üst seviyeye çıkaracağınız animasyonlu elementleri kullanabilirsiniz. CSS UI kit konusunda uzun süredir favorim olarak yer almaktadır.

Bazı SemanticUI elementlerinin responsive olarak farklı platformlarda ortaya koyduğu sonuç ise şu şekildedir.

devices

Semantic UI’yı kullanmak için Bootstrap’da olduğu gibi sayfanıza CSS ve JS kütüphanesini dahil etmeniz gerekmektedir. Örnek kod bloğunu altta görebilirsiniz.

Bazı SemanticUI elementlerine ve özellikleri gözatmak için alttaki linkleri kullanabilirsiniz.

  • https://semantic-ui.com/examples/theming.html
  • https://semantic-ui.com/examples/responsive.html
  • https://semantic-ui.com/examples/grid.html
  • https://semantic-ui.com/examples/attached.html
  • https://semantic-ui.com/examples/bootstrap.html
  • https://semantic-ui.com/examples/homepage.html
  • https://semantic-ui.com/examples/sticky.html
  • https://semantic-ui.com/examples/fixed.html
  • https://semantic-ui.com/examples/login.html

Grid Yapısı

Normalde Bootstrap’da kullandığımız Grid yapısına benzer bir grid yapısı sunmaktadır tabi üzerine eklenmiş olarak bir çok özellik mevcuttur. Bootstrap’da grid yapısı için 12’li grid yapısı tercih edilirken SemanticUI’da 16’lı grid yapısı tercih edilmektedir.

🌍 Site: http://semantic-ui.com
🏳 Türkçe Dil Desteği: Mevcut Değil
🏳 Çalışma Ortamı: Web

Geliştirici Bülteni 15 içeriklerimiz de bu kadardı, bültenlerimizi ve makalelerimizi almak için sitenin açılışındaki Abonemiz Olun! ekranında çıkan yere mail adresinizi yazın ve hemen abone olun en yeni bilgilerden mahrum kalmayın!

Diğer Bültenler


✏️ Geliştirici Bülteni 15 ile ilgili olumlu-olumsuz tüm görüşlerinizi bana yorum yada mail yolu ile iletmeyi ihmal etmeyin.

🔗 Geliştirici Bülteni 15 bültenimizi sosyal medya kanallarından makaleyi paylaşarak destek olursanız çok sevinirim.

👋 Bir sonraki bültende görüşmek dileğiyle.

5/5 - (5 votes)

Murat Öner sitesinden daha fazla şey keşfedin

Okumaya devam etmek ve tüm arşive erişim kazanmak için hemen abone olun.

Okumaya devam et