• Quiz sayfası yapılacak;
• jQuery ayarları tamamlanacak;
• Harita tasarımı geliştirilecek;
• Haritaya pin noktaları yerleştirilecek (accommodation, restaurants…)
• Profil sayfası hazırlanacak (içerisinde harita ve pin noktaları olacak) Bu nedenle bu sayfayı haritayı tamamladıktan sonra yapmayı planlıyorum.
• Filtre ayarları yapılacak;
• Sunum için broşür hazırlanacak.

VA402

Bu hafta sitemin index sayfası için tilemill programını kullanarak harita yerleştirdim. Haritayı yerleştirmek için öncelikle http://mapbox.com/tilemill/ sayfasından kullanıcı adı ve parolası aldım. Bu site sayesinde internet sitenize tasarımını istediğiniz gibi yapabildiğiniz interaktif haritalar yerleştirebiliyorsunuz. Ben henüz haritamın tasarımını tamamlamadım sadece sitemin içerisine nasıl yerleştirebileceğimi araştırdım.

Burada gördüğünüz gibi haritanın birçok farklı ayarlarını yapabiliyorsunuz (zoom, colors, markers…) Bu ayarları yaptıktan sonra Publish yazan yere gidip sitenin verdiği linki kopyalayıp kendi bilgisayarınıza atabiliyorsunuz.

Bu linki ben kendi index dosyamın php dosyasına alıp istediğim boyutları da verip koydum. Böylelikle şimdilik sitemde nasıl gözüktüğünü görebiliyoruz.

Harita ayarları dışında bu hafta sitemde jquery kullanmaya başladım. Bu kodları menu bar için kullanıyorum ve aynı zamanda sağ tarafta kalan settings bölümü için.  Ancak ilk defa kullandığım için hala bir kaç ufak hata söz konusu onları düzeltmeye çalışıyorum 🙂

Bu  hafta yeni sayfalara ek olarak forgot your password bölümünü de tamamlamış oluyorum. Eksik olan sadece yine bağlantı kodları.

Sitenin veri tabanını oluştururken, bir yandan da artık html ile sitemi yaratmaya başladım. Html kodunu yazarken daha önceden kullanmış olduğum bir program olan Dreamweaver Cs6 ‘dan yardım almaya karar verdim.

Sitemi oluşturmaya öncelikle kolay sayfalarından biri olan About kısmından başladım.

Daha sonra yapımı bu sayfadan biraz daha zor olan bir sayfa daha yaptım. Bu sayfada harita olan yere ve aşağıda bulunan tablo bölümüne şimdilik resim koydum. Bu resim yerine daha sonra Tilemill veya cartodb ile yapacağım interaktif bir harita gelecek.

Menü barı <table> kodlarını kullanarak hazırladım. Menü barın aşağıya doğru açılmasını istediğim için, onu daha sonra jQuery kullanarak ekleyeceğim bir kaç kodla hareketli hale getireceğim.

Bu sayfalara benzer birkaç sayfa daha hazırladım. Html kodlarımın database ile çalışmasını sağlamak için gerekli bağlantıyı sınıfta yaptık.

Bu bağlantı için öncelikle ayrı bir sayfada aşağıdaki kodu kaydettik. Bu kod veri tabanına nereden ulaşılacağını yazıyor eğer yanlışsa veya veri tabanına ulaşılamazsa “istenilen veritabanına ulaşılamadı” hatasını ver diyor.

<?php

   
@mysql_connect("localhost","root", "") || die ("mysql baglantisi kurulamadi");
@mysql_select_db("hpdb") || die ("istenilen veritabanına ulasamadı");

?>

Bu sayfayı kaydettikten sonra, bağlantı kurmak istediğim sayfaya (Login) Dreamweaverda aşağıda gördüğünüz kodu dosyanın en başına yazarak bağlantıyı kurduk. Artık kullanıcılar login sayfasında şifreleri ve kullanıcı adlarını girdiklerinde gerekli olan sayfaya gidebiliyorlar.

Sitenin arayüz tasarımı ve kurumsal kimlik çalışmasını bitirdikten sonra, siteyi oluşturmaya başladım. Bunun için öncelikle database oluşturmam gerekiyordu. Database sitemin içindeki tüm bilgilerinin tutulacağı veritabanı sistemidir. Veritabanı basit olarak bilgi depolayan bir yazılımdır. Birçok yazılım bilgi depolayabilir ama aralarındaki fark, veritabanın bu bilgiyi hızlı bir şekilde yönetip değiştirebilmesidir. Ben bu yazılımlar arasında Mysqli seçip kullanmaya karar verdim.

Öncelikle bilgisayarıma Xampp adlı programı indirdim. Xammp kendi bilgisayarımızda php tabanlı sitelerimizi çalıştırabilmek için oluşturulmuş, içerisinde Apache web server, Php, MySQL  gibi programların bulunduğu bir pakettir. Bu programı bilgisayarıma kurduktan sonra otomatik olarak başlayan XAMPP Control Panelde Apache ve Mysql seçeneklerini işaretleyip çalıştırdım.

Veri tabanımı oluşturmaya başlamak için http://localhost/ sayfasından sol menüde bulunan phpMyAdmin linkine tıkladım ve açılan sayfada yeni veritabanı oluştur bölümünden database için gerekli olan tabloları yapmaya başladım.

Tablolar için bir kaç ufak bilgiye sahip olmak gerekiyor.

Alan: Hücrenin ismi

Tür: Hücrede ne olacağı, tarih, yazı, sayı gibi

Varsayılan: Kullanıcının boş bırakabileceği bir yer veya bırakmaması gereken bir yer (buna siz karar veriyorsunuz) Örneğin; kullanıcının email kısmını boş bırakmasını istemiyorsanız burayı ona göre işaretliyorsunuz.

Karşılaştırma: Dil kodlaması (burası için utf_8 seçtim)

Bu tablolar ihtiyacınız olan şeylere göre değişiyor.

Ben şimdilik 3 ana tablo yarattım (city-nation-user)

City tablosunda;

*cityId, cityTitle, citynationID, citycoordinate

Nation tablosunda;

*nationId, nationTitle

User tablosunda;

userId, username, user username, user password, user gender, user nation, user birth date,  user tourist profile, user email, user picture ve user home town bölümlerini açtım.

En son sitemin arayüz sayfalarının final halini bloğa koymuştum. Site için aşağıda gördüğünüz logoyu seçtik. Logoda bulunan üç yuvarlak, üç ana turist profilini temsil ediyor (Authentic, Centric, Venturer) bu yuvarlakların renkleri de yine o turist profillerinin renkleri olacak.

Sitenin içerisinde kullanacağım yazı fontunda da “Caviar Dreams” olarak belirledik.

Logo ve font seçimi için yapmış olduğum diğer çalışmalarıda burada görebilirsiniz.

Bu hafta, en son yapmış olduğum çalışmanın küçük bir örneğini Balsamiq kullanarak hazırladım aynı zamanda sitenin ana hatlarını gösteren bir tablo yaptım. Sitenin görsel tasarımı bu çıkartmış olduğum şemaya göre hazırlanacak. Bu haftaki derse logo ve sitenin tasarımıyla ilgili örnekler getireceğim.

Balsamiq-Structure

Bu hafta derse sitenin final yapısı için bir kaç çalışmamı getirdim. Bu çalışmaları yaparken, final projemin esas konusu olan insanların farklı tatil profillerini ve ona göre seçtikleri farklı tatil destinasyonlarını öne çıkartmaya çalıştım.

Sitenin bu son yapısına göre, ilk olarak kullanıcılar siteye giriş yapıyorlar, quiz oluyorlar ve kendi profillerini öğreniyorlar.. 6 farklı profil için daha önceden yapmış olduğum araştırmaya göre kullanacağım farklı destinasyonlar olacak. Örneğin; kullanıcı öncelikle hangi tatil tipini istediğini seçecek (citybreaks&shopping, sun&beach, ski&snowboard, safari&nature) bu tatil tipini seçtikten sonra hangi kıtada seyahat etmek istediklerini seçecekler (Europe, Asia, Africa&Middle East, North America, South &Central America, Carribean, Australia &Pacific). Yaptıkları bu filtrelemeye aynı zamanda hangi profil için baktıklarını ekleyecekler ve sitenin onlar için önerdiği bazı yerler çıkacak.

İkinci filtreleme de tercihe bağlı olarak seçtikleri yer için olacak. Örneğin bir kullanıcı tatil tipi için citybreaks&shopping, kıta için Europe ve profil olarak Authentic seçtiyse çıkan destinasyonlarda Paris’le ilgileniyorsa, bu şehirle ilgili bir başka filtreleme çıkacak. Bu şehirde (Accomodation, Restaurants, Nightlife veya Shopping ile ilgileniyorlarsa, ve bunları öneren insanları da filtreleyebilecekler nationality, age, gender gibi..

Bu siteyi kullananlar aynı zamanda gittikleri yerlere göre km bazında puan kazanacaklar. Eğer gittikleri yer sitenin önerdiği yerler arasında bulunmuyorsa ancak onlar kendi profillerine öneriyorlarsa, belirli bir sayıda insanın örneğin 100 kullanıcının da oraya gidip kendi profillerine önerdikten sonra, o yer sitenin önerdiği destinasyon listesine eklenecek.

Haftaya kadar sitenin yapısını balsamiq’le bitirmiş olacağım aynı zamanda ana hatlarıyla göstereceğim bir tablo yapacağım. Bunun dışında, proje posteri, logosu ve sitenin görsel tasarımı ile ilgili bazı örnekler yapmam gerekiyor.

prototype

Geçen hafta mindmap şeklinde yapmış olduğum internet sitesinin yapısını, bu hafta a3 kağdına basıp daha detaylı bir şekilde inceledim.

Bu yapmış olduğum internet sitesinin yapısına göre, kullanıcılar siteye kayıt olmadan içerisindeki bilgileri ve insanların profillerini göremiyorlardı, ancak bu hafta aldığımız karara göre bu değişecek. Dışarıdan siteye girenlerde kayıt olmadan bazı bilgiler görebilecekler ancak kayıt olmadan quiz sonucunu bilemeyecekleri için siteyi kullanamayacaklar.

Burada kullanıcıların başka bir profile nasıl girebilecekleri hakkında bilgi verdim.

Bu sayfada da kullanıcıların kendi profillerine girdiklerinde görecekleri ve değiştirebilecekleri özellikleri görebilirsiniz.

Haftaya kadar Balsamiq’de bütün sayfaları tek tek ana hatlarıyla göstermeye çalışacağım, böylelikle ilk prototip ortaya çıkmış olacak.