Programming in HTML5 with JavaScript and CSS3 Eğitimi

Programming in HTML5 with JavaScript and CSS3 Eğitim İçeriği

Çoğu modern web uygulaması, kullanıcıların okuduğu ve etkileşime girdiği içeriği tanımlayan HTML sayfaları, bu içeriği görsel olarak hoş hale getirmek için stil sayfaları ve kullanıcı ile sayfa ile sayfa ve sunucu arasında bir etkileşim düzeyi sağlamak için JavaScript kodu üzerine inşa edilmiştir. Web tarayıcısı, bu içeriği oluşturmak için HTML biçimlendirmesini ve stil sayfalarını kullanır ve uygulamanın davranışını uygulamak için JavaScript kodunu çalıştırır. Bu modül, HTML ve CSS’nin temellerini gözden geçirmekte ve bu kursun HTML sayfaları ve stil sayfaları oluşturmak için kullandığı araçları tanıtmaktadır.

Konu

  • HTML’ye Genel Bakış
  • CSS’ye Genel Bakış
  • Visual Studio 2017 Kullanarak Web Uygulaması Oluşturma

Lab: Contoso Konferans Uygulamasını Keşfetmek

  • Contoso Konferans Uygulamasını Keşfetme
  • Contoso Konferans Uygulamasını İnceleme ve Değiştirme

Bu modülü tamamladıktan sonra öğrenciler şunları yapabilecekler:

  • Bir web sayfasını düzenlemek için HTML öğelerinin ve niteliklerinin nasıl kullanılacağını açıklayın.
  • Bir web sayfasına temel stil uygulamak için CSS’nin nasıl kullanılacağını açıklayın.
  • Microsoft Visual Studio’nun web uygulamaları oluşturmak için sağladığı araçları açıklayın.

HTML, CSS ve JavaScript gibi tüm web uygulamalarının temelini oluşturan teknolojiler yıllardır mevcuttur, ancak web uygulamalarının amacı ve karmaşıklığı önemli ölçüde değişmiştir. HTML5, HTML’nin 10 yıldaki ilk büyük revizyonudur ve geleneksel web uygulamaları, avuç içi mobil cihazlarda çalışan uygulamalar ve ayrıca Windows 10 platformunda içerik sunmanın oldukça uygun bir yolunu sağlar. Bu modül, HTML5’i tanıtır, yeni özelliklerini açıklar, HTML5’teki yeni özellikleri kullanarak içeriğin nasıl sunulacağını ve CSS kullanılarak bu içeriğin nasıl biçimlendirileceğini gösterir.

Konu

  • HTML5 Sayfası Oluşturma
  • HTML5 Sayfasının Stilini Belirleme

Lab: HTML5 Sayfaları Oluşturma ve Stil Oluşturma

  • HTML5 Sayfaları Oluşturma
  • HTML sayfalarını şekillendirme

Bu modülü tamamladıktan sonra öğrenciler şunları yapabilecekler:

  • HTML5’in amacını ve yeni özellikleri açıklayın ve bir web sayfasını düzenlemek için yeni HTML5 öğelerinin nasıl kullanılacağını açıklayın.
  • Bir web sayfasının düzenini, metnini ve arka planını biçimlendirmek için CSS’nin nasıl kullanılacağını açıklayın.

HTML ve CSS, bir web sayfası için yapısal, anlamsal ve sunum bilgilerini sağlar. Ancak bu teknolojiler, kullanıcının bir tarayıcı kullanarak bir sayfayla nasıl etkileşim kurduğunu açıklamaz. Bu işlevi uygulamak için, tüm modern tarayıcılar, bir sayfada komut dosyalarının kullanımını destekleyen bir JavaScript motoru içerir. Ayrıca, bir tarayıcının, komut dosyası motorlarının o sayfanın içeriğine erişmesini ve bunları değiştirmesini sağlamak için bellekteki bir sayfayı nasıl yansıtması gerektiğini tanımlayan bir W3C standardı olan Belge Nesne Modeli’ni (DOM) uygularlar. Bu modül JavaScript programlamayı ve DOM’u tanıtır.

Konu

  • JavaScript’e Genel Bakış
  • Belge Nesne Modeline Giriş

Lab: JavaScript Kullanarak Verileri Görüntüleme ve Olayları İşleme.

  • Verileri Programlı Olarak Görüntüleme
  • Olayları Yönetme

Bu modülü tamamladıktan sonra öğrenciler şunları yapabilecekler:

  • Temel JavaScript söz dizimini açıklayın.
  • Bir web sayfasından bilgileri değiştirmek ve almak için DOM’u kullanan JavaScript kodu yazın.

Web uygulamalarının, görevlerini yerine getirmek için sıklıkla kullanıcı girdisi toplamaları gerekir. Bir web sayfasının, kullanıcının sağlaması gereken bilgilerle ilgili sinir bozucu yanlış anlamaları en aza indirmek için, bir kullanıcıdan beklenen girdi hakkında net ve kısa olması gerekir. Ek olarak, tüm girdilerin uygulamanın gereksinimlerine uygun olduğundan emin olmak için doğrulanması gerekir. Bu modülde, HTML5’te bulunan yeni giriş türlerini kullanarak giriş formlarını nasıl tanımlayacağınızı öğreneceksiniz. Ayrıca HTML5 özelliklerini kullanarak verileri nasıl doğrulayacağınızı da göreceksiniz. Son olarak, JavaScript kodunu kullanarak genişletilmiş giriş doğrulamasının nasıl gerçekleştirileceğini ve girdileri geçerli olmadığında veya uygulama beklentileriyle eşleşmediğinde kullanıcılara nasıl geri bildirim sağlayacağınızı öğreneceksiniz.

Konu

  • HTML5 Formları Oluşturma
  • HTML5 Özelliklerini Kullanarak Kullanıcı Girişini Doğrulama
  • JavaScript Kullanarak Kullanıcı Girişini Doğrulama

Lab: Bir Form Oluşturma ve Kullanıcı Girişini Doğrulama

  • HTML5 Özelliklerini Kullanarak Form Oluşturma ve Kullanıcı Girişini Doğrulama
  • JavaScript Kullanarak Kullanıcı Girişini Doğrulama

Bu modülü tamamladıktan sonra öğrenciler şunları yapabilecekler:

  • HTML5 kullanarak giriş formları oluşturun.
  • Verileri doğrulamak için HTML5 form özelliklerini kullanın.
  • HTML5 öznitelikleri kullanılarak kolayca uygulanamayan doğrulama görevlerini gerçekleştirmek için JavaScript kodu yazın.

Birçok web uygulaması, uzak bir site tarafından tutulan verilerin kullanılmasını gerektirir. Bazı durumlarda, bu verilere yalnızca belirli bir URL’den indirerek erişebilirsiniz, ancak diğer durumlarda veriler uzak site tarafından kapsüllenir ve bir web hizmeti aracılığıyla erişilebilir hale getirilir. Bu modülde, JavaScript kodunu kullanarak bir web hizmetine nasıl erişeceğinizi ve uzak verileri web uygulamalarınıza nasıl dahil edeceğinizi öğreneceksiniz. Bunu başarmak için iki teknolojiye bakacaksınız: uzak web sitelerine HTTP istekleri etrafında programlı bir sarmalayıcı görevi gören XMLHttpRequest nesnesi ve istek gönderme ve veri alma ile ilgili birçok görevi basitleştiren Fetch API. Fetch API ve XMLHttpRequest nesnesi eşzamansız api olduğundan, önce Promise nesnesiyle zaman uyumsuz görevlerin nasıl işleneceğini öğreneceksiniz,

Konu

  • JavaScript’te zaman uyumsuz programlama
  • XMLHttpRequest Nesnesini Kullanarak Veri Gönderme ve Alma
  • Getirme API’sını Kullanarak Veri Gönderme ve Alma

Laboratuvar: Uzak Veri Kaynağı ile İletişim Kurmak

  • Verileri Alma
  • Verileri Seri Hale Getirme ve İletme
  • JQuery ajax Yöntemini Kullanarak Kodu Yeniden Düzenleme

Bu modülü tamamladıktan sonra öğrenciler şunları yapabilecekler:

  • Yeni eşzamansız programlama teknolojilerini kullanarak eşzamansız JavaScript görevlerini yönetin.
  • XMLHttpRequest nesnesini kullanarak bir web hizmetine veri gönderin ve bir web hizmetinden veri alın.
  • Getirme API’sini kullanarak bir web hizmetine veri gönderin ve bir web hizmetinden veri alın.

Bir web sayfası tarafından görüntülenen içeriğin stilini ayarlamak, bir uygulamayı çekici ve kullanımı kolay hale getirmenin önemli bir yönüdür. CSS, web uygulamalarının stil uygulamak için kullandığı temel mekanizmadır ve CSS3’e eklenen özellikler, modern tarayıcılarda bulunan yeni özelliklerin çoğunu destekler. CSS1 ve CSS2.1’in tek belgeler olduğu durumlarda, World Wide Web Konsorsiyumu, her biri renk, metin, kutu modeli ve animasyonlar gibi sunumun tek bir yönüne odaklanan bir dizi modül olarak CSS3 yazmayı seçmiştir. Bu, spesifikasyonların uygulamalarıyla birlikte aşamalı olarak geliştirilmesine izin verir. Her bir belirtim, CSS1 ve CSS2’de zaten var olan özellikleri ve değerleri ve ayrıca yeni özellikleri ve değerleri tanımlar. Bu modülde, CSS3’te tanımlanan yeni seçiciler olan bu modüllerin birçoğunda tanımlanan özellikleri ve değerleri inceleyeceksiniz.

Konu

  • CSS3 Kullanarak Metni Stil Etme
  • Blok Elemanlarının Stilini Ayarlama
  • Sözde Sınıflar ve Sözde Öğeler
  • CSS3 Kullanarak Grafik Efektleri Geliştirme

Lab: CSS3 Kullanarak Metin ve Blok Öğelerinin Stilini Ayarlama

  • Gezinme Çubuğunu Stil Etme
  • Kayıt Bağlantısını Biçimlendirme
  • Hakkında Sayfasını Biçimlendirme

Bu modülü tamamladıktan sonra öğrenciler şunları yapabilecekler:

  • Metin öğelerine stil vermek için CSS3’ün yeni özelliklerini kullanın.
  • Blok elemanlarına stil vermek için CSS3’ün yeni özelliklerini kullanın.
  • Öğelerin stilini geliştirmek için CSS3 seçicileri, sözde sınıfları ve sözde öğeleri kullanın.
  • CSS3 grafik efektlerini kullanarak sayfaları geliştirin.
  • Basit Kimlik Doğrulama
  • Windows Tabanlı Kimlik Doğrulama
  • Sertifika Tabanlı Kimlik Doğrulama
  • Https ve Internet Bankacılığı Kimlik Doğrulama Yapıları
  • Captcha Kullanımı
  • Cookie Kullanımı

Etkileşim, modern web uygulamalarının önemli bir yönüdür ve kullanıcının eylemlerine hızlı bir şekilde yanıt verebilen ve ayrıca kendilerini kullanıcının konumuna göre uyarlayabilen çekici web siteleri oluşturmanıza olanak tanır. Bu modül, yerel dosya sistemine erişebilen etkileşimli HTML5 web uygulamalarının nasıl oluşturulacağını açıklar, kullanıcının verileri bir web sayfasındaki öğelere sürükleyip bırakmasını, multimedya dosyalarını oynatmasını ve coğrafi konum bilgilerini elde etmesini sağlar.

Konu

  • Dosyalarla Etkileşim
  • Multimedyayı Dahil Etmek
  • Tarayıcı Konumuna ve Bağlamına Tepki Verme
  • Bir Web Uygulamasında Hata Ayıklama ve Profil Oluşturma

Lab: HTML5 API’leri ile Etkileşimli Sayfalar Oluşturma

  • Görüntüleri Sürükleme ve Bırakma
  • Video Birleştirme
  • Kullanıcının Mevcut Konumunu Bildirmek için Coğrafi Konum API’sini Kullanma

Bu modülü tamamladıktan sonra öğrenciler şunları yapabilecekler:

  • Yerel dosya sistemine erişin ve web sayfalarına sürükle ve bırak desteği ekleyin.
  • Eklentilere ihtiyaç duymadan bir web sayfasında video ve ses dosyalarını oynatın. Kullanıcının mevcut konumu hakkında bilgi edinin.
  • Bir web uygulamasında hata ayıklamak ve profil oluşturmak için Microsoft Edge’deki F12 Geliştirici Araçlarını kullanın.

Web uygulamaları, web sayfalarını ve verileri almak için bir ağa bağlanabilmeye bağımlıdır. Bununla birlikte, bazı ortamlarda bir ağ bağlantısı kesintili olabilir. Bu durumlarda, kullanıcının cihazında önbelleğe alınan verileri kullanarak uygulamanın çalışmaya devam etmesini sağlamak faydalı olabilir. HTML5, oturum depolama ve yerel depolama dahil olmak üzere bir dizi yeni istemci tarafı depolama seçeneği ve Uygulama Önbelleği adı verilen bir kaynak önbelleğe alma mekanizması sağlar. Bu modülde, bir ağ bağlantısı olmadığında bile çalışmaya devam edebilen sağlam web uygulamaları oluşturmak için bu teknolojileri nasıl kullanacağınızı öğreneceksiniz.

Konu

  • Verileri Yerel Olarak Okuma ve Yazma
  • Uygulama Önbelleğini Kullanarak Çevrimdışı Destek Ekleme

Lab: Web Uygulamalarına Çevrimdışı Destek Ekleme

  • Uygulama Önbelleği API’sini Kullanarak Çevrimdışı Verileri Önbelleğe Alma
  • Yerel Depolama API’sini Kullanarak Kullanıcı Verilerini Kalıcı Hale Getirme

Bu modülü tamamladıktan sonra öğrenciler şunları yapabilecekler:

  • Verileri kullanıcının cihazına yerel olarak kaydedin ve bu verilere bir web uygulamasından erişin.
  • Uygulama Önbelleğini kullanarak bir web uygulamasını çevrimdışı işlemleri destekleyecek şekilde yapılandırın.

Web’in en kalıcı özelliklerinden biri de geçici olması. İlk defa, klavye ve farenin tekeli meydan okuyor ve bu, kullanıcı ara yüzlerinin nasıl tasarlandığını sorgulamak anlamına geliyor. Büyük, yüksek çözünürlüklü bir monitörü, bir faresi ve bir klavyesi olan bir bilgisayarda bir web uygulaması geliştirebilirsiniz, ancak diğer kullanıcılar uygulamanızı bir akıllı telefon veya tablette fare olmadan görüntüleyebilir ve etkileşime girebilir veya farklı bir çözünürlük. Kullanıcılar ayrıca uygulamanızın sayfalarını yazdırmak isteyebilir. Bu modülde, sayfalarının düzenini ve işlevselliğini, üzerinde görüntülendiği cihazın yeteneklerine ve biçim faktörüne uyarlayan bir web sitesinin nasıl oluşturulacağını öğreneceksiniz. Bir sayfayı görüntülemek için kullanılan cihazın türünü nasıl tespit edeceğinizi göreceksiniz,

Konu

  • Birden Fazla Form Faktörünü Destekleme
  • Uyarlanabilir Kullanıcı Arayüzü Oluşturma

Lab: Uyarlanabilir Bir Kullanıcı Arayüzü Uygulama

  • Yazdırılabilir Bir Stil Sayfası Oluşturma
  • Sayfa Düzenini Farklı Form Faktörlerine Uyacak Şekilde Uyarlama

Bu modülü tamamladıktan sonra öğrenciler şunları yapabilecekler:

  • Farklı form faktörlerine yanıt vermek için bir web sitesindeki gereksinimleri açıklayın.
  • Düzenlerini görüntülendikleri aygıtın form faktörüne uyacak şekilde uyarlayabilen web sayfaları oluşturun.

Yüksek çözünürlüklü, etkileşimli grafikler, çoğu modern uygulamanın önemli bir parçasıdır. Grafikler, içeriğe görsel bir yön sağlayarak, bir web sitesini daha çekici ve kullanımı daha kolay hale getirerek kullanıcının deneyimini geliştirmeye yardımcı olabilir. Etkileşim, bir web sitesindeki grafik öğelerin kullanıcı girdisine veya ortamdaki değişikliklere uyum sağlamasına ve bunlara yanıt vermesine olanak tanır ve kullanıcının dikkatini ve içeriğe olan ilgisini korumada bir başka önemli unsurdur.

Bu modül, Ölçeklenebilir Vektör Grafikleri (SVG) ve Microsoft Canvas API kullanılarak HTML5’te gelişmiş grafiklerin nasıl oluşturulacağını açıklar. Gibi SVG ile ilgili öğeleri nasıl kullanacağınızı ve bir web sayfasında grafik içeriği nasıl görüntüleyeceğinizi öğreneceksiniz. Ayrıca, klavye olayları ve fare olayları gibi olayları kullanarak kullanıcının SVG öğeleriyle nasıl etkileşime girmesini sağlayacağınızı da öğreneceksiniz.

Canvas API, SVG’den biraz farklıdır. Canvas API, tuval yüzeyine grafikler çizmek için çağırabileceğiniz bir öğe ve bir dizi JavaScript işlevi sağlar. Canvas API’yi nasıl kullanacağınızı öğrenecek ve ayrıca Canvas veya SVG kullanmanın ne zaman daha uygun olduğunu öğreneceksiniz.

Konu

  • SVG Kullanarak Etkileşimli Grafikler Oluşturma
  • Canvas API Kullanarak Grafik Çizme

Lab: Gelişmiş Grafikler Oluşturmak

  • SVG Kullanarak Etkileşimli Bir Mekan Haritası Oluşturma
  • Canvas API Kullanarak Hoparlör Rozeti Oluşturma

Bu modülü tamamladıktan sonra öğrenciler şunları yapabilecekler:

  • Etkileşimli grafik içerik oluşturmak için SVG’yi kullanın.
  • Program yoluyla grafik içerik oluşturmak için Canvas API’yi kullanın.

Animasyonlar, bir kullanıcının bir web sitesine olan ilgisini sürdürmede önemli bir unsurdur. Dikkatlice uygulandığında, animasyonlar bir web sayfasının kullanılabilirliğini geliştirir ve kullanıcı eylemleri hakkında faydalı görsel geri bildirim sağlar.

Bu modül, CSS animasyonlarını kullanarak web sayfalarının nasıl geliştirileceğini açıklar. Mülk değerlerine geçişleri nasıl uygulayacağınızı öğreneceksiniz. Geçişler, özellik değişikliklerinin zamanlamasını belirlemenizi sağlar. Örneğin, fare imleci üzerine geldiğinde bir öğenin genişliğini ve yüksekliğini beş saniyelik bir süre içinde değiştirmesini belirtebilirsiniz. Ardından, 2D ve 3D dönüşümleri elemanlara nasıl uygulayacağınızı öğreneceksiniz. Dönüşümler, öğeleri ölçeklemenize, çevirmenize, döndürmenize ve eğriltmenize olanak tanır. Ayrıca, dönüşümün belirli bir animasyon süresi boyunca kademeli olarak uygulanması için dönüşümlere geçişler de uygulayabilirsiniz.

Bu modülün sonunda, anahtar kare animasyonlarını öğelere nasıl uygulayacağınızı öğreneceksiniz. Ana kare animasyonları, bir animasyon sırasında belirli anlarda bir dizi özellik değeri tanımlamanıza olanak tanır. Örneğin, bir öğenin rengini ve konumunu animasyon süresinin yüzde 0, yüzde 33, yüzde 66 ve yüzde 100’lerinde belirtebilirsiniz.

Konu

  • CSS Geçişleri Uygulama
  • Öğeleri Dönüştürme
  • CSS Anahtar Kare Animasyonlarını Uygulama

Lab: Kullanıcı Arayüzünü Canlandırma

  • CSS Geçişleri Uygulama
  • Anahtar Kare Animasyonlarını Uygulama

Bu modülü tamamladıktan sonra öğrenciler şunları yapabilecekler:

  • Özellik değerlerine HTML öğelerine animasyon uygulamak için geçişler uygulayın.
  • HTML öğelerine 2D ve 3D dönüştürmeleri uygulayın.
  • HTML öğelerine ana kare animasyonlarını uygulayın.

Web sayfaları, HTTP istekleri göndererek bir web sunucusundan talep üzerine veri talep eder. Bu model, işlevselliğin bir kullanıcının eylemleri tarafından yönlendirildiği etkileşimli uygulamalar oluşturmak için idealdir. Ancak sürekli değişen bilgileri göstermesi gereken bir uygulamada bu mekanizma daha az uygundur. Örneğin, bir finansal hisse senedi sayfası, birkaç dakika bile eski fiyatları gösteriyorsa değersizdir ve bir kullanıcının tarayıcıda görüntülenen sayfayı sürekli yenilemesini bekleyemezsiniz. Burası web soketlerinin kullanışlı olduğu yerdir. Web Sockets API, web sunucusu ve tarayıcı arasında gerçek zamanlı, iki yönlü iletişim uygulamak için bir mekanizma sağlar.

Bu modül, web soketlerini tanıtır, nasıl çalıştıklarını açıklar ve bir web sayfası ile bir web sunucusu arasında gerçek zamanlı olarak veri iletmek için kullanılabilecek bir web soket bağlantısının nasıl oluşturulacağını açıklar.

Konu

  • Web Soketlerine Giriş
  • WebSocket API’yi kullanma

Lab: Web Yuvalarını Kullanarak Gerçek Zamanlı İletişim Yapmak

  • Bir Web Soketinden Mesaj Alma
  • Bir Web Soketine Mesaj Gönderme
  • Farklı Web Soketi Mesaj Türlerini Yönetme

Bu modülü tamamladıktan sonra öğrenciler şunları yapabilecekler:

  • Web soketlerinin kullanılmasının bir web sayfası ile bir web sunucusu arasında gerçek zamanlı iletişimi etkinleştirmeye nasıl yardımcı olduğunu açıklayın.
  • Bir web sayfasından bir web sunucusuna bağlanmak için Web Soketleri API’sini kullanın ve web sayfası ile web sunucusu arasında mesaj alışverişi yapın.

JavaScript kodu, bir web sayfasında işlevsellik uygulamak için güçlü bir araçtır, ancak bu kodun bir web sayfası yüklendiğinde veya web sayfası görüntülenirken kullanıcı eylemlerine yanıt olarak çalıştığını hatırlamanız gerekir. Kod, tarayıcı tarafından çalıştırılır ve kod, tamamlanması önemli ölçüde zaman alan işlemler gerçekleştirirse, tarayıcı yanıt vermeyebilir ve kullanıcı deneyimini düşürebilir.

HTML5, arka plan iş parçacıklarını ayırmak için işlem yükünü boşaltmanıza ve böylece tarayıcının duyarlı kalmasına olanak tanıyan web işçileri sunar. Bu modül, web çalışanlarının nasıl çalıştığını ve bunları web uygulamalarınızda nasıl kullanabileceğinizi açıklar.

Konu

  • Web Çalışanlarını Anlamak
  • Web Çalışanları Kullanarak Eşzamansız İşleme Gerçekleştirme

Lab: Bir Web Çalışanı Süreci Oluşturma

  • Bir Web Çalışanı Kullanarak Duyarlılığı İyileştirme

Bu modülü tamamladıktan sonra öğrenciler şunları yapabilecekler:

  • Web çalışanlarının çoklu iş parçacığını uygulamak ve bir web uygulamasının yanıt verebilirliğini iyileştirmek için nasıl kullanılabileceğini açıklayın.
  • Bir web çalışanı kullanarak işleme gerçekleştirin, bir web çalışanıyla iletişim kurun ve bir web çalışanı kontrol edin.

Modelleri kullanmak, büyük, karmaşık uygulamalar oluşturmanıza olanak tanır. ECMAScript6 sürümünde dilin ilerlemesi, uygulama oluşturma sürecini basitleştirmesine olanak tanır. Ancak, ECMAScript6 modüllerinin ve diğer özelliklerin kullanımı henüz tüm tarayıcılarda desteklenmemektedir. Node.js, Webpack ve Babel gibi araçlar, kullanıcı deneyimine zarar vermekten kaçınmak için farklı tarayıcılar için destekle birlikte yeni dil özelliklerinin kullanılmasını sağlar.

Bu modülde, bu araçların arkasındaki teoriyi, ne zaman kullanmamız gerektiğini ve farklı kullanım seçeneklerini tanıtacağız. Modülün sonunda, tüm tarayıcılarda desteklenen ECMAScript6 kodunu yazmak için bu araçları nasıl kullanacağımızı göreceğiz.

Konu

  • Aktarıcıları ve Modül paketlemeyi anlama
  • Çapraz Tarayıcı Desteği için Ayrı Paketler Oluşturma

Lab: Web Paketi Paketini Üretim İçin Kurmak

  • WebPack kullanarak Paket Oluşturma ve Dağıtma