CSS3, HTML 5 ve jQuery ile Web Tasarımı

CSS3, HTML 5 ve jQuery
ile Web Tasarımı
Umuthan Uyan
JavaScript
Kütüphanesi
JavaScript ile yazılan özellikle
AJAX ve diger web
teknolojilerini kullanarak web
yazılımlarını kolaylıkla
gelistirmemizi saglayan
kütüphanelerdir.
JavaScript Kütüphaneleri
jQuery
•
Ilk olarak John Resig tarafından
2006 yılında duyuruldu
•
15 kisilik ‘jQuery Team’ ekibi
tarafından gelistiriliyor
•
Platform bagımsız JavaScript
kütüphanesi
•
•
Write Less, Do More
(Daha az kod yazıp, Daha fazlasını yap!)
En çok kullanılan JavaScript
kütüphanesi
Kullanımı Basit
•
•
•
•
jQuery.com - Download (Jquery);
•
•
$(‘div’)
Iki versiyon (Sıkıstırılmıs ve Sıkıstırılmamıs)
<script type="text/javascript" src="jquery.js"></script>
Eski DOM seçicileri (getElementByID() gibi) yerine $ ile
seçim yapılıyor
MIT ve GPL ile lisanslanmıs
Zincirlenebilirlik
• jQuery’nin sihirli yapısı sayesinde bir satırda
birden fazla kod yazabilirsiniz.
• $(‘a’).addClass(‘kirmizilink’).click(fonksiyon);
Milyonlarca Eklenti
• plugins.jQuery.com
• colorPicker,
datePicker, Graphs
• Kolay
uygulanabilirlik
•
$(‘#takvim’).datepicker();
jQuery UI
Interface
• User
(Kullanıcı Arayüzü)
• Zengin kullanıcı interaktivitesi
• Birçok eklenti ve efekt barındırıyor
jQuery UI (dialog)
jQuery UI (draggable)
jQuery UI (datePicker)
Demo
HTML5
• HTML geçmisi
• HTML5 nedir?
• Yeni Özellikler
HTML Geçmisi
• Ileriye yönelik degildi
• Ilk standartlar belirlendi
HTML Geçmisi
•
Daha onceleri kullanan table, applet gibi
markupları standartlastırıldı
•
Gelistirici ve tasarımcılar her sayfayı, her tarayıcı
için farklı kodlamalarına neden oldu. Bu da büyük
bir bas agrısına neden oldu.
HTML Geçmisi
• Motivated Web Professionals tarafından W3C
(Web standartları) projesini baslattı
• Amaçları web tarayıcılarına ve web sitelerine
bir standart getirmekti
HTML Geçmisi
• Su anda da kullanılan HTML 4.0 ile
standartlar uygulanmaya baslandı
HTML Geçmisi
• XML sözdiziminin HTML içinde kullanılması
• Farklı tarayıcılarda farklı yorumlanma sorununu
gidermek için W3C tarafından önerilmistir
• CSS kullanımına özendirilmistir
HTML Geçmisi
• AJAX, Flash gibi kullanıcı interaktivitesi
yüksek olan uygulamarla beraber Web
degisiyordu
• HTML bu uygulamalara göre çok zayıf kaldı
HTML5
•
Apple, Mozilla ve Opera’dan bir grup gelistirici
W3C’den HTML4’a Wep Applications destegi istedi.
•
XHTML 2.0 dan mutsuz olan gelistiriciler toplanıp
WHATWG HTML5 için çalısmalara basladı
(Web Hypertext Application Technology Working Group)
HTML5 Nedir?
• HTML4 ve DOM Level
2’nin evrimlesmis ve
kolaylastirilmis halidir
• Anlamsal markuplar
• API
<article>, <header>, <footer>
HTML5 - Özellikleri
• Eski HTML sürümlerini
destekler
• Zengin kullanıcı
interaktivitesi içerir
• Tasarımcılara ve
Gelistiricilere zaman
kazandırır
• HTML5 destekli
her tarayıcı aynı
sekilde
yorumluyor
HTML5 - Yeni Özellikler
• <article>, <section>
gibi anlamsal markuplar
ile kodların
anlasılabilirligini
kolaylastırıyor
• Gomulu API’lar
• Audio ve Video destegi
• Daha esnek ve
minimalist yapı
HTML5’i Ne Zaman Kullanacagız?
http://ishtml5readyyet.com
• Ian Hickson HTML5’i 2020 yılında duyuracak
• HTML5’in birçok özelligini
- desteklenen tarayıcılarda - kullanabiliriz.
HTML5 Destegi
http://fmbip.com http://caniuse.com http://html5test.com
HTML4 ve HTML5
DOCTYPE
HTML4 ve HTML5
Charset
HTML4 ve HTML5
Anlamsal (semantic) Markuplar
•
•
•
•
•
•
•
<header>
•
Baslık olan her yerde kullanılabilir.
(h1,h2,h3 ...)
<footer>
•
En alt bölüm (copyright, sublinks vs.)
<article>
•
Sayfadaki asıl bölüm
<aside>
•
Asıl bölüme baglı diger bölümler
<audio>
•
Ses destegi
<video>
•
Video oynatma destegi
<embed>
•
Flash vb. uygulamaları çalıstırır
HTML5 - Form Yenilikleri
•
•
•
•
Yeni Tipler (type)
•
•
•
email
search
url
Yeni Elemanlar (elements)
•
•
Takvim (DatePicker)
Renk Seçici (ColorPicker)
Yeni Özellik
•
•
Autofocus
Placeholder
Yeni Methodlar
•
PUT ve DELETE
Avantajları
•
Gelistiriciler ve
Tasarımcıların
anlasmasını kolaylastırır.
•
Zamandan tasarruf
saglar
•
Kodların anlasılabılırlıgını
arttırır
HTML5 - Arayuz Tasarımı
•
•
•
•
DOCTYPE
•
Hepsi HTML5 uyumlu!
Charset
Anlamsal markuplar
Basamakli Arayuz Tasarimi
HTML5 - Arayuz Tasarımı
•
Efes Turizm Sayfası
•
•
•
Sayfa Navigasyonu
Antik Turlar
•
Bergama
•
Tur
Hakkında
•
Tanıtım
Tur Haberleri
•
Bergama
Tanıtım
Videosu
•
Tura
katılanların
görüsleri
HTML5 - Arayuz Tasarımı
•
Efes Turizm Sayfası
•
•
•
Sayfa Navigasyonu
Antik Turlar
•
Bergama
•
Tur
Hakkında
•
Tanıtım
Tur Haberleri
•
Bergama
Tanıtım
Videosu
•
Tura
katılanların
görüsleri
API ler
•
•
•
•
•
•
•
•
Audio
Video
Offline Apps
GeoLocation
History
Protocols
Drag & Drop
Messaging
Video
•
•
src ile videonun urlsi girilir
•
controls ile video altında play, pause, volume
kontrolleri gösterilir
•
preload sayfa yüklendiginde videonun oynatılması
width ve height parametreleri ile videonun
genislik ve yüksekligi belirlenir
Video
• Safari
• Firefox
Offline Apps
• Internet baglantısı olmadıgında projenın
calısmasını saglar
• Baglantı saglandıgında veriler sunucuya
gönderilir
GeoLocation API
• Kullanıcının
bulundugu yerin
enlem ve
boylamını verir
• Daha çok mobil
cihazlarda
kullanılır
Demo
CSS3
Cascading Style Sheet 3
HTML5 ve CSS3
YAPI
SUNUM
CSS3
• CSS3 eski
versiyonların
standartları ile
devam eder
• CSS geçmisi
CSS Geçmisi
• Tarayıcı bagımsız HTML dosyalarına stil
vermek için tasarlandı
CSS Geçmisi
•
CSS yeni özellikler eklenerek gelistirilmeye devam
edildi
•
•
Tarayıcılar bu özellikler için eski (yavas) kaldı
HTML için duzgun bir ortam olup olmadıgı
sorgulandı
CSS Geçmisi
• W3C CSS2 daha da gelistirecek CSS3
standartları için adım attı
CSS Geçmisi
• CSS3 standartları kullanılmaya baslandı!
CSS Geçmisi
• CSS için dönüm noktası
• Candidate State’e ulastı
• Major tarayıcılar tarafından kabul görülüyor
ve kullanılıyor
CSS3 - Yeni Özellikler
• element ve içerik
seciciligi gelistirildi
• Gölge, saydamlık ve
yuvarlak köseler gibi
yeni özellikler eklendi
• @font-face ile font
entegresi saglandı
• Basit efektler eklendi
CSS3 - Yeni Özellikler
Yuvarlak Köseler
CSS3 - Yeni Özellikler
Gölge
Demo
WEB Degisiyor!
•
•
•
Mobil cihazlarla birlikte gelen güçlü tarayıcılar
HTML5 ile daha kolay web gelistirme
http://whatwg.com
Dinlediginiz için
Tesekkurler!
Sunum dosyası : http://seminer.linux.org.tr’de