Web Tabanlı Programlama – Web Tabanlı Proje Geliştirme

7. Web Tabanlı Proje Geliştirme

Şimdiye kadar web temelli programlamada kullanılan HTML5, CSS3, Javascript, PHP ve Mysql hakkında bilgi sahibi olduk. Kitabın bu bölümüne geçmeden önce sizlerden bu dillerin temel yazım kurallarını, arasındaki farklılıkları kavramış olmanız ve temel ve orta seviyedeki örnekleri uygulayabiliyor olmanız beklenmektedir. Bu bölümde ise bu dillerin hepsini kullanarak bir proje geliştirmeniz beklenmektedir. Böylece, kitabın bu bölümüne kadar öğrenmiş olduklarınızı seçmiş olduğunuz bir proje temelinde daha detaylı ve bütünsel bir şekilde uygulama fırsatı bulacaksınız.

Bir web sitesi geliştirme projesinde, sürecin başından sonuna kadar size yol haritası olabilecek aşağıdaki gibi bir yöntem izlemeniz önerilir.

PLANLAMA

İlk olarak web sitesinin ne amaçla kullanacağınızı açıkça ortaya koymanız gerekmektedir. Bir web sitesinin amaçlarının önceden belirlenmesi zamanınızı daha verimli kullanmanızı sağlayacaktır. İyi bir web sitesinden beklenen kullanıcının her şeye ulaşabilmesi değildir. Aksine kullanıcının amaçladığı eylemi kolay ve çabuk bir şekilde yapabilmesidir.

Bununla birlikte, web sitesini kimlerin kullanacağı ve hangi bilgisayar ortamlarında (akıllı telefon, tablet, düşük çözünürlüklü kişisel bilgisayar ya da yüksek çözünürlüklü kişisel bilgisayar) kullanılacağı ile karar vermelisiniz. Böylece web sitesinin tasarımını, kullanıcının yaş, bilgisayar kullanma becerilerine uygun ya da hangi cihazların kullanımı daha ön plana çıkıyorsa ona uygun yapmanız mümkün olabilir.

Web tasarımcısının web sitesi içeriği hakkında karar vermesi gerekir. Web sitesinin metin ve resimleri dışında video, ses içerecek mi? İçerecekse bu video ve ses dosyaları nasıl temin edilecek? İnternetten indirilecekse, telif hakları ile ilgili sorun olur mu? Bununla birlikte “Web sitesinde yetkilendirilmiş kullanıcılar olacak mı ya da yetkilendirilmiş kullanıcılar web sitesinde neler yapabilecek?” sorularına da cevap vermiş olmanız gerekmektedir. Örneğin hangi site içeriklerine yetkilendirilmemiş kullanıcılar erişebilecek? Böylece web sitenizin veri tabanının gereksinimleri ile ilgili de fikir sahibi olabilirsiniz.

TASARIM

İnternet ortamında daha önceden benzer siteleri araştırınız. Amacınıza göre hangi tür bir web sitesinin tasarımının daha uygun olacağına karar veriniz. Bu sitelerdeki gibi bir tasarım sizin için yeterli midir yoksa siz yeni bir tasarım ortaya koyabilir misiniz?

Siteniz menü yapısı nasıl olacak? Örneğin site menüsü tüm sayfalarda görünecek mi ya da her sayfa için ayrı bir menü mü olacak? Hangi menü yapısını kullandığınızda, web sitenizin amacına ve kullanıcısına daha uygun olur?

En basit ve sade şekilde sitenin amacına uygun bir tasarımı kağıt üzerinde çiziniz. Sitenizde kaç sayfa olmasını bekliyorsanız bu sayfalar arasındaki bağlantıları da çiziniz. Eğer bu sayfalar arasında veri taşınma gereksinimi varsa kağıt üzerinde hangi yöntemi kullanacağınızı da belirtiniz.

Tüm ayrıntıları ile web sitenizin tasarımını ve sayfalar arasındaki bağlantıları çizdikten sonra başka bir arkadaşınızla, bilişim öğretmeni ve web sitesini kullanacak en az 3 kişi ile tasarım üzerinde konuşunuz. Böylece gözden kaçırmış olduğunuz ayrıntıları yakalama ve sorunlara çözüm bulma olanağını bulabilirsiniz.

Tasarımınızı kağıt üzerinde tamamladıktan sonra web sitenizin hangi bölümlerinde hangi programlama dillerini kullanacağınıza karar vermiş olmalısınız. Daha sonra “Web sitesinde gereksinim duyduğunuz kodlama ile ilgili daha önceden bir örnek yaptınız mı? Kodun nasıl yazılacağını hatırlıyor musunuz? Ek kaynaklara gereksinim duyuyor musunuz? Kimlerden yardım alabilirsiniz? “ sorularına yanıt veriniz.

GELİŞTİRME

Tasarım sürecinden sonra, web sitenizi geliştirme sürecine geçebilirsiniz. Bu aşamada kağıt üzerindeki taslağınız doğrultusunda kitabın daha önceki bölümlerinde öğrenmiş olduğumuz kodlama becerilerini uygulayacaksınız. Bu süreç sizler için hem öğrendiklerinizi pekiştirme hem de yeni kodlama becerileri geliştirmenize olanak sağlayacaktır. Bu süreçte, öncelikle yedekli çalışmanız tavsiye edilir. Kodlama yaparken en basit ve kolay yollardan hedefe ulaşmayı deneyiniz. Çözüm bulamadığınız kodlama bölümlerinde, motivasyonunuzu düşürmeden hemen İnternette araştırmaya yöneliniz. İnternette neyi nasıl arayacağınız konusunda fikriniz yoksa bilişim öğretmeninden yardım isteyiniz.

TEST ETME

Web sitesi, tasarım ve geliştirme aşamaları içerisinde ve son hali ile test edilmelidir.

Web sitesinin içeriği ve işlevselliği ile ilgili test işlemleri

• Sayfa başlıklarını da içerecek şekilde metinleri yazım kurallarına uygun şekilde düzeltmek,

• Sayfalar arası yanlış ya da çalışmayan bağlantıları düzeltmek,

• Görüntülenmeyen ya da metinle tutarsız grafiklerin kaynağını (src) düzeltmek

• Sayfalar arası formlarla taşınan verileri kontrol etmek. Eğer veriler doğru şekilde taşınıyorsa, veritabanına bu verilerin doğru şekilde yazdırılıp yazdırılmadığını kontrol etmek.

• Diğer etkileşimli sayfa öğelerinin kullanıcı eylemine göre doğru şekilde çalışıp çalışmadığını kontrol etmek,

• Düşük hızlı bağlantıda yükleme hızını kontrol etmek için sayfaları test etmek.

Web sitesinin kullanılabilirliği ile ilgili test işlemleri

Kullanılabilirlik web sitesinin tasarımının ne kadar iyi olduğunun ölçüsüdür ve kullanılabilirliği yüksek olan bir site, kullanıcıların amaçlarını gerçekleştirmelerine olanak tanır.

Kullanılabilirlik testi için sitenin amacına uygun görevler belirlenir. Daha sonra kullanıcısı olacak kişilerden bu görevleri gerçekleştirmesi istenir. Her görevin gerçekleştirilip gerçekleştirilemediği ve gerçekleştirildi ise gerçekleştirilme süresi not edilir. Daha sonra test sonuçlarına göre web sitesinde düzeltmeler yapılır. Bu düzeltmeler, gerçekleştirilemeyen ya da uzun sürede gerçekleştirilebilen görevler için kullanıcı görüşleri alınarak sayfa tasarımındaki küçük değişiklikler renklerin belirginleştirilmesi, yazı puntolarının büyütülmesi, menü yapısının daha anlaşılır yapılması vb.) olabilir. Görevlerden hiçbiri gerçekleştirilemiyorsa amacına uygun bir site tasarımı yapılamamıştır. Bu durumda tasarımınızı yenilemeniz gerekli olabilir.

WEB TABANLI PROGRAMLAMA İÇİN PROJE ÖRNEKLERİ

Kitabın bu bölümünde sizlere üzerinde çalışabileceğiniz proje örnekleri tanıtılacaktır. Eminim ki siz kodlayıcılar da bu örnekler dışında birçok yaratıcı proje fikirleri ortaya atabilirsiniz. Bununla birlikte, projenin kodlanması için gerekli planlamaları yaparak öğrenmiş olduğumuz dilleri bu projeleri geliştirme amacıyla uygulayabilirsiniz.

Kişisel Gelişim Sitesi

Hatırlarsanız kitabın ilk iki bölümü sonunda bir site şablonu oluşturmuştuk. Bu şablon üzerinden devam ederek kitap içerisinde uygulamış olduğumuz Javascript, Mysql ve Php örneklerini şablon içerisine yerleştirebilirsiniz. Bu site sizin Bilgisayar Bilimi dersindeki kişisel gelişim siteniz olabilir. Bununla birlikte, bu siteyi okulunuzdaki Bilgisayar Bilimi dersinin bir web sitesi haline getirebilirsiniz. Böylece sizden daha sonra bu dersi alacak alt sınıflardaki arkadaşlarınız için yol gösterici bilgiler içeren bir site kodlamış olursunuz. Öte yandan, her yıl ortaya çıkan özgün projeleri bu siteden duyurarak projelerinizin geliştirilmesini sağlayabilirsiniz.

Fotoğraf Paylaşım Sitesi

Her yaz döneminde sınıf arkadaşlarınızın neler yaptıkları ile fikir sahibi olabileceğiniz resimlerin paylaşılabileceği basit bir sosyal ağ sitesi geliştirebilirsiniz.

• Bu site basitçe üç sayfadan oluşabilir. Birincisi, site açıldığında paylaşılanların görülebileceği ana sayfa, ikincisi arkadaşlarınızın paylaşım yapmak için oturum açma sayfası ve sonuncusu arkadaşlarınızın oturum açtıktan sonra resim yükleme sayfası.

• Bu proje kapsamında paylaşım yapan kullanıcıyı, paylaşım tarihini ve paylaştığı resmin dosya ismini tutan bir veri tabanı oluşturabilirsiniz.

• Site ana sayfasını ilk ziyarette bu tablodaki verileri çekerek tasarımınızda (Ör: facebook sayfanızdaki gibi) uygun yerlere yazdırarak, resimlerin paylaşım yapan kişi ile birlikte alt alta görüntülenmesini sağlayabilirsiniz.

• Eğer çok fazla kullanıcı tarafından paylaşım yapılırsa ve dolayısı ile veri tabanında çok fazla kayıt varsa veri tabanından gelen verileri sayfalandırarak gösterebilirsiniz.

• Bu projeyi daha da ilerletmek isterseniz facebook ve youtube gibi siteleri inceleyerek sayfalandırma yerine sayfanın altına ilerledikçe veri gelmesini sağlayan Javascript kütüphaneleri kullanabilirsiniz.

Ödev Notlandırma Sistemi

Bilişim öğretmeni için sizlere vermiş olduğu ödevleri kolayca takip ederek değerlendirebileceği bir web sitesi geliştirebilirsiniz. Bu siteyi basitçe senaryolaştıracak olursak;

• Siteye ilk erişildiğinde karşımıza bir oturum açma sayfası gelebilir.

• Oturum açan kullanıcının rolüne göre (öğrenci, öğretmen) kullanıcıyı öğrenci ya da öğretmen sayfasına yönlendirebiliriz.

• Öğrenci sayfasında kullanıcının haftalara göre gönderim yapabileceği bir form tasarımı yapabiliriz. Bu sayfada aynı zamanda daha önce gönderim yapılan ve öğretmen tarafından değerlendirilmiş ödevlerin notu ile birlikte listelenmesi sağlanabilir.

• Öğretmen sayfasında öğrenciler tarafından gönderim yapılmış ödevlerin listelenmesini sağlayabiliriz. Bununla birlikte, listelenen ödevlerden herhangi birine tıklandığında ödevle ilgili not ve açıklama girilmesini sağlayacak bir form tasarımı gerekir. Bu işlemi farklı sayfalarda yapabileceğiniz gibi aynı sayfa içerisinde de kodlamanız mümkündür.

Bu senaryoya göre veri tabanımızda kullanıcılar ve ödevlerle ilgili iki tablo tutulması yeterli olabilir. Fakat ödev tablosunu oluştururken öğrenci rolündeki bir kullanıcının birden fazla ödev gönderiminin olabileceğini göz önünde bulundurunuz ve birincil anahtar olacak sütunları buna göre belirtiniz.

Kodlama Öğretiyorum Sitesi

“En iyi öğrenme anlatma yoludur.” varsayımından hareket ederek iyi bir kodlayıcı, yazmış olduğu kodu sade ve anlaşılır şekilde anlatabilendir. Böyle bir bakış açısı temelinde, siz de kod yazarken anlaşılabilir şekilde videolarınızı çekebilir ve bu videoları paylaşabileceğiniz basit bir blog sayfası tasarlayabilirsiniz. Böylece, akranlarınızla, aynı işi farklı kodlama yöntemleri ile yapabilen çözümleri paylaşabilir ve kodlama becerilerinizi geliştirebilirsiniz.

Şimdi basit bir şekilde bu sitenin senaryosunu yazalım. Siteye ilk giriş yapıldığında, karşımıza HTML5, CSS3, MYSQL Yönetimi ve PHP başlıklarını içeren bir menü yapısı geleceğini hayal edin. Bu menüler alt başlıklar da içerebilir. Başlıklardan herhangi birine tıklandığında, sizlerin videoya çekmiş oldukları kodlama örnekleri, tıklanan başlığa göre veri tabanından çağrılsın.

Peki, bu şekilde bir senaryo için veri tabanımızda neler olmalı? Öncelikle temel kullanıcı bilgileri ile birlikte, sadece yetkilendirilen kişilerin video ekleyebilmesi için kullanıcı rolünü tutan bir tablo gereklidir. Bununla birlikte kullanıcıların eklemiş oldukları videonun yolu ve dosya ismini tutan videolar tablosu gereklidir. Video tablosunu oluştururken bir kullanıcının birden fazla video gönderiminin olabileceğini göz önünde bulundurunuz ve birincil anahtar olacak sütunları buna göre belirtiniz.

Soru Cevap Sitesi

ÖSYM sınavlarına yönelik okulunuz öğrencilerinin soru sorabilecekleri, yine okulunuz öğretmenleri tarafından bu soruların yanıtlanabileceği bir soru cevap sitesi tasarlayabilirsiniz. Öğrencilerin sitede soru sormalarını teşvik etmek için haftanın en değerli sorusunun seçimine yönelik bir kodlama yapabilirsiniz. Siteyi ziyaret eden kullanıcılar sorunun önemine göre bir değerlendirme notu verebilir. Bu notların ortalamasına göre haftalık önemli soruları listeleyebilir ve en önemli soruyu soran kullanıcının sitenin ana sayfasında görüntülenmesini sağlayabilirsiniz.

Anket Sitesi

Herhangi bir konuda okulunuz öğrencileri ya da velilerinin görüşlerini toplamak için bir anket sitesi tasarlayabilirsiniz. Bu site için okulunuz yöneticileri ya da öğretmenleri ile görüşerek önceden belirlenmiş anket sorularını internet ortamına geçirebilir, daha sonra web sitesinde hazırlamış olduğunuz anketi okulunuz öğrencileri ya da velilerine duyurabilirsiniz. Öğrencileri ve velilerden almış olduğunuz yanıtları bir veri tabanında tutabilir ve istenildiğinde bu verilere ilgili birimlerin erişebilmesini sağlayabilirsiniz. Bununla birlikte projenizi biraz daha geliştirmek isterseniz, yetkilendirilmiş kullanıcıların site içerisinde anket oluşturmasını sağlayarak sitenize daha dinamik bir işlev kazandırabilirsiniz.

Kıyaslama Sitesi

Popüler ürün ya da servisleri kıyasladığınız bir site tasarlayabilirsiniz. İnsanlara hangisinin daha iyi olduğunu gözlemlerinize ve araştırmalarınıza dayalı olarak bu web sitesinde gösterebilirsiniz.

Deney Sitesi

Fen laboratuvarındaki deney araçları ile yapılan deney videolarının paylaşıldığı bir web sitesi oluşturabilirsiniz. Bu web sitesini laboratuvarda bulunan araçları listeleyebilecek, kolayca güncelleştirilmesini sağlayabilecek ve istenildiğinde bu araçlar ile ilgili tanıtıcı bilgilere de ulaşılabilecek şekilde genişletebilirsiniz.

Ortak Wiki Alanı

Herhangi bir derse (Fizik, Kimya vb.) ilişkin terimlerin tanımlarının paylaşıldığı sınıflar arasında ortak kullanılabilen bir web sitesi oluşturabilirsiniz.

Kantin Sitesi

Okulunuzda işletilen kantinde satılan ürünlerin fiyatlarının takip edilebileceği, kantin işleticisi tarafından fiyat güncelleştirmelerinin yapılabileceği bir web sitesi tasarlayabilirsiniz.

Tasarruf Sitesi

Para tasarrufunun nasıl yapılması gerektiği hakkında bir site tasarlayabilirsiniz. Bunun için yaşlılar, üniversite öğrencileri, ev kadınları ile konuşarak onların deneyimlerini sitenizde paylaşabilirsiniz. Sitenize kullanıcılar üye olabilir ve kendi deneyimlerini paylaşabillir.

Özet

Yukarıdaki proje örnekleri, projenizi tasarlayıp geliştirmeden önce örnekler üzerinde tartışarak ufkunuzu genişletmek amacıyla paylaşılmıştır. Sadece bu site örnekleri ile sınırlı kalmayabilirsiniz. Bilgi çağı toplumundaki sorunlara çözüm olabilecek yeni proje fikirleri ortaya koyabilir ve bu projeleri web tabanlı programlama dilleri ile geliştirebilirsiniz.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir