BİLİŞİM TEKNOLOJİLERİ

... konulu sunumlar: "BİLİŞİM TEKNOLOJİLERİ"— Sunum transkripti:

1 BİLİŞİM TEKNOLOJİLERİ
MODÜL : WEB TASARIM

2 WEB TASARIMCISI KİMDİR ?
USER INTERFACE-FRONTEND DEVELOPER Grafiksel olarak tasarlanan web sayfasını kod kullanarak oluşturan ve tarayıcıda çalışır hale getiren arayüz programcısıdır. (frontend developer) dır. Kullandıkları Temel teknolojiler HTML5 ve CSS3 tür.

3 WEB PROGRAMCISI KİMDİR ?
Arayüz Programcısının tasarladığı ve kodladığı sitenin ihtiyaçlarına göre veritabanı , içerik yönetim sistemi (CMS), ilişkisel ve mantıksal işlem süreçlerini vb. oluşturan web arka plan (Beckend) programcısıdır. Kullandıkları Temel teknolojiler BootStrap (CSS ve JavaScript Ortak Platformu), JavaScript (Ajax, Jquery, AngularJS vb.) , PHP, ASP, MSSQL, MySQL sayılabilir.

4 BİZ NE ÖĞRENECEĞİZ ? Web Tasarımı yapan Arayüz programcısıının bilmesi gereken en temel diller olan HTML5 ve CSS3

5 Web Tasarımı yapmak için geliştirilen bir etiketleme dilidir.
HTML nedir ? Web Tasarımı yapmak için geliştirilen bir etiketleme dilidir.

6 HTML nedir ? HTML (Hyper Text Markup Language- Hiper Metin İşaretleme Dili ) 1980 yılında CERN laboratuarında görevli Tim Berners Lee tarafından geliştirilmiştir yılında World Wide Web (WWW) sistemini de kuran Lee internetin temelini oluşturmuştur. Kendisi şu an W3C (World Wide Web Consortium), yani Dünya Ağ Birliği, İnternet siteleri konusunda standartları belirlemek için yılında kurulmuş bir organizasyonda görev yapmaktadır.

7 HTML 5(2008) HTML5 ? HTML 1 (1989) HTML 2 (1995) HTML 3 (1997)
XHTML 1 (2000) XHTML 1.1 (2001) HTML 5(2008)

8 HTML5 ? HTML5’i Günümüzdeki tarayıcıların %99 u tüm özellikleri ile desteklemektedir. Bu nedenle HTML5 kullanmak mantıklı bir seçim olacaktır.

9 HTML5 ? Yeni HTML komutları eklenmiştir. Yeni CSS komutları eklenmiştir. Hata ayıklama kolaylaşmıştır. Ses ve video dosyaları başka eklentilere gerek kalmadan çalıştırılabilmektedir. Semantik (Anlamlı) bir dildir.

10 Not Defteri NotePad++ Dreamweaver Visual Studio NetBeans PHP Designer
HTML Editörleri Not Defteri NotePad++ Dreamweaver Visual Studio NetBeans PHP Designer

11 CSS nedir ? CSS, uzun yazılışıyla Cascading Style Sheets, veya Türkçesiyle Stil şablonları ise bize sayfalarımız için global şablonlar hazırlama olanağı verdiği gibi, tek bir harfin stilini; yani renk, font, büyüklük gibi özelliklerini değiştirmek için kullandığımız biçimlendirme dilidir.

12 Not Defteri NotePad++ Dreamweaver Visual Studio NetBeans PHP Designer
CSS Editörleri ? Not Defteri NotePad++ Dreamweaver Visual Studio NetBeans PHP Designer

13 Semantik Web Nedir ? Web sayfalarının içeriklerinin anlamsal olarak arama motorlarına uygun hale gelmesi demektir. Semantik Web sayesinde arama motorları içeriğe daha hızlı ulaşıp bu içerikleri ön plana çıkarır.

14 Semantik Web Nedir ? Web sayfasındaki içerikleri uygun anlamlı ilgili HTML kodlarının içine koyarak yani semantik web tasarımı yaparsak arama motorları bu içerikleri daha üst sıralarda listeler. Daha üst sıralar daha fazla ziyaretçi demektir.

15 WEB TASARIM TEKNİKLERİ

16 WEB SAYFASININ ÖĞELERİ
Text Grafik Video, Animasyon Ses HTML, JavaScript, DHTML Kodları vb.

17 Web sayfası hazırlanırken dikkat edilecekler !
Hiyerarşik Düzen Web Sayfası Öğelerinin Kullanımı Ekran Boyutu Sayfanın Yazdırılabilirliği Döküman Uzunluğu ve Ekran Tarayıcı (Browser) Uyumluluğu

18 Hiyerarşik Düzen Şematik görüntülerin hedefleri ise ana başlıklar altında kısa, öz, anlaşılabilir bilgiler vererek insanların aradıklarını kolayca bulmalarını ve belleklerinde belli bir süre de olsa yer edinebilmeyi sağlamaktır.

19 Hiyerarşik Düzen Bu nedenle web sayfaları; Uygun bölümlere ayrılmalı
Önem ve genelliğe bağlı olarak bir hiyerarşi içinde olmalı, Hiyerarşi bölümler arasındaki ilişkiyi yapılandırmada kullanılmalıdır.

20 Hiyerarşik Düzen Web' de hiyerarşik organizasyonlar gereklidir. Çünkü çoğu ana sayfa ve bağlantı şemaları hiyerarşik bir düzene sahiptirler. Yandaki sayfada da görüldüğü gibi ana sayfayı alt sayfalar ve içeriksel sayfalar izler.

21 Hiyerarşik Düzen

22 Hiyerarşik Düzen

23 Hiyerarşik Düzen İyi dengelenmiş hiyerarşik bir ağaç yapısı oluşturmada amaç, okuyucunun sayfa yapısını kolay idrak edebilmesini ve sayfalar arasında kaybolmamasını sağlamaktır. Web sayfalarının düzenli ve tutarlı bir sistemle hazırlanmasındaki amaç, hedef kitlenin kısa sürede sayfa düzenine adapte olarak aradıkları bilgiye kolayca erişmelerini sağlamaktır.

24 Örnek Bir Web Sayfası Sayfanın hangi siteye ait olduğu, belgelerin içeriği, konu başlıkları gibi temel bilgiler burada sabit bir düzen içinde verilerek aynı zamanda "ileri" "geri" düğmeleri eklenerek bir önceki ve bir sonraki sayfaya geçiş kolaylığı sağlanmıştır. Sayfanın sol yanında ayrılan bölüm ana sayfaya ve konunun alt başlıklarına bağlantı için kullanılmıştır. Okuyuculara sunulan bilgi bu sınırlandırma içinde, düzgün ve orantılı başlıklar altında metin ve grafik olarak gösterilmiştir. Belgelerin bütün sayfaları bu standart formata uygun halde hazırlanmıştır. Böylece, kullanıcılar ilk sayfayı inceledikten sonra diğer sayfalarda aradıkları bilgilerin nerede olduğunu tahmin edebileceklerdir.

25 Web Sayfası Öğelerinin Kullanımı
Resim ve Grafik Kullanımı; ,jpg, gif, .png uzantıya sahip resim dosya formatları kullanılmalı. Kullanıcı bilgisayarlarının standart çözünürlük ve renk derinliği dikkate alınmalı. Büyük boyutlu resim kullanmak gerekiyorsa o resmin küçük boyutlu resmine link verilerek ayrı bir sayfada büyük resmin görüntülenmesi sağlanabilir. Sayfa içeriğine uygun resim ve grafikler gerekiyorsa kullanılmalı. Telif hakları dikkate alınmalı.

26 Web Sayfası Öğelerinin Kullanımı
Text (Yazı) Kullanımı; Bir çok web sitesi, insanların araştırabileceği küçük bölümlerde referans bilgiler içerirler. Kullanıcılar (okuyucular) uzun ve bitişik belgeleri nadiren bilgisayar ekranından okurlar. . Bu yüzden uzun yazı içeren sayfalar ya parçalanmalı yada isteyen kullanıcılar için yazının devamına link verilmelidir. Yazılar okunaklı bir yazıtipi ve punto kullanılarak oluşturulmalı ve gerektiğinde vurgu yapmak için renk kullanılmalıdır. CSS kullanımı ile farklı tarayıcı ve çözünürlüklerde yazının düzgün çıkması sağlanmalıdır. Paragraf,sütun veya tablo kullanılarak daha okunaklı ve düzenli metinler oluşturulabilir.

27 Dokuman Uzunluğu ve Ekran
Çok az web kullanıcıları, ekranda uzun belgeleri okuyarak zaman kaybederler. Çoğu kullanıcılar uzun belgeleri sabit disklerine kaydederler veya kağıttan okumak amacıyla yazıcıya bastırırlar. Araştırmalara göre uzun dökümanlarda, tarayıcı ekranını aşağıya doğru kaydırmak zorunda kalmak problem yaratmaktadır. Kullanıcılar sayfada aşağı doğru indiklerinde sayfanın üst kısmında verilmiş olan ana başlıkları, diğer sayfalara olan bağlantıları ve konu başlıklarını kaybetmektedir. Farklı Ekran Çözünürlükleri de dikkate alınarak sayfaların dizaynı önemlidir. Genellikle 1024x768 ekran çözünürlüğü çok kullanılmaktadır.

28 Ekran Boyutu Çözünürlük
Genellikle kullanıcılar 17” monitör ve 1024x768 piksel çözünürlük kullanılmaktadır. Ancak sayfa tasarımında sayfada kullanılacak grafiklerin tabloların farklı çözünürlüklerde nasıl görünüceği önceden test edilmelidir. Özellikle yüksek renk derinliğine sahip grafik ve resimlerin düşük çözünürlüklerde renk kayıplarının oluşması söz konusudur. Text ve grafiklerin tablo içersine alınması ve CSS kullanımı farklı çözünürlüklerdeki sayfa görünüm hatalarını en aza indirmektedir.

29 Sayfanın Yazdırılabilirliği
En küçük ekranlarda bile görülebilen grafikler bazen yazdırılma sırasında standard A-4 sayfasını aşmaktadırlar. Özellikle uzun metinler halinde hazırlanan web sayfalarının yazdırılabilirliliğine çok dikkat edilmelidir. Birçok okuyucu ekrandan okumak yerine bu sayfaları yazdırmayı tercih eder ve sayfalar fazla geniş hazırlanmış ise artan kelimeler yazdırılamayacaktır. Doküman formatında verilebilir.

30 Tarayıcı (Browser) Uyumluluğu
Dünya çapında en çok kullanılan browser’lar Microsoft Internet Explorer, Chrome, Opera, Yandex, Mozilla dır. Hazırlanan sayfalar bu tarayıcılarda test edilmelidir. Genellikle bu iki tarayıcı arasında JavaScript ve Tablo kullanımlarında uyumsuzluklar vardır.

31 İnternette Kullanılan Bazı Terimler

32 İnternette Kullanılan Bazı Terimler
ADSL (Asymmetric Digital Subscriber Line) : Asimetrik Sayısal Abone Hattıdır. Var olan telefon hatları üzerinden yüksek bant genişliğinde sayısal verilerin iletilmesini sağlayan teknolojidir. Çevirmeli telefon servislerinden farklı olarak sürekli bir bağlantı sağlar. ADSL, aynı hat üzerinden analog (ses) bilgilerin iletilmesine de izin verir. Bandwidth (Bant Genişliği): Bant genişliğidir. Bir ağ kablosunun taşıyabileceği maksimum veri miktarı, bps (bit per second) birimi ile ölçülür. Bit rate : Bit hızıdır. Sayısal iletişimde, bir iletişim ağının belirli bir noktasından saniyede geçen bit sayısını gösterir. Veri transfer hızı da denir.

33 İnternette Kullanılan Bazı Terimler
Client/server : İstemci/sunucu. İki bilgisayar programı arasındaki ilişkiyi tanımlıyor. Programlardan biri (istemci), talebini yerine getirecek olan programdan (sunucu), bir servis talebinde bulunur. Bir ağ üzerinde istemci/sunucu modeli, farklı yerlere dağıtılmış programlar arasında COM port : İletişim yuvası. Bilgisayarlarda dışardan modem gibi cihazların takıld Download : İndirme. Bir dosyanın bir bilgisayardan diğerine iletilmesi. İnternette bir kullanıcının bir Web sitesinde bulunan bir dosyayı kendi bilgisayarına almasıdır. ığı yuvadır. uygun bir iletişim yolu sağlar.

34 İnternette Kullanılan Bazı Terimler
e-posta. İletişim kanalları kullanılarak bilgisayar üzerinden mesaj alışverişi. E-posta mesajları genel olarak metin formatındadır. Ancak grafik veya başka veri tiplerini mesajınıza iliştirip gönderebilirsiniz. Ethernet : En çok kullanılan yerel alan ağı teknolojisidir. Firewall : Özel ağ kaynaklarını diğer ağ kullanıcılarından korumak için, bir geçit sunucusuna yerleştirilen uygulama. FTP (File Transfer Protocol) : İnternet üzerinde dosya alışverişini basitleştiren standart bir İnternet protokolüdür.

35 İnternette Kullanılan Bazı Terimler
HTML (HyperText Markup Language) : Web sayfası yaparken kullanılan İnternet yazımlım dili tipidir. HTTP (HyperText Transfer Protocol) : İnternet üzerinde dosya (metin, grafik görüntüler, ses, video veya diğer mültimedya dosyaları) alışverişi için kurallar dizisi. TCP/IP protokol setine göre HTTP bir uygulama protokolüdür. IP (Internet Protocol): İnternet'e bağlanan bilgisayarlar için bir standart. İnternet erişimine sahip olan bütün bilgisayarlara, noktalarla birbirinden ayrılan dört rakam grubundan oluşmuş tek bir adres verilir. IP adress: TCP/IP protokolü kullanan bilgisayarlara verilen 32 bit adres. MAC adress: Bir ağa bağlı her bir port veya cihaza verilen adres. Ağdaki diğer cihazlar, yönlendirme tablolarını ve veri yapılarını yenilemek için bu adresleri kullanır.

36 İnternette Kullanılan Bazı Terimler
URL (Universal Resource Locator): İnternet üzerinden ulaşılabilecek bir dosyanın adresi. Bu adres bir Web sayfasını, bir görüntü dosyasını vb. ve HTTP tarafından desteklenen herhangi bir dosyayı gösterebilir. Wireless: Kablosuz. Bir işareti kablo yerine atmosfer ortamını kullanarak taşıyan elektromanyetik dalgalarla yapılan iletişimdir. World Wide Web (WWW): Bir browser gibi istemci uygulamaları kullanılarak bağlanılan ve çeşitli servisler sunan, internet sunucularının oluşturduğu büyük ağdır.

37 LAN(Local Area Network)
Bir bina gibi sınırlı bir alanda, bilgisayarlar arasında iletişim sağlayan ağ şebekesi. Birden çok sayıda kullanıcıya yazıcı, tarayıcı gibi aygıtlardan ortak yararlanma ve bilgisayarlar arası dosya paylaşımı olanağı verir. Yerel ağ bağlantıları çeşitli yollarla oluşturulabilir. Bu, optik ya da bakır kablolar kullanılarak yapılabileceği gibi, kablosuz bağlantı yoluyla da olabilir.

38 WAN(Wide Area Network)
Fiziksel lokasyonların birbirine bağlanmasında Wide Area Network (Wan) kullanılır. Bu lokasyonlar bir merkez ofis ile şube olabilir

39 TCP/IP? Bilgisayar ağları kullanılarak bilgisayarların birbirileriyle haberleşmeye  başladıkları ilk yıllarda iki bilgisayarın birbiriyle haberleşebilmeleri için aynı marka/model cihazları kullanmaları gerekiyordu. Bunun üzerine farklı üreticiler tarafından üretilen cihazların birbiriyle sorunsuz ve belirli bir düzen içinde haberleşebilmesi için çeşitli standartlar geliştirilmiştir.

40 TCP/IP? Bilgi ağı üzerindeki veri iletimi ve paylaşımı bazı kurallara göre yapılmaktadır. Bu kurallar “İnternet protokolleri” ya da TCP/IP protokoller ailesi olarak adlandırılmaktadır. TCP – Transmission Control Protocol IP – Internet Protocol TCP/IP bilgisayarlar ile veri iletme ve alma birimleri arasında organizasyonu sağlayan, böylece bir yerden diğerine veri iletişimini mümkün kılan bir çok veri iletişim protokolüne verilen genel bir addır.

41 TCP/IP Bu protokollere örnek olarak; dosya alma/gönderme protokolü (FTP – File Transfer Protocol), Elektronik posta iletişim protokolü (SMTP – Simple Mail Transfer Protocol), Uzaktan erişim (TELNET protokolü), HTTP – Hyper Text Transfer Protocol) verilebilir. TCP/IP protokolü aynı zamanda çok farkı tipte ve işletim sistemi altında çalışan bilgisayarların iletişiminde de kullanılır.

42 Internet adresi, DNS ve IP numarası
İnternet’e bağlı her bilgisayarın kendine özgü bir adresi vardır. Her bir İnternet adresine bir IP numarası karşılık gelir. Bir IP adresi dört tane 0 ile 255 arasında değişen sayıdan oluşur. Bu adres toplam 32 bit uzunluğunda bir sayıdır. Fakat bu sayı 8 bitlik 4 ayrı ondalık sayı şeklinde kullanılır ( gibi). IP yazılımının doğru çalışabilmesi için İnternet’e bağlı bilgisayarların IP adreslerinin başka bilgisayarlar tarafından kullanılmaması gerekir.

43 IP adresi Aynı yerel ağda birden fazla bilgisayara aynı IP adresi verilmesi durumunda, aynı IP adresli ilk bilgisayar açıldıktan sonra diğerleri IP çakışması olduğunu bildirerek ağa bağlanamaz. Bir yerel ağa verilen IP adreslerinin başka bir ağ tarafından kullanılmaması gerekir. IP adreslerinin dağıtımı Internet Bilgi Merkezi Kayıt Servisi (InterNetwork Information Center (InterNIC) - Registration Service) tarafından yapılmaktadır. Türkiye'de IP adreslerinin dağıtımı O.D.T.Ü. tarafından yapılmaktadır.

44 İnternette Kullanılan Bazı Terimler
Çerez (cookie) : ziyaret edilen internet sayfası bilgilerini bilgisayarımıza kaydeden ufak kayıt dosyalarıdır. Çerezler ziyaret ettiğiniz sayfanın daha sonraki sayfaya girişlerinizde sizi tanımasını sağlar. Önbellek (cache): ziyaret ettiğiniz web sayfalarının bilgisayarınızda tutulmasını sağlar.

45 İnternette Kullanılan Bazı Terimler
Com (Commercial, Ticari) : Ticari siteler için kullanılır. Net (Network) : Genel kapsamlı kullanılmaktadır. Gov (Goverment, Resmi) : Devlete kurumlar için kullanılır. Org (Organization) : Vakıf ve dernekler için uygundur. k12 : MEB’e bağlı okullar için kullanılır. Edu (Education, Eğitim) : Üniversite ve diğer eğitim kurumları için kullanılır. Tv (Television, Televizyon) : Televizyon kanalları tarafından kullanılır. Mil (Military, Askeri) : Askeri kurumlar tarafından kullanılır. TR uzantılı alan adları, Ortadoğu Teknik Üniv. tarafından adresi üzerinden sağlanmaktadır.

46 DNS DNS,Domain Name System’in kısaltılmış şeklidir. Türkçe karşılığı ise Alan İsimlendirme Sistemi olarak bilinir.  DNS, 256 karaktere kadar büyüyebilen host isimlerini IP’ye çevirmek için kullanılan bir sistemdir. Host ismi,tümüyle tanımlanmış isim (full qualified name) olarak da bilinir ve hem bilgisayarın ismini hem de bilgisayarın bulunduğu Internet domainini gösterir.

47 TELNET Protokolü TELNET uzak sunucu sistemde komut ve program dosyası çalıştırmaya yarayan bir uç birimdir. Komut tabanlı Telnet istemcisi veya Windows tabanlı yazılımlar yardımıyla kullanılır. Telnet ile bağlanılan makinada FTP, SMTP, HTTP gibi protokolleri kullanmak da mümkündür. Bu nedenle Telnet diğer TCP protokollerinden farklı bir özelliğe sahiptir.

48 ping Komutu

49 netstat Komutu

50 ipconfig komutu IP adress : Bağlı bulunan cihazın internal IP adresi
Default Gateway : Erişimi sağlayan cihazın (modem vb.) internal IP adresi

51 MAC Adresi Nedir? Ethernet, herhangi bir bilgisayar ağında, bir cihazın ağ donanımını tanımaya yarar. MAC kelimesi Ortam Erişim Yönetimi anlamına gelir ve kısaltma terimini de İngilizce olarak yazılan anlamının yani Media Access Control baş harflerinden almıştır..

52 MAC Adresi MAC adresleri 6 byte uzunluğundadır ve her donanımın ayrı bir MAC adresi vardır. 256 ^ 6 = farklı adres tanımlanması mümkündür. Bu nedenle iki donanımın adreslerinin birbirleriyle aynı olması neredeyse imkansızdır. MAC adresleri 16’lık tabanla yazılır ve : veya - işareti ile ayrılarak gösterilirler. Örnek MAC adresi: AB

53 BİLİŞİM TEKNOLOJİLERİ
MODÜL : WEB TASARIM