JAVASCRIPT BOOTSTRAP RESPONSIVE

Transkript

1 ÖNSÖZ Merhaba sevgili okur. Öncelikle bu kitabı neden yazma ihtiyacı hissettiğimi ve sonrasında da kitapta hangi konuları ne gibi metotlarla ele aldığımı anlatmak istiyorum. Bildiğiniz üzere piyasada zaten HTML5 adı üzerinde yayınlanmış olan yerli ve yabancı birçok kaynak bulunmakta. Yabancı kaynaklar bir nebze verimli olsa da, yerli olarak üretilmiş olan diğer kitapların ne yazık ki HTML5 ismi adı altında sadece HTML i ele aldığını, HTML5 in de birkaç yaygın özelliğini çeşitli hazır kodları yapıştırarak, üstünkörü geçildiğini görmüş oldum (Evet, hepsini okudum, inceledim). Okurlarını kandırmaya yönelik içerik hazırlayan kitaplarla dolu olan bu piyasada hal böyle olunca; HTML5 in aslında neler getirdiğini ve web geliştiricilerinin artık bu teknolojiyi nasıl kullanmaları gerektiğini en doğru tekniklerle anlatmam gerektiğini hissettim. İş hayatınızda faydasını göreceğiniz best practices (en iyi uygulamalar) lerle HTML5 i temel seviyeden alıp ileri seviyeye kadar konuları kitaba sığdırmaya çalıştım. Amacım; sizlere etiketleri tek tek gösterip bunlar şu işe yarıyor demek değil, HTML5 teknolojisini (HTML5.1 nin yenilikleri ile birlikte) ve HTML5 API lerini efektif olarak nasıl kullanabileceğinizi göstermek. İşin açıkçası HTML5 veya hangi bir programlama dili sadece kitap okuyarak öğrenilemez. Bu nedenle kitabı okurken mutlaka her bir örneği tek tek kendiniz de yapmalısınız. Sakın kopyala yapıştır yapmayın! Örnekleri yaptıktan sonra da onu bozup, çeşitli yerlerini değiştirip sonuçlarını gözlemlemelisiniz. Bunları yaparken de mutlaka en iyi araçları kullanmanız gerekir. Dili her ne kadar iyi biliyor olsanız da kullandığınız programlar eğer verimli değilse, kod yazmak sizin için işkenceye dönüşür. Merak etmeyin, hem öğrenme aşamasında hem de profesyonel geliştirme sürecinde hangi araçları kullanmanız gerektiğinden de bahsedeceğim. Kitapta sırasıyla HTML5 dilinin genel yapısı ve etiketlerden bahsedip, sonrasında HTML5 API lerini ele aldım. Özellikle HTML5 API lerini kitabın kalbi olarak görüyorum ve en çok da o kısımda yoğunlaştım. Çünkü HTML5 gücünü API lerinden alır. Sonrasında da her ne kadar HTML5 kitabı olsa da HTML5 asla CSS ve JAVASCRIPT ten ayrılamayacağı için CSS e giriş yapacağız. Sektörde en çok kullanılan CSS framework lerden biri olan BOOTSTRAP ın kullanıldığını tek tek göreceğiz. Bir de şu her yerde duyduğumuz RESPONSIVE ve ADAPTIVE kavramlarını ele alıp, bir web sayfasının nasıl her ekranda uyumlu çalışacağının felsefesi üzerine yoğunlaşıp çeşitli teknikler uygulayacağız. Sayfaya dinamizm katmak için de JAVASCRIPT kullanacağız ve yine popüler bir JavaScript Library si olan JQUERY yi göreceğiz. Böylelikle bir web projesi geliştirirken DOM manipülasyonu yapmak bizim için çocuk oyuncağı olacak. Tekrar hatırlatmak isterim, kitabın ağırlıklı olarak kapsam konusu HTML5.1 olacak, bunun yanında öğretilecek olan teknolojiler, sizin o teknolojilere giriş yapabilmeniz ve o teknolojileri kullanabilmeniz için gerekli olan vizyonu size aşılamaktır. Sonrasında da genelde web geliş- 7

2 İleri Seviye HTML5 Programlama tiricilerinin çok dikkat etmediği, ancak bir o kadar önemli olan OPTİMİZASYON tekniklerine de değineceğiz. Sektörde işe başladığınızda da (özellikle yoğun ve ekip ile proje geliştirme ortamlarında) bilmeniz gereken NPM (Node Package Manager) ve GULP a bakacağız. NPM ile Github üzerinden paket projeler oluşturabilecek, GULP ile de bazı görevleri otomatikleştirebileceksiniz. Bu görevlerin neler olduğunu ileride daha iyi anlayacaksınız. Son olarak HTML5 in bir farklı versiyonu olan JADE, CSS in de bir başka versiyonu olan SASS a giriş yapıp, bu teknolojilerin GULP ile nasıl kullanılacağına bakacağız. Kitabı bitirdiğinizde artık siz de bir Frontend Developer dan beklenen bütün özellikleri taşımış olacaksınız. Eğer kitapta kodları yazarken zorluk çekerseniz, kitap ile birlikte verilen CD de yer alan kaynak kodları kullanabilirsiniz. Ayrıca kitapta kullandığımız bütün araç ve gereçler de CD de yer almaktadır. Hepinize başarılar dilerim Uğur GELİŞKEN 8

3 İÇİNDEKİLER ÖNSÖZ HTML5 e Başlarken...33 HTML5 in Yeni Web Standartları Hızlı ve Kolay Kodlama Modern Yapısı Mobil Cihaz Desteği Tarayıcı Desteği Temiz Kodlama Sistemi Semantik Web ve Genişletilebilirlik Daha İyi Veri Girişi Video ve Ses Desteği CSS3 ile Daha Zengin İçerikler Hazırlama İmkanı Çevrimdışı Uygulama Yetenekleri Doğal API ler ile Güç Artışı Yerel Veri Depolama Oyun Programlama Mobil Uygulama Geliştirme HTML5 Kodlarının Yazımı, Element Kavramı ve Sayfa Sözdizimi Etiketler HTML5 Sözdizimi

4 İleri Seviye HTML5 Programlama Web Tasarımında Bilinmesi Gereken 3 Altın Kural Çoklu Ortam Desteği Yeni ve Sürdürülebilir Teknolojiler Performans Geliştirme Ortamının Hazırlanması ve Google Developer Tools...45 En Uygun Ücretsiz IDE ler SublimeText Brackets XAMPP Kurulumu ve PHP ile Çalışma Mantığını Anlama PHP Nedir PHP Çalışma Mantığı ve Sözdizimi Gulp için Node.js Kurulumu Google Chrome ile Test Ortamı ve Hata Ayıklamada Google Developer Tools un Kullanımı Elementler ve Stiller (Elements) Konsol (Console) Kaynaklar (Sources) Ağ (Network) Metin ve Paragraflarda Stiller ile Biçimlendirmeler...65 Paragraflar Başlıklar ve Başlık Sistemi Önbiçimlendirilmiş Metinler Yeni Satır Küçük, Üs ve Alt Metinler İşaretlenmiş Metinler Silinmiş ve Eklenmiş Metinler... 69

5 İçindekiler Metin ve Metin Arkaplan Rengi Metin Font Büyüklüğü Metin Font Tipi Metinleri Hizalama Metinlerde Alıntı Yapma Alıntı Metinlerinde Referans Gösterme Metni Ters Yazdırma Metni Kısaltma Listelerle Çalışmak...77 Sırasız Listeler Sıralı Listeler Tablolarla Çalışmak...81 Tablo Oluşturma ve Veri Tanımlama Tablo Kenarlıkları Tabloya Başlık Ekleme İlk Sütun Başlığı Ekleme ve Stillendirme Tabloya Üst Bilgi ile Alt Bilgi Ekleme, Gövdeyi Ayırma Tablo Kenar Çizgisi Boşlukları Hücre İçi Kenar Boşluğu Tablo Genişliği ve Hücrelerin Genişlik Oranları Satırları Birleştirme Sütunları Birleştirme Tanımlama Listeleri Dosyalar ve URL ler Arası Bağlantılar Kurmak

6 İleri Seviye HTML5 Programlama 7- Multimedya (Resim, Ses ve Video) Dosyalarıyla Çalışmak Resim Gösterimi, Haritalama ve Yerleşim Düzenleri Resim Ekleme Resimleri Paragraf İçinde Hizalama Resim Haritası ve Tıklama Alanları için Koordinat Belirtme Video Oynatmak ve Oynatıcı Modları Ses Çalma Formlarla Çalışmak, Form2 Elemanları ve Sunucu Taraflı Dillere Çift Yönlü İletişim Form Elementleri Tanımak ve Özelliklerini Belirlemek <label> Etiket <input> Tek Satırlık Metin Kutusu <textarea> Çok Satırlık Metin Kutusu <input> ve <textarea> Etiketlerinin Ortak Özellik Denetimleri <button> Buton <fieldset> Set Alanı ve <legend> Başlık <datalist> Otomatik Doldurma Listesi <option> Açılır Liste <optgroup> Grup Destekli Açılır Liste <meter> Metre <progress> İlerleme Çubuğu <output> Çıktı Veri Giriş Tipleri ve Veri Doğrulama radio: Tek Seçmeli Onay Kutusu checkbox: Çoklu Seçmeli Onay Kutusu url: Web Adresi tel: Telefon

7 İçindekiler password: Şifre number: Sayı range: Sayı Aralığı search: Ara date: Tarih month: Ay week: Hafta time: Saat ve Dakika datetime-local: Yerel Zaman submit: Gönder reset: Sıfırla Gelişmiş Verileri Doğrulama ve Tasarım Şablonları Örnek Tasarım Şablonları Form Elementlerinde İpucu Balonu Gösterme HTML5 ve Sunucu Taraflı Diller ile Tek Taraflı ve Çift Taraflı İletişim GET ve POST Nedir Form Verilerini GET ile PHP ye Göndermek Farklı Sayfadaki PHP ye Veri Göndermek Aynı Sayfadaki PHP ye Veri Göndermek Form Verilerini POST ile PHP ye Göndermek Aynı Sayfadaki PHP ye Veri Göndermek Farklı Sayfadaki PHP ye Veri Göndermek Form Verilerini AJAX ile PHP API ye Göndermek ve Karşı Cevap (Response) Almak AJAX GET ile PHP API Kullanımı AJAX POST ile PHP API Kullanımı

8 İleri Seviye HTML5 Programlama 9- Web 3.0 Semantic Web, Yeni Etiketler, Sayfa Tasarım Kalıbı ve Microformats2 - Microdata Semantic Web Nedir Semantic Web Etiketleri ve Kullanım Metotları <article> <aside> <details> <figure> <figcaption> <footer> <header> <hgroup> <mark> <section> <summary> <time> <meta> ve <link> Etiketlerinin Kullanımı <meta> ile Sayfa Bilgilerini Tanımlama <link> ile Bağlantıları İlişkilendirme Semantic Microformats2 ve Microdata hcalendar (Organizasyon) hcard (İnsan, Etkinlik ve Lokasyon) Medya ve Metinlerde Microformats Microdata ile Semantic Tanımlama itemscope itemtype itemprop

9 İçindekiler Örnek Uygulama article-normal.html article-microdata.html book-normal.html book-microdata.html HTML5.1 ile Gelen Yenilikler Responsive Tasarım için <img> Etiketine Birden Fazla Kaynak Tanımlama İç İçe Header ve Footer Sıfır Genişlik / Yükseklik Değerlerinde Resimlerin Oluşturulabilmesi İçi Boş Liste Elemanı(<option>) Oluşturulabilmesi <figcaption> Elementinin Serbest Kullanımı Sağ Tuş Menüsüne Buton Ekleme Ters Link (reverse) Bağlantısı Kullanma CSS ve JavaScript Yüklemelerinde Kriptografi Kullanma (XSS Koruma) Oltalama (Phishing) Saldırılarına Karşı İçerikleri Ayırma Offline Çalıştırma ve Cache (Önbellek) Mekanizması Önbelleklenecek Sayfayı Belirtme Manifesto Hazırlama, Önbelleklenecek veya Yeniden Okunacak Olan Dosyaları Belirtme Önbelleklenebilir Responsive Web Sayfası Örneği index.html CSS3/CSS4, Reponsive Tasarım ve Bootstrap CSS CSS Nedir ve Sözdizimi Kuralları (Syntax)

10 İleri Seviye HTML5 Programlama CSS in Avantajları ve Kullanım Kolaylığı HTML5 Dosyalarına CSS Dosyalarını Dahil Etme Metotları (Include) Satır İçi CSS Kodu Yazma Sayfa İçinde CSS Kodu Yazma Harici CSS Kodlarını Sayfaya Yükleme Ana (Master) CSS İçine Alt CSS Dosyaları Yükleme Birden Fazla CSS Temasını Yüklerken Varsayılan Olanı Belirlemek Bitmek Bilmeyen Tarayıcı Destek Sorununa Göre CSS Kodu Yazımı CSS Kutu Modeli CSS Ölçü Birimleri Element Pozisyonlama Modelleri Static (Olduğu Gibi) Fixed (Sabitlemek) Relative (Göreceli) Absolute (Mutlak) Element Görünüm Düzenleri Görünmez (None) Block (Blok) Inline (Satır içi) Görünmezlik (visibility) ve Görüntülenmeme (display:none) Farkı Seçiciler, Özellikler ve Değerler (Selectors, Properties ve Values) Element Seçici Çoklu Element Seçici class Seçici id Seçici Element İçindeki Başka Elementi Seçmek Pseudo (Sözde) Seçiciler ve Elementler Sözde (Pseudo) Elementler

11 İçindekiler Sözde (Pseudo) Sınıflar CSS3 ile Gelen Yeniliklerin Kullanımı CSS3 Akıllı Seçiciler ve Komut Desenleri Yuvarlatılmış Köşeler Kutu Gölgeleri Metin Gölgeleri RGBA (Alpha) Şeffaf Renkler Gradyan Renk Geçişleri Web Fontları Kutuları Döndürme (Transform) CSS3 ile Animasyon Temel Animasyon İşlemleri ve Animasyon Sonunda Fonksiyon Tetiklemek Animasyonlarda Geçiş İvmelerini (Easing) ve Başlangıç-Bitiş Değerlerini Belirleme CSS 4.0 te Son Gelişmeler Range ( :valid, :invalid ) Optionality ( :required, :optional ) Default ( :default ) CSS Normalize ve Reset İşlemleri Reset CSS Normalize CSS Responsive ve Adaptive Tasarım Yaklaşımı Responsive ve Adaptive Nedir Tasarımı Pratik Bir Şekilde Çeşitli Ekran Boyutlarına Göre Test Etme CSS3 Flexbox (Esnek) Kutu Yerleşim Modeli Tek Satırda Dizme

12 İleri Seviye HTML5 Programlama Tek Sütunda Dizme Flex Kutuların Sıralamasını Ters Çevirerek Dizmek Sütun Hizasında Sola veya Sağa Yaslama Satır Hizasında Üst veya Alt Yaslama Ortalama Diğer Flex Kutu Yerleştirme Metotları Esnek Kutuların Genişlik Yüzdelerini Belirleme Dar Ekranlarda Flex Kutuları Alt Satırlara Kaydırma... Sorgularına Göre Stil Değiştirme ve DOM Gizleme / Gösterme... min-width max-width Sorguları Ekran Ölçüleri min-width max-width Mantıksal Sorgular Ekran Boyutuna Göre Stil Değiştirme BOOTSTRAP Bootstrap Framework Nedir Bootstrap Neden Gereklidir ve Bootstrap Kullanmanın Avantajları Bootstrap İskelet Yapısı ve İlk Uygulama Bootstrap ın Dahil Edilmesi Dizin İçinden Sayfaya Dahil Etmek jquery Kütüphanesinin Dahil Edilmesi Mobil Cihaz Desteği Yerleşim (Container) Planının Belirlenmesi Merhaba Dünya Grid (Izgara) ve Media Object (Medya Nesnesi) Düzen Sistemi Grid (Izgara)

13 İçindekiler Grid Sistemi Prensipleri Grid Şeması Grid Yapı Şablonu Grid Sınıfları ve Ekran Modelinin Belirlenmesi Sütun Kaydırma Anlamsal Yazı Renkleri Anlamsal Arkaplan Renkleri Hizalama Seçenekleri text-justify ve.text-nowrap Sağa Sola Yaslama ve Satır Atlamasız text-*-right, text-*-left, text-*-center Sağa, Sola ve Ortaya Hizalama Tables (Tablolar) Basit Tablo Yapısı Inverse (Ters) Tablo Striped (Zebra) Modeli Tablo Yapısı Bordered (Çerçeveli) Tablo Mouse a Duyarlı Tablo Satırları Tablo Satırlarına Anlam Kazandıran Renkler Responsive Tablolar (Small) Küçük Tablo Buttons (Butonlar) Anlamsal Buton Stilleri Dışhat Renkli Butonlar Buton Etiketleri Buton Ölçüleri Aktiflik Durumu Checkbox Button ve JQuery ile Değer Kontrolü

14 İleri Seviye HTML5 Programlama Radio Button ve JQuery ile Değer Kontrolü Button Group (Buton Grupları) Horizontal (Yatay Sıralama) Vertical (Dikey Sıralama) Button Toolbar (Buton Araç Çubukları) Vertical Nesting (Butonları Dikey Yuvalama) Horizontal Nesting (Butonları Yatay Yuvalama) Card (Kart) Card Yapısı Header (Başlık) ve Footer (Altlık) Gruplamalar Forms (Formlar) Bootstrap ile Form Elemanlarının Erişilebilirlikleri Alt Alta Düzen Form Yapısı Satır Tipi Düzen Form Yapısı Form larda Grid Kullanımı Checkbox ile RadioButton Kontrollerinin Özellikleri ve jquery ile Durum Kontrolleri Checkbox ın jquery ile Kullanımı Radio nun jquery ile Kullanımı Yardım Metinleri Sizing (Ölçülendirme) Yazdırma İşlemleri ve Yazdırılacak İçeriği ile Tasarımı Adapte Etme Normal Tasarım ve Yazdırma Tasarımı Farklılıkları Ekran için Boostrap ve Print için Özel CSS Tanımlamak Print (Yazdır) Butonu ve Yazdırılacak İçerik Hazırlamak

15 İçindekiler Örnek Sayfa Tasarımı Yazdır Butonunu Aktif Etmek Yazdırma İşleminde Sayfa Stilini Daha Sade Hale Getirmek ve Gereksiz Öğeleri Sayfadan Kaldırmak JavaScript ve JQuery Framework JAVASCRIPT JavaScript Kod Oluşturma Kalıbı JavaScript Kod Yazımı Yöntemleri HTML5 Sayfa İçinde JavaScript Kodları Yazma Sayfa Dışında Yüklenebilir JavaScript Kodları Yazma Sayfa İçinde Herhangi Bir Yerinde JavaScript Kodları Yazma Fonksiyonlar Fonksiyon Oluşturma Kalıbı Parametresiz Fonksiyonlar Parametreli Fonksiyonlar Dönüt Veren Fonksiyonlar Sürekli Çalışan Fonksiyonlar ve İlk Tetikleme Değişkenler ve Veri Tipleri Değişken İsimlendirme Kuralları Değişken Oluşturma Kuralı JavaScript te Temel Değişken Türleri Sayılar Metinler Sayılar ve Metinlerle İşlemler Matematiksel Operatörler ve Matematik İşlemleri Operatör Nedir Matematiksel Operatörler

16 İleri Seviye HTML5 Programlama İşlem ve Atama Operatörleri Form Elemanları ile Hesap Makinası Uygulaması Matematik İşlemleri Rastgele Sayı Üretmek Sayının Mutlak Değerini Almak Sayılar Arasından En Büyük ve En Küçük Olanı Bulmak Ondalıklı Sayıyı Aşağıya, Yukarıya ve En Yakına Yuvarlayıp Tamsayı Yapmak Üs ve Karekök Almak Trigonometrik Hesaplamalar Logaritma ve Euler Sabiti Matematik Sabitleri Diziler Dizi Tanımlama Dizi İşlemleri Diziye Eleman Eklemek Sırası Bilinen Dizi Elemanının İçeriğini Silmek Diziden Belirli Aralıktaki Elemanları Çıkarmak veya Eleman Aralıklarına Yeni Değerler Atamak Dizinin İlk ve Son Elemanlarını Yazdırmak Dizinin İlk ve Son Elemanlarını Silmek Sırası Bilinen Dizi Elemanının Değerini Değiştirmek Diziyi Ters Çevirmek İki Diziyi Birleştirmek Dizinin En Büyük ve En Küçük Değerli Elemanını Bulmak, Büyükten Küçüğe ve Küçükten Büyüğe Elemanları Sıralamak Dizi İçerisinde Arama Yapmak

17 İçindekiler Karar Yapıları, Mantıksal Karşılaştırma ve Mantıksal Operatörler Karar Yapıları Karşılaştırma Operatörleri Mantıksal Operatörler if - else - else if switch case Döngüler for for in while do while break ve continue break continue HTML DOM (Document Object Model) DOM ile Neler Yapılabilir Dokuman Nesnelerine Erişmek id İsmi ile Etikete Erişmek class İsmi ile Etikete / Etiketlere Erişmek Elementlerin Stillerine Erişim Elementlerin Stilini Okumak ve Düzenlemek Elementlerin Özelliklerini Silmek Elementlere Olay Yöneticisi Tanımlamak jquery 3 (JavaScript Library) jquery ye Giriş jquery Nedir ve Özellikleri jquery yi Projeye Ekleme jquery Fonksiyonları Nasıl Çağırılır

18 İleri Seviye HTML5 Programlama İlk Özel JQuery Fonksiyonumuzu Yazmak Olay Yöneticileri Elemente Olay Yöneticisi Bağlamak (bind) Tıklama (.click() ) Odaklama (.focus() ) Değişme (.change() ) Seçiciler Element İsmi ile Seçim ID ile Seçim CLASS ile Seçim Çoklu Seçimler Özelliğinde Belli Bir Değer Olanların Seçimi Özellikler (Attributes) ve Stiller (Styles) Elementin Class ına Yeni Değer Eklemek Elementin Class ından Değer Silmek Elementin Özelliğini (Attribute) Okumak Elementin Özelliğini Değiştirmek Element e Yeni Özellik Eklemek Elementten Özellik Kaldırmak Elementte Bir Özelliğin Olup Olmadığını Kontrol Etmek Element Değerlerini Okumak Elementin Ölçülerini Almak ve Değiştirmek Elementin Konumunu Almak ve Değiştirmek Efektler Elementi Göstermek ve Gizlemek (.show(),.hide() ) Solma Efektleri (.fadein(), fadeout(), fadetoggle(), fadeto() ) Kayma (.slide() )

19 İçindekiler Animasyon (.animate() ) Zincirleme Metot Tanımlama (chaining) AJAX ajax() load() get() post() serialize() serializeArray() HTML5 API leri ve Kullanım Örnekleri Drag Drop API Eşleştirme Oyunu drag-drop.html script.js stil.css Local Storage API Veri Kaydetme ve Listeleme local-storage.html script.js stil.css Session Storage API AJAX Post ile PHP ye Veri Göndermek ve Gelen Sonucu Kaydetmek local-storage.html Web SQL API Sorgu Dili Nedir Veritabanı Yapısı Kavramak Tablolar

20 İleri Seviye HTML5 Programlama Satır ve Sütunlar Online SQL Derleyicileri ile SQL Sorgularını Test Etmek SQL Sorguları ve Kullanım Örnekleri SELECT: Tablodaki Kayıtları Sıralamak ORDER BY - ASC/DESC: Artan ve Azalan Sıralamak LIMIT: Belirli Bir Sayıdaki Verileri Sıralamak WHERE - AND/OR: Belirli Koşullara Göre Verileri Sıralamak LIKE ve LIKE/NOT: Tabloda Hassas Arama Yapmak ve Sonuçları Sıralamak INSERT INTO: Tabloya Yeni Kayıtlar Eklemek UPDATE: Veri Güncellemek DELETE: Belirli Koşulu Sağlayan Kaydı Silmek DELETE - AND/OR: Belirli Koşulları Sağlayan Kayıtları Silmek DELETE - LIKE: Benzer Kayıtları Silmek Web SQL ile Fonksiyonel Not Defteri Oluşturmak web-sql.html script.js IndexedDB API Dexie.js Server Send Events API Sunucudan Zaman Bilgisini Anlık Okumak sse.html sse.php Web Workers API Yüksek Değerli Sayıları Çarpanlara Ayırma web-worker.html carpanlaraayirma.js

21 İçindekiler Web Messaging API Iframe e Düz Metin Verisi Göndermek gonderen.html alici.html Dinleyici Sayfaya JSON Verisi Göndererek Sayfada Manipulasyon Yapmak.463 Notifications API History API History API ile e-kitap Okuyucu Uygulaması FullScreen API Tam Ekran / Normal Ekran Toggle Butonu Yapmak ve Tam Ekranda Element Stilini Değiştirmek full-screen.html stil.css script.js Belirli Bir Elementi Tam Ekranda Göstermek Geolocation API Haritada Bulunduğunuz Konumu Gösterme geolocation.html script.js Vibration API Cihazı Titretmek, Durdurmak ve Ritimli Titretmek BatteryStatus API Batarya Seviyesi ve Cihazın Şarj a Takılı Olup Olmadığını Öğrenme DeviceOrientation Event API D Eksen Verilerini Okumak D Eksen Pusula

22 İleri Seviye HTML5 Programlama WebSocket API WebSocket Bağlantı Testi Optimizasyon İşlemleri ve Gulp ile Görevleri Otomatikleştirmek Adım Adım Optimizasyon Basamakları Websitesi Optimizasyonu Neden Gereklidir Performans Analizi Kodların Doğruluğunu Kontrol Etmek HTML, CSS ve JS Dosyalarını Minimize Etmek Resimleri Optimize Etmek CDN lerden Faydalanmak Cache Kullanmak Gulp ile Optimizasyon Görevleri Tanımlama ve Otomatikleştirme Gulp Kurulumu Gulp ile Bir Web Projesi Oluşturmak Web Projesi için Klasör ve Dosya Yapısını Belirleme İlk Gulp Komutlarının Yazımı Örnek Gulp Komutları ve Otomatikleştirme HTML Dosyalarını Minimize Etmek CSS Dosyalarını Minimize Etmek JS Dosyalarını Minimize Etmek Resimleri Optimize Etmek JS Kodlarının Doğruluğunu Kontrol Etmek Gulp Görevlerini Kombine Etmek JADE ve SASS ile Daha Gelişmiş Kodlama

23 İçindekiler Online JADE ve SASS Editörleri JADE JADE ve HTML JADE Yazım Kuralları Etiketler Class lar ve Id ler Açıklama Satırları Bloklar ve Metinler İç İçe Bloklar Attribute ler Doctype Tanımlama JADE de JavaScript Kullanımı JADE nin Güçlü Özellikleri Değişken Tanımlama Döngüler Koşullar Mixin Başka Bir JADE Dosyasını İçe Aktarma SASS SASS ve CSS SASS Yazım Kuralları Açıklama Satırları Başka Bir SASS Dosyasını İçe Aktarma Değişken Tanımlama İç İçe Stil Tanımlama Operatörler

24 İleri Seviye HTML5 Programlama Döngüler... döngüsü:... döngüsü:... döngüsü: Koşullar & Operatörü Mixin Fonksiyonlar... Sorguları ve İç İçe Sorgular Gulp ile JADE ve SASS Derleme Git Üzerinden Örnek Proje Yüklemek (gulp-jade-sass-starter) ve Proje Üzerinde Çalışmak Paket İçindeki Task ların İncelenmesi gulpfile.js browser-sync gulp-sass gulp-jade gulp-notify gulp-plumber path gulp-data Canvas API ile Çizim, Animasyon ve Uygulama Geliştirme Canvas API ye Giriş ve İlk Uygulama Canvas API Komutları Çizgi Çizme ve Çizgi Özellikleri

25 İçindekiler Dikdörtgen Çizme ve Dolgu Renkleri Daire/Çember ve Elips Çizme Yay, Pasta Dilimi ve Dilimlenmiş Daire Çizme Eğriler Çizme Renk Geçişleri ve Dokular Resim Yükleme Gölge ve Şeffaflık Efektleri Nesnelerin Karması ve Fonksiyonları Çağırma Basit Animasyonlar Analog Saat Uygulaması SONSÖZ

26