Flash'tan HTML, CSS ve JavaScript'e Geçiş

2000'lerde, Flash kullanılarak oluşturulan web sitelerini görmek olağandı. Bir web sitesinin kaynağını görüntüleyerek, genellikle çok az HTML ve gömülü bir SWF dosyası görürsünüz. Bu birkaç şey demekti. İlk olarak, tarayıcı yerel olarak Flash'ı desteklemiyordu, bu yüzden Flash eklentisini indirmeniz gerekiyordu. Tarayıcılar, içeriği okumak için SWF'ye girmeyi zor buldu. Diğer şeylerin yanı sıra, bunun SEO ve erişilebilirlik üzerinde zararlı bir etkisi oldu.

2007 yılında iPhone piyasaya sürüldü. Flash'ı desteklemiyordu. 2015 yılında Google, tüm YouTube videolarını HTML5'e taşıdı. Temmuz 2017'de Adobe, 2020 yılına kadar Flash üzerinde çalışmayı bırakacağını resmen duyurdu. İnsanlar Flash'ı HTML, CSS ve JavaScript'in o sırada yapamadığı şeyleri yapabildiğinden kullandı. Web standartlarının ne kadar ilerlediğini (ve ne olacağını) görmek inanılmaz .

Daha önce sadece Flash ile mümkün olan birçok şeyi bugün yapabiliriz. Sadece bu değil, bunu çok daha erişilebilir ve performanslı bir şekilde yapabiliriz. Flash'ın yapabileceği bazı çığır açan şeyleri ve bugün bunları nasıl yapabileceğimizi gözden geçireceğim.

Yasal Uyarı : Flash'ı seviyorum ve her zaman kalbimde bir yeri olacak, ama en azından benim için zamanı geçti. Merak ediyorsanız: Flash'ta, özellikle oyunlar için hala çalışan çok sayıda arayüz ve motor var ve bu makale, orada çok alakalı olan bazı sorunları ele alıyor.

Video

Flash'ın müjdelediği harika şeylerden biri, daha 2002'de temel destek sunan videoydu. <video> etiketinin Chrome, Safari ve Firefox'ta kullanılmaya başlaması 2009'a kadar sürdü. Ayrıca, Internet Explorer (IE) 8 <video> etiketini desteklemiyordu ve IE 9 piyasaya sürüldüğü 2011 yılına kadar desteklenmiyordu.

Flash, <object> etiketini şu şekilde kullanırdı:

 <object class codebase="https://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,16,0" width="320" height="400"> <param name="movie" value="filename.swf"> <param name="quality" value="high"> <param name="play" value="true"> <param name="LOOP" value="false"> <embed src="video-filename.swf" width="320" height="400" play="true" loop="false" quality="high" pluginspage="https://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></embed> </object>

En güzel kod değil, ama işe yaradı.

En popülerleri MP4, Ogg ve WebM olan tarayıcılar arasında farklı video biçimlerinin farkında olmak önemli olsa da, şimdi basitçe <video src="filename.mp4" /> yazabiliriz. İşleri bir adım daha ileri götürerek, yalnızca <video> etiketini desteklemekle kalmaz, aynı zamanda geri dönüşler ve faydalı alternatifler de sunmak mümkündür:

 <video width="320" height="400"> <source src="filename.mp4" type="video/mp4" /> <source src="filename.webm" type="video/webm" /> <source src="filename.ogv" type="video/ogg" /> <!-- Flash fallback --> <object type="application/x-shockwave-flash" data="flash-player.swf?videoUrl=filename.mp4" width="320" height="400"> <param name="movie" value="flash-player.swf?videoUrl=filename.mp4" /> <param name="allowfullscreen" value="true" /> <param name="wmode" value="transparent" /> <param name="flashvars" value="controlbar=over&image=placeholder.jpg&file=flash-player.swf?videoUrl=filename.mp4" /> </object> <!-- Text Fallback --> <p>No video support found. Please download the video below, or upgrade your browser: https://browsehappy.com/</p> </video> <ul> <li><a href="linktomovie.mp4">MP4 format</a></li> <li><a href="linktomovie.ogv">Ogg format</a></li> <li><a href="linktomovie.webm">WebM format</a></li> </ul>

Video Arka Planı

YouTube <video> etiketini kullandığından ve bir API'ye sahip olduğundan, tam ekran arka plan videosu oluşturmak mümkündür. Aşağıdaki YouTube video bağlantı kodunu alın, örneğin:

 https://www.youtube.com/embed/iMhq63PX8cA?controls=0&showinfo=0&rel=0&autoplay=1&loop=1&mute=1

Farklı parametreleri kullanarak videonun davranış şeklini değiştirmek mümkündür.

 controls=0 Hides the controls. showinfo=0 Hides extra information. rel=0 Hides related content. autoplay=1 Auto plays the video when the site is loaded. loop=1 Loops the video. mute=1 Mutes the sound.

Tam liste için IFrame Player API'sini kontrol edin.

CSS kullanarak videoyu yerinde sabitlenecek ve ekranı dolduracak şekilde ayarlayabiliriz.

 .video { background: #000; position: fixed; width: 100%; height: 100%; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; pointer-events: none; }

Medya sorgularını kullanarak videoyu ortalanacak şekilde ayarlayabilir ve doğru en boy oranını korumaya yardımcı olabiliriz.

 @media (min-aspect-ratio: 16/9) { .video { height: 300%; top: -100%; } } @media (max-aspect-ratio: 16/9) { .video { width: 300%; left: -100%; } }

İşte Bay Smashing Magazine'in kendisinin bir konuşma sunduğu bir araya getirilen örnek:

Etkileşim ve Oyun

Flash'ın mükemmel olduğu başka bir şey de etkileşim ve oyundu. Popüler web sitesi Miniclip 2001 yılında kuruldu ve çok çeşitli Flash oyunlarına ev sahipliği yaptı. 2008'de değeri 900 milyon sterlinin üzerindeydi ve bugün hala devam ediyor.

SADECE BİR REFLEKTÖR

JUST A REFLEKTOR, Flash'ın yeteneklerine rakip olan ve hatta onları aşan etkileşimli bir müzik videosudur. Çeşitli web teknolojilerinin kullanımıyla, artık bir mobil cihaz kullanarak videoyla etkileşime geçmenin yanı sıra bir noktada web kameranızı kullanarak müzik videosunda gerçekten kendiniz görünebilmeniz mümkün!

Küp Çarpması

Bugün çevrimiçi olarak Cube Slam gibi bazı harika web tabanlı Chrome deneyleri var. Cube Slam, WebRTC'yi (açık bir web teknolojisi) kullanan ve tarayıcı içinde görüntülü sohbet etmenize ve oyun oynamanıza izin veren bir oyundur. Flash, görüntülü sohbet için yoğun bir şekilde kullanılmasına rağmen, WebRTC'ye kıyasla bir takım dezavantajlara sahipti: Flash eklentisine güveniyordu, bir medya sunucusu gerektiriyordu ve çeşitli güvenlik etkileri ve düşük performansı vardı.

HTML5 Oyun Motorları

Bir dizi HTML5 ve JavaScript oyun motoru vardır. Bu sonraki örnek, canvas ve WebGL kullanır. WebGL (Web Grafik Kitaplığı), <canvas> etiketi içinde etkileşimli 2B ve 3B grafiklere izin veren JavaScript'te yerleşik bir API'dir.

Good Boy Digital'in projeyle ilgili kendi gönderisinde belirtildiği gibi (örneğin yaratıcıları):

"Star Wars Arcade, HTML5 ve WebGL teknolojileriyle mümkün olanın sınırlarını gerçekten zorluyor. Bu, bir uygulama indirmeye gerek kalmadan hem masaüstü hem de mobil tarayıcılarda sorunsuz çalışan tek bir yapının oluşturulmasına olanak tanır; herkesin anında keyfini çıkarabilmesi için tüm cihazlarda 'uygulama benzeri' bir deneyim. Parola yok, App Store yok, sadece URL'ye basın ve oynayın!"

— goodboy digital, Star Wars Arcade Vaka Çalışması

Özellikle şu kısma bayılıyorum: "Sadece URL'ye basın ve oynayın!" Web ile ilgili en eski “Vay canına” anılarımdan biri, 1999'da kendi web siteme sahip olmak ve bu URL'yi web'e bağlı herhangi bir bilgisayara yazıp görüntüleyebilmekti. Bunun gerçekten mümkün olması bana kesinlikle inanılmaz geldi (ve beni bugüne kadar şaşırtmaya devam ediyor!).

Tarayıcı Desteği

Flash'ta bugün hala geçerli olan bir şey, özellikle de ekstra karmaşıklığı nedeniyle bir oyun oluşturmanın avantajlarından biri tarayıcı desteğidir. Tarayıcı desteği bu günlerde genellikle oldukça iyidir ve Kullanabilir miyim, belirli bir spesifikasyon için tarayıcı desteğinin durumu hakkında hızlı bir şekilde bilgi edinmemize yardımcı olabilir. Ancak yine de sorunlara neden olabilecek farklılıklar vardır. Bu nedenle, yalnızca birlikte çalıştığınız Flash eklentisi ile yüklenen tarayıcıları desteklemekte sorun yaşıyorsanız, tarayıcılar arası herhangi bir sorunla karşılaşmazsınız.

tipografi

Flash başlangıçta bir animasyon aracı olarak tasarlandı. Bu nedenle, tipografi ile çeşitli sınırlamaları vardı.

Flash'ın bir piksel ızgara sistemi vardı. Tipografi ızgaraya X:100.3 :100.7 yerleştirilseydi ve bu nedenle piksel ızgarasına göre hizalanmamış olsaydı, bulanık görünürdü.

Sonuç olarak, piksel yazı tiplerinin ızgarada oturdukları ve net kaldıkları için yararlı olduğunu buldum. Buradaki diğer bir sınırlama, 8 piksellik bir yazı tipi kullanıp 10 piksele ayarladıysanız, ızgara ile hizasının dışına çıkması ve yine bulanık olması olacaktır.

Neyse ki bugün HTML ve CSS'de bize yardımcı olacak bir dizi araca sahibiz. Yazı tiplerini px (piksel) cinsinden mutlak bir birim olarak ayarlayabiliriz veya bu günlerde daha yaygın olarak, duyarlı web tasarımına yardımcı olması için ems ve rems kullanabiliriz (buna daha sonra değineceğim).

Flash ve tipografi ile ilgili bir diğer sorun da yazı tipleriydi. Cihazda bir yazı tipi yoksa, bir yedek yazı tipi sağlanır. Flash'ta bunu atlatmak için yazı tipini .swf dosyasına gömebilirsiniz. Ancak bunu yaparak dosya boyutuna ve dolayısıyla SWF'nin indirilmesi ve görünmesi için gereken süreye eklediniz.

Bununla birlikte, Flash ile mümkün olan Ölçeklenebilir Inman Flash Değiştirme (sIFR) idi. sIFR, HTML metninin Flash ile değiştirilmesine izin verdi. Bundan önce, özel yazı tiplerini kullanmak için resimler kullandık. Ancak, görüntüleri kullanmak seçilebilir metne izin vermiyordu ve bu, görüntüleri manuel olarak oluşturmanız gerektiği anlamına geliyordu. Geliştiriciler, SIFR'den yola çıkarak Cufon'u buldu. Cufon, bir yazı tipinin SVG ve VML sürümünü kullanarak Flash kullanımından kaçındı. sIFR'den daha hızlıydı ve Flash eklentisi gerektirmiyordu; ama yine bu teknikle metin seçmek mümkün değildi.

Bugün, CSS @font-face kuralına ve bir dizi standart web yazı tipine sahibiz:

• Google Yazı Tipleri
• daktilo
• yazı tipi sincap

Chrome ve Firefox'ta (ve umarım yakında Safari'de), CSS'de font-display vardır. Özel bir yazı tipi kullanıyorsanız, tarayıcı varsayılan olarak özel yazı tipini almak için bekleyecektir. Özel yazı tipini alamazsa, bir yedek yazı tipi kullanır (hız tarayıcılar arasında değişir, ancak genellikle 3 saniyedir). Bu, görünmez metin (veya FOIT) flaşı olarak bilinir. Bu senaryoyu iyileştirmek için aşağıdakileri kullanabiliriz:

 @font-face { font-display: swap; }

swap kullanarak, metni hemen yedek yazı tipini kullanarak göreceğiz. Özel yazı tipi yüklendiğinde, tarayıcı bunun için yedeği değiştirir. Bu şekilde, kullanıcı içeriği kullanılabilir olduğu anda okuyabilir.

Animasyon

Flash'ın çok iyi yaptığı şeylerden biri ara doldurmaktı. Ara doldurma, öğeleri canlandırmak için kullanılır. Flash'ta, bir animasyon karesinde bir öğe oluşturabilir, bu animasyon karesini zaman çizelgesi boyunca çoğaltabilir ve ardından bir ara ekleyebilirsiniz.

HTML ve CSS ile aynı animasyonu @keyframes , transform ve animation kullanarak uygulayabiliriz.

 <div class="box"></div>

 .box { width: 100px; height: 100px; background-color: #333; } @keyframes move { from { transform: translateX(0); } to { transform: translateX(200px); } } div { animation-duration: 3s; animation-name: move; animation-iteration-count: infinite; animation-direction: alternate; } 

Chrome Geliştirici Araçları ile Chrome Dev Tools → Cmd + Shift + P → Animation seçeneğine giderek animasyonu inceleyebilir ve ayarlayabiliriz.

Animasyonla uğraşırken ortaya çıkabilecek olası performans sorunlarının hatalarını ayıklamak da mümkündür. Chrome Geliştirici Araçları'nda bir "Performans" sekmesi vardır. Bunu ve ardından “Kaydet” daire simgesini tıklayarak bir dizi faydalı bilgiyi görebiliriz. Bu teknik, Mind'ın 2012-13 Yıllık Raporunu, özellikle de web sitesinin Mind mağazalarının yerlerini gösteren animasyonlu daireler içeren bir haritanın bulunduğu bölümünü oluşturduğumda bana çok yardımcı oldu. Başlangıçta, harita bölümü başlangıçta yüklendi ve bu da yeniden boyama sorunlarına neden oldu. "Performans" sekmesini kullanarak bunu belirleyip güncelleyebildim, bu nedenle harita yalnızca görüntülendiğinde canlandırmaya başladı.

Vektör Grafikleri

Web, dosya boyutunun dikkatli bir şekilde değerlendirilmesinden yararlandı ve hala da büyük fayda sağlıyor. 2000'lerin başında, web çoğunlukla yavaş çevirmeli modemlere sahip masaüstü bilgisayarlarda görülüyordu. Basit bir görüntünün yüklenmesi saniyeler hatta dakikalar alabilir. Buna yardımcı olmak için Flash, vektör grafiklerini yoğun bir şekilde kullandı. Uygun olduğunda, JPEG veya GIF görüntüleri yerine vektör grafiklerinin kullanılması, dosya boyutunu önemli ölçüde azalttı ve böylece web üzerinden daha hızlı yüklendi.

Son birkaç yılda ve özellikle Sara Soueidan sayesinde, ölçeklenebilir vektör grafikleri (SVG'ler) web'de giderek daha yaygın hale geldi. SVG, web için vektör grafikleri oluşturmamızı sağlayan XML tabanlı bir işaretlemedir. Animasyonla son derece iyi çalışıyor ve bundan yararlanan bazı web siteleri oluşturma zevkini yaşadım: Mind rapor web sitesi (daha önce bahsedilen) ve İngiltere Ne Kadar Temiz? Sara'nın Twitter'da bahsettiği! Teşekkürler Sara!

Duyarlı Web Tasarımı

Bugün Flash'ta bir web sitesi oluşturmanın ana tuzaklarından biri, medya sorgularının olmamasıdır. Günümüzde mobil ve tablet kullanımı masaüstünü geçmiş durumda. En iyi deneyimi yaratmak için tüm bu cihazlardan erişilebilen bir web sitesi oluşturmalıyız. Birçok cihazda Flash hiç yüklenmeyecek ve yüklense bile, büyük olasılıkla görüntü alanının genişliğini ihlal edecek veya ölçeklenip kullanılamaz hale gelecek.

Medya sorgularını kullanarak içeriğe yanıt veren bir düzen oluşturabiliriz. İşte bir örnek:

 <div class="someContent"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est excepturi enim id ratione blanditiis voluptate dolore necessitatibus culpa maxime eius assumenda eveniet dolores odit sunt repellat, rerum amet delectus vel.</p> </div>

 .someContent { color: green; } @media screen and (min-width: 400px) { .someContent { color: yellow; } } @media screen and (min-width: 600px) { .someContent { color: red; } } 

ActionScript ve JavaScript

ActionScript, Flash'ta kullanılır ve bu nedenle, Flash eklentisini gerektirmesi bakımından daha önce bahsedilen SWF dosyalarının aynı tuzağına sahiptir. JavaScript ise tüm modern tarayıcılarda kolayca bulunur.

Her ikisinde de bir değişken ayarlama örneğine ve farklılıklarına bakalım:

 var x:Number = 42;

 var x = 42;

ActionScript ile değişkenin bir sayı olduğunu beyan ederiz. Değişkene başka bir şey atanırsa, bir hata alır. JavaScript gevşek yazılmıştır, bu, değişkeni bir dize gibi başka bir şey olarak atayabileceğimiz anlamına gelir:

 var x = '42';

JavaScript'te bir sayı olup olmadığını kontrol etmek istersek typeof(x); işlevini kullanabiliriz. , ve bu "sayı" çıktısını verir. Başka bir seçenek de bir function oluşturmak ve bunun bir sayı olup olmadığını saptamak için isNaN kullanmaktır:

 function isNumber(value) { if (isNaN(value)) { return value + ' is not a number.'; } return value + ' is a number.'; } console.log(isNumber(42)); // "42 is a number." console.log(isNumber('forty two')); // "forty two is not a number."

İşbirliği

HTML, CSS ve JavaScript (ve diğer birçok kodlama dili) ile Git ve GitHub, işbirliğini son derece kolaylaştırır. Örneğin, Smashing Magazine'in “Yazar Şablonu”nun HTML'sini GitHub üzerinden düzenlemek istersem “Çatal” düğmesine tıklayabilirdim. Bu, kendi adım altında dosyaların (depo olarak da bilinir) bir sürümünü oluşturur. Daha sonra istediğim değişiklikleri yapabilir ve bir çekme talebi gönderebilirim. Bu, Smashing Magazine'deki sahibine, çekme talebimi gözden geçirme ve kabul etme veya reddetme yeteneği verecektir. Kabul edildiğinde, kod ana depoya gider.

Bu şekilde çalışmak için çok sayıda harika neden vardır: Çalışmanızın her zaman bir yedeğine sahipsiniz; çalışmanızın önceki sürümlerine dönebilirsiniz ve işbirliği çok kolay hale gelir. Birisi web sitesinin bir bölümünde veya CSS veya JavaScript üzerinde çalışıyor olabilir ve her bir ekip üyesi işini bitirdiğinde, değişiklikleri gözden geçirebilir ve gerektiği gibi uygulayabilirsiniz.

Aynısını Flash ile de deneseydik, her seferinde bir .fla dosyası kaydedip göndermek çok daha zor olurdu. Aynı .fla üzerinde birden fazla kişi çalışacak olsaydı, işler çok kafa karıştırıcı olabilirdi. HTML, CSS ve JavaScript ile kod üzerinde bir “fark” yapmak mümkündür, bu da kodu karşılaştırmamıza ve incelememize olanak tanır. Hatta belirli kod parçalarını seçebilir, getirebilir veya daha fazla inceleme ve çalışma için yorum yapabiliriz.

Çözüm

Flash, web siteleri oluşturmaya başlamamın nedenlerinden biriydi. Birçok alanda öncülük etti ve bu, insanların onunla harika şeyler yaratmasına yol açtı. Yıllar geçtikçe, web'i büyük ölçüde ileriye taşıdı. Adobe'nin Flash desteğini bıraktığına dair resmi duyurusu endişeleri artırıyor. Flash kullanan milyonlarca web sitesinin kaybolması büyük bir utanç olurdu. Kaynak Flash ve Shockwave'i açmak için bir dilekçe var. Umarım sonsuza kadar kaybetmeyiz. Bazı harika ve tuhaf zamanlarımız oldu. Sizi, bahsettiğim "tuhaf"ın bu klasik örneğiyle baş başa bırakıyorum:

Şarkıya eşlik etmek isterseniz şarkı sözleri burada.