Tarif web siteleri, veri modelleme ve kullanıcı deneyimi

0
14

Diğerleri gibi, tüm bu ekstra boş zaman ve kapalı restoranlar mutfakta daha fazla zaman anlamına geliyor.

Ama ne zaman bir tarif web sitesinden veya kitaptan kopyalarsam – aynı anda zihnimde daha iyi bir deneyim oluşturuyorum.

Adım adım yöntemle birlikte bir içerik listesinden daha akıllı bir yemek tarifi web sitesi deneyimi yapabilir miyiz?

Bu, size nasıl omlette yapılacağını söylemeden önce yumurtaların tarihi üzerine 1000 kelimelik bir yazı ile başlayan SEO tuzağı yemek tarif sitelerini düzeltmekle ilgili değildir. Ne de şişirilmiş siteleri reklamlarla düzeltmeye çalışmak o kadar engelleyici ki, isterseniz gerçek tarifi bulabilirdiniz. Sorunları ortada.

Çözülebilir sorunlar

Aşağıdakileri çözen bir şey oluşturabilirsek, daha fazla bilgi edinmek için asla ayrılmak zorunda kalmayacağınız bir tarif sayfası yapabiliriz. Bu yüzden baştan sona takip etmek daha kolay olmalı.

Dönüşümler
Ya Siri / Alexa’ya bir ons kaç gram sormadan bir tarifi takip edebilseydik?
Çoğu tarif, diğer ülkelerde yaygın olarak rafta bulunmayan malzemeleri gerektirir. Peki web sitemiz Google alternatiflerine ihtiyaç duyulmasını önleyebilir mi?
“Bir fincan tereyağı” nedir, katıları neden sabit bir hacimle ölçelim?
Malzemeler ve yöntem arasında ileri geri tarama yapmak zorunda kaldığınızda yerinizi kaybetmek kolaydır – özellikle yöntem içerik miktarına atıfta bulunmadığında.

Adım adım video

Son zamanlarda “Yemek YouTube” deliğine tamamen düştüm. Bu nedenle, bu tanıtımın etini sunmak için bir video izlenimi uygun geldi.

Bu videonun ilk ~ 60 saniyesi, kanalına kesinlikle ve hemen abone olmanız gereken ve web sitesi güzel görünen en mükemmel Babish Culinary Universe’den büyük ölçüde esinlenmiştir!

Demo

İşte daha önce hazırladığım bir tane.

tarifler.simeongriggs.dev

Bu, deneyimizin nihai sonucudur. Sanity.io’daki içerikle desteklenen ve Vercel’de barındırılan Next.js üzerinde çalışır.

Bir göz at!

Çözümler

İçeriğimizi daha verimli bir şekilde yapılandırmak için atmamız gereken ilk adım, yapılandırılmış içerik için tasarlanmış bir İçerik Yönetim Sistemi (CMS) kullanmaktır. Akıl sağlığı burada benim seçimim.

Önceden hazırlanmış WordPress şablonları ve DIY web sitesi platformları bunu kesmeyecek. Bunlar, karmaşık veri sorunlarına yönelik “çerez kesici” çözümlerdir.

Daha karmaşık ve en önemlisi daha yararlı etkileşimler için herhangi bir tarifi oluşturan veri noktalarını akıllıca kullanabilmek, yeniden kullanabilmek ve dönüştürebilmek için açıkça yapılandırılmış içeriğe ihtiyacımız var.

1. Sayfa İçi Dönüşümler

Ayrı veri parçaları olarak ölçümler ve sıcaklıklarla. Ziyaretçinin tercih ettiği ölçü standartlarını (İngiliz veya Metrik, Santigrat veya Farenheit) ayarlamasını kolaylaştırabiliriz ve bu seçim sayfalar arasında kalıcı olabilir.

Bunu ön uçta yapmak kolay olsa da, ek yükleme süresinden tasarruf edebilir ve dönüşümleri doğrudan CMS’de yapabiliriz.

Unit Conversion Sanity Özel Bileşeni

Burada, farklı dönüşüm miktarları hakkında canlı güncellemeler verecek özel bir girdi bileşeni oluşturdum. Bu, gerekirse bu miktarları manuel olarak geçersiz kılmanıza izin verecek şekilde genişletilebilir.

Birim dönüştürmelerimiz de yönteme uzanır. Tarif yönteminde beyan edilen sıcaklıklar ile kullanıcı tercihine göre canlı olarak güncellenir.

2. Alternatif Malzemeler

Neredeyse tüm içerik maddelerinin adını Google’a yazmaya başlayın ve en çok arananlardan biri “alternatif adlar” olacaktır.

Dünya çapında bulunmayan veya aynı şey olarak adlandırılan birçok bölgeye özgü içerik var.

Tarif İçeriği Alternatifleri

Örneğin, birçok Amerikan tatlı tarifinde Mısır Şurubu kullanılır. Yapılandırılmış içeriğimizle, herhangi bir bileşene alternatif adların bir listesini atayabiliriz.

Web sitesinde bu, ek ayrıntılar içeren bir bileşenin adına tıklandığında bir açılır pencere olarak görünür.

3. Daha Akıllı Ölçümler

Burada bir şeyi kaçırma ihtimalim çok yüksek ama hayatım boyunca neden katı bir bileşeni hacim olarak ölçtüğünü çözemiyorum.

Aynı derecede rahatsız edici olan bir miktar yapışkan malzemeyi bir bardağa ölçmek, ancak daha sonra onu bir tencereye kazımaya çalışmaktır.

Daha fazla şeyi ağırlıkla ölçmek çok daha mantıklı olacaktır. Bu yüzden web sitemize Kapları Ağırlık veya Hacim ölçümlerine dönüştürmek için ölçümler ekledik.

Yine, bu düzenli olarak googledilen bir şeydir. “1 bardak gram tereyağı” deneyin ve bol miktarda sonuç alacaksınız.

Ve yine bunu kendi web sitemizde veri modelimizle çözebiliriz.

Her bileşen hacim başına farklı bir ağırlıkta olacaktır. Dolayısıyla, malzemelerimiz, daha sonra ağırlık için g veya oz ölçümleri yapmak için kullanılabilecek bir “Gram / 1 Cup” alanına sahiptir. ML veya fl oz miktarları için hacim dönüşümü yapabiliriz.

(Ayrıca bardakların bölgelere göre nasıl değiştiğini de tavşan deliğinden aşağıya indim ve şu anda buna bile girmeyeceğiz)

4. Yöntemi okurken iyileştirilmiş odak

Tüm geliştirmelerimiz arasında bence bu benim favorim.

Tipik bir tarif düzeni, başlangıçta miktarları olan malzemeleri içerir. Ardından, yöntemi gerçekleştirmek için talimatların bir madde işareti listesi.

Yöntem, genellikle bu miktarları tekrar referans göstermez, bu nedenle, tüm miktarlarınızı vaktinden önce hazırlamazsanız (muhtemelen yapmanız gereken şey budur, ancak bunu kimin yaptığını) geri taramaya devam etmeniz gerekir ve ileriye.

Ayrıca, yöntem muhtemelen bu adım için gerekli bileşenlerin listesini bir metin paragrafının ortasına yazar. Bunu takip etmek zor olabilir ve muhtemelen her şeyi aldığınızdan emin olmak için adımı birden çok kez tekrar okumanıza neden olacaktır.

Bu nedenle, burada her bir bileşeni “Bileşenler” olarak tanıtan yöntem adımlarını ayırdık. Yöntemde, o adım için gerekli bileşenlere, miktarlarıyla birlikte, onlarla ne yapılacağına dair bir talimat veren bağımsız bir adım.

Bu, başka bir özel Sanity bileşenini içerir. Bu, mevcut tarifteki bileşenlerin listesini okur ve bunları yöntem adımının yanına koymanıza olanak tanır.

Tarif Bileşen Yöntem Bileşen

Sonuçlar, takip edilmesi kolay adımlarla bir yöntemle sonuçlanır. Tüm bu listelerin en iyisi, sayfanın her yerinde tanımladığımız Hizmetlerin, dönüşümlerin vb. Miktarlarına hala saygı göstermektedir.

Tarif Bileşen Yöntem Bileşen Ön Uç

Plaka yukarı

İşte bu kadar! Bu demo ile şimdi nereye? Tam olarak emin değilim. Ancak bu eğlenceli bir veri modelleme zorluğuydu. Bu alınabilecek çok şey var.

CEVAP VER

Lütfen yorumunuzu giriniz!
Lütfen isminizi buraya giriniz