HTML5'i Kullanmaya Başlayın

HTML5'i Kullanmaya Başlayın
Bu kılavuz ücretsiz PDF olarak indirilebilir. Bu dosyayı şimdi indirin . Bunu kopyalayıp arkadaşlarınızla ve ailenizle paylaşmaktan çekinmeyin.

İçindekiler

§1. Giriş





§2–Semantik İşaretleme



§3–Formlar





§4 – Orta

§5–CSS3 Dönüşümleri ve Animasyonları



§6–Yeterince Javascript

§7–Yaratıcı Tuval



§8–Sırada Nerede?

1. Giriş

Bunu duymuşsunuzdur: HTML5. Herkes kullanıyor. İnsanların Flash ve Shockwave kullanmaya başvurmadan zengin, ilgi çekici web sayfaları oluşturmasına olanak tanıyan İnternet'in kurtarıcısı olarak müjdeleniyor.



Ama aslında nedir?

Pekala, bu cevaplaması kolay bir soru değil. Bu HTML5 eğitiminde, bazı cevaplar sağlamaya çalışacağız. HTML5, gerçekten çok çeşitli şeyleri tanımlamak için kullanılır. Web sayfaları yazmanın bir standardıdır. Bu bir API koleksiyonudur. Web sayfalarına etkileşim eklemenin yeni bir yolu.

HTML5 hepsi ve daha fazlası. Peki bu kitap ne hakkında?

Bu HTML5 eğitiminde, bir noktada HTML ve CSS'ye değindiğinizi varsayacağım. Belki de kendi Wordpress temanızı yarattınız veya gün içinde bir MySpace düzenini düzenlediniz. Belki de MakeUseOf'un kendi XHTML kılavuzunu okudunuz. Mesele şu ki, bir web sayfasındaki yolunuzu bildiğinizi ve bu kılavuzda tartıştığımız şeyin size çok yabancı olmayacağını varsayıyorum.

Bu kılavuzun amacı size HTML5'in tamamını öğretmek değildir. Bu tamamen bu kitabın kapsamı dışında olacaktır. Amaç, bu şaşırtıcı yeni web teknolojilerine nazik bir giriş sağlamak ve bunları web sitelerinize dahil etmenin bazı harika yollarını size göstermektir.

Neden HTML5 öğrenmek isteyesiniz?

Bu adil bir soru. Akıllı telefonlar ve uygulamalar dünyasında, web sayfalarının nasıl programlanacağını öğrenmek gerçekten önemli mi?

İster inanın ister inanmayın, HTML5 teknolojilerini kullanarak akıllı telefon uygulamaları yazmak gerçekten yaygın. Yakın zamana kadar Android için Facebook uygulaması HTML5, CSS ve Javascript kullanılarak yazıldı.

Blackberry, HTML5'e son derece meraklı olan bir başka büyük şirkettir. Bu, geliştiricileri web teknolojilerini kullanarak telefonları için uygulamalar geliştirmeye aktif olarak teşvik ettikleri mobil işletim sistemlerinin en son sürümü olan Blackberry OS 10'da açıkça görülmektedir.

Yeni Firefox OS akıllı telefonları da tamamen HTML5 uygulamalarında çalışır. Günümüzün akıllı telefon ortamında çalışan bir HTML5 bilgisi çok önemlidir.

Ayrıca HTML5 öğrenmek kariyeriniz için iyidir. Bana inanmıyor musun? Indeed.com'a göre , bir HTML5 geliştiricisinin ortalama yıllık maaşı göz kamaştırıcı bir 89.000 ABD dolarıdır. Gittikçe daha fazla şirketin web sitelerini HTML5 teknolojilerini kullanacak şekilde değiştirmesiyle, HTML5 yığınını bilen geliştiriciler aranıyor - şimdi her zamankinden daha fazla.

1.1 Önkoşullar

Bu HTML5 öğreticisi, birkaç şeyi varsayar. İlk olarak, web'in nasıl çalıştığını bildiğinizi ve temel bir web sayfasını nasıl oluşturacağınızı bildiğinizi varsayar. Bazı HTML öğelerini bir araya getirebilmeli ve bazı bilgileri bir web tarayıcısında sunabilmelisiniz. görmek ve

Etiketler çok göz korkutucu değildir ve bazı kaynak kodlarında ellerinizi kirletmekten korkmazsınız.

İkinci olarak, bu kılavuz CSS'nin ne olduğunu ve nasıl çalıştığını bildiğinizi varsayar. Sizden tasarım dehası olmanızı beklemiyoruz ve tüm CSS özelliklerini avucunuzun içinden bilmeniz de beklenmiyor. Bununla birlikte, bir web sayfasındaki bir öğeye stil uygulayabilmeniz, bir CSS dosyasına bağlanabilmeniz ve bir kimlik ile bir sınıf arasındaki farkı ve her birine stilin nasıl uygulanacağını bilmeniz gerekir.

Yukarıdakilere kafanız karıştıysa endişelenmeyin. HTML ve CSS ile ilgili en iyi şeylerden biri, gerçekten çok kolay olmasıdır. Aslında MakeUseOf, sizi gerçekten hızlı bir şekilde hızlandıracak inanılmaz bir XHTML kılavuzuna sahiptir.

Bu kılavuzu okuduktan sonra, aşağıdaki makalelere de bir göz atmak isteyebilirsiniz:

Ayrıca modern bir metin düzenleyiciye ve tarayıcıya ihtiyacınız olacak. IE 9'dan daha eski olan herhangi bir Internet Explorer sürümü ve Safari, Chrome ve Firefox'un bazı eski sürümleri, HTML5'in parçası olan birçok özellikle sorun yaşayacak ve bu kılavuzu izlemenizi engelleyebilir.

Sonuç olarak, modern bir tarayıcı indirmeniz önerilir. Google Chrome'u öneriyorum ve her örnekte onu kullanacağım.

Bunun ötesinde, tek ihtiyacınız olan şey öğrenmeye istekli olmaktır. Oh, ve bir metin editörü.

1.2 Web Geliştirme için Metin Editörleri

Metin düzenleyiciniz, kodunuzu yazmak için kullanacağınız şeydir. Bir metin editörünün ne olduğunu merak ediyor olabilirsiniz.

Öncelikle bu bir kelime işlemci değil. Microsoft Word ve Apple's Pages gibi programlar web geliştirme için tamamen uygun değildir. Bunun nedeni, HTML, CSS ve Javascript dosyalarınıza web tarayıcınızın okumasını zorlaştıran ek bilgiler eklemeleridir.

Bir metin düzenleyici, karakterleri bir metin dosyasına atar, başka bir şey değil. Bu, ekstra biçimlendirmeye sahip olmayan ve seçtiğiniz herhangi bir uzantıyla kaydedilebilen dosyalar oluşturmanıza olanak tanır.

Bilgisayarınız zaten bir tane ile birlikte gelir. Bir Windows PC kullanıyorsanız, Not Defteri muhtemelen yüklemiş olduğunuz metin düzenleyicisidir.

Mac'te durum biraz farklıdır. OS X, dört farklı metin düzenleyiciyle gelir. Bunlara Vim, Emacs, Pico ve Nano denir. Ancak, Not Defteri'nden farklı olarak, hepsi terminalde çalışır.

Bu, web geliştirmeye yeni başlayanlar için biraz korkutucu ve yazılım geliştirmede yeni olan kişiler tarafından kullanılmamalıdır. Bunları bu kılavuzda kullanmayacağız. Ancak, yazılım ve web geliştirme konusunda kendinize biraz daha güvendiğinizde, kesinlikle Vim ve Emacs'a bir göz atmaya değer. İkisi de güçlü metin editörleridir ve ustalaştıklarında size çok fazla zaman kazandırabilir.

Linux'ta varsayılan metin düzenleyici dağıtımlar arasında değişiklik gösterir. Ubuntu'da, muhtemelen Not Defteri'nden çok farklı olmayan oldukça hoş bir metin editörü olan Gedit'tir.

Ancak bu derste kodumuzu üç farklı araç kullanarak yazacağız.

Birincisi Sublime Text 2 . Dürüst olmak gerekirse, bunu yeterince önemle tavsiye edemem. Yeni başlayan bir geliştirici için hayatı kolaylaştıran her şeyle birlikte gelir. İlk olarak, belirli bölümleri renklendirerek kodunuzun okunmasını kolaylaştıracaktır. İkincisi, dosyalar arasında kolayca geçiş yapmanıza ve tüm dosya projelerini yönetmenize olanak tanır. Bu, dosyalar arasında geçiş yapmak ve anında birden çok kod bitini düzenlemek için idealdir.

Üçüncüsü, Google Chrome'da yerleşik olarak bulunan Javascript konsoludur. Bu, Javascript yazmamıza ve hemen çalıştırıldığını görmemize izin verir ve temel programlama kavramlarını açıklamak için kullanılacaktır.

İkincisi, Codepen.io adlı bir web sitesidir. Bu dikkat çekici web sitesi, tarayıcıda HTML, CSS ve Javascript kodlamanıza izin verecek ve kullanımı ücretsizdir. Ayrıca değişikliklerinizi anında görmenizi sağlar.

2. Semantik İşaretleme

Bu bölümde, Anlamsal İşaretleme ve içeriğine göre kodunuzu nasıl düzenleyeceğinizi öğreneceksiniz.

Yakın zamana kadar HTML kodu genellikle etiketlerle düzenlenirdi. Bunlar, bir grup öğe oluşturmanıza ve ardından bu öğelere stil uygulamanıza izin verdi.

Bu işe yaradı, ancak iyileştirme için yer vardı. Etiketlerle ilgili sorun, anlamsal olmamasıydı. Div aslında hiçbir şey ifade etmiyor, gerçekten.

Anlamsal biçimlendirme, HTML5'te yeni bir özelliktir. Bir 'div' etiketiyle aynı şekilde çalışan, ancak bir sayfanın ortak bölümlerini etiketlemek için olan yeni etiketler getirir.

Peki, nasıl çalışırlar? Aşağıdaki kodu göz önünde bulundurun.

Bu kod parçasında bir gezinme çubuğumuz, bir başlığımız ve bir listemiz var. Bu, düşündüğünüzde muhtemelen devam edeceğiniz çoğu web sitesinden çok farklı değil.

neden görev çubuğumda hiçbir şeye tıklayamıyorum

MakeUseOf ile ilgili bir makaleye bakalım. Sayfanın tamamen diğer makalelere gitmek için ayrılmış bir bölümü olduğunu fark edeceksiniz. Ayrıca, bir makaleyi oluşturan kelimeleri içeren sayfanın başka bir bölümünün olduğunu fark edeceksiniz. Sayfanın üst kısmına doğru MakeUseOf logosunu ve diğer bazı bağlantıları içeren bir başlık göreceksiniz.

Bunu düşündüğünüzde, birçok web sitesi bu kuralları takip ediyor. Çoğu web sitesinde gezinme için ayrılmış bir bölüm vardır. Genellikle bir içerik gövdesine sahiptirler. Büyük olasılıkla bir başlığa sahipler.

Semantik etiketler, çoğu web sitesinde yaygın olarak bulunan bir web sitesinin bölümlerini tanımlamanıza izin veren etiketlerdir. Sayfaya hiçbir şey eklemezler, ancak etiketleri içeriklerine göre gruplamanıza ve bu gruplara stiller uygulamanıza izin verir.

Yani, daha önce sahip olduğumuz kodu hatırlıyor musun? Eklenen bazı Semantik işaretleme ile bakalım.

Gördüğünüz gibi, kodu okumak çok daha kolay. Hangi parçaların hangileri olduğunu biliyorsunuz ve hiçbir belirsizlik yok. Bu önemlidir, çünkü iyi ve temiz kod yazmayı kolaylaştırır. Profesyonel bir web tasarımcısı olmaya karar verirseniz, bu çok önemli hale gelir - ürettiğiniz eseri kimin okuyacağını asla bilemezsiniz.

Öyleyse, biraz daha semantik işaretleme etiketlerine bakalım.

2.1 Bölüm

Bölüm gerçekten kullanışlı bir etikettir. Bir başlık veya başlık ile işaretlenmiş çok sayıda bilgi ve içeriği yakalamak için kullanılır. Bunu bir kitaptaki bir bölüm gibi düşünün. Bir bölümün bir başlığı vardır ve ayrıca resimler, diyagramlar, grafikler ve kelimeler içerebilir. Tüm bunları içermek için bir bölüm etiketi kullanılacaktır.

2.2 Makale

Makale etiketi, kulağa nasıl geldiği için kullanılır; Blog yazısı veya haber hikayesi gibi içerik barındıran. Bu içerik, blogun geri kalanından ayrılabilmeli ve yine de tutarlı bir anlam ifade etmelidir.

2.3 Kenara

Bu etiket, web sayfasının ayrılmaz bir parçası olmayan ancak ilgili içerik için ayrılmıştır. Bu, bir haber hikayesiyle veya bir blogdaki bir kullanıcının biyografisiyle ilgili bir grup gerçek olabilir.

2.4 Başlık

Pek çok web sayfasının üst kısmında bir logo, siteyle ilgili bazı bilgiler ve belki de bazı bağlantılar içeren bir çubuk vardır. Anlamsal işaretlemede, tüm bunları içermek için bir Başlık etiketi kullanırsınız.

2.5 Gezinti

Bu öğe, web sitenizin gezinme bölümü için ayrılmıştır. Bu, diğer web sitelerine veya web sitesindeki diğer sayfalara bağlantılar içerir. MakeUseOf bağlamında bu, sayfanın başlığın altındaki kısmı olabilir.

Bu etiket sayfanın alt kısmı için ayrılmıştır. Buraya, bazı iletişim bilgilerini, telif hakkı bilgilerini, bir haritayı veya 'hakkımda' sayfanıza bazı bağlantılar koyabilirsiniz.

2.7 Kendinizi Test Edin

  • Semantik İşaretleme nedir ve ne için kullanılır?
  • Bir web sayfası yapıyorum ve hakkımda bir biyografi içermesi için anlamsal bir etiket kullanmak istiyorum. Hangisini kullanıyorum?

3. Formlar

Biraz web tasarımı yaptıysanız, muhtemelen HTML'de basit bir form oluşturmayı biliyorsunuzdur. Eğer gerçekten zekiyseniz, muhtemelen formunuzdan aldığınız bilgiyi nasıl alacağınızı ve onunla nasıl bir şey yapacağınızı, örneğin bir veri tabanına nasıl koyacağınızı biliyorsunuzdur.

Formlar çok önemli. İnternette yaptığımız çoğu şeyin temeli bunlar. En sevdiğiniz sosyal ağda bir durum güncellemesi oluşturduğunuzda, Amazon'dan bir şey satın aldığınızda veya bir e-posta gönderdiğinizde, muhtemelen bir HTML formu kullanmışsınızdır.

Muhtemelen bilmediğiniz şey, HTML5'te form oluşturma şeklimizin kökten değiştiğidir. Ayrıca önemli ölçüde daha iyi. Bu bölümde, artık basit eski işaretlemelerle yapabileceğiniz bazı harika şeylere bakacağız.

Peki, HTML5'te form yazabilmemizin yeni yolu hakkında bu kadar güzel olan ne? İlk olarak, yalnızca formun işaretlemesini değiştirerek, göndermek için bazı alanların doldurulmasını sağlayabilirsiniz. Ek olarak, bunu yapmak için artık dağlarca JavaScript veya PHP yazmanıza gerek yok. Önemsiz derecede kolay.

İkinci olarak, kullanıcılarınızın formunuza yalnızca belirli türdeki bilgileri göndermelerini sağlayabilirsiniz. Diyelim ki posta listeniz için bir web siteniz var ve sadece insanların gerçek e-posta adreslerini göndermesini mi istiyorsunuz? Bunu sadece HTML5 kullanarak yapabilirsiniz. Gerçekten inanılmaz güçlü.

Üçüncüsü, belirli alanlara yer tutucu vererek formlarınızın daha iyi görünmesini sağlayabilirsiniz. Bu, kullanıcılarınıza bir formdan ne beklediğinize dair bir örnek gösterebileceğiniz için onları önemli ölçüde daha sezgisel hale getirecektir.

3.1 Bir Formu İyileştirme

Şimdi bir forma bakalım ve onu nasıl daha iyi hale getirebileceğimizi görelim.

Bu form oldukça basit. Bir isim, bir e-posta ve favori bir renk alır ve ardından kullanıcının bunu göndermesine izin verir. İçine hangi bilgilerin yerleştirildiğine dair bir doğrulama içermez ve kullanıcıların bu formu bazı boş alanlar ile göndermesini engelleyen hiçbir şey yoktur. Hadi hepsini değiştirelim.

Bu nedenle, yapmak isteyeceğimiz ilk şey, e-posta alanının yalnızca bir e-posta almasını sağlamak. Her türlü gizli Regex kodunu oluşturmanız gerekeceğinden, bu gerçekten de oldukça zor bir görevdi. Artık değil. Sadece giriş türünü 'metin'den 'e-posta'ya değiştirmeniz yeterlidir. Bu formu anlamsız bir şekilde göndermeye çalıştığınızda, şikayet eder ve bir e-posta göndermeniz için ısrar eder.

3.2 Giriş Tipleri ve Modelleri

İhtiyaç duyabileceğiniz başka girdi türleri de vardır. Bunlara telefon numaraları, web adresleri, arama formları ve hatta renk seçiciler dahildir! HTML5 sürekli olarak geliştiğinden, yakın gelecekte daha fazla girdi türü belirleyebileceğimiz mantıklıdır.

Ayrıca, telefon numaraları gibi bölgeye bağlı olarak değişen şeyler için, girişler için kalıplar belirleyebilirsiniz. Bunlar, 'Normal İfadeler' adı verilen bir şey kullanılarak oluşturulur ve oldukça karmaşıktır, ancak ölçülemeyecek kadar güçlüdür.

Ayrıca alanımızda bir e-posta örneği sağlamak isteyeceğiz, böylece kullanıcının ne göndermesi gerektiği konusunda bir belirsizliği olmasın. Bunu yapmak gerçekten çok kolay. Örnek bir e-posta adresiyle yeni bir 'yer tutucu' niteliği oluşturmanız yeterlidir.

'Favori Renk' alanımızın gerekli olduğundan emin olacağız. E-posta giriş etiketindeki son açılı ayraçta (>) 'gerekli' yazmanız yeterlidir. Bu kadar. Şimdi, formunuzu bir değer olmadan göndermeye çalıştığınızda, bir hata mesajı üretecektir.

Bu hata mesajlarıyla ilgili gerçekten inanılmaz olan şey, kullanıcının bunları yazmak veya oluşturmak için herhangi bir kod yazmak zorunda olmamasıdır. Bir alanı gerekli kılmak için değiştirirsiniz ve işe yarar. Bununla birlikte, isterseniz bunları özelleştirmek mümkündür.

Bu, HTML5'teki formların gücüne inanılmaz kısa bir girişti. Daha fazlasını okumak isterseniz, bu bağlantıları ziyaret etmenizi tavsiye ederim.

Daha fazla okuma:

  • CSS Püf Noktaları – Anlamsal işaretleme yazalım
  • HTML5 Doctor – Semantik Hakkında Konuşalım

3.3 Kendinizi Test Edin

Önümüzdeki hafta doğum gününüz var ve ne kadar pasta hazırlamanız gerektiğini bilmek için bir kayıt formu oluşturmak istiyorsunuz. Metin düzenleyicinizi açın ve aşağıdaki alanları içeren bir form oluşturun.

  • İsim
  • E
  • Telefon numarası
  • alerjiler

Ad, e-posta ve telefon numarası alanlarının zorunlu olduğundan ve E-posta ve Telefon Numarası alanlarının 'e-posta' ve 'tel' giriş türleri ile ayarlandığından emin olun. Alerji alanı için 'polen, yumurta, kiş' değeriyle bir yer tutucu oluşturun.

Formla oynayın. Gerekli alanları boş olarak göndermeyi deneyin ve telefon numarası alanına sayısal olmayan karakterler eklemeyi deneyin. E-posta alanına, e-posta adresi olmayan bir şey girin. Ne oluyor?

4. Ortalama

Bir web sayfasına video veya ses eklemenin tek yolunun Flash, Shockwave veya SilverLight gibi bir şey kullanmak olduğu bir zaman vardı.

Bu ideal değildi. İlk olarak, bu çerçevelerin hiçbiri mobil cihazlarda o kadar iyi çalışmadı. Modern akıllı telefonlar ve tabletler dünyası için donanımlı değillerdi.

bir bilgisayar için ne kadar sıcak

Ayrıca, tescilli formatlardı. Sonuç olarak, Linux ve OS X kullanıcıları, oldukça ikinci sınıf bir deneyim elde edebilir veya hatta platformları için mevcut olmadığı için medya hizmetlerini tüketmeleri engellenebilirdi.

Son olarak, yavaş olma eğilimleri vardı. Yetersiz veya daha eski bir bilgisayardaysanız, bu çerçeveleri kullanarak video izleme deneyiminiz iyi olmaz. Flash özellikle bunun için ünlüydü.

4.1 HTML5 Video ve Sesi Nasıl Harika Hale Getirir?

HTML5, web geliştiricilerinin yalnızca birkaç satır kodla web sayfalarına video ve ses eklemesine izin vererek bunu değiştirdi. Mobil cihazlarda bir zevktir ve her modern web tarayıcısında çalışır.

Sonuç olarak YouTube, Vimeo ve Netflix gibi büyük şirketler HTML5 devriminden faydalanıyor. Neden onlara katılmıyorsun?

4.2 Codec Bileşenleri Hakkında Her Şey

Bu bölümde, web sayfalarınıza ses ve video eklemek için HTML5'in gücünü nasıl kullanacağınızı öğreneceksiniz.

Öncelikle bir uyarı ile başlamak istiyorum. HTML5 videoyu her modern web tarayıcısında kullanabilseniz de, her web tarayıcısında aynı şekilde çalışmaz. Her tarayıcı tarafından kullanılan codec bileşenleri değişiklik gösterir. Internet Explorer'da MP4 video kullanmakla sınırlısınız. Chrome biraz daha cömerttir ve WebM, MP4 ve Ogg Theora videosunu kullanmanıza izin verir. Opera biraz daha kısıtlayıcıdır ve yalnızca Theora ve WebM videosunu kullanmanıza izin verir.

Sonuç olarak, web sayfanıza video ekleme konusunda biraz akıllı olmalısınız. Öyleyse, nasıl çalıştığını görelim.

4.3 Videoyla Başlamak

Başlangıç ​​olarak, bazı açılış ve kapanış etiketleri oluşturmanız gerekecek. Video dosyalarınıza bağlantı vereceğiniz yer burasıdır. Ama önce, bir poster ayarlamak isteyeceksiniz. Bu ne anlama geliyor?

Peki, videonuzun yüklenmesini beklerken sitenizi ziyaret eden kişi videoyla ilgili bir resim görebilir. Bunu yapmak için, video etiketlerinize, bağlantı vermek istediğiniz görüntünün değeriyle birlikte bir 'poster' niteliği verin. Bu gibi görünmelidir.

Yapmak isteyeceğimiz bir sonraki şey bir geri dönüş oluşturmak. Ne anlama geliyor? Öyleyse, daha eski, daha az harika tarayıcılardan birini kullandığınızı varsayalım. Bu eski tarayıcıların çoğu HTML5 videoyu desteklemez ve bu nedenle HTML5 videoyu oynatamaz. Onlara tarayıcılarını yükseltmek isteyeceklerini ve bunu yapana kadar videonuzu izleyemeyeceklerini bildiren bir mesaj bırakmak isteyeceksiniz.

Bunu yapmak için mesajınızı video etiketlerinizin içine yazmanız yeterlidir. Başka bir şey gerekli değildir. Bunu yaptıktan sonra, buna benzeyen bir kodla kalacaksınız.

Şimdi biraz video ekleyelim. Bunu Google Chrome'da test edeceğim, bu yüzden bir MP4 filmine bağlantı vereceğim. Bunu yapmak için, bir Kaynak etiketi oluşturuyorum ve ona, eklemek istediğim videonun değerine sahip bir src niteliği veriyorum.

Sayfam artık web tarayıcımda açılmaya hazır. Gerçekten çok büyük bir filme bağlandım ve sonuç olarak açıldığında sadece posteri görebiliyorsunuz.

4.4 Ses Ekleme

Ses, video sayfamıza nasıl eklediğimizi çok anımsatan bir şekilde web sayfanıza eklenebilir.

İlk olarak, bazı ses etiketleri oluşturulur. Bu ses etiketleri bir 'kontroller' özniteliği içerir. Bu, sayfayı ziyaret eden kullanıcıya, çalınmakta olan sesi duraklatma, geri sarma ve hızlı ileri sarma yeteneği verir.

Ardından, bağlanmak istediğiniz MP3 dosyasına bir kaynak etiketi eklersiniz. Kodek uyumluluğu söz konusu olduğunda gerçekten bu kadar endişelenmenize gerek yok. En yeni web tarayıcıları MP3 ses çalma özelliğine sahiptir, ancak her ihtimale karşı bir '.ogg' ve bir '.wav' dosyası da eklemek iyi bir uygulamadır.

Son olarak, eski tarayıcılar için bir yedek oluşturabilirsiniz. Bu, videonuz için yedeği oluşturduğunuz şekilde yapılır.

Sonuç biraz buna benziyor.

Bunu web tarayıcınızda açtığınızda, biraz böyle görünmelidir.

4.5 Kendinizi Test Edin

  • Video etiketlerinizde poster bulundurmanın amacı nedir?
  • Internet Explorer'da hangi codec bileşenlerini kullanamazsınız?
  • Bazı sesleri duraklatma yeteneği isteseydim, 'ses' etiketinize hangi özelliği eklerdiniz?

Daha fazla okuma:

5. CSS3 Dönüşümleri ve Animasyonları

CSS geleneksel olarak bir web sayfasının düzenini ve tasarımını işlemek için kullanıldı. Bu hala doğrudur, ancak en son yinelemesinde, öğelerin ve görüntülerin animasyonlarını ve dönüşümlerini işleme yeteneği kazanmıştır.

İnsanlar CSS3 ile dijital bir saat oluşturmaktan tam bir Pong oyunu yazmaya kadar inanılmaz şeyler yaptılar. Hatta birisi onu Mad Men'e giriş kredilerini yeniden yaratmak için kullandı. Bu gerçekten güçlü bir teknolojidir ve ustalaştığında, web sayfanıza inanılmaz düzeyde işlevsellik eklemek için kullanılabilir.

Bu bölümde, size CSS3'e kısa bir giriş yapacağım ve sayfanıza nasıl harika efektler ekleyeceğinizi göstereceğim.

İlk önce codepen.io'ya gidin ve yeni bir kalem oluşturun. Bunu bu bölüm boyunca çalışma alanımız olarak kullanacağız.

Basitten başlayacağız ve üzerine gelindiğinde görüntüyü 3 derece döndüren basit bir görüntü dönüşümü oluşturacağız. Her şeyden önce, bir div etiketi oluşturun ve ona bir kimlik verin. Aşağıdaki örnekte, ona bir 'muo' kimliği verdim.

5.1 CSS Hover Efektleri

Bu div'e, seçtiğiniz bir resmi ekleyin. MakeUseOf için logonun bir kopyasını ekledim.

Daha sonra bazı stil sayfası kuralları yazmanız gerekecek. Aşağıdaki örnekte, görüntüye biraz yer açmak için bir üst ve sol kenar boşluğu oluşturdum. Ayrıca '#muo:hover' ile başlayan meraklı görünümlü bir stil sayfası kuralı ekledim. Bu nedir?

Bir stil sayfası kuralına, bir öğeye, bir kimliğe veya bir sınıfa ':hover' eklediğinizde, tarayıcıya, fareniz öğeyi yönettiğinde bu stili uygulamasını etkin bir şekilde söylemiş olursunuz. Oldukça havalı, değil mi?

'#muo:hover' kuralının içinde, '-webkit-transform:döndür(3deg)' yazan bir satırımız var. Tahmin ettiğiniz gibi, bu tarayıcıya o div öğesini üç derece döndürmesini söylüyor.

Ancak bu etiketin yalnızca Chrome ve Safari'de çalıştığını belirtmekte fayda var. Kodunuzun Firefox veya Internet Explorer 9 ve üzeri sürümlerde çalışmasını istiyorsanız, CSS dosyanızı aşağıdaki satırları içerecek şekilde değiştirmek isteyeceksiniz.

Şimdi, resmin üzerine geldiğinizde şöyle görünür:

5.2 Görüntüleri Yeniden Boyutlandırmak için CSS3'ü Kullanma

Öyleyse neden orada dursun? Bir görüntüyü büyütmek veya küçültmek için 'dönüştürme' yöntemini de kullanabileceğinizi biliyor muydunuz? CSS dosyamızı aşağıdaki satırları içerecek şekilde değiştirelim.

Gördüğünüz gibi, şimdi yeni bir dönüştürme kuralı ekledik, ancak bu sefer ona 'ölçek' adı verilen bir şey yapmasını söylüyoruz. Bu, bir görüntünün boyutunu artırmanın gerçekten güzel bir yoludur. İki parametre alır (bu parantezlerin arasında gördüğünüz sayılar) ve bunlar, öğenin yüksekliğini ve genişliğini ne kadar artırdığınızı temsil eder.

Koddan da görebileceğiniz gibi MakeUseOf div logosunun boyutunu %50 oranında büyüteceğim. Bunun üzerinde gezinerek bu çalışmayı test edebilirsiniz. Artık 'MakeUseOf' logosunun önemli ölçüde daha esnetildiğini göreceksiniz.

Bu, CSS3 dönüşümlerine çok nazik bir girişti. CSS3 gerçekten çok yeni olmasına rağmen, şimdi onunla çok ilginç manipülasyonlar yapabileceğinizi görebilirsiniz.

5.3 Kendinizi Test Edin

  • Gezinirken bir öğeye nasıl stil uygularız?
  • CSS3 kullanarak bir görüntüyü nasıl döndürürsünüz?
  • CSS3 kullanarak bir görüntüyü nasıl ölçeklendirirsiniz?
  • Dönüştürme yönteminizi 'translate(50px, 50px)' iletirseniz ne olur?

Daha fazla okuma:

HTML5 Kayaları - Sunum

6. Yeterince Javascript

Web tarayıcınızda komut dosyası kullanmak istiyorsanız, Javascript kullanmanız gerekir. Ne yazık ki bunun iki yolu yok. Pek çok hayranı ve pek çok kötüleyeni olan bir dildir. Diller ilerledikçe, birçok siğil vardır. Dille ilgili en dikkate değer kitabın 'Javascript: The Good Parts' olarak adlandırılmasının bir nedeni var.

Javascript'i nasıl kullanacağınızı tek bir bölümde öğretmek imkansız olacak. Buradaki amaç bu değil. Amaç, size yeterince Javascript öğreterek, bir sonraki bölümü, yani Canvas adlı bir teknolojiyi çizim ve animasyon yapmak için kullanmakla ilgili olanı anlayabilmenizdir.

6.1 Konsola Erişim

Bunu yapmak için, Google Chrome'un her kopyasında yerleşik olan Javascript konsolunu kullanacağız. Buna erişmek için herhangi bir web sayfasına sağ tıklayıp 'Elemanı İncele' seçeneğine basabilirsiniz. Ardından 'Konsol'a tıklayın. Bunu görmelisin.

Gelişmekte olan bir geliştiricinin yazdığı ilk programın 'Merhaba Dünya' programı olması gelenekseldir. Bu, 'Merhaba Dünya' ifadesini basan basit bir programdır, başka bir şey değil. Konsolunuzda 'console.log('Merhaba dünya!'); yazın.

6.2 İlk Programınız

Peki, tam olarak ne yaptık? İlk önce, 'console.log' adında bir şey çağırdık. Bu, bilgisayarda yerleşik olarak bulunan ve ona ne söylerseniz onu yazdıran bir kod parçasıdır. Daha sonra bazı parantezler ekledik ve çift tırnak içine 'Merhaba Dünya'yı ekledik. Buna 'argümanları geçirme' denir ve ilettiğimiz argüman tipine bir dizge denir. Harfler ve özel karakterler içeren bir şey yapmak istediğinizde, tek tırnak kullanmanız yeterlidir. Ancak, sayıları kullanarak herhangi bir şey yapmak istiyorsanız, aşağıda görüldüğü gibi genellikle tırnak işareti kullanmanıza gerek yoktur.

6.3 JavaScript'te Değişkenler

Ayrıca değişkenleri 'console.log' dosyasına da iletebilirsiniz. Değişkenler karmaşık gelebilir, ancak gerçekte oldukları tek şey bilgi parçalarını koymak için bir alandır. Bunlar genellikle sayılar veya harflerdir. Bunu yapmak için, 'var' anahtar sözcüğünü kullanarak bir değişken tanımlarsınız, ona bir ad verirsiniz ve ardından eşittir işaretiyle ona bir değer verirsiniz. Bu yüzden, 'merhaba' adında bir değişken yaratacağım ve ona 'Merhaba Dünya!' değerini vereceğim. Daha sonra bunu console.log'a ileteceğim.

Tırnak işaretleri kullanarak console.log'a nasıl 'merhaba' iletmediğime dikkat edin. Bunun nedeni, konsola 'merhaba'nın kendisini değil, 'merhaba'nın içeriğini yazdırmak istememdi.

6.4 İşlevler Ne Yapar?

Aynı kod yığınını tekrar tekrar yazmak biraz sıkıcı olabilir, bu yüzden fonksiyonlar yazıyoruz. İşlevler düşündüğünüzden daha kolaydır. Bunların hepsi aynı kodu yeniden yazmadan yeniden kullanabileceğimiz kod parçalarıdır. Aşağıda, 'sup' adında bir fonksiyon yarattık ve bunu parantezler kullanarak ekrana kaydeden bir argüman iletiyoruz. Konsola 'sup('Merhaba dünya!');' göndererek 'sup' diyoruz.

6.5 Bir Eylemi 'For' Döngüsüyle Tekrarlama

Aynı eylemi belirli sayıda yapmak istediğinizi varsayalım. Bu nedenle bir 'for' döngüsü kullanırdık. İlk başta korkutucu görünüyorlar, ancak onları anladıktan sonra yapmak çok kolay. 'for()' yazarak başlarsınız.

Bu parantezlerde, bir eylemi kaç kez gerçekleştirdiğimizi sayan bir değişken oluşturmak isteyeceğiz. Böylece, 'for(var i = 0;)' gibi görünen bir şey elde ederiz.

Daha sonra bir koşulu karşılamadığımı kontrol etmek istiyoruz. Bu durumda 10'dan küçük olduğunu görmek istiyoruz. Noktalı virgülden sonra 'i' yazıyoruz.<10'. Our loop now looks like this: 'for(var i = 0; i < 10;).

10'dan küçükse, onu birer birer eklemek ve sonra bir şeyler yapmak istiyoruz. Yani, 'i = i + 1' koyduk. Döngümüz neredeyse bitti: 'for(var i = 0; i<10; i = i + 1)'. Note how the last part does not have a semicolon.

Bundan sonra, bir eylem yapmak isteyeceğiz. Yani, son parantezlerden sonra birkaç küme parantezi yazıyoruz ve bunların arasına i'nin değerini console.log'a gireceğiz. Bu, dokuza kadar sayan bir sayaç oluşturacaktır.

Bakacağımız son iki programlama yapısı 'if' ifadeleri ve 'while' döngüleridir.

6.6 If İfadeleri

Bir 'if' ifadesi, belirli bir ölçüt karşılanırsa bir eylem gerçekleştirir. İnşaattaki 'for' döngülerine benzerler ve aşağıdaki gibi çalışırlar. Diyelim ki 'çizburger' adında bir değişkeniniz var ve bunun 'tasty' değerine sahip olup olmadığını görmek istiyorsunuz. Varsa, ekrana 'yum, çizburger' yazmak istiyorsunuz. Bunu yapmak için şöyle bir şey yazacaksınız.

'if(çizburger == 'lezzetli')' yazdığıma dikkat edin. Eşitliği kontrol etmek için çift veya üçlü eşittir ve bir değer atamak için tek eşittir.

6.7 Döngüler

Son olarak, bir 'while' döngüsü, bir kriter karşılanırken bir eylemi yürütür. Yani, çizburger eşit lezzetliyken 'yum, çizburger' kaydetmek istediğinizi hayal edin. Bunu yapmak için aşağıdakileri yazarsınız.

Bunun sonsuz bir döngüye gireceğini ve değişmesi muhtemel olmayan bir değer üzerinde işlem yapmaktan kaçınmanız gerektiğini belirtmekte fayda var. Bu, tarayıcınızın kilitlenmesine veya kodunuzun çalışmamasına neden olabilir.

Daha önce bahsettiğim gibi, bu Javascript'teki programlama yapılarına çok kısa bir girişti. Her ne kadar büyük olsa da bu büyüleyici konu hakkında daha fazla okumaya teşvik ediliyorsunuz.

6.8 Kendinizi test edin

  • 30'dan geriye saymak istiyorum. Bunu yapacak bir 'for' döngüsü yazın.
  • 'makeuseof' adında bir değişken oluşturmak ve ona 'awesome' değerini vermek istiyorum. Bu nasıl yapılır?
  • Çağrıldığında 'MakeUseOf Harikadır' yazan bir işlev oluşturmak istiyorum. Bu işlevi yazın.

Daha fazla okuma:

7. Yaratıcı Tuval

Canvas, Flash veya Silverlight kullanmaya başvurmak zorunda kalmadan resimler çizmenize ve animasyonlar oluşturmanıza olanak tanıyan harika bir teknolojidir. İnsanlar onu saç kurutma makinesi simülatörü ve çeşitli video oyunları da dahil olmak üzere tuhaf ve harika şeyler yaratmak için kullandılar. Bu harika ve akıl almaz derecede büyük bir teknoloji parçası, bu derste size kısa bir giriş yapacağım.

Canvas'ın yalnızca modern web tarayıcılarında çalıştığını belirtmekte fayda var. IE, Chrome veya Firefox'un eski bir sürümünü kullanıyorsanız bu bölümü izleyemeyebilirsiniz. Bu durumda, bu öğreticiyi oluşturduğum web tarayıcısı olan Google Chrome'un en son sürümünü indirmeyi düşünmelisiniz.

7.1 Canvas'a Başlarken

Her şeyden önce, web tarayıcınızı açmanız ve codepen.io'ya gitmeniz gerekecek. Yeni bir kalem oluşturun.

Şimdi, bir tuval öğesi bildirmemiz gerekecek. İki açılış ve kapanış Canvas etiketi oluşturun. Onlarda, üç özelliği iletmelisiniz. Bunlar, verdiğiniz kimlikle birlikte Canvas öğesinin genişliği ve yüksekliğidir. Daha önce olduğu gibi, bir video eklediğinizde, bir geri dönüş mesajı eklemelisiniz.

Şimdi ekrana bir şeyler çizecek bir Javascript kodu yazmak isteyeceğiz. Temelden başlayacağız ve basit bir kırmızı kare oluşturacağız.

Bir değişken oluşturacağız (buna 'demo' adını verdim) ve ardından tuval öğesini seçip onu bu değişkene atayacağız. Bunu yapmak için, document.getElementByID() işlevini kullanın ve seçmek istediğiniz öğenin kimliğini girin.

Komut dosyamızdaki ikinci satır, 'bağlam' adında başka bir değişken oluşturur ve ardından bunun üzerinde 'demo.getContext('2d')' öğesini çağırır. Bu, tarayıcıya 2 boyutlu bir görüntü üzerinde çalışacağımızı söyledi ve ardından ekrana çizim yapmak için ihtiyacımız olan gerekli işlevleri geçti.

Üçüncü ve dördüncü satırlar aslında çizimi ekrana yapan satırlardır. Üçüncü satır bir dikdörtgeni kırmızı renkle doldururken, dördüncü satır onu konumlandıran ve uzunluğunu ve genişliğini tanımlayan fillRect'i çağırır.

Yine de bu etkileyici değil. Biraz daha gelişmiş bir şey yapalım ve MakeUseOf'u yepyeni bir logo oluşturmak için Javascript ve Canvas'ın büyüsünü kullanalım.

7.2 Şekiller ve Metin

Dördüncü satırı silelim ve yerine dikdörtgenimizi sol üst köşeye yerleştiren ve tuvalimizin uzunluğu boyunca uzatan bir satır koyalım.

İlk iki argüman, şeklin x ve y eksenini nereye konumlandırmak istediğimizi tanımlar. Şimdilik bu ikisini '0' olarak ayarlayalım. Üçüncü argüman şeklin genişliğini ifade eder. Bunu '200' olarak ayarlayalım ve ardından dördüncü argümanı '50' olarak bırakalım. Şimdi biraz buna benzeyen bir şeye sahip olmalısınız.

Bu harika bir başlangıç, ancak MakeUseOf'tan hiç bahsetmiyor. Yani, biraz metin ekleyeceğiz. 'makeuseof' içeren bir değişken oluşturalım ve bu değişkeni 'MakeUseOf' olarak adlandıralım.

Daha sonra başka bir bağlam değişkeni oluşturmak isteyeceğiz. Buna 'bağlam2' adını verin ve 2d olduğundan emin olun. Metnimizi yazmak için kullanacağımız şey budur.

Metnimizin mavi renkli olmasını ve kırmızı karemizi kaplamasını isteyeceğiz. Yani, daha önce olduğu gibi, ona bir fillStyle 'mavi' vermek isteyeceğiz. Şimdi, metnimizin özelliklerini seçeceğiz. 20 piksel büyüklüğünde, kalın biçimli olmasını ve Arial yazı tipi kullanmasını istiyoruz. Bağlam2'de yazı tipini çağırırız ve ona 'bold 20px arial' değerini atarız.

Bu metnin önceki kırmızı kutumuzu kaplamasını istediğimiz için, bağlam2'de 'textBaseLine' öğesini çağırmamız ve ona bir üst değeri vermemiz gerekiyor. Bu tamamlandıktan sonra, bağlam2'de 'fillText' diyoruz ve metnimizi içeren değişkeni ve metnimizi yerleştirmeyi düşündüğümüz x ve y koordinatlarını iletiyoruz. Kodumuzun nihai sonucu şöyle bir şey.

Kod tarafından üretilen görüntü şuna benzer.

7.3 Tuval Üzerine Bir Kelime

Bu, Canvas'a inanılmaz derecede temel bir giriş olsa da, bunun aynı zamanda inanılmaz derecede büyük bir teknoloji olduğunu ve inanılmaz derecede güçlü bir önyükleme teknolojisi olduğunu anlamalısınız. Bu kılavuz, bu yeni teknolojiyi kullanarak grafik oluşturmaya bir giriş olarak hizmet etti.

telefonumdaki ışık nerede

7.4 Kendinizi Test Edin

  • Oluşturduğunuz resme şu sloganı ekleyin: 'Şimdiye kadarki en iyi teknoloji sitesi!'
  • On yineleme için çalışan bir 'for' döngüsü oluşturun. Çiziminizi tuvalde her seferinde bir piksel olacak şekilde hareket ettirip ettiremeyeceğinize bakın.
  • Çiziminizi bir fonksiyona sarın. Aramazsan ne olur?

Daha fazla okuma:

8. Sonraki Nerede?

HTML5'te bulunan yeni teknolojilerle ilgili inanılmaz kısa rehberimi okuduğunuz için teşekkür ederim. HTML5'in geleceğin teknolojisi olduğu yadsınamaz. Yazması kolay ve ölçülemeyecek kadar güçlü olduğu için çoğu teknoloji tarafından benimsenmektedir. İnsanlar onunla her zaman inanılmaz şeyler yapıyorlar ve gelecekte o insanlardan biri olacağınızdan hiç şüphem yok. HTML5'in vahşi ve harika dünyasına yolculuğunuzun bir parçası olmaktan onur duyuyorum.

Öğrenmeye devam etmeni rica ediyorum. Kodlamaya devam. Seviye atlamaya ve gelişmeye devam edin ve hiçbir zaman bu kısa kılavuzda tanıtılan teknolojileri harika ürünler yaratmak için kullanacaksınız.

Paylaş Paylaş Cıvıldamak E-posta Windows 11'e Yükseltmeye Değer mi?

Windows yeniden tasarlandı. Ancak bu sizi Windows 10'dan Windows 11'e geçmeye ikna etmek için yeterli mi?

Sonrakini Oku İlgili konular
  • Wordpress ve Web Geliştirme
  • HTML5
  • uzun biçim
  • Uzun Biçimli Kılavuz
Yazar hakkında Matthew Hughes(386 Makale Yayınlandı)

Matthew Hughes, Liverpool, İngiltere'den bir yazılım geliştiricisi ve yazarıdır. Elinde bir fincan koyu siyah kahve olmadan nadiren bulunur ve Macbook Pro'suna ve kamerasına kesinlikle bayılır. Blogunu http://www.matthewhughes.co.uk adresinde okuyabilir ve twitter'da @matthewhughes adresinden takip edebilirsiniz.

Matthew Hughes'dan Daha Fazla

Haber bültenimize abone ol

Teknik ipuçları, incelemeler, ücretsiz e-kitaplar ve özel fırsatlar için bültenimize katılın!

Abone olmak için buraya tıklayın