rssems / coast-guide-of-turkey Goto Github PK
View Code? Open in Web Editor NEWCoast Guide of Turkey front-end development
Home Page: https://www.coastguidetr.com
Coast Guide of Turkey front-end development
Home Page: https://www.coastguidetr.com
Onat: Fotoğraflar:
Fotoğraflar listelenirken dikey ve yatay olup ölçüleri farklı olan fotoğraflar listelenme yapısını kaydırıyor.
(Panoramiclerde bu güzel oluyor ama normal fotoğraflarda sıkıntı yaratabiliyor)
Örnek olarak: (Dikey olmayan örnek)
https://www.coastguidetr.com/tr/fotograflar/1012200112/d-marin-gocek-marina
RSS: Durumu anladim, 2 cozum var, 1.si Masonry http://masonry.desandro.com/methods.html tarzi bir layout uygulamak (3.satiri doldurmayan kutularda kotu gorunebilir). 2. yontem ise kutuya belirli bir yukseklik vermek, o zaman da o yuksekligin ustunde olan gorsellerin tasan kisimlarini gizlemis olacagim.
Is tek satir css kodu ama hangisini uygulayalim karar vermek gerekiyor gibi. 2. secenek en makulu bence.
Onat: 2. seçenek bence de en makulu. Burada hem fotoğraflar hem de panoramikler için ayrı bir ölçü ayarlamak önemli.
Ana Sayfa'daki promo(geniş olanlar) görselleri ile panoramiclerin parallax yapılması.
Https üstünden yayın yaptığımız için dışarıdan çağırdığımız herşeyin https üstünden gelmesi gerekiyor.
Şu an googlefonts http üstünden çağırıyor, başka bu şekilde var mı bilmiyorum, https olarak güncelleyebilir misin?
Onat:
Bu arada hakkımızda sayfasında 7 kişi olunca son kişiyi sıra başına koymak yerine 2 kişilik boşluk bırakıp sona koymuş :D
Onat: Kullanıcılar fotoğraf yüklemeye başlayacakları için yine hoverda kullanıcı avatarı ve ad soyad yazması varsa minik açıklamasını gösterebilecek bir alan yaratabilir miyiz =)
Kullanıcıların avatarının kısmı da bizim için çok önemli =)
Onat: Bu biraz başlıca ele almamız gereken bir konu.
Ancak en önemlisi dikey, panoramic ve yatay fotoğraflarda görsel alanı verimli kullanamıyoruz gibi geldi.
Örneğin facebook widgetı fotoğrafın boyutuna göre adapte olabiliyor aslında temelde söylemek istedim bu.
Panoramic geniş ve daha büyük şekilde görüntülenmesi daha keyif veriyor, deneyimi arttırıyor.
Panoramic ise yorum aşağıda olabilir gibi.
RSS: Bu alanda dilersen ben sana 2 tane layout olusturayim, birinde resim full kaplasin, sagdaki comment alani asagi insin, senin de dedigin gibi, fakat bunu css'ten anlayip yapmam imkansiz, senin tarafta belirleyebilir misin hangisinde neyin gelecegini? nasil ilerleyelim?
Onat: Farklı layoutlar olursa ben hangisinin gelmesi gerektiğini anlayıp ona göre ilgili olan layoutu çağırırım. Senin için ok midir? Facebook’ta fotoğraflar yatay ve dikey olarak fotoğrafa göre genişleyip, incelip, uzayıp, kısalabilir.
Onat:
Bu alan bizim için çok kıymetli o yüzden ne kadar geliştirebilirsek o kadar kullanıcı tarafında ekstra memnuniyet sağlamış oluruz =)
RSS:
O zaman ben bu alanin sana tasarimi bozmayacak sekilde js mantigini yazayim, sen de uyguluyor olursun abi, su an max 1140px genislik aliyor, bunu olabildigince arttiriyor oluruz.
Onat: Süper, inanılmaz önemli =)
Onat: Panoramic fotoğrafları şu an style back. image olarak verdim onun yerine fotoğrafa elle ulaşılamaması için 1x1 pxlik şeffaf bir layer ile koruma sağlayabilir miyiz? Bu korumayı aynı şekilde fotoğraf widgetı ve thumbnaillere de uygulayabilir miyiz?
RSS: Bunun notunu aldim abi, kod olarak ilk yapacaklarim arasinda.
Çok basit bir player arayüzü yapmamız mümkün müdür? Apple'ın ki gibi =)
Onat:
Hatta belki önemlidir diye fotoğraf widgetı alanında preroll gibi bir uygulama yapmayı test etmek istiyoruz.
Bu yüzden Reklamı Geç butonu ve geri sayımın olduğu bir yapı da fotoğraf widgetında gerekiyor bu sadece video reklam olduğu zaman olacak.
RSS:
Fotograf widgeti dedigin neresi tam anlaymaaidm? popup icersinde mi?
Onat:
Fotoğrafları gösterdiğimiz popupı kastettim =)
Burada da yine şeffaf pixel ile koruma önemli.
RSS:
Senin CSS'e ekleyebilir misin dedigin 1-2 class vardi, onlari nereden iletmistin abi? kacirmisim ben?
Onat:
İletmek istediğim classlar: (Sanırım 1 tane :)) )
.hidden {display:none;}
Onat: otoğrafların thumbnailine 2 kere tıklandığı zaman fotoğrafların açılabildiği(linke yöneldiği) feedbacki geldi. Css ile ilgili gibi geldi baktığımda, sen de kontrol edebilir misin? Desktopta böyle bir durum olmuyor.
RSS: Bunun nedeni fotograflara hover effekti vermis olmamiz, yani bir tane ok isareti cikiyor ya, mobilde ilk tabte hover, ikinci tabte click oluyor eger hover tanimliysa. nasil yapalim? eger dilersen hover efektini kaldirabiliriz, sanirim bu durum sadece sizin icin sectiklerimiz alaninda var, karar verelim abi, uygulayayim ben onu mobil ozelinde.
Onat: Sadece mobil özelinde hoverı kaldırabilir miyiz? Web için çok şık ancak mobilde kullanıcı deneyimini bozuyor.
Onat:
Şimdilik 300x250 scroll popup bizim için önemli :)
RSS:
Bu hani scroll olunca sagdan cikan arkadas degil mi? :) Nokta'ya bu modeli blogcu'da chrome eklentisini tanitmak icin uydurdugum modeldi, yurudu gitti, tamamdir entegre ediyorum ben. bir de kapat butonu oalcak di mi? sen gerekirse koymazsin.
Onat:
Hahhaa, evet, kapat butonu da olabilirse süper olur, ben animasyonları fln ayarlarım =)
Bir de sağ ve sol ok ekleyebilir miyiz? yine hover olduğu zaman.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.