Web Tasarımlarınızda HTML İle Yapabileceğiniz 5 Geliştirme

web tasarım Web Tasarımlarınızda HTML İle Yapabileceğiniz 5 Geliştirme

Kabul edelim web geliştirme işleri tam bir felaket olabiliyor. HTML, CSS ve JavaScript yıllar içinde oldukça mütevazi bir kökten evirildiler. Size verecekleri sonuçlar tamamen onları nasıl kullandığınızla ilgili ve sonuç olarak bunlarla düzeltilemeyecek bir dağınıklık yaratmak oldukça kolay. Standartları takip etmek ve son gelişmelerden avantaj sağlamak iyi kodlamayı garanti etmez ama en azından yardım eder.

Yazılım geliştirmelerinin her çeşidinde konu sürdürülebilir kodlamaya geldiğinde birimsellik kraldır. Bunun bir sonucu olarak web bileşenlerine daha yakından bakmak isteyebilirsiniz.

HTML5 iyi kodlama pratiklerini desteklemek için birçok yeni eleman ekledi (ve birçoğunu da çıkardı). Anlamsal (semantic) yaklaşımı duymuşsunuzdur, HTML5'in içerdikleri şeye göre kullanılan, <article> ve <figure> gibi tanımlayıcı elemanlarını kullanmak.

Bu yaklaşım ciddi anlamda kodlarınızın daha temiz olmasına yardımcı oluyor. HTML elemanları menü barının hangi kısmını sunduğu, içeriklerinizin bölümleri ve footer gibi, kısımları tanımlamanıza yardımcı oluyor.

Tabii tek yararı bu da değil. Bu elemanlarla en son JavaScript standartlarını kullanmak konusunda da avantaj sağlıyorsunuz. JavaScript'de felaket olabiliyor ama son zamanlarda bununla çalışmak daha kolay hale geldi. Modüler geliştirmeden bahsederken, artık JavaScript de modüle yüklemeyi destekliyor. Bu sayede bağlılıklarınızı çok daha temiz olmaları için yönetebiliyorsunuz.

1. Konuşmayı tanımak ve sentezlemek

ses tanıma

Bu tip özellikler bir zamanlar bunlar için özelleştirilmiş yazılımlar gerektiren kompleks fonksiyonlardı ama artık tarayıcılarda direkt olarak inşa edilebiliyorlar. Web konuşma API, yazmak için konuşma gibi özellikleri destekleyen bileşenlere sahip. Bu tip özellikler çevrimiçi servisler (Chrome kullanımları ve Google Cloud Konuşma API) olarak kullanılabildikleri gibi, bir cihazın konuşma tanıma servisinde de kullanılabilirler. Gelecekte bunların mobil cihazlarda çok daha fazla kullanılmalarını bekleyebiliriz.

2. Bir renk seçici görüntülemek

Basit gelebilir ama bu daha önce genel kodlamalar gerektiren, kompleks kullanıcı arayüzü (UI) bileşeninin, HTML5 tarafından nasıl basitleştirildiğini gösteren mükemmel bir örnek. <input type="color"> tıklandığında, cihaza özgü renk secicileri sunar. Bu HTML canvas'da oldukça önemli olabilir. 

3. Kullanıcı arayüzü tarayıcısını yeniden renklendirmek

renk değiştirme

Bu, mobil platformlarda hoş bir estetik dokunuş sunabilir. <meta name="theme-color" content= "#ffffff"/>, web sitesini görüntülerken tarayıcıyı yeniden renklendirmenize olanak vermek için tasarlandı. Ne yazık ki, henüz standardize edilmemiş. Yani "theme-color" Chrome'da, Firefox'da ve Opera'da çalışırken, iOS için (yalnızca tam ekranda çalışan) "apple-mobile-web-app-status-bar-style" kullanmanız gerekiyor.

4. Farklı ekranlar için farklı görseller

görsel seçimi

Neyse ki görsellerinizi farklı cihazlar için boyutlandırabildiğimiz esnek (responsive) tasarımlara hakimiz. Bu özellik için kullanıcıyı en büyük görseli indirmeye zorlamak pek iyi değil. HTML5 <picture> elemanı kullanıcıların farklı cihazlarda, farklı görselleri görüntüleyebilmelerini sağlıyor.

5. Telefonunuza titreşim göndermek

Açık bir biçimde adlandırılmış olan Vibration API'nin temel bir fonksiyonu var. vibrate(), onu destekleyen cihazlarda tam olarak söylediği şeyi yapıyor. Bu fonksiyon, titreşim efekti için bir liste belirlemenize olanak veriyor. Chrome'da, Firefox'da ve Opera'da gayet iyi çalışıyor ama Edge ve Safari'yi biraz daha beklememiz gerekiyor. Bazı reklamlar bu özelliği kullanıcıların dikkatini çekmek için kullanıyor. Tabii jüri henüz bunun iyi bir fikir olup olmadığını kontrol etmedi.

Tarih: 2018-03-20 19:27 - 3 ay 2 gün önce

Tasarımcıların Daha Uzun Yaşamasının 9 Sebebi

Tasarımcıların Daha Uzun Yaşamasının 9 Sebebi

Prototip Tuzaklarından Nasıl Kaçınırsınız?

Prototip Tuzaklarından Nasıl Kaçınırsınız?