CSS – Web Sayfalarına Özgürlük

Yazımın başlığında belirttiğim gibi CSS (Cascading Style Sheets) ya da Türkçe karşılığı ile Stil Şablonları web sayfalara tam anlamıyla özgürlük getiriyor. Sayfa içerisinde ki her bileşenin konumu, boyutu, yazıların rengi, fontu gibi tüm alanlara rahatlıkla müdahale edebiliyoruz. Ayrıca sayfanın genişlik, yükseklik gibi değerlerini de rahatlıkla değiştirilebiliyor CSS ile.

CSS’in en kullanışlı özelliği ise global değerler ile tüm sayfaları üzerinde toplu olarak stil güncellemesi yapılabilmesi yani tüm sayfalarda örnek bir bölümün rengini ya da biçimi değiştirdiğinizde diğer sayfalarda tek tek güncelleme yapılmasına gerek kalmıyor. Bunu bir yerden yapmanız yeterli oluyor. CSS kodları HTML kodları içerisine yazılır.

CSS öğrenmek için en iyi kaynak çoğumuz bildiği w3schools.com. Bu web sitesi aracılığıyla CSS’i sıfırdan öğrenebilirsiniz. Sitenin en güzel özelliklerinden biri ise kodları çalıştırarak deneyebilmeniz. Böylece local bilgisayarınızda herhangi bir şey yapmadan deneyerek CSS öğrenebilirsiniz.

Ben de özellik bu site aracılığıyla öğrendiğim bilgilerle yaptığım örnek bir web sitesinin ekran görüntülerini paylaşmak istiyorum.

CSS ile tasarladığım örnek bir web sayfası

Görüntüden de anlaşıldığımı gibi menülerin arkaplanlarına istediğimiz gibi müdahale edebiliyor ve resimler yerleştirebiliyoruz. Yine metin kutuları ve butonları özgürce biçimlendirebiliyoruz. Bu da bize CSS’in gerçekten web için özgürlük getirdiği düşüncemizi somutlaştırdığını gösteriyor.

Akış Diyagramı – Flowchart

İş akışı, akış şeması ya da akış çizelgesi olarak da bilinen flowchartlar kısaca algoritmaların görsel ögelerle gösterilmesine denir. Bir iş sürecinin nasıl işlediğinin ya da bir problemin nasıl çözümleneceğinin adım adım gösterilmesi akış diyagramları ile gösterilmektedir. Okul projem iki kısımdan oluşuyor. Her iki bölümde de belirlenmiş bir iş var ve bu işlerin akış diyagramları ile gösterilmesi isteniyor. Şimdi yaptığım projenin detaylarını paylaşmak istiyorum.

1. Bölüm – Birden çok konumda yer alan sinema şirketinin online film bileti rezervasyon ve satış sitesinin iş akış sürecinin flowchart ile gösterilmesi. Sonuç;

Flow-chart-1-for-a-movie-theater-system-booking-tickets-

2. Bölüm – Bu bölümde istenilen bir ayakkabı şirketinin e-ticaret sitesinde ayakkabı sipariş sürecinin bazı kontrollerin yapılarak akış diyagramında gösterilmesi. Sonuç;

Flow-chart-2-for-the-e-commerce-company-

Karar Ağacı Analizi (Decision Tree Analysis)

Karar Ağacı Analizi (Decision Tree Analysis)

Karar ağacı, bir iş için belirlenen seçeneklerden en doğrusunu seçme konusunda oldukça etkili olan analiz türüdür. Tüm olasılıklar diyagram üzerinde gösterilmektedir ve bu da karar aşamasında çok etkili sonuçlar vermektedir. Projemin konusu bir kayak merkezinin gelecek kayak sezonuna hazırlanma sürecinde nasıl bir yol izleyeceği konusunda. Öncelikle daha önceki yıllara dayanarak kar kalınlığına göre kâr oranları aşağıdaki gibi olduğu bilinmektedir.

Kar KalınlığıOlasıkKâr
85 cm’den daha fazla0.1$500,000
25-85 cm arası0.5$80,000
25 cm’den daha az0.4$-50,000 (zarar)

Şirketin üç tane seçeneği mevcut.

1. Seçenek: Büyük bir otel zinciri ile anlaşıp kesin olarak $250,000 kar etmek. Bu durumda Kâr = $250,000

2. Seçenek: Bir yapay kar üretme makinesi kiralamak ve kar kalınlığını düzenlemek. Makinenin kiralama ücreti sabit $40,000. İşletme ücreti ise kar kalınlığına göre;

  • 85 cm’den daha fazla ise $30,000
  • 25-85 cm arası ise $50,000
  • 25 cm’den daha az ise $60,000 olacak.

Bu durumda kâr oranını hesaplamak için Max Kâr – ( Kiralama Ücreti + İşletme Ücreti ) formülünü her kar kalınlığı için uygulamak ve çıkacak sonuçları ilk tabloda belirttiğim olasılık oranları ile çarpıp son olarak hepsini toplamak gerekiyor. İşlemi yapmak gerekirse;

$500,000 – ( $40,000 + $30,000 ) = $430,000
$500,000 – ( $40,000 + $50,000 ) = $410,000
$500,000 – ( $40,000 + $60,000 ) = $400,000


($430,000*0,1) + ($410,000*0,5) + (400,000*0,4) = $408,000 Bu durumda Kâr = $408,000

3. Seçenek: Yapay kar üretme makinesi kullanmadan ve herhangi bir firma ile anlaşmadan doğal şartlar ile merkezi işletmek. Bu durumda ilk tablodaki değerler ile oluşacak kâr miktarı hesaplanabilir.

($500,000*0,1) + ($80,000*0,5) + (-$50,000*0,4) = $70,000 Bu durumda Kâr = $70,000

Şimdi tüm bu işlemleri karar ağacında gösterelim.

SWOT Analizi

SWOT Analizi

Strengths (güçlü yönler), Weaknesses (zayıf yönler), Oppurtunities (fırsatlar) ve Threats (tehditler) kelimelerinin kısaltılmasından oluşan SWOT yapılan ya da yapılacak bir işin analizinde kullanılan çok etkili bir analiz türüdür. Tüm bu faktörler tek bir tabloda görülebildiği için çok daha rahat ve doğru kararlar alınabilmektedir. Böylece zayıflı ve güçlü yanlarımızı görüp gerekli geliştirme ve iyileştirmeleri yapabilir, fırsatları daha iyi değerlendirebilir ve tehditlere karşı gerekli aksiyonları alabiliriz. SWOT analizini örnek bir senaryo ile daha rahat anlaşılabilir hale getirelim. Eksikleri olabilir, lütfen fark ederseniz yorumlarda belirtiniz.

Senaryo: Web üzerinden kitap satan bir şirket. Satışlar sadece İnternet üzerinden yapılmaktadır. Pazarlama ve tanıtım için İnternet harici herhangi bir mecra kullanılmamaktadır. Bloglar, forumlar ve diğer sosyal ağlar tarafından web sitesinin adı duyurulmakta ve sitenin ziyaretçi trafiği gün geçtikçe artmaktadır.

İnternet üzerinden satış tüm dünyaya ulaşmayı sağlamaktadır fakat bazı müşteriler online alışverişe çok güvenmediği için özellikle dükkanlardan fiziksel olarak görüp almayı tercih etmeye devam ediyor. Şirketin piyasada oldukça fazla sayıda rakibi mevcut. Bundan dolayı büyük bir rekabet ortamı var. Şirket ürünlerini ve servislerini çeşitlendirmelidir. Yatırımlar, araştırmalar ve iyileştirmeler yapması gerekmektedir.

Şirket küçük çaplı olduğu için kitap fiyatları olabildiğince düşük miktarda ve daha fazla indirim yapma şansı yok. Fiziksel dükkanlardan daha uygun fiyatlar sağlayabiliyor fakat daha büyük şirketler daha fazla bütçeye sahip oldukları için daha çok uygun fiyata satış yapabiliyor.

Eğer müşteriler ürünü iade etmek istiyorlarsa bunu posta ile yapıyorlar. İade sürecinde e-mail aracılığıyla müşteri ile iletişimde kalınabilir. Böylece sorunsuz bir iade prosedürü işletilir ve müşteri memnuniyeti sağlanabilir.Devamlı alışveriş yapan müşteriler satışların durgun olduğu zamanlarda bile şirketin ayakta kalmasını sağlayabilirler ve yeni ürün/hizmet konusunda fikirler verebilirler.

Ürünler Amerika, Kanada ve Avrupa’daki bazı ülkelerde bulunan depolarda depolanıyor ve buradan gönderimleri yapılabiliyor. Fakat Kanada’daki bazı depolar limanlara çok uzak ve iklim koşullarından dolayı kara yolu ile taşıma oldukça zor. Şirket gelecek yıl İstanbul’da bir distribütör açmayı planlıyor.

Kitapları depolamak kolaydır fakat nakliyeleri ağır oldukları için oldukça zordur. Bu durumda hava taşımacılığı bu iş için çok uygun değil. En iyi yöntem deniz ya da kara ulaşımı. Fakat kara ulaşımı hızlı olmasına karşın daha pahalı. Oldukça iyi bir dağıtım ağına sahip, ancak Avrupa’daki mevcut kara yolu ulaşım ağında bazı sorunlar var. Dağıtım araçları eski ve sayıları az. Dağıtım ağına yeni araçlar eklemek istiyorlar ancak maliyeti çok yüksek.

Satış web sitesi üç yıl önce oluşturuldu ve bu yıl yenilendi. Şuan daha kullanışlı. Ayrıca yeni geliştirmeler ile site içi arama motoru eklendi. Böylece müşteriler aradıkları ürünlere daha kolay ulaşabiliyor. Web sitesi bakım giderleri oldukça düşük. Bazı teknolojik geliştirmelere ayak uyduracak yeni güncellemeler için destek alınması gerekiyor çünkü bu konuda yeterince teknik bilgiye sahip değiller.

Şirket mali açıdan çok iyi durumda değil ve geçen iki yıl mali durumun kötü olduğu raporlandı. Ayrıca mevcut sermaye gerekli güncellemeler ve büyümeler için gelecek üç yıl ile sınırlı görünüyor. Durumu iyileştirmek için pazarlama departmanı tüm gayreti ile çalışmalarını sürdürüyor.

Asya pazarında tedarik zincirinde yaşanan sorunlar dolayısıyla geçen yıl üç ay boyunca satış yapılamadı. Gelecek yıl Amerika’da kitap üzerindeki verginin %1 oranında artması bekleniyor bu da kitaplarda daha fazla indirim yapılamayacağı hatta fiyatların artışının söz konusu olabileceğini gösteriyor.

Senaryonun SWOT analizi;

Kullanıcı Arayüzü (UI) ve Kullanıcı Deneyimi (UX)

Kullanıcı Arayüzü (UI) ve Kullanıcı Deneyimi (UX)

Kullanıcı arayüzü, kullanıcının ürün ile etkileşim kurduğu kısmıdır diyebiliriz. Örnek olarak web sitelerindeki butonlar, metin kutuları ya da açılır menüler gibi. Kullanıcı deneyimi ise arayüz elemanlarının kullanıcılara uygunluğunun, ergonomisinin ve kullanılabilirliğinin incelendiği alandır. Her ikisi de birbirleri ile bağlantılı ve tamamlayıcı dırlar. Hangisinin daha önemli olduğunu söylemek yerine her ikisinin de doğru bir şekilde uygulandığı ürünlerin başarılı olacağını söylemek daha doğru olacaktır. Kullanıcı arayüzü tasarımı yaparken gerekenden fazla nesne kullanmamaya özen gösterilmelidir. Kullanıcılar ürün ile ilk kez karşılaştıklarında olabildiğince ilk bakışta neyin ne için tasarlandığını anlamalarını sağlamalıyız. Aynı şekilde gözü yoracak renk tonlaması ve düzensizlikten olabildiğince uzak durmalıyız. Gerekli yerlerde net ifadelerin yer aldığı uyarı ve bilgilendirme mesajlarının yer alması da ürünü/sistemi daha kullanılabilir hale getirecektir.

Kullanıcı Arayüz (UI) Tasarımı

Kullanıcı arayüz tasarımı üç ana adımdan oluşmaktadır. Use Case adından da anlaşıldığı gibi ürünün nasıl kullanılacağının görsel olarak grafikler ve şekiller ile anlatılmasıdır. Prototip ise projenin karalama yaparak çok fazla detaya inmeden kabaca çizilerek tasarlanmasına denir. Tasarım aşamasında ise ürünün tüm detayları yer alır. Renk, düzen, font gibi ürüne ait tüm bileşenler belirtilir.

Bu projeyi hem kullanıcı arayüz tasarımını (use case, card-based prototype ve design) hem de kullanıcı deneyimini incelemek için yapıyorum. Uygulayarak somut bir şekilde sonucu görebiliriz. Proje bir sinema şirketinin web sitesi ve bilet alma sistemi olacak.

Kullanım Şekli (Use Case);

Prototip (Card-Based Prototype);

Tasarım (Design);

Kullanıcı Deneyimi (UX)

Projemin bu kısmında ortaya çıkan ürünü kullanıcı deneyimi açısından inceleyeceğim. Web sitesinde yer alan ögelerin gruplanması, hizalanması, font, renk düzeni ve tonlaması gibi kriterlerin uygunluğuna bakabiliriz. Tasarımı kontrol ettiğimizde ilgili alanların gruplandırıldığını görüyoruz. Böyle yaparak kullanıcıya hangi girdinin hangi alana ait olduğunu anlama konusunda yardımcı oluyoruz. Renk tonlamasına baktığımızda ise gözü yormayan ve kafa karışıklığına neden olmayacak bir renk şemasını kullandığımı görebilirsiniz.

Proje Yönetimi – Project Management

Proje Yönetimi – Project Management

Projeyi genel olarak benzersiz bir hizmet ya da ürünün geliştirilmesi için yürütülen bir girişimdir şeklinde tanımlayabiliriz. Önemli kısım bir başlangıç ve bitiş tarihi olduğudur. Bu da en çok karıştırıldığı operasyondan ayrıldığı özelliğidir. Operasyonun benzersiz olmasına gerek yoktur ve sürekli tekrar edebilir. Bir ürünün ya da hizmetin proje kapsamında geliştirilmesinin başlıca faydalarını sıralamak gerekirse;

  • Zaman tasarrufu
  • Risklerin azaltılması
  • Kaynakların daha verimli kullanılması ve yönetilmesi
  • Kalitenin artması

Project Management Institute tarafından yayınlanan PMBOK’a (Project Management Body of Knowledge) göre Proje Yönetim Süreçleri beş aşama olarak belirlenmiştir.

  • Başlangıç (Initiating)
  • Planlama (Planning)
  • Yürütme (Executing)
  • İzleme ve Kontrol (Monitoring and Controlling)
  • Kapanış (Closing)

Proje yönetimi için bir çok ücretli ve ücretsiz yazılım mevcut. Bunların ücretliye örnek olarak Microsoft Project, ücretsize ise OpenProj verilebilir.

OpenProj arayüzü aşağıdaki gibi. Örnek bir çalışma yaptım.

Bu uygulama projemde bir mobilya kentinin ikinci satış kanal olarak e-ticaret ortamına geçişi olacak. Gerçek bir proje gibi tüm aşamaların yer aldığı bir proje yapmaya çalışacağım. Eksiklerini ve düzeltilmesi gereken yerleri yorumlarda belirtirseniz çok memnun olurum.

  1. Projenin başlatma yazısı diyebiliriz. Yani müşteri tarafının projeye başlamada herhangi bir engelin olmadığı ve proje başlanabileceğini belirtildiği kısım.
  2. Sözleşme bölümünü aşağıdaki gibi hazırladım.

3. Proje üzerinde yapılacak eklemeler, geliştirmeler ve değişiklikler için ücretleri aşağıdaki gibi olacak. (Rakamlar temsilidir.)

4. Proje yapım aşamasında ve sonrasında yaşanabilecek sorunlar ve risklerin belirlendiği ve çözümlerin yazıldığı kısım.

5 . Proje giderlerinin detaylı olarak belirleneceği kısım. (Rakamlar temsilidir.)

6. Projede yer alan ekip üyeleri ve görevlerinin belirlendiği kısım.

7. İş ve zaman tablosunun yer aldığı kısım.

8. Ekip ve kooperatif üyelerinin iletişim bilgilerini yer aldığı kısım.

9. Son olarak proje yöneticisi tarafından kapanış raporunun hazırlanması.

error: İçerik korunmaktadır.