WEB TASARIMININ TEMELLERİ

... konulu sunumlar: "WEB TASARIMININ TEMELLERİ"— Sunum transkripti:

1 WEB TASARIMININ TEMELLERİ
Temel Kavramlar

2 İçerik İnternet nedir? WEB nedir? TCP/IP nedir? İnternet adresleri
WWW Nasıl Çalışır HTML WEB Sayfası Hazırlamak WEB Tasarımını Destekleyici Teknolojiler

3 İnternet nedir? İnternet, bilgisayar ağlarını kapsayan uluslar arası bir ağdır. Farklı büyüklükteki ve tipteki birbirinden bağımsız binlerce bilgisayar ağından oluşur.

4 İnternet nedir? Bu ağların her birinde binlerce bilgisayar bulunmaktadır. Diğer bir ifade ile, internet kullanıcılarının sayısı milyonlar ile ifade edilmektedir.

5 WEB nedir? WWW, Web, ya da W3 (World Wide Web), yazı, resim, ses, film, animasyon gibi pek çok farklı yapıdaki verilere kompakt ve etkileşimli bir şekilde ulaşmamızı sağlayan bir çoklu hiper ortam sistemidir.

6 WEB nedir? Hiper ortam, bir dökümandan başka bir dökümanın çağırılmasına (navigate) olanak sağlar. Bu ortamdaki her veri (object), başka bir veriyi çağırabilir (link).

7 TCP/IP nedir? İnternet ağının oluşabilmesi için, bilgisayarlar arasında bağlantılar ve iletişim konusunda ortak bir dil olmalıdır. Bu standart dil ve iletim protokolü TCP/IP (Transmission Control Protocol/ Internet Protocol) İletim Kontrol Protokolü/ Internet Protokolü olarak adlandırılmıştır.

8 İnternet adresleri İnternet üzerindeki her bilgisayara nokta işareti ile ayrılan adresler verilmektedir. Bu adresler IP adresi olarak numaralandırılmıştır. Örnek:

9 İnternet adresleri Bu sayısal değerleri akılda tutmanın zor olduğu düşünülere, aynı adrese karşılık gelen Alan İsimlendirme (Domain Name System -DNS) adresleri oluşturulmuştur. Örnek:

10 Elektronik Mektup Elektronik mektup ( ), bireylerin internet ile kişisel bağlantısını sağlamaktadır. İnternet üzerinden herhangi bir kullanıcıya elektronik mektup göndermek için kişinin adresi olması gereklidir. Örnek:

11 WWW Nasıl Çalışır? Web’deki bilgiler “web sayfası” denilen dosyalarda saklanır. Web sayfaları “web sunucuları” denilen makinelerde bulunur. Sayfaları okumak isteyen “istemci” makineler, “Internet gezgini” denilen programları kullanarak bu sayfaları okuyabilirler.

12 WWW Nasıl Çalışır? Internet'e bağlanan tüm bilgisayarlar birbiriyle TCP/IP protokolünü kullanarak haberleşirler. WEB sunucularından WEB sayfalarını transfer etmek isteyen istemcilerde kullanılan Internet gezginleri “HTTP iletişim protokolü”nü kullanarak sayfaları transfer ederler.

13 Internet Gezgini Nedir?
İstemci makinelerin, web sayfalarını okuması için kullandıkları programdır. Internet Explorer, Firefox, Opera, Chrome, Safari en çok kullanılanlarıdır. Browser’lar “web server”da bulunan sayfaları alırlar ve gösterirler. Yani browser’lar, HTML TAG’larıyla biçimlenmiş metinleri görüntüler.

14 Browser Nasıl Çalışır? İlgili web sayfasının adresi yazıldıktan sonra, browser ilgili web server’i bulur ve sayfayı ister. Server ilgili sayfayı “tag” denilen komutlar topluluğu olarak istemci makineye gönderir. Client makinedeki browser bu sayfayı alır, gelen tagları (komutları) yorumlar ve anlaşılır bir şekilde gösterir.

15 WEB Standartlarını Kim Düzenler?
WEB Standartlarını Microsoft veya Google belirlemez. Web standartları “W3C” denilen bir kurum tarafından saptanır. W3C “World Wide Web Consortium”un kısaltılmışıdır.

16 WEB Standartlarını Kim Düzenler?
HTML, CSS ve XML gibi standartlar bu kurum tarafından belirlenmiştir. En son HTML standardı XHTML 1.1’dir.

17 Neden web? Herşeyden önce Web, açık bir sistem. Platform, bilgisayar, işletim sistemi vb bağımlı değil. Web üzerinden pek çok bilgi kaynağına kolayca erişilebilir. Web uygulamaları geliştirmek ve bunları kullanıma sunmak çok kolay.

18 Neden web? Web ortamları artık son derece dinamik.
Aranılan bilgilere, birtakım tarama mekanizmaları (Search Engines) sayesinde kolayca ulaşılabilir.

19 Neden HTML Öğrenmeliyim?
Editörlerden WYSIWYG özelliğine sahip olanlar, HTML dilini bilmeden kodları düzenleme ve web sitesi yapma imkanı vermektedir. Bu tip editörler sayfada yapılan her adımı, otomatikman HTML koduna çevirir. HTML bilmeden sadece bu tür programları kullanmayı düşünüyorsanız, muhtemelen programın verdiği en küçük bir hatada eliniz kolunuz bağlı kalacaktır. HTML öğrenilmesi ve kullanılması son derece kolay bir dildir. Internet programları HTML içine gömülerek kullanıldıkları için mutlaka HTML okumayı bilmeyi gerektirirler.

20 Nereden başlanır? Internet programcılığının birleştirici unsuru HTML’dir. HTML; tek başına bir programlama dili olmamakla birlikte, sayfalarımızın web ortamında görüntülenmesini sağlayan (HTTP) protokole bağlı çalışır. Çünkü programlarımızın çıktıları, HTML ile web sayfalarına dönüştürülerek browserlar’da görüntülenir. Sadece HTML bilgisi ile işlevleri sınırlı web siteleri hazırlamak mümkün olsa da Internet Programcılığına başlangıç olarak mutlaka HTML’i öğrenmek gerekir.

21 HTML nedir? HTML, Hyper Text Mark-up Language'ın kısaltılmışıdır.
Türkçe karşılığı Hiper Metin İşaretleme Dili'dir HTML browserlar tarafından tanınıp yorumlanabilen metin tabanlı bir dildir ve metnin browser tarafından yorumlanması sonucu da web sayfaları elde edilir. Yazdığınız kodların browser tarafından alınıp yorumlanabilmesi için, dosyalarınızın uzantısının ".htm" veya ".html" olması gerekir.

22 HTML HTML (Hyper Text Markup Language) web sayfalarının hazırlanmasında kullanılan dildir. Hypertext, “bir şeylere bağ kuran kelimelere sahip sayfalar” anlamına gelir.

23 HTML Artık resimler ve multimedya dosyaları da (animasyon, video) bağ olarak davranabiliyor.

24 WEB sayfası hazırlamak
Öncelikle bir HTML editörü yani web sayfalarını hazırlayacağınız bir program gerekir. HTML editörü ile site içinde yer almasını istediğiniz resimleri, yazıları ve bağlantıları istediğiniz biçimde tasarlayarak bir araya getirebilirsiniz

25 Web grafiklerinin hazırlanması
Zor olan işlem, HTML bilmek ve sayfaların içine içeriğin yerleştirilmesi değil, bu içeriğin hazırlanması, yani tasarım aşamasıdır. Sayfalarda yer alan grafikler genellikle metinlerden daha da zor hazırlanırlar. Çünkü sayfada yer alacak renkler ve grafik tasarımları sitenin genel çizgisini belirleyeceği için, özenle ve uyumlu bir şekilde hazırlanmalıdır. Grafik tasarım programları (Corel Draw, Photoshop, Paint Shop Pro, Flash…) ile hazırlanacak site grafiklerinde görselliğin yanında dikkat edilecek bir başka unsur da grafik dosyalarının boyutlarının küçük olmasıdır. Çünkü ne kadar fazla grafik kullanılırsa, site o kadar yavaş açılacaktır ve bir site ne kadar görsel olursa olsun, eğer yavaş açılıyorsa pek de cazip olmayacaktır. Bu tür programlar ile arka fonlar, butonlar, başlıklar ve bannerlar gibi sabit grafikleri oluşturabilirsiniz.

26 Web alanı ve adresi almak
Grafikleri ve metinleri hazır hale getirdikten sonra bunları bir HTML editörü ile web sayfası haline getirebiliriz. Hazırladığımız web sayfalarını kullanıcılara ulaştırabilmeniz için bunları yerleştireceğiniz Internet üzerinde bir disk alanına yani web alanına ihtiyacınız olacaktır. Web alanına Internet erişimini, direkt web sitemizin alanını aldığımızda bize verilen adresten ya da daha kolay hatırlanabilir ve kalıcı bir yönlendirme (domain) adresi alarak bu adresi web alanımıza yönlendirerek sağlayabiliriz.

27 Web alanı seçimi ve dosya aktarımı
Web alanı konusunda en iyi çözüm yine Internet üzerinde (bedava/ücretli) sabitdisk alanı (host) sağlayan bir sunucu bulup sayfalarınızı oraya yerleştirmektir. Web alanı kapasitesi ihtiyaçlara göre belirlenmelidir. Örneğin; sunucunun kullanılan veri tabanını ve programlama dilini desteklemesi gerekir. Son olarak, eğer alacağınız alanın FTP desteği varsa, sayfaları FTP programları ile sunucu üzerindeki alana gönderebilirsiniz. FTP kullanamıyorsanız ya da FTP desteği yok ise web üzerinden dosya transferi yapabilmelisiniz.

28 Web Tasarımını Destekleyici Teknolojiler
Sunucu Taraflı Teknolojiler: PHP, ASP Diğer araçlar: JAVA SCRIPT, JAVA APPLET, CSS, FLASH…

29

30 İstemci Taraflı Teknolojiler
Web sayfalarına görsel ve işlevsel zenginlik katmak için geliştirilmiş küçük programcıklardan oluşan scriptler ve HTML’i destekleyen ve tasarımı zenginleştiren teknolojilerdir. Örneğin: DHTML, XML, CSS, JavaScript, Flash uygulamaları vb.

31 CSS nedir? CSS (Cascading Style Sheets), Bir HTML dökümanındaki HTML takılarının sitillerini belirleyen tekniktir. CSS, HTML takılarına, HTML ile yapılamayacak fakat işinizi kolaylaştıracak bir çok özellik katabilir. Örneğin; hemen hemen tüm web sayfalarında gördüğünüz değişik link sitilleri, CSS kullanılarak yapılmıştır. CSS ile sayfalarınızı daha hızlı hale getirebilir ve dosyanın yükünü hafifletebilirsiniz. Sayfalarınız için hazırlayacağınız bir CSS dosyasını kullanarak tüm sayfalarınıza aynı özellikleri verebilir, dolayısıyla hız ve tutarlılık sağlamış olursunuz.

32 Flash Flash, Macromedia tarafından geliştirilmiş Internet'te etkileşimli vektörel grafik ve animasyon hazırlanmasında kullanılan bir standarttır. Flash içerisinde bulunan bütün görüntü, ses, text elemanları flash'a özgü bazı sıkıştırma teknikleri sayesinde çok küçük boyutlara sıkıştırılabilir. Bu sıkıştırma oranları program içerisinden kalitelerini değiştirmek suretiyle ayarlanabilir. Örneğin; 1 birim tutan bir ses/görüntü dosyası 0.1 ile 0.9 arasında boyutlarda son kullanıcıya ulaştırılabilir.

33 Sunucu Taraflı Teknolojiler
Genel olarak Common Gateway Interface adı da verilen bu teknolojilerin temel avanjatları: Internet Explorer /Opera gibi web tarayıcılarından bağımsız olmaları (platform bağımsızlığı), Kullandığınız teknolojilerin, scriptlerin sunucu tarafında saklı kalması, Kaynakların yönetimi, kontrolü ve uzaktan sistem yönetimi olanağı sağlamaları, Şirketler arası bilgi paylaşımı için ideal bir ortam oluşturmalarıdır. Günümüzde yaygın olarak kullanılan başlıca sunucu taraflı teknolojiler: PHP ve ASP’dir.