Bu kurs ne değildir? Neyi amaç edinmiştir? Bilgisayar Mühendisi? Bilgisayar Programcısı? Web Tasarımcısı? Web Programcısı? Neler öğreneceğiz? Kurs sonunda.

... konulu sunumlar: "Bu kurs ne değildir? Neyi amaç edinmiştir? Bilgisayar Mühendisi? Bilgisayar Programcısı? Web Tasarımcısı? Web Programcısı? Neler öğreneceğiz? Kurs sonunda."— Sunum transkripti:

1 Bu kurs ne değildir? Neyi amaç edinmiştir? Bilgisayar Mühendisi? Bilgisayar Programcısı? Web Tasarımcısı? Web Programcısı? Neler öğreneceğiz? Kurs sonunda neler yapılabileceğiz? Örnek siteler Web Teknolojileri ve Programla

2 E-ticaret siteleri CD-DVD Satış ve Paylaşım Sitesi Grafik ve Web Tasarım Çalışmaları Satış Sistemi Eğitim içerikli siteler Öğrenci Bilgi Sistemi KPDS Sınav ve Çalışma Sistemi Turizm içerikli siteler Turist Rehber Portallar Araba Portalı Kitap Portalı Örnek Projeler

3 CD-DVD Satış ve Paylaşım Sitesi

4 Grafik ve Web Tasarım Çalışmaları Satış Sistemi

5 Öğrenci Bilgi Sistemi

6 TURİZM REHBERİ

7 Emlak Portalı

8 Montaj & Servis Takip Sistemi

9 Otel Sistemi

10 Web Teknolojileri ve Programla Bölüm I: HTML, DHTML, XML, JavaScript, CSS Bölüm II: PHP ve MySql Bölüm III: ASP.Net ve/veya C#

11 Editörler Üç temel editör kullanılması planmakta: Notepad++ Adobe Dreamweaver CS4 Microsoft Express Edition (2008- 2010) Microsoft Visual C# Express Edition Microsoft Visual Web Developer Express

12 Editörler Notepad++ Notepad++, notepad yazılımına alternatif olan, çok gelişmiş bir metin editörüdür. Onlarca programlama dilini tanır ve renklendirme desteği verir. Özellikler:  Dil tanıma ve renklendirme  WYSIWYG editörü  Kullanıcı tanımlamalı dil renklendirme  Otomatik tag tamamlama  Çoklu döküman açma ve görüntüleme  Arama&Değiştirme desteği  Sürükle&Bırak desteği Desteklediği Diller: C, C++, Java, C#, XML, HTML, PHP, CSS, makefile, ASCII art (.nfo), doxygen, ini file, batch file, Javascript, ASP, VB/VBS, SQL, Objective-C, RC resource file, Pascal, Perl, Python, Lua, TeX, TCL, Assembler Türkçe 3.18 MB Freeware/Ücretsiz

13 Notepad++

14 Editörler Adobe Dreamweaver CS4 Adobe® Dreamweaver® CS4 yazılımı, tasarımcı ve geliştiricilere standartları temel alan web sitelerini güvenle oluşturma gücü verir. Özellikler:  Sitenizi görsel olarak tasarlayın- Programlama tabanlı sayfalar  Tarayıcılar arasında uyumluluğu sağlayın  FLV video entegre edin ADOBE http://www.adobe.com/products/dreamweaver/ İngilizce (dil desteği) Yaklaşık 350 MB Shareware/Deneme

15 Editörler Adobe Dreamweaver CS4

16 Editörler Microsoft Express Edition Visual Studio Express Edition ücretsiz olarak kullanıma sunuldu. Express Edition genel bilgi almak ve küçük eğlenceli işler yapmak için kullanabilir, standart versiyonundaki araçlar Express Edition da yeralmamaktadır. Özellikler:  Visual C# 2008 Express Edition  Visual Web Developer 2008 Express Edition Microsoft http://www.microsoft.com/express/Downloads/ İngilizce Espress edition- Ücretsiz

17 Microsoft Express Edition- Web

18 Microsoft Visual C# Express Edition Console- Applications

19 Microsoft Visual Web Developer Express

20 Kurs Nasıl Olacak? Örneklerle anlatılacak Uygulamalar yapılacak Video ve sesli anlatımlar hazırlanacak Örnek 1: http://idea.metu.edu.tr/file.php/10/ornek/htmlornek /htmlornek.html http://idea.metu.edu.tr/file.php/10/ornek/htmlornek /htmlornek.html Örnek 2: http://idea.metu.edu.tr/file.php/10/ornek/ornekphp/ ornekphp.html http://idea.metu.edu.tr/file.php/10/ornek/ornekphp/ ornekphp.html

21 Kurs ne zaman olacak? Çarşamba 18.00-20.00 Cumartesi 12.30-15.00 Salı- Cuma 18.00-20.30 ? Ne dersiniz?

22 URL: http://www.sem.metu.edu.tr scheme://host.domain:port/path/filename scheme internet servisinin tipidir. Genellikle kullanılan tip http’dir, ftp’de olabilir. host alan adının sunucusunu bildirir. Örnek: www. domain alan adıdır. Örnek: sem.metu.edu.tr :port sunucuya hangi porttan bağlanacağınızı belirtir. http portu 80 olarak sabitlenmiştir. path, sunucu içerisindeki alt klasörlere veya direkt bir dosyaya ulaşmak için kullanılır

23 Web Sayfalarını Yayınlamak? Sadece kendi bilgisayarımızda kalabilir yada, Web sayfanızı yayınlamak için sayfanızı bir web sunucuya kopyalamalısınız. Alan adı almak (Domain name) Örnek: www.namecheap.comwww.namecheap.com Hosting alınan DNS’e ayarları yaparak yönlendirmek yeterli Alan kiralamak (Hosting) Web Hosting (Ücretli) 500 MB Web Alanı 5 GB Trafik 1 Alan Adı Barındırma 15 E-Posta http://www.turkiyewebalani.com http://www.hostley.net/ http://hosting.turk.net FTP Adresi Kullanıcı Adı Paralo

24 Bölüm I: HTML, DHTML,JavaScript, CSS Web site tasarım süreci HTML’e giriş, Bağlantılar ve Internet adreslerinin kullanımı HTML ile sayfa tasarımı, arka planlar, renkler, metinler, tablolar, listeler, çerçeve ve katman kullanımı, form ve form elemanları CSS ler, Javascript, XML, XSL, DTD

25 HTML HTML'in açılımı Hyper Text Markup Language Bir HTML dosyasının uzantısı htm veya html olmak zorundadır. Bir HTML kodu tag(işaretlenmiş etiketler)’lardan oluşmaktadır HTML dosyalarınızı kolay bir şekilde FrontPage veya Dreamweaver ile de hazırlayabilirsiniz. HTML çalışmak istiyorsanız not defteri (notepad) başlamayı tavsiye ediyorum İlk örnek

26 HTML ilk örnek Sayfa Başlığı Bu benim ilk sayfam Bu metin koyu HTML programlama dili değil, işaretleme dilidir HTML etiketleri 2 karakter ile sınırlanır. HTML etiketleri çift olarak kullanılır. Örn: Bu metin koyu fonttadır. HTML etiketleri büyük/küçük harfe duyarlı değildir

27 HTML ilk örnek Başlıklar ve dahil olmak üzere aradaki tüm rakamlar kullanılarak tanımlanabilir Örnek: Bu bir başlık Paragraflar etiketi ile belirtilir. Örnek: Bu bir paragraf Satır atlamak için etiketi kullanılır. HTML içinde açıklama (yorum) satırları yaratmak Örnek:

28 HTML ilk örnek - Parametreler Parametreler, HTML öğelerine, ek özellikler eklenmesini sağlar. Parametreler daima başlangıç etiketi içerisinde belirtilir. Örnek 1: metinin ortalanacağını da belirtir. Örnek 2: arkaplan renginin sarı olacağını belirtir.

29 HTML ilk örnek – özel karakterler HTML içinde bazı karakterler ("<" gibi) kaynak kodlarda yazılarak ekranda görüntülenmesi sağlanamaz.Bu tip karakterleri görüntüleyebilmek için bazı özel karakterler kullanılır. Örnek 1: Fazladan boşluk, Özel karakteri: Örnek 2: Küçüktür, <, Özel karakteri: < Örnek 3: Büyüktür, >, Özel karakteri: > Örnek 4: Ve, &, Özel karakteri: & Örnek 5: Alıntı, “, Özel karakteri: "

30 HTML ilk örnek – link ve çerçeve Link vermek Örnek 1:...SEM web sayfası tıklayın... Çerçeve oluşturmak Örnek: : Frame ayarlarını belirtir. : Alt pencere (çerçeve) belirtir. : Frame desteğinin kullanılmamasını sağlar. : İç frame belirtir.

31 HTML ilk örnek – tablo Tablo oluşturmak Örnek 1: Başlık Başka Başlık Satır 1, Hücre 1 Satır 1, Hücre 2 Satır 2, Hücre 1 Satır 2, Hücre 2

32 HTML ilk örnek – liste Liste oluşturmak Örnek 1- Sırasız: Hakkımda Spor Örnek 2- Sırasız: Hakkımda Spor Resim eklemek Arka Plan Örnek 1- Sırasız: Örnek 2- Sırasız: Hakkımda Spor Font Bu bir paragraf.

33 HTML ilk örnek – Form Örnek -1 Adınız: Soyadınız: Örnek-2 Erkek Kadın Örnek-3 Kullanıcı Adı:

34 HTML ilk örnek – Başlık - Head öğesi genel bilgiler ve ayrıca meta-bilgilerini içerir. - HTML standartlarına göre sadece bir kaç etiket head etiketi içerisinde kullanılabilir, Bunlar:,,,, ve. Örnek -1 Başlık Sayfa başlığı Temel URL hedef çerçevelerini belirlemek için kullanılır. Kaynak dosyası belirtilir META bilgileri girilir.

35 HTML ilk örnek – Meta - Meta öğesi daha çok arama motorlarının site içerisinde neler bulunduğuna dair bilgi edinmesi için koyulur. Arama motorlarının sitenizi ziyaret ettiğinde Meta keywords içine bakar ve ona göre sitenizi kendi veritabanında indeksler. Örnek