WordPress’te Mac OS 9 binası (oksijen kullanarak)

Bu yazı biraz “Proje Günlüğü”: bir öğretici değil, bir portföy girişi değil, sadece birkaç kelime. Portföy büyümemiz ve blogumuz daha iyi takip edildikçe, Isotropic Ajansı, 2021’in ilk çeyreğinde web sitemizin yeni bir sürümünü başlatmaya hazırlanıyor. Diğer birkaç iyiye görüntülemeyi içeren çok sayıda araştırma ve strateji çalışması yaptık. İlham almak için ajans web siteleri. Bu aramada, eski masaüstü işletim sistemini yansıtan sağlıklı web siteleri koleksiyonu buldum. Windows, sürükle ve damla ve diğerleri ile tamamlayın.
Genel Müdürlük Web Sitesi

Beni etkileyen Eatsleepwork, bunun ajans markası için almak istediğim yön olmadığına karar verdi, ama sonuçta bu harika bir fikirdi. Son zamanlarda hafta sonu birkaç boş saatim var ve Oxygen Builder’ı kullanarak ajans web sitesi gibi bir şey yapıp yapamayacağımı görmeye karar verdim. Bu sayfa/tema üreticisi bu uygulama için mükemmeldir, çünkü başlangıçtan itibaren bir sayfa oluşturabilirsiniz. Bu deneysel tasarım ideolojisi, Windows 95’ten biraz ilham ve XP’nin ilk baskısı ile Mac OS 9’u yansıtmak için yapılmıştır. Bu iki web sayfasının ana özelliği, masaüstünde yaptığınız gibi, pencereleri ve ayrı dosyaları/kısayolları sayfanın etrafına sürükleyebilmenizdir.
Bu web sitesinde, her bağlantı/kısayol tıklandığında görünen sermaye/pencereler de vardır.Ayrıca, her web sitesinin tasarımı ve düzeni nispeten basittir.Masaüstü gibi görünmesi için tasarlanmış pencereyle dolu bir yüksekliktir.Her iki web sitesi de bilgi ve navigasyon gösteren üst bıçaklara sahiptir.Kafamda ortak bir fikirle bir site kurmaya başladım.Bu tek sayfalık bir web sitesi olacak ve yatırım yapmak için haftalarım olmadığı için (yayınlanmayacak, sadece inşa etmek istediğim eğlenceli bir şey), bazı pencere/sermaye işlevleri terk edilmelidir. Yapılmış olmalıdır. birkaç CSS küresel sınıfı yapmak, her bir öğenin stilini düzenlememi kolaylaştırmaktır.Aşağıda gösterildiği gibi Mac OS 9’da bulunan renkleri kullanıyorum.
İşte bu stillerden bazıları:. Pencere bazlı {box-shadow: iç 1px 1px 1px beyaz, 1px 1px 0px #9C9C9C; Arka plan: #Cece; }. Window-button evli {genişlik: 20px; Yükseklik: 20 piksel; Sınır: katı 1 piksel siyah; Kutu -Shadow: -1px -1px 0px #9C9C9C, 1px 1px 0px beyaz; }. Window-Button-Inner {Box-Shadow: 1px 1px 1px RGBA (156, 156, 156, 0.5), -1px -1px 1px RGBA (255,255,255,0.5); Genişlik: Otomatik; Yükseklik: Calc (% 100 – 4px); Marj: 2px; Arka plan: RGB (130,130,130); Arka plan: doğrusal gradyan (-45deg, RGBA (130,130,130, .85)%0, RGBA (255,255,255, .85)%100); } CSS’nin rengini ve stilini yaptıktan sonra yapılacak bir sonraki şey yazı tipini yüklemektir. Birkaç çalışma yaptıktan sonra, yazı tipinin Chicago olarak adlandırıldığını, çevrimiçi bulduğunu (ücretsiz) buldum ve oksijen tarafından önerilen zarif bir özel yazı tipi kullanarak siteye yükledim. Kullanılan başka bir daha ince yazı tipi var, ancak bu projeden kaldırıyorum. Yapılacak sayfanın ilk yönü başlık.

Sonunda hiçbir şey yapmadım, ancak üretime girecekse, başlığın solundaki menü simgesine mega menü işlevselliği ekleyebilir. Bu, gerçekten konumlandırılmış bir alt menü gizleyen ve görüntüleyen Hover CSS stili kullanılarak yapılacaktır. Menünün sağ tarafında, kullanıcının IP’sini kullanan kullanıcı konumu (USA FLAG) ve keşfettikleri sayfayı oksijen üzerinde dinamik veri özelliklerini kullanan kullanma zamanı görüntüler.

Şimdi oksijen üreticisinde gerçek masaüstünü oluşturma zamanı. Bu, sayfanın tam ekranda kalmasını ve konum konumuna yardımcı olmasını sağlayan hesap yüksekliği (100VH – 40 piksel) hesaplamasıyla menünün altına yerleştirilir.

Sürüklenebilen pencereler, bu sayfada bulabileceğiniz, sürüklenen bağlantıları ve sürüklenmiş pencereleri bulabileceğiniz iki ana öğe vardır. Bu durumda, kullanıcı sayfayı açtığında pencere açıktır, ancak sürüklenen bağlantının her bir pencereyi etkinleştirmesi için ayarlayabiliriz. Bunu hiç yapmadım, ama JavaScript ile oldukça basit bir şekilde yapılabilir. Sürüklenebilecek adam, “[s] shiz draggable yapan” ve “IE10+ ve Touch’ı desteklediği için” [s] shiz draggable yapan “bir kütüphane olan draggabilly.js seçtim Cihazlar “.

İlk olarak, bir takip komut dosyası kullanarak web sitesinin başına ekledim. (Ayrıca bir kod görüntüsü ile de yapabilirsiniz).

Komut dosyası etiketi aşağıdadır: <script src = "https://unpkg.com/bandemail korumalı] Kütüphaneyi ekledikten sonra Site, başlatmanız gerekiyor. Kütüphanenin birkaç seçeneği vardır ve JavaScript Vanilya veya JQuery kullanılarak başlatılabilir. Başlatmayı kolaylaştıran kalem kodunda bulunan önceki örneği takip ettim. Yapmanız gereken tek şey bunu kopyalamak ve kod bloğuna veya kod parçasına eklemektir.

İlk olarak, öğelerin sürüklenmesini sağlayan sınıfı belirleyin. Varsayılan ile sıkışıp kaldım. Yapılabilen bir sonraki şey, sitenizin öğenin sürüklenebileceği alanını seçmektir. Varsayılan olarak, Constanment: True, üst öğeyi seçerse. Başlangıçta elemanları masaüstüne yerleştirmek için sütunu kullanmak istiyorum, bu yüzden masaüstü kapsayıcısına oksijende özel bir sınıf ekliyorum ve JS’de şöyle belirliyorum: Containment: .desktop-alea ve tek başına. Şimdi, özel bir sınıf eklediğinizde, oksijen web sitenize (kütüphane başlatılırsa) sürüklenebilir, öğeler ve içindeki her şey sürüklenecektir. Gerçekten harika. Aşağıda, ilk başta öğeleri konumlandırmak için oksijende sütunları nasıl kullandığımın görsel bir temsili:
Bir kütüphane dışında, geri kalanı sadece saf JS ve CSS tarzıdır. Örneğin, her pencerenin birçok divi ve onu derleyen aynı stili vardır. OS 9’da bulabileceğiniz derinlik stilleri eklemek için bir ton sınır, 1px yükseklik div ve gölge kutuları (böcekler ve dış kullanıcı) kullanırlar.

Ürün nihayet çok havalı ve yapmak çok zor değil.

WordPress'te Mac OS 9 binası (oksijen kullanarak)