WEB TASARIMI YRD. DOÇ. DR. ENGİN CEMAL MENGÜÇ

Transkript

1 1 WEB TASARIMI YRD. DOÇ. DR. ENGİN CEMAL MENGÜÇ

2 İçindekiler 2 Web Nedir? Web Yayımı HTML Nedir? Basit HTML Etiketleri CSS Kullanımı Statik/Dinamik Web Siteleri Web Programlama Dilleri (ASP, PHP vb.) İçerik Yönetim Sistemi Nedir?

3 Web ilk başta size bir karmaşa gibi gelebilir. Korkmayın!!! 3

4 WEB ve İnternet aynı şey değildir!!! 4 WWW açılımı World Wide Web yani Dünya Çapında Web denilir, İnternet ise dünyadaki tüm cihazları birbirine bağlayan bir teknolojidir, WWW sadece tarayıcılar vasıtası ile bir web sitesini görüntülemeye yarayan araçlar zinciridir, Web de birim eleman bir HTML dosyasıdır, İnternet'te birim eleman bir bilgisayardır. Internet üzerinde HTML haricinde diğer birçok protokolle de çalışır. Bu protokoller ile çalışan sistemlere Web denilmez. FTP, SSH, Mail, Torrent ve diğer protokoller İnternet üzerinden gerçekleşebilir, Web in temeli İnternet olup, İnternet üzerinde kurulmuştur ve İnternet in sunduğu mekanizmalardan çoğunun kullanılmasını sağlar, Web İnternet ile sağlanan iletişim şekillerinden yalnızca birisidir.

5 Web Nedir? 5 WWW nedir? İngilizce de World Wide Web sözcüklerinin baş harflerinden oluşturulan bir kısaltmadır. Dünyayı saran web diye açıklayabiliriz. Kısaca web sözcüğü ile de ifade edilir. Web Nedir? İngilizcedeki web sözcüğünden gelmektedir. Kumaş dokusundan esinlenerek, bilgisayar ağını ifade etmek için kullanıldığı söylenebilir. Web, internet üzerindeki servislerden birisidir. İnternet üzerinde yazı, grafik, resim, ses ve hareketli görüntülerden oluşan dokümanları uzaktaki bilgisayarlara iletir.

6 Web Nedir? 6 Bilgisayar ekranında gördüğümüz her bir web dokümanına bir web sayfası denir. Bir kişi ya da kurum, hazırladığı bütün web sayfalarını bir araya getirerek bir web sitesi oluşturabilir. Her web sitesinin internet üzerindeki yerini belirleyen bir adresi vardır. Buna URL (Uniform Resource Locator) denilir. Web dokümanları internete bağlı her bilgisayardan yayımlanabilir ve görülebilir. Yayımı ve görüntüyü sağlayan özel yazılımlar olmadan ne yayım olur ne de görüntü sağlanır. Bir web sayfasının internette bize ulaşması için geçirdiği başlıca evreler şunlardır: 1. Web sayfasının hazırlanması, 2. Web sayfasının sunulması, 3. Web sayfasının izlenmesi.

7 Web Yayımı 7 1. Web Sayfasının Hazırlanması Web sayfaları özel bir programlama dili ile yazılır. Bu dile HTML (Hypertext Markup Language) denir. Bu dil yalnız yazıları değil grafik, resim, ses iletimini de yapabilmektedir. Yazı, resim ve grafiklere hareket katarak, kısaca video diye adlandırılan dinamik web sayfaları oluşturulabilmektedir. Bunların hazırlanabilmesi için çok sayıda yazılım kullanılır. 2. Web Sunucuları (Hosting) Internete bağlı olan ve bir IP (Internet Protocol) numarası olan her bilgisayar web sunuculuğu yapabilir. Hazırlanan bir web sayfasının internette yayımlanabilmesi için sunumu yapan bir yazılımın olması gerekir. Bunu yapan çeşitli yazılımlar vardır. En yaygın olanı Apache Server adıyla bilinen yazılımdır. İnternete bağlı ve üzerinde bir web sunucu yazılımı olan bilgisayar bir web sunucudur. Bir web sunucu bir çok web sayfasını ve web sitesini yayımlayabilir. Bu işi yapan bilgisayarlara web sunucuları denir. Web sunuculuğu yapan bir çok ticari ve resmi kuruluş vardır. 3. Web Tarayıcıları (Web Browser) Web dökümanlarını (web sayfalarını) görüntüleyen yazılımlardır. Web tarayıcıları arasında en yaygın olanları Internet Explorer, Mozilla, Firefox ve Google Chrome dır. Web tarayıcıları ücretsizdir. İnternet ten indirilebilir.

8 Web Sitenize İsim Alma ve Yayınlama 8 DNS: Domain Name System in kısaltılmış şeklidir. Türkçe karşılığı ise Alan İsimlendirme Sistemi olarak bilinir..tr ile biten isimler, merkezi ODTÜ de olan nic.tr adresinden alınabilir. tr olmayan diğer isimler için hosting (web sunucusu kiralama) işi yapan web siteleri üzerinden alınabilir. Com : Ticari kuruluşlar Edu : Eğitim kurumları Org : Ticari olmayan, hükümete de bağlı bulunmayan kurumlar Net : Internet omurgası işlevini üstlenen ağlar Gov : Hükümete bağlı kurumlar Mil : Askeri kurumlar

9 Hosting 9 Hazırlanan web sitesine ait dosyaların bir sunucu üzerinden yayınlanması işlemidir. İnternette bununla ilgili bir çok site bulabilirsiniz. Daha önceden almış olduğunuz DNS adresini ( kiraladığınız sunucu üzerinde yapacağınız ayarlamalar ile bu adres bu sunucuya yönlenecek anlamına gelecek ayarları yapmanız gerekecek. Her DNS adresine karşılık sunucuya ait bir IP adresi denk gelmektedir. Örneğin: aksis.istanbul.edu.tr

10 10

11 İyi Bir Web Tasarım Nasıl Olur? 11 Kolay ulaşılabilmeli. Güncellenebilir ve geliştirilebilir olmalı. Dili sade olmalı ve hedefe yönelik yönlendirmeler içermeli. Kullanıcıyı gereksiz bilgilerle yormamalı. Görsellerle desteklenmeli. Fotoğraflar aşırı büyük olmamalı. Renk uyumu sağlanmalı. Kullanım kolaylığı sağlamalı. Zararlı yazılımlara karşı korunabilir olmalıdır. Tasarım ile konu birbirine uymalı.

12 12

13 Arayüz Tasarımı 13 Photoshop, Fireworks vb. programlarla veya elle bir beyaz kağıda çizilen eskiz ile ana sayfa ve alt sayfa tasarımı kabaca belirlenir. Menülerin nerede yer alacağı, Menülerin içeriklerinin neler olacağı, görsellerin sayfanın neresinde yer alacağı, Banner (Manşet) ve footer alanında nelerin yer alacağı, Logo, slogan vb. nerede yer alacağı vb. Footer, bir doküman veya web sayfasının en alt kısmında belli verilerin yer aldığı kısımdır.

14 Aslında basit ama biz de sizin kafanızı karıştırmak için bir sürü yabancı terimden bahsedelim. 14

15 HTML Nedir? 15 HTML web sayfalarını oluşturmak için kullanılan standart metin işaretleme dilidir. Programlama dili değildir. Tarihçe: CERN'de görevli olan Tim Berners-Lee, CERN araştırmacılarının bilgilerini ve dokümanlarını birbirleriyle paylaşabilmeleri için 1990 yılında HTML işaretleme dilini geliştirmiştir. HTML, bir programlama dili olarak tanımlanamaz. Zira HTML kodlarıyla kendi başına çalışan bir program yazılamaz. Ancak bu dili yorumlayabilen programlar aracılığıyla çalışabilen programlar yazılabilir. Temel gereği yazı, görüntü, video gibi değişik verileri ve bunları içeren sayfaları birbirine basitçe bağlamak, buna ek olarak söz konusu sayfaların web tarayıcısı yazılımları tarafından düzgün olarak görüntülenmesi için gerekli kuralları belirlemektir. HTML kodunu web tarayıcıları okur, yorumlar ve görsel hale dönüştürürler, dolayısıyla aynı HTML kodunun farklı tarayıcılarda farklı sonuç vermesi olasıdır.

16 HTML ile Web Sayfası 16 Html ile web sayfası hazırlamak için bilgisayarınıza herhangi bir program yüklemenize gerek yoktur. Herhangi bir metin editörü (not defteri, word, wordpad gibi) html sayfaları oluşturmak için yeterlidir. Fakat kodları yazarken kolaylık sağlamak ve kod yazım hızını arttırmak için Dreamweaver, Notepad++, Sublime Text gibi programlar tercih edilebilir. Hazırlamış olduğunuz web sayfalarını kaydederken html, htm, xhtml gibi tarayıcıların anlayabileceği bir uzantı ile kaydetmeniz gerekir. Not defterini açarak basit bir web sayfası oluşturmak için aşağıdaki kodları yazabiliriz. <html> <head> <title>hoşgeldiniz</title> </head> <body> <p>html Öğreniyorum</p> </body> </html>

17 HTML Kodları Yazarken Dikkat Edilmesi Gereken Hususlar 17 <html>,<head>,<body> gibi büyüktür (< >) içerisine yazılan kodlara etiket (tag) adı verilir. Açılan her etiket kapatılır. Etiketi kapatmak için / işareti kullanılır. Html etiketlerinde Türkçe karakterler yer almaz. Etiketler büyük veya küçük harfle yazılabilir. Fakat genel kabul görmüş yazım biçimi küçük harftir.

18 Temel HTML Etiketleri ve Anlamları 18 Html: Bu etiket diğer tüm etiketleri sarmalayan html diliyle kodlama yapılacağını belirten, sayfanın başında açılıp sonunda kapatılan bir etikettir. Head: Hazırladığımız sayfa ile ilgili bilgiler ve tanımlamaların yer aldığı bloktur. Bu kısımdaki kodlar web sayfasında görüntülenmezler. Yukarıdaki kodda head etiketinin içerisinde <title> etiketi kullanılmıştır. Title web sayfasının başlığı anlamına gelmektedir. Hazırladığınız sayfayı incelediğinizde web sayfanızın üst sekmesinde Hoşgeldiniz yazısını görebilirsiniz. Body: Bu etiket ziyaretçinin görebildiği, sayfanın tüm içeriğinin yer aldığı bölümdür. Kullanılacak etiketlerin bir çoğu body etiketinin içerisinde yer alır. Yukarıdaki örnekte <p> etiketi bir paragraf oluşturmak için kullanılmıştır ve paragrafın içerisine Html Öğreniyorum mesajı ziyaretçiye gösterilmiştir.

19 HTML Etiketleri 19 1) <h> Başlık 2) <b> Kalınlık 3) <i> İtalik (eğik yazı) 4) <u> Altını Çiz 5) <p> Paragraf 6) <br> Alt Satıra Geç 7) <font> Etiketi Font etiketi metin rengini ayarlama, yazı tipini değiştirme ve boyutunu ayarlamak için kullanılır. Tek bir etiketin bu 3 özelliği değiştirebilmesi aldığı parametreler sayesinde olmaktadır. <font face="times New Roman" color="blue" size="5"> Font etiketiyle yazı biçimlendirildi.</font> 8) <a> Bağlantı (link) 9) <img> Resim Görüntüle <a href="resimler/buyukresim.jpg"> <img src="resimler/kucukresim.jpg"> </img> </a> 10) <table> Tablo 11) <tr> Satır 12) <td> Sütun

20 HTML Etiketleri 20 Tablo Etiketleri border: kenarlık oluşturmak için kullanılır. bordercolor: kenarlıkların rengini değiştirmek için kullanılır. bgcolor: tablonun arka plan rengini değiştirmek için kullanılır. width: Tablonun genişliğini ayarlamak için kullanılır. height: Tablonun yüksekliğini ayarlamak için kullanılır. colspan: Aynı satırdaki hücreleri birleştirmek için kullanılır. rowspan: Aynı sütundaki hücreleri birleştirmek için kullanılır.

21 HTML de Tablo Kullanımına Örnek 21 <!DOCTYPE html> <html> <body> <table style="width:40%" border="1" bordercolor="blue" bgcolor="yellow"> <tr> <th>firstname</th> <th>lastname</th> <th>age</th> </tr> <tr> <td>jill</td> <td>smith</td> <td>50</td> </tr> <tr> <td>eve</td> <td>jackson</td> <td>94</td> </tr> <tr> <td>john</td> <td>doe</td> <td>80</td> </tr> </table> </body> </html> <!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 5px; text-align: left; } </style> </head> <body> <h2>cell that spans two columns:</h2> <table style="width:30%"> <tr> <th>name</th> <th colspan="2">telephone</th> </tr> <tr> <td>bill Gates</td> <td> </td> <td> </td> </tr> </table> </body> </html>

22 CSS Kullanımı 22 Cascading Style Sheets (Basamaklı Stil Şablonları ya da Basamaklı Biçim Sayfaları, bilinen kısa adıyla CSS), HTML'e ek olarak metin ve format biçimlendirme alanında fazladan olanaklar sunan bir Web teknolojisidir. CSS, HTML öğelerine 3 şekilde eklenebilir: Satır içi -HTML öğelerinde style özniteliğini kullanarak Dahili - <head> bölümünde bir <style> öğesi kullanarak Harici - harici bir CSS dosyası kullanarak

23 CSS Kullanımına Örnek Satır İçi & Dahili 23

24 Statik/Dinamik Web Siteleri 24 Statik Web Sitesi Monoton veya az güncellenen sitelerdir. İçerik sık bir şekilde değişikliğe uğramaz. Genellikle uzun süre değişiklik olmayacak olan sitelerdir. Ziyaretçi veya üye katkısı yok denecek kadar azdır. Site tamamen siteyi oluşturan kişi tarafından düzenlenebilir. Statik Web sitesini oluştururken kullanılan kodlamalardan bazıları; HTML, XHTML, DHTML, CSS Dinamik Web Sitesi Dinamik bir Web sitesi, her kullanıcı için ya da her ziyarette özel olarak oluşturulabilir. Dünya üzerindeki her kullanıcı, bir siteye kendi kullanıcı adıyla girdiğinde diğer kullanıcılardan farklı bir içeriğe erişebilir. Bu farklı içerik, Web sitesinin renkleri, teması, müzikleri, sitedeki yetki derecesi vb. şeklinde olabilir. Günümüz internetindeki popüler siteler dinamik sitelerdir. Bu dinamikliği oluşturmak için dünyada kullanılan farklı diller vardır. Dinamik bir Web sitesinde kullanılabilen dillerden bazıları şunlardır: ASP.Net, ASP, PHP, JSP, CFM vb.

25 Web Programlama Nedir? 25 En basit tabiri ile web programlama bir web sitesi oluşturmak için gerekli kaynak kodu yazma işlemine verilen addır. Sitelere işlevsellik ve kullanım kolaylığı sağlayan web programlama ile bugün sadece içerik ve giriş sayfalarından oluşan siteler yerine, görsel ve işlevsel zenginliğe kavuşmuş web sitelerine erişebiliyoruz. İster alışveriş ister kurumsal tanıtım siteleri olsun her bir site ayrı özelliğe sahip hale getirilebiliyor. Örneğin; site üzerinden alış-veriş yapılabilmesi, satılan ürünlerin stoktan otomatik olarak düşürülmesi, kullanıcıların yorum yapabilmesi, üye olabilmesi, site sahibinin istediği zaman değişiklik yapmasına imkan veren paneller, oy ve puan sistemleri internet kullanıcılarının hizmetine web programlama sayesinde sunulabilmektedir.

26 Web Tasarım ile Web Programlama Farkı 26 Genel olarak ayırırsak; Web tasarımcı Dreamweaver, Photoshop fireworks, flash gibi programları, Web Programcı ise asp, php, cold fusion, javascript gibi programlama dillerini bilir. Programcı tasarımın içine hazırlanan görsel ve içeriksel kodlamaları yapar. Programlama aslında biraz kafa karıştırıcı olabilir ve bu nedenle web tasarımla karıştırılmaktadır. Web programlama ile kullanıcıların aktif olarak site üzerindeki hareketleri sağlanırken aynı zamanda firma veya kurum kendi güncellemelerini yapabilme kolaylığına erişirler.

27 İki taraf da birbirini anlamakta zorlanıyor!!! 27

28 Web Programlama Dilleri 28 ASP Microsoft tarafından geliştirilen bir web programlama dilidir. Yine Microsoft tarafından geliştirilen MSSQL veri tabanını kullanmaktadır. Windows sunucuları fiyatlarının yüksek olmasından dolayı bireysel kullanıcılar tarafından pek tercih edilmemektedir. PHP ise linux tabanlı bir web programlama dilidir. Veri tabanı olarak MYSQL veri tabanını kullanmaktadır. Linux sunucularda çalışmaktadır. PHP, ASP'ye göre açık kaynak kodlar içerdiği için daha çok kitleye ulaşmıştır ve fiyatı sayesinde en çok tercih edilen programlama dilidir. MYSQL linux sunucularda çalışan ve gerçekten çok başarılı dünyanın en yaygın veri tabınıdır. PHP Programlama dilleri kullanmaktadır. MySQL sistemli çalışan Linux ile uyumludur. Kullanımı oldukça basit ve hızlıdır. Tüm forum sistemleri ve tüm PHP tabanlı scriptler veri tabanı olarak MySQL kullanır. Hiç bir şekilde doğru kullanıldığı taktirde sorun yaratmaz. MySQL'i daha kolaylaştırmak amacı ile PHPMyAdmin kurulan bir script ile MySQL'i daha kolay kullanımını sağlamaktadır.

29 Web Programlama Dilleri 29 ASP.NET Farklı bir ortamda yazılan kodların IIS ile entegre olan ve.net framework ile bu çalışma ortamının faydası uyumluluk ve dayanıklılıktır. ASP.net'te yazılan kodlar IIS ile çalışmaktadır. IIS bir özelliği Sürüm farkı sorunu yoktur. Net programlamasında 1 kereye mahsus olarak MSIL sayesinde dönüştürülüyor ve sunucu tarafından okunması sağlanıyor. Derlenerek çalışan kodların bir çok artısı var. Hatalarınızı anında görebiliyorsunuz. Derlenen kodlarda hata yoksa kodların zaman kaybı oluşturmadan hizmet ettiğini göreceksiniz.asp.net ile oluşturulan dinamik sayfalarsa, "aspx" uzantısını alıyor. Uzantıların farklı olması aynı sunucuda hem ASP'nin, hem de ASP.NET'in sorunsuzca çalışabilmesini sağlıyor. MSSQL Nedir? Bir Microsoft yapımı bir veri tabanıdır. Genellikle ASP ve ASP.net tarafından kullanılır. Veri tabanlarının oluşturulmasını ve yönetilmesini sağlar. Windows sunucularda bulunur. MSSQL Web programlama dilinin sunucuya gönderdiği bilgileri kişi tarafından girilmesi halinde bunu MSSQL'e yedekler. Dünyada en çok kullanılan veri tabanlarından biridir. Nesne tabanlı programlama türünü düzenler ve kendine yedekler.

30 PHP Örnek 30

31 İçerik Yönetim Sistemi (Content Management System) 31 CMS: Kod bilgisi olmayan kişilerin işlevsel ve dinamik siteler kurarak, kolayca yönetebilmelerini sağlayan Web Yazılımıdır. İçerik yönetim sisteminin öncelikli amacı web sitesi makalelerin oluşturulmasını, kullanıcı yönetimini, fotoğrafların, videoların, bannerların, reklam alanlarının, iletişim, raporlama, analiz ve web sitesi genel ayarlarının yönetilmesini anlık olarak sağlamaktır. Bunun yanı sıra özel bir web tasarımınız var veya oluşturmak istiyorsanız, içerik yönetim sisteminin de tasarıma göre şekillendirilmesi, tasarımınızın her yerine ulaşabilmeniz ve yönetebilmeniz gerekmektedir. Eğer kod diline hakim olunsaydı bile, içerik yönetim sistemleri söz konusu olmadan birçok içerik ve haberlerin yer aldığı siteleri hazırlamak çok zor olabilirdi. Bu zorluk profesyonel yazılımcıların içerik yönetim sistemleri geliştirerek, daha işlevsel bir site yönetimini sağlayacak yazılımların ortaya çıkmasını sağladı.

32 İçerik Yönetim Sistemi Nasıl Çalışır? 32 İçerik yönetim sistemine sadece site yöneticileri ve alt yöneticileri erişebilir. Rol tabanlı yönetime sahip bir alt yapı kullanılır. (İçerik yöneticiler, onaylayanlar gibi.) Site yöneticisi yetkileri kaldırabilir veya sınırlandırabilir. Kullanım istatistiklerine ve iletişim formlarına panelden ulaşılabilir. Ziyaretçiler web sitesine masaüstü, tablet ve mobil cihazlardan ulaşabilir.

33 İçerik yönetim sistemi tercih edilirken dikkat edilmesi gerekenler 33 İçerik yönetim sistemi sonradan eklenebilecek tüm yazılım özelliklerine uyum sağlamalıdır. Güvenlikli ve hızlı çalışmalıdır. Kullanıcı ara yüzünde değişiklikler yapmaya elverişli olmalıdır. Kullanımı kolay olmalıdır. Çoklu dil özelliği olmalıdır. Yedekleme özelliği bulunmalıdır. İstenilen raporlar oluşturulabilmelidir.

34 Neden içerik yönetim sistemi kullanmalıyız? 34 İçerik yönetim sistemlerini kullanmanın en büyük avantajı, kod bilgisine gerek bırakmadan dinamik web sitelerinin yönetilmesini sağlanmasıdır. Menüler, sayfalar ve kategoriler düzenleyerek, sitenizde haber paylaşımında bulunabilmeniz birkaç dakikalık zaman alıyor. İçerik yönetim sistemlerinde sitenizin içeriklerini hazırlamak ve yayınlamak, kendi taslağınıza uygun şekilde kategori, menü ve sayfaları oluşturmak çok kolay bir şekilde gerçekleşebiliyor. Ayrıca açık kaynak kodlu içerik yönetim sisteminde kullanabilirsiniz. Wordpress, Joomla, Drupal en çok kullanılan içerik yönetim sistemleri arasında yer alıyor. Yalnız bu tarz içerik yönetim sistemlerinde her şeyi dinamik olarak yapabilmeniz size sunduğu özelliklere bağlıdır. Bu içerik yönetim sistemlerini kullanmak istemeyenler, kendilerine özgün içerik yönetim sisteminin yazılmasını yazılım firmalarından talep edebilirler. Böylece daha özgün ve ihtiyaçlarınızı karşılayan bir içerik yönetim sistemine sahip olmuş olursunuz.

35 İçerik Yönetim Sistemi ile Web Sitesi Hazırlamanın Kolaylığı 35