2018 için 2004 Flash web sitesini yeniden inşa edin

1999'da, Web Studio 1.0 kullanarak ilk web sitemi kurdum. Web Studio bir grafik kullanıcı arayüzüydü. Yeni oluşturmak mümkündü Açılış sayfası ve elemanları içine sürükleyin ve bırakın. Daha sonra ücretsiz bir etki alanı kurdu ve Geocities ve Voila ile barındırma! Bir web sitem vardı. 2004'e hızlı ileri git, daha ileri gitmek istedim ve böylece, diğerleri gibi, bir grup web sitesi oluşturmaya başladım.

• 12 Ortak JavaScript soruları cevaplandı

O zamandan beri çok fazla değişti. Bu makalede, hafıza şeridi aşağı bir yolculuk yapacağım ve bugün web için aynı siteyi yeniden yaratacağım.

Dosyaları alın Bu eğitim için.

Haydi başlayalım! Öncelikle, genellikle benim için her yeni proje MKD ile başlar ve ardından G init. Beni tanıyan kişiler için, bir noktada, muhtemelen size dotfiles'ten bahsettim. DotFiles, basitçe bir nokta ile başlayan dosyalardır (bu bağlantıyı gerçekten çok şaşırtıcı derecede uzun sürdü!) Ve bir dizi amaç için kullanılabilirler. En sevdiğim dotfiles'imden ikisi .aliasas ve .fonksiyonlar. Ayrılmama izin ver ...

Bash'de, MKDIR komutunu kullanarak yeni bir dizin oluşturmak mümkündür, sonra daha sonra Dizin CD'sini yeni oluşturduğunuz dizine değiştirmeniz gerekir. .Functions dosyamda sahip olduğum kodu kullanarak, MKD'yi çalıştırmak artık mümkün. Bu sadece yeni dizini oluşturmaz, aynı zamanda bu dizine de değiştirilecektir. Bu ilk başta overkill görünebilir, ama bu mikro kazançları seviyorum. Zamanla, özellikle bu komutları günde birkaç kez çalıştırırsanız, yakında çok fazla tasarruf süresine kadar eklerler.

 # Yeni bir dizin oluşturun ve girin
fonksiyon mkd () {
    MKDIR -P "$ @" & amp; & amp; CD "$ _";
} 

Bir sonraki komut, GIT'e aşina olursanız, projeyi kontrol etmemizi sağlayacak olan GIT INIT'dir. Alışveriş listeleri için bile git çok kullanıyorum! Yani, her seferinde GIT yazmak zorunda kalmaktan ziyade, alias g = "GIT" ekleyerek .aliases tekrar benim için güzel, küçük bir zaman koruyucusudur.

Bugünlerde, farklı çerçeveler ve teknolojilerden oluşan bir pethora var. Bu proje için, işleri basit tutmak istiyorum. HTML, CSS'yi kullanacağım ve gerekirse bir javascript serpin. Öncelikle, Hadi HTML işaretlemesini oluşturalım. Fakat bekle! Duralım ve bir dakika düşünelim.

Bazen geliştiriciler, kendim dahil, bir proje için süper heyecanlı olabilir ve derhal çatlamak ister ve klavyenin kod yazması için doğrudan gidin. Ancak, bunun genellikle en iyi yaklaşım olmadığını buluyorum. Önce projenin aklında genel bir bakış almayı seviyorum. Bunu yaparak ve bir bütün olarak projenin çok daha net bir vizyonuna sahip olmanız, çok daha iyi bir karar verme için izin veriyorum. Örneğin, doğrudan koda daldıysam, daha sonra geri dönmem ve refactoring yapacağım bir sorunla karşılaşabilirim. Bu yaklaşımla birkaç farklı sonuç var. İlk olarak, kodu tamamen silmek ve tekrar başlatmak zorunda kalabilirim; İkincisi, bu moda devam ediyorsa, gelecekte performans kaybına neden olmak için gelecekte zorlaştıran 'Spagetti Kodu' ile sonuçlanabilir. Üçüncüsü, bazen iyi çalışır ve daha iyi bir kodla bitirirsiniz, ancak birinci ve ikinci sonuçların çok daha yaygın olduğunu söylemeye meyilliydim.

Bu proje oldukça küçük; Birkaç sayfaya sahiptir: ev, haberler, konser, medya, albümler, bağlantılar ve bu sayfalar arasında ortak parçalar: Üstbilgi, navigasyon, tipografi içeriği, listeler, görüntüler, videolar. 2004 yılında başlangıçta flash siteyi oluştururken, testler açısından işler çok daha basitti. Site flaş, bir masaüstü bilgisayarda bir fare ve klavye ile flaş için inşa edilmiştir. Bu günlerde, mobil ve tablet internet kullanımı, masaüstü bilgisayardan daha yaygındır ve bu eğilim yükselmeye devam ediyor.

Bunu, siteyi kimin gördüğü için daha iyi bir deneyim haline getirmek için, projenin başlangıcında bir kaç şey dikkate alacağım ve bir mobil ilk strateji kullanacağım. Bunu yapmak için, tekrar, herhangi bir kod yazmadan önce, eski moda bir kalem ve kağıdı çıkaracağım. İlk önce sitemapı yazıyorum; Bunu yaparken, geliştirilebileceğini düşündüğüm bazı önemli alanlar var. Örneğin, orijinal sitem grubun albümlerinin her biri için farklı sayfalardan oluşuyordu. O zamanlar üç albümü vardı ve navigasyonda çok uygun. Şimdi çok daha fazla ve potansiyel olarak daha fazlası var, bu yüzden zaten aklımda, siteyi daha fazla gelecek kanıtı (bir oldie ama bir geadie de Dan Cederholm'dir. Kurşunsuz Web Tasarımı ).

Şimdi Site Haritası ve sayfalarda kaba bir fikrim var ve Sayfalar, bir miktar düşük tel kafesleri oluşturmaktır. Birçok duyarlı site oluşturan önceki deneyimlerden, mobil ilginç tasarım zorlukları ile birlikte gelir, yani navigasyonun nasıl oluşturulacağı, ancak insanların sitenin ana içeriğini görüntülemelerini sağlar. Hepimizin Sevgiler / Nefret için yetiştiğimiz tasarım sonucuyla birlikte gideceğim: Burger menüsü yaklaşımı. Ancak, biraz büküm ekleyeceğim. Orijinal sanat eseri Kuşlar, bu yüzden standart burger menü simgesi yerine, menüyü etkinleştirecek ve menünün etkin olup olmadığını göstermenin bir yolu olarak kanatlarını açıp kapatacak kuş sanatını kullanacağım.

Aklımdaki şeyler şimdi, insanların sitenin etrafında nasıl gezinebileceği konusunda bir fikirle şekillenmeye başlıyor. Şimdi sayfaların nasıl görünebileceğini düşüneceğim. Ana sayfadan başlayarak, tipografi içeriği ile oldukça basittir. Sonraki, Haberler - Yine Tipografi içeriği, potansiyel olarak görüntüler ve daha sonra eski yazıları görmek için bir tür navigasyon. GIGS - Bilet satın almak için bağlantılarla yaklaşan kongrenlerin bir listesi. Medya için, önceki siteye baktığımızda, 'resimler' ve 'videolar' iki farklı bölüm olarak vardı, ancak burada iyileştirme için yer var ve 'medya' olarak birleştirilmesi. Albümler, Ah, Evet Albümler - Şimdi bu, bu tür bir şeyin ödediği yer. Görüyorsunuz, albümler sayfasının tipografi ve bir görüntüye sahip olup, eski mesajları görmek için bir tür navigasyona ihtiyaç duyacaktır. Ses tanıdık mı? Haber sayfası ile aynı yapıya çok benziyor! Bu üst düzey genel bakışına sahip olmak, daha granüler, bir bileşenden bir şeyleri arayabilir ve düşünebilirim, bazıları bile söyleyebilirim atomik tasarım Seviye, Brad Frost'un çalışmalarına aşina olursanız.

Şimdi sitenin daha küçük cihazlar ve yeniden kullanılabilir öğeler üzerinde nasıl çalışacağına dair bir fikrim var, işlemi daha büyük cihazlarla tekrarlama zamanı. Site oldukça basit ve zaten mobil için oluşturulan tel kafesiyle, daha büyük cihazların oldukça benzer olduğunu görüyorum - şimdi dışında biraz ekstra odamız var, böylece içerik alanlarını genişletebilir ve ayrıca bir yan gezinmeyi genişletebiliriz.

Yan navigasyon, ofsetten en çok heyecanlıyım, sitenin bitidir. Grubun orijinal sanat eserinden ilham alarak, navigasyonu yaprakları olan bir ağaç silueti olarak inşa ettim. Her yaprak, sitenin farklı bir sayfasına bağlı bir düğme idi. Ayrıca, kaydırırken ve yapraktan uzaklaştığınız gibi, yaprak canlandırır, yere düşer. Flash bunda harikaydı; Tweening olarak adlandırıldı. Bir öğeyi zaman çizelgesindeki arayüzde bir anahtar karesinde ayarlayabilir, zaman çizelgesi boyunca başka bir anahtar kare oluşturun ve öğenin takip etmesi için bir yol ekleyebilirsiniz. Biraz daha fazla, yolları, süre ve düşen yaprakların hızını değiştirerek, çok memnun kaldığım bir şeyle bitirdim.

Ama şimdi flaş kullanmıyoruz, peki bunu nasıl yapıyoruz? Oldukça sık CODEPEN veya JS bin'e atlayacağım. Farkında olmayan, codepen ve JS bin sizin için, hızlı bir şekilde kodlamanızı ve kaydetmenizi sağlayan çevrimiçi hizmetlerdir. Kodepen'i daha fazla tasarım LED'i olarak görme eğilimindeyim ve JS Bin daha JavaScript odaklandı. Bu proje için birkaç nedenden dolayı ağaç navigasyonunu oluşturmak için codepen kullanacağım. İlk önce, sitenin ana mobil versiyonunu oluşturmaya başlamak istiyorum ve aslında bunu yaparak, eğer işler zaman kritik olsaydı, bir MVP ile bitebilirim. Siteye, güzel yaprak navigasyonunu ve animasyonunu ekleyerek yapılabilecek geliştirmeler olmasına rağmen, bu üretmek daha uzun sürecektir. Ağaç navigasyonu için CodePen'de çalışmanın bir avantajı, ana bölge ve kod tabanından izole edilir. Eğer işler tamamlamakla zorlaşırsa, nerede olduğumu, ana site yapısını taşıyabiliyorum ve sonra navigasyona geri dönebilirim. Bazen bunu bir problemden uzaklaşırken, hatta uyuduğumda, bilinçaltım bunu düşünmeye devam edebilir. Sonra soruna geri döndükten sonra, bir çözüm kendini sunar.

SVGS! SVG'leri seviyorum. Önceden Flash'ta, illüstratördeki yaprak varlıklarını çektim. Şaşırtıcı derecede orijinal sanat eserleri ile çalışan bir CD vardı ve onu açabildiler. Bugünlerde eskiz kullanıyorum ve dosyayı açmak için harika bir iş yaptı. Şimdi yaprak varlıklarının tümü SVG'ler olarak ihraç edilmeye hazırım. Neden SVGS? Çok sebep var. Bir jpg veya bir retina cihazında GIF kullanıyor olsaydık, daha büyük varlıklar sağlamamız gerekiyor, aksi takdirde bulanık görünüyorlardı. Ayrıca, SVGS ile CSS kullanabiliriz. Bu harika ve başka bir görüntü varlığı oluşturmak için bir miktar CSS kullanarak SVG'nin rengini değiştirmemize izin verir. Bu, bakımı daha kolay ve bir bonus olarak da daha performans gösterir. SVG'lere aşina değilseniz, onları okumanızı şiddetle tavsiye ederim ve iyi arkadaşımdan inanılmaz iş, Sara Soueidan .

Ağaç ve yaprak varlıkları şimdi yerinde, eklenecek son şey animasyondur. Bununla alabileceğim birkaç yaklaşım var. Biri yaptığım orijinal flaş yoluna doğru kalmak olacaktır. Bu, yolların çoğaltılması ve SVG kullanarak ve daha sonra potansiyel olarak daha fazla SVG, yollar ve animatemotion ile çalışmak anlamına gelir. Bu fikri nostaljik bir bakış açısıyla gibisim, ancak CSS yıllar içinde çok fazla şey geldi ve şimdi bizim emrinde dönüşüm ve tercüme ettik, bu yüzden bu başka bir yaklaşım olabilir. İşleri bir adım daha ileri götürün, düşen yaprakları randomize edecek bazı javascript ekleyebilirdik.

Her iki seçenek de iyi geliyor, ancak daha fazla CSS-LED rotasına doğru sallanıyorum. İşte Comepen kullanmanın bir başka yararı, hızlıca gidip bir yaklaşım denemiyorum. Başlangıçta düşündüğümden daha karmaşık olduğunun ortaya çıkması durumunda, yoksa doğru hissetmiyorum, boşa harcanan çok az bir yaklaşım deneyebilirim. Aslında bu harika bir fikir olduğu ortaya çıktı! Hala bunun için seçeneklere bakıyorum - lütfen nihai sonuç için GitHub projesine bakın.

Ağaç navigasyonu şimdi sıralanmış, navigasyonu oluşturarak mobil ilk yaklaşıma geri döndüm. Sass'a aşina olursanız, muhtemelen değişkenlerle karşılaştığınızdan daha fazlası. Fakat değişkenleri şimdi CSS'de bulunduğunu biliyor muydunuz? Onlar sahip Oldukça iyi tarayıcı desteği Chrome, Edge, Safari ve Samsung Internet'te de! Temel CSS'ye tutmaya çalıştığım ve herhangi bir ilave bağımlılık için ihtiyaçtan kaçının, bu harika haber. Peki bunu nasıl uyguladık? Stil sayfasının tepesinde değişkenlerimi ilan ediyorum:

: root {
  --grey: #ccc;
  - cred: # fb0f0c;
  --Grid boyutu: 10px;
} 

Şimdi ilan edildiklerinde, onları arayabilirim, bu yüzden örneğin vücut arka plan rengini ayarlamak böyle görünüyor:

 vücut {
  Arka plan: var (- gri);
} 

Bunu bir adım daha ileri götürmek ve ızgara hizalaması, beyaz boşluk, dikey ritim ile yardımcı olmak için, bir ızgara boyutu değişkeni de tanımlamış olabilirsiniz. Değişkenler, Calc ile son derece iyi çalışıyor ve bu böyle bir şey görünüyor:

 // standart değişken kullanılıyor, 10px çıktı.
Dolgu topu: var (- ızgara boyutu);

// Değişken birimini 2 ile çarpmak için CALC ekleme, 20px çıktı.
Dolgu-alt: Calc (var (- ızgara boyutu) * 2); 

Mobil navigasyon stilleri tamamlandığında, gizleme ve gösterme için işlevselliği ele alalım. Toggle düğmesi için bir etiket etiketi uygulayacağız, sonra NAV etiketinde bir giriş ekleyeceğiz:

& lt; başlık sınıfı = "başlık" & gt;
  & lt; h1 sınıfı = "header_title" & gt; band web sitesi & lt; / h1 & gt;
  & lt; h2 sınıfı = "header_currentpage" & gt; ev & lt; / h2 & gt;
  & l etiketi = "MOBILENAV_TOGGLE" CLORD = "MOBILENAV_TOGGLE" & GT; TOGGLE & LABT;
& lt; / başlık ve gt;

& lt; nav sınıf = "mobilenav" & gt;
  & lt; giriş türü = "onay kutusu" id = "mobilenav_toggle" rol = "düğmesi" & gt;
  & lt; ul sınıf = "mobilenav_list" & gt;
    & l li sınıfı = "mobilenav_listitem" & gt; bir sınıf = "mobilenav_listitemlink" href = "#" & gt; ev & lt; / li & gt;
    & l li class = "mobilenav_listitem" & gt; bir sınıf = "mobilenav_listitemlink" href = "#" & gt; yaklaşık & lt; / li & gt;
    & l li sınıfı = "mobilenav_listitem" & gt; bir sınıf = "mobilenav_listitemlink" href = "#" & gt; portföyü & lt; / li & gt;
    & l li class = "mobilenav_listitem" & gt; bir sınıf = "mobilenav_listitemlink" href = "#" & gt; haberler & lt; / li & gt;
    & l li sınıfı = "mobilenav_listitem" & gt; bir sınıf = "mobilenav_listitemlink" href = "#" & gt; contact & lt; / li & gt;
  & lt; / ul & gt;
& lt; / nav & gt; 

Aşağıdaki CSS'yi kullanarak, navigasyon menüsünü gösterebilir ve gizleyebiliriz; Etiketi başlıktaki etiketi istiyoruz, ~ AKA TILDE veya (U + 007E) kullanabiliriz, böylece ilk eleman tarafından hemen başarılı olmamakla birlikte çalışır.

 #mobilenav_toggle [Type = CheckBox] {
  görüntü yok;
}

#mobilenav_toggle [Tip = CheckBox]: Checked ~ .mobilenav_list {
  Ekran bloğu;
} 

Mobil navigasyon tamamlandı, biraz uygulama zamanı Duyarlı Web Tasarımı . Sitenin ana içeriğini ekleme, daha sonra Chrome Geliştirici Araçlarındaki Duyarlı Görünümü Kullanarak, ağaç navigasyonunu yeterince uzak tutmak için yeterli yer olana kadar Viewport genişliğini artırabilirim. Bu, 600px'tedir ve bunun için bir medya sorgusu kullanabiliriz:

 .treenav {
  görüntü yok;
}

@Media ekranı ve (min-genişlik: 600px) {
  .treenav {
    Ekran bloğu;
  }
} 

Neredeyse! Son olarak ağaç gezinti için ana içerik alanının yanına oturmak için, FlexBox'tan faydalanacağım:

 .container {
  Ekran: Flex;
}

.treenav {
  görüntü yok;
  Min Genişliği: 140px;
} 

Şimdi ağaç navigasyonu% 100 yükseklik, içeriği aynı şeyi yapıyor ve sağında oturuyor. Bu, içeriğin ne kadar süre olursa olsun, asla ağaç navigasyonunun altında asla akmayacağı anlamına gelir. FlexBox hakkında daha fazla bilgi edinmek istiyorsanız, kontrol etmeyi tavsiye ederim. flexbox.io bir ve sadece Wes BOS tarafından. Yapabileceği çok şey var!

Şu anda için her şeyim var, ama bu projeyi daha da iyi hale getirmek için yapabileceğimiz çok şey var. Herhangi bir sorunuz varsa veya makaleyi beğenirseniz, lütfen merhaba deyin Twitter'dan ya da benim sitem ya da GitHub'da bana bir çekme isteği gönder!

Bu makale aslen 304 sayısında yayınlandı. ağ , dünyanın web tasarımcıları ve geliştiricileri için en çok satan dergisi. Sayı 304 burada satın al veya abone olun .

İlgili Makaleler:

• Süper hızlı CSS için 5 ipucu
• Javascript ile SVG'yi Animate
• CSS ekran özelliğini anlama