Akıllı telefonlar hayatın ayrılmaz bir parçası haline geliyor, bu yüzden pay mobil trafik istikrarlı bir şekilde büyüyor. HTML5 ve CSS3'teki düzen, masaüstü tarayıcı sayfalarını mobil medyanın arayüzüne uyarlamanıza olanak tanır. Profesyonel ortamda ustalaşabilmeniz ve sitenizi daha kullanışlı hale getirebilmeniz için uyarlanabilir düzende bir video kursu oluşturuldu.

"HTML5 ve CSS3'te Uyarlamalı Düzen" kursunun yazarı Oleg Kasyanov, deneyimli bir web geliştiricisi, JoomlaTown.net İnternet kaynağının kurucusu, blog yazarı ve yeni başlayanlar ve deneyimli profesyoneller için eğitim programlarının yaratıcısıdır.

Duyarlı web sitesi tasarımı - eğitim

Her video dersine yazar tarafından açıklayıcı bir yorum eşlik eder. HTML5 ve CSS3 teknolojilerini kullanmanın özelliklerini öğrenecek, geliştirme becerilerinizi geliştirecek ve uyarlanmış bir düzen oluşturmayı öğreneceksiniz.

Oleg Kasyanov'un video kursu teorik gerekçeler, uygulama ve ek materyallerden oluşmaktadır. Aşağıdaki soruların cevaplarını alacaksınız:

• HTML5 ve CSS3 düzenindeki işlevsellik nedir;
• anlamsal işaretleme nedir;
• ile nasıl çalışılır çeşitli tipler medya nesneleri;
• açılış sayfası oluşturma aşamaları nelerdir;
• sayfa formları ve görselleştirme türlerini karıştırmanın neden önemli olduğu;
• oluşturmadaki ana zorluklar mobil versiyon alan.

"HTML5 ve CSS3'te duyarlı düzen" kursuna çalışma şablonları, komut dosyaları ve kodlu hile sayfaları eşlik eder. Oleg, HTML5 ve CSS3 ile birkaç kat daha hızlı çalışmayı gerçekten mümkün kılan öğrenme sürecini büyük ölçüde kolaylaştırır.

Duyarlı HTML5 ve CSS3

Kursun sonuçları sizi bekletmeyecek: mevcut durumu analiz etmeyi, gelecekteki bir web kaynağının projesini görmeyi ve ayrıca faydalı değişiklikler yapmayı öğreneceksiniz. Oleg Kasyanov'un kursu, HTML5 ve CSS3'te duyarlı düzende ustalaşmanıza yardımcı olacak.

HTML5 ve CSS3 olmadan uzağa gidemezsiniz

Modern siteler ve web geliştirme, artık ne derse desin HTML5 ve CSS3 olmadan hayal edilemez.
Herhangi bir proje, herhangi bir müşteri, mobil cihazlar için uyarlanması gereken geçerli, çapraz tarayıcı ve modern bir HTML5 ve CSS3 düzeni gerektirir.
HTML5 ve CSS3 yazmayı ve projeyi mobil cihazlara uyarlamayı biliyorsanız, bir saatlik çalışmanızın maliyetini güvenle artırabilirsiniz.
Kendiniz için bir web sitesi oluşturuyorsanız, bu bilgi onu daha iyi, daha işlevsel ve daha kullanışlı hale getirmeye yardımcı olacaktır. Kural olarak, bu, pozisyonlarda bir artışa, katılımda bir artışa ve buna bağlı olarak gelire neden olur.

Bunu biliyor musun...

Şimdi Arama Sonuçları(TOP 10'da) Yandex'in %55'i şu özelliklere sahip sitelerdir: sorumlu tasarım mobil cihazlara uyum sağlayabilen. Bu, Yandex'in (ve Google'ın da) uyarlanabilir tasarıma sahip sitelere daha fazla tercih verdiğini gösteriyor. Şunlar. kullanıcının rahat ettiği şeyler.
Ve site için HTML5 ve CSS3 eklendi Ek özellikler ile siteyi daha da kullanışlı hale getirebiliriz.
Hem kullanıcılar hem de robotlar için.
Açılış sayfası ( Açılış sayfası, Açılış sayfası) ziyaretçileri abonelere veya müşterilere dönüştürmek için kullanılır.
Ayrıca bazen trafik segmentasyonu için kullanılır.
Bir açılış sayfası, bir alan adındaki ayrı bir sayfa veya tam teşekküllü bir web sitesinin parçası olabilir.
Bu durumda, site aramada tanıtılır ve açılış sayfası Yandex.Direct, Google Adwods, Target Vkontakte vb.'de reklam vermek için kullanılır.
Bu kombinasyon, çeşitli İnternet pazarlama araçlarından en iyi şekilde yararlanmanızı sağlar.
Şimdi tüm bunları işinizde hızla öğrenmek ve uygulamak için bir fırsat var.

HTML5 + CSS3 + Duyarlılık + Açılış Sayfası
Bu kursla şunları yapabileceksiniz:

duyarlı web siteleri ve sayfalar oluşturun
onları mobil cihazlara uyarlayın
kendi veya müşteri projelerinizde HTML ve CSS'nin gücünü kullanın
herhangi bir açılış sayfası oluşturun: yakalama sayfaları, abonelik sayfaları, ürün açılış sayfaları vb.
açılış sayfasına çeşitli efektler ve komut dosyaları ekleyin
gelişmiş formlar oluşturun ve kullanın geri bildirim ve daha fazlası.
Bu video kursu ile hiç de zor olmayacak!

Kurs özeti

Tanıtım

Düzen sürecini basitleştiren ve kolaylaştıran HTML5 ve CSS 3'teki yeni özellikler.
Anlamsal işaretleme - sırları ve ne için olduğu.
Medya nesneleri ekleme - oynatıcı olmadan ses ve video nasıl eklenir.

pratik kısım

Adım adım bir açılış sayfası oluşturma.
Düzen planlamasından, değişen karmaşıklıktaki her bloğun düzeninden, formlar için komut dosyalarını ve php işleyicilerini bağlamaya kadar
Dönen/kaydırıcı, düzgün kaydırma, düğmeler, CSS hareketli grafikleri, form doğrulama vb.

Eklemek. malzemeler

Ek materyaller, birlikte çalışacağımız tüm komut dosyalarını ve kaynakları + kopyalayıp doğru yere yapıştırmanız gereken kodlu hile sayfalarını içerir.
Diğer faydalı kaynakların yanı sıra.
Video ders sayısı: 23

Bu kursu tamamladıktan sonra ne yapabileceksiniz?

hazırlık aşamasında

Photoshop ile PSD düzenini anlama
PSD düzeninden istenen görüntüleri kesin
Bulmak güzel tasarımlar açılış sayfası ve web siteleri
Tasarım blokları ve düzen adımları
Simgeleri CSS Sprite'larında Birleştirin
PhpDesigner ile Çalışmak

Düzen açısından

bağlamak güzel yazı tipleri google depolama alanından
Sözde Sınıfları Verimli Kullanın
Siteyi tüm mobil cihazlar için uyarlayın
2 veya daha fazla blok arka planı, animasyon, dönüşüm, RGBA vb. kullanın.
@media sorgularıyla çalışma
Etkileşimli Yandex haritaları ekleyin
CSS hareketli grafikleri oluşturun ve sayfa yüklemeyi hızlandırın
Önceden tasarlanmış stilleri kullanın (Bootstrap gibi çerçevelere benzer)

İyileştirme açısından

Vurgulu efektler oluşturun (vurguluyken "animasyon")
Bloklara ve "Yukarı" düğmesine yumuşak kaydırma yapın
jQuery ile iletişim formlarını doğrulayın
UTM etiketlerini ileterek akıllı geri bildirim formları oluşturun
Etkinlikleri kullanarak Ya.Metrika'da hedefleri bağlayın ve yapılandırın
Sayfaların daha hızlı yüklenmesini sağlayarak hafifletin
Sayfalardaki kusurları kontrol edin ve düzeltin

Venezuela lideri Nicolás Maduro, RT'den Rafael Correa'ya ABD Başkanı Donald Trump'ın Latin Amerika halklarına karşı bir takıntısı olduğunu söyledi. "Açık konuşuyorum...

Trump, İran'la savaşı 'son çare' olarak nitelendirdi
ABD Başkanı Donald Trump Çarşamba günü yaptığı açıklamada, Suudi petrol tesislerine yapılan saldırının ışığında İran ile bir savaştan söz edilmediğini, birçok seçenek olduğunu söyledi. "Birçok seçenek var. Aşırı bir seçenek var...

Zelensky, Pence ile telefon görüşmesi yaptı
Ukrayna Devlet Başkanı Volodymyr Zelensky, ABD Başkan Yardımcısı Mike Pence ile telefon görüşmesi yaptı. "Strana.ua" tarafından rapor edilir. Ukraynalı lider, Pence'e anlaşmanın uzatılmasıyla ilgili olarak teşekkür etti.

Pentagon, Rusya'yı ABD'nin en büyük güvenlik sorunu olarak nitelendirdi
Pentagon başkanı Mark Esper, Rusya'nın yakın vadede ABD için en büyük güvenlik sorunu olduğunu söyledi. "Rusya bizim en büyük güvenlik sorunumuz olmaya devam ediyor...

Saldırı Yemen'den değil: Suudi Arabistan İran'ı petrol rafinerisi saldırısıyla suçladı
Suudi yetkililer, 14 Eylül Cumartesi gecesi devlete ait rafinerilerde serbest bırakılan insansız hava araçları ve diğer uçakların enkazını kamuoyuna açıkladı. Krallığın Savunma Bakanlığı...

Trump, Fed'in faiz indirimine yanıt verdi
ABD Başkanı Donald Trump, baz oranı düşürdüğünün bilinmesinin ardından ABD Merkez Bankası'nın çalışmalarından bir kez daha memnun kalmadı. Bununla ilgili tweet attı. O yöneticinin başkanı kaydetti ...

Ukrayna, "Steinmeier formülünün" uygulanması için yeniden koşullar belirledi
Ukrayna heyeti, temas grubunun Çarşamba günü Minsk'te düzenlediği olağan toplantısında, Minsk anlaşmalarının siyasi maddelerinin Kiev tarafından uygulanması için bir kez daha katı koşullar belirledi. Bu doğrulandı...

Johnson ve Trump, Suudi Petrol Rafinerilerine Saldırıya Müdahale Gerektiğini Tartıştı
LONDRA, 18 Eylül - RIA Novosti, Maria Tabak. İngiltere Başbakanı Boris Johnson ve ABD Başkanı Donald Trump, uluslararası ortaklardan ortak bir diplomatik yanıt çağrısında bulundu.

Patlama tehdidi nedeniyle trafiğe kapatılan köprüye Klitschko geldi
Kiev Belediye Başkanı Vitali Klitschko, Kiev'deki Metro köprüsünü havaya uçurmakla tehdit eden adamın sarhoş veya uyuşturucu etkisi altında olduğunu söyledi. Daha önce, Kiev polisinin başı ...

Belçikalıları eleştiren Juncker, sarhoş olmakla suçlandı
Belçika'daki iki şehrin başkanları, Avrupa Komisyonu Başkanı Jean-Claude Juncker'ın Belçika şehirlerinde Fransızca konuşanların hoşgörüsüz olduğunu söylediği için resmi olarak özür dilemesini istedi ...

Netanyahu İsraillilere meydan okudu
İsrail Başbakanı Benjamin Netanyahu, milliyetçi Likud partisinin ikinci sırada yer aldığı seçimlerin ön sonuçları hakkında yorum yaptı. ilgili bir yazı var...

"Steinmeier formülü": Kiev, Donbass'tan taviz verdi
Ukrayna Dışişleri Bakanı Vadim Prystaiko, Donbass'taki ihtilafı çözmek için Steinmeier formülünü kullanmayı kabul etti. Bu girişim bölgeye özel bir...

ABD, II. Nicholas'ın çalınan kararnamelerini Rusya'ya iade etti
Amerika Birleşik Devletleri, Moskova'daki Amerikan büyükelçisinin konutunda düzenlenen ciddi bir törenle İmparator II. Nicholas tarafından imzalanan 16 kararnameyi Rus tarafına teslim etti. Tarihi belgeler çalındı...

Uyumadan önce: Merkez Bankası Rusların hesaplarını bloke etmeyi yasal gördü
“Kendilerini yönetecekler”: Kırım'a “geri dönmek” için yeni bir plan RIA Novosti Kırımlar çürümeyi yaymazsa ve bir fırsat penceresi yaratmazsa, Ukrayna'ya koşacaklar. Bu konuda, "Federal Ajans'a göre ...

Medya: Netanyahu, ülkedeki siyasi durum nedeniyle BM Genel Kurulu ziyaretini iptal etti
İsrail Başbakanı Benjamin Netanyahu, ülkedeki siyasi durum nedeniyle BM Genel Kurulu'nun 74. oturumunun genel siyasi tartışmalarına katılmak için önümüzdeki hafta New York'a gitmeyecek...

Ukrayna, Donbass'ın özel statüsü hakkında karar verdi
Ukrayna Dışişleri Bakanı Vadym Prystaiko, Normandiya Dörtlüsü katılımcılarının Donbass'a özel bir statü verilmesine yönelik sözde Steinmeier formülü üzerinde vardıkları anlaşma hakkında konuştu. Bu konuda...

Trump Bolton'ın yerine birini buldu
Amerika Birleşik Devletleri Başkanı'nın yeni ulusal güvenlik danışmanı, şu anda Başkanın Rehine İşlerinden Sorumlu Özel Temsilcisi olarak görev yapan Robert O'Brien olacak...

Ukrayna, Donbass'tan askerlerini çekmeye hazırlanıyor
Müşterek Kuvvetler Operasyonu (JFO) Komutanı Vladimir Kravchenko, Donbass'taki sınır çizgisinden silahların çekilmesi için hazırlıkların yapıldığını duyurdu. Kalıcı bir toplantı sırasında bunun hakkında konuştu ...

Son Tarihler ve Yol Haritaları: Rusya-Beyaz Rusya Entegrasyon Planları
Rusya ve Beyaz Rusya'nın entegrasyon planı, 8 Aralık'a kadar Başkanlar Vladimir Putin ve Alexander Lukashenko tarafından onaylanabilir. 31 yönde "yol haritaları" geliştirildi. 1 Kasım'a kadar Moskova...

Kazanan karar vermez: İsrail hükümetini kim kuracak?
İsrail'deki erken parlamento seçimleri henüz yarışın net kazananını açıklamadı, ancak ülkenin Merkez Seçim Komisyonu'nun ön verilerine göre sağcı Likud bloğu rakibinin önünde - ...

Gelmesiyle birlikte mobil cihazlar: tabletler ve akıllı telefonlar, web sayfalarının uyarlanabilir düzenini yapma yeteneği çok popüler hale geldi.
Bu, sitenin herhangi bir cihazda normal şekilde görüntülenmesi gerektiği anlamına gelir. Eh, bir yana, üzerinde görüntülenen ile tam olarak aynı değilse masaüstü bilgisayar, sonra ona yakın. Ana şey, onunla çalışmanın uygun olmasıdır: görüntüleyin, bir şey arayın, düğmelere basın, vb.

İnternette HTML5 ve CSS3'e dayalı duyarlı web sitesi düzeniyle ilgili ilginç, ücretsiz bir mini kurs buldum. Çalıştı.
** Alt veya üst test talep formunu doldurarak bu kursu kendiniz için indirebilirsiniz. **

HTML5 ve CSS3'teki yenilikler

Bir siteyi tüm cihazlara uyarlanabilir hale getirmenin mümkün olup olmadığını (?) kontrol etmeye karar verdim, OLMADAN teknoloji kullanımı HTML5 ve CSS3 .

Deniyorum!

Kodlamada yazıldı "ANSI" , ve tam hizmet kaydı ile: "HTML 4.01 Geçiş" , kuralların öngördüğü yerine HTML5:

Yeni etiketler: başlık, bölüm, makale kullanmadı. Etiketlerde her zamanki gibi blok düzeninin yeterli olduğu ortaya çıktı div .

Yeni form özelliği etiketlerde giriş "Yer tutucu" (ipucu) tarayıcıda IE8 OLUMSUZLUKçalıştı. geri kalanında - Çalışma.

Aynı şekilde. Yeni "tür" özelliği etiketlerde giriş type="e-posta" yalnızca modern tarayıcılarda çalışır.

Bağlanmak "değer" hala kullanılıyor değerleri girme formlara dönüştürülür.

En önemli şey! İlk olarak, site normal bir monitörde dizilir ve ancak o zaman etikette kafa bir kod satırı ekleyerek:

Bu girdi tarayıcıya ( ** kursta anlatıldığı gibi!), yani o doğru ölçeklendirilmiş sayfa içeriği kullandığınız cihaz için.
Her ne kadar aslında böyle bir rekor tarayıcı kesinlikle hiçbir şey söylemez. Bu, arama motorları için bir "çağrı"dır.
Ancak, etikette böyle bir girişin varlığı / yokluğu konusunda zaten oh-oh-çok "şiddetli" kafa , özellikle son zamanlarda. Kontrol!

Ancak şunu söylemek gerekir ki modern tarayıcılar mobil cihazlar, görünüşe göre hala "başkalarının mektuplarını" okumayı öğrenmişler.

**Örneğin. Bu kod satırını test ederken ekledim uyumsuz web sitesi sayfası ve... ... ... . Ve sonra hızla kaldırıldı!

Akıllı telefondaki ekranını kontrol ettikten sonra, akıllı telefonun tarayıcısının "korku", yani. sayfanın TAM BOYUTUNU göstererek, uzun yatay kaydırma.

Etiketler için yeni özellik resim "srcset" test edilmiş "HTML 4.01" sürümünde çalışmıyor!

Size hatırlatmama izin verin ve şunu vurgulayayım ki Herhangi bir medya sorgusu yapmadı. Testler!

CSS Tablo Girişleri Örnekleri

Her şeyden önce, hangi (?) kontrol edilir css özellikleri ve nasıl(?) çalıştılar.

özellik arka plan boyutu: kapak; daha iyi Kullanmayın. Çizimler "kesilir", yani. monitör ekranlarının ötesine geçin. Bunları bütünüyle görmek için uzaklaştırmanız gerekir.

Ve tam tersi!

özellik arka plan boyutu: içerir; harika çalışıyor! Tüm tarayıcılarda! için en uygun "merkez"çizimler. bu onların ölçekler harika herhangi bir monitör boyutu için.

Aynı şekilde.

Aynı özellik background-size: include; BÜYÜK çalıştı "yanal"çizimler, yani sol sağ. Sınanmış!

Etiketler aracılığıyla görüntülenen yan çizimler açıklık , onlara float: left veya right , ancak ANA!
Ana fikir, bu çizimi şu şekilde çıkardı: arka plan 2 bölünmez boşluk karakteri , vermek yazı Boyutu, yüksekliğe eşit Arkaplan resmi (** metin boyutunu küçülterek, resim bozulma olmadan orantılı olarak küçülür).

Aşağıdaki çıkış diyagramları.

  <— это HTML

Aralık#proba8 ( <— здесь CSS
arka plan: url(images/proba8.jpg) tekrarsız;
yüzer: sol;
yazı tipi boyutu: 240 piksel;
arka plan boyutu: içerir;
kenar boşluğu: 020 piksel;
alt dolgu: 0
}

Yukarıda verilen şemaya göre görüntülenen test çizimi, gerçek boyut 210x240px. İyi adapte oldu ve monitörde tam olarak görüntülendi. çözünürlük 120x150.

Her şey çalışıyor! ANCAK!

"Poligonumda" böyle bir çıktı şemasının kullanımını kontrol ettikten sonra, önemli bir görünüm buldum. çizimlerden önce ve sonra boşluklar, sayfayı bir akıllı telefonda görüntülerken. Bu özellikle dikkat çekiciydi dikey olarak bakıldığında. Hatta!
CSS kurallarında yazılmış olmasına rağmen: üst/alt girintileri kaldırın!

Bu yüzden her şey yan çizimler bu sayfa çıktısı için her zamanki gibi, herhangi bir uyarlanabilir "tuhaflık" olmadan.

Ayrıca, en büyük yan çizimin boyutu bunun yapılmasına izin verdi.

Doğru, bu durumda yanal resimler çok büyük görüntüleniyor, bu da gerçekten kendileriyle eşleşmeyen merkezi(uyarlanmış) "meslektaşlar", ama... ... ... .
Burada herkes en iyisini seçer. Ben "iki kötülük"ten en basitini seçtim.

** Ve sonuncusu. Dosya "sıfırlama" stiller reset.css bu sayfaya bağlanmadı. Bu kadar basit siteler için gerekli değildir. Evet ve... ...onu sevmiyorum. Sonra tekrar iç ve syvaesh.

Cidden - indirme hızı. Her ek dosya sunucu çağrısı.

Şimdi adaptasyon hakkında birkaç satır.

Öncelikle form etiketlerindeki iki giriş alanını (ad ve e-posta) 200 piksele (mobil cihazlarda görüntülenmeleri durumunda) azaltmak için kod yazma örneği verdi Böyle, mini kursta verildiği gibi . Garip giriş!

medya ekranı ve (maksimum genişlik:900 piksel) (

genişlik:200 piksel;))

Aslında, medya sorgu kodu farklı görünmelidir.

@medya (maksimum genişlik:900 piksel) (
.subscribe girişi, .subscribe girişi (
genişlik:200 piksel;))

* İlk. kullanma sabit genişlik, belirtmek daha iyidir en büyük boy.

Sabit genişlik için en uygun boyut 1200 piksel±

Bunlar "medya sorguları" tasarım aklıma geldi if (koşul) (yürütme) dillerden: PHP ve JavaScript. Onlarla, ekranların boyutuna bağlı olarak sitenin stillerini yeniden oluşturuyoruz.

referans

Yazı tipleriyle doğru çalışma için, boyutlarını "px" olarak değil "em" olarak belirtmeniz ve ayrıca yazı tiplerini sözde olanlardan almanız önerilir. "güvenli CSS yazı tipi yığınları".

Photoshop'ta hangi yazı tiplerinin ait olduğunu bulabileceğiniz özel bir çizim yaptım. "güvenli", ve en önemlisi - neden (?!):

1em = 16 piksel

Doğru, mini kursta bununla ilgili bir kelime olmamasına rağmen, böyle bir çevirinin oldukça "şartlı" olduğu söylenmelidir!

Ekteki arşivden harika bir makale ile mevcut ölçü birimlerini ve bunların birbirine nasıl dönüştürüldüğünü detaylı olarak öğrenebilirsiniz.

Uyarlanabilir düzen için örnek birimler

Sınanmış. Bu birimler aracılığıyla belirtilen bazı yazı tipi boyutları. Çalışma! Ama ben daha çok piksellerle uğraşmaya alışığım. Burada da bu sayfanın empoze edilmesinde kullandılar.

Özellikle piksellerden beri, bence, mükemmel uyum uyarlanabilir düzen için, tam olarak "bağlı olduklarından" monitör boyutları ve çözünürlükleri kullanılan cihazlar.

Başka bir deyişle, her cihazın kendi piksel boyutu olacaktır ve bir birimden diğerine "seğirme" yapmazsanız, ancak her şeyi aynı ölçü birimlerinde ifade ederseniz, sonuç olumlu olacaktır!

Aslında, bu sayfayı görüntülerken cihazınızda ne görüyorsunuz.

İçin yazı tipi olmayan öğeler: resimler, blok boyutları, tavsiye hesaplamak ve yüzdeleri "%" kullanın ve bu, boyuta bağlı olarak farklı bir hesaplama tekniğidir. "ana blok".
Kısacası - "korkunç hemoroidler."

Bu nedenle, bu deneme sayfasında biraz pratik yaptıktan sonra, her türlü uyarlanabilir düzene "tükürdüm" ve benim için her zamanki, tanıdık şekilde dizmeye başladım. Yorgun!

Cidden, sayfanın sonunda bunun hakkında yazdım.

Hâlâ uyarlanabilirliğe ihtiyaç duyanlar, halihazırda tarayıcılarda yerleşik olan araçlara dikkat etmelidir.

Faydalı web geliştirme araçları

Tarayıcıda uyarlanabilir düzen geliştirmek için Firefox mükemmel(!) araçlar var.

F12 tuşuna bastığınızda bu sekme açılır

Buton "uyarlanabilir tasarım" sayfanın farklı boyutlardaki monitörlerde ve farklı yönlerde (dikey/yatay) nasıl görüneceğini görmenizi sağlar.

Bu aracın butonunun nasıl kullanılacağına ilişkin detaylar, bahsedilen mini kursta anlatılmaktadır.

Doğru, kendimi tercih ettiğimi söylemek istiyorum Kontrolüzerinde yapılan gerçek cihazlar , tarayıcıların "tuhaflıklarını" ortadan kaldırır.
Düğme, elbette, kesinlikle çok faydalıdır ve çok yardımcı olur, ama... ... ...

Web sayfalarını kontrol etmek için böyle bir fırsatı olmayanlar için uyarlanabilirliği kontrol etmek için ilginç bir kaynak önerebilirim: "Quirktools" (yeni bir pencerede açılacaktır).

**ANCAK! Hatırlamak gerek!
Sadece sayfaları gösterir zaten internete yüklendi.
Ek olarak - sunucusu çok sık "düşüyor" (yani kullanılamıyor).

Genel olarak, kesin bir işaret doğru uyarlanabilir düzen - alt kaydırma yok.

Bilmen gereken son şey: gerçek mobil cihazlar siteler, çeşitli doğrulama hizmetleri tarafından gösterildiği gibi değil, farklı görünür.

Sonuç, sonuçlar

Daha önce yazdığım gibi, burada biraz pratik yaptıktan sonra, bu sayfada uyarlanabilirliğe "tükürdüm" ve her zamanki gibi dizmeye başladım. Ve bu tesadüf değil!

Birinci olarak: düzenin karmaşıklığı birçok kez artar ve bununla birlikte CSS kodunun boyutu da artar.
Kötü olan, burada ayrıntılı olarak: "Web sitesi geliştirme"(yeni bir pencerede) .

İkincisi: ve "uyarlanabilir bilgelik" olmadan, mobil cihazlarda normal olarak görüntülenen siteler oluşturabilirsiniz, bunun için daha fazla bilgi verilmesi gerekir. sabit Genişlik.
Örnek: "Kişisel sayfa" (yeni bir pencerede açılacaktır).

Üçüncüsü:öncekinden izler, çünkü içerik sabit site büyük ekranlı bir bilgisayarda ziyaret edilirse, sayfalar monitörde "bulaşmaz".

Dördüncü: sık sık siteleri görüyorum uyarlanabilir olarak kabul edilir, ancak kendileri için içerik kesildi böyle hesap vermek onların türü 2-3 kat azaltın!

Beşinci: dördüncü noktadan sonra gelir. O zaman benimkinin ne farkı(?!) yanıt vermeyen sayfalarüzerinde akıllı telefonlar birbirinden ayrılmalı parmaklar istenilen büyüklükte Evet ve bu! Sadece görüntüleme kolaylığı için. İçerik sağlam!

Bu arada, akıllı telefonlar sitem için kritik değil. Şu ana kadar, %97'nin üzerinde ziyaretçiler ona normal bilgisayarlardan ve tabletlerden gelir ve akıllı telefonlardan %3'ten az.

Bu "yas listesine" devam edebilirsiniz ama bence bu kadarı yeterli. Uyarlanabilir düzenden neden sıkıldığımı yeterince anlattım. okudu ama uygula OLUMSUZLUK gidiyor.

Ne için?!

Daha kolay olanı neden zorlaştıralım?! Herhangi bir "şamanik uyarlamalı dans" olmadan.

Çözüm - gerek yok!

çıkardığım sonuç bu kendin için yukarıdakilerin hepsinden. Sonunda, kesinlikle herhangi bir cihazda: normal bir bilgisayar, tablet veya akıllı telefon olsun, sitesi görüntülenebilir!

Bir şeyi görmek zorsa, parmaklarınızla itebilirsiniz. Korkunç bir şey! Modern elektronik cihazlar akıllıdır! Monitör ekranının görünürlüğünü ölçeklendirmenize izin verirler.

Ek olarak, mevcut tüm cihazların olası tüm boyutları için kodda (sürekli artırarak) "devam etmeye" çalışın - ÜTOPYA!

Mesela geçen gün yeğenim yeni kazandığını gösterdi. Akıllı telefon izle kibrit kutusundan biraz daha büyük.
Ne olmuş?!
Şimdi bir kibrit kutusunun boyutlarının altına kodu yazmak için "kafadan" acele etmek mi?! Ve sonra bir broş büyüklüğünde bir bilgisayar olacak (veya belki de zaten ortaya çıktı). Ne olmuş?!
Kodu tekrar değiştir? Evet, incirlerde böyle "sorunlu siteler" yapın! Daha basit... ...

Aslında, tüm kaynağım, basit web siteleri yapmayı öğrenmek ve bunları zevkle yapmak isteyenler için değil, kendileri için tasarlanmıştır. "baş ağrısı". Bunun gibi bir şey... ... ...

Ancak bu benim kişisel görüşüm. Kim hala bunu yapmak istiyorsa, daha fazla bakmasına izin verin.

Önemli ekleme

Farklı düzen türlerini daha iyi anlamak isteyenler için şiddetle tavsiye ederim ilk(mini kursu incelemeden önce) iki güzel, ilginç makaleyi indirin ve okuyun: "Uyarlanabilir düzen veya mobil sürüm" ve "Uyarlanabilir tasarım".

Ve bundan başka!

mutlaka Aşağıdaki ekteki arşivden makaleyi okuyun.

Neden gerekli?

Runet'te tanınmış bir tasarımcı tarafından web tasarımı üzerine bir kitaptan materyaller ve kitabın yazarının konuyla ilgili sözlerini kullanarak derledim. mobil web sitesi sürümleri keskin bir şekilde farklılık göstermekönceki arşivde okuyabildiklerinden.

Fakat en önemli şey(!)- farklı bir nedenle.

Ve bu formu doldurarak, uyarlanabilir düzen hakkında ilginç bir eğitim videosu kursu alabilirsiniz.

Yeni bir kitap yayınladık, "Sosyal Medya İçerik Pazarlaması: Abonelerin kafasına nasıl girilir ve markanıza nasıl aşık olunur."

Özellikle, bu teknoloji, sitenin farklı cihaz türlerinde aynı görünmesini sağlamak için aktif olarak kullanılmaktadır: bilgisayarlar/dizüstü bilgisayarlar ve farklı ekran boyutlarına sahip akıllı telefonlar/tabletler.

Günümüzde duyarlı bir web sitesi, HTML5 biçimlendirme dili ve CCS3 basamaklı stil sayfaları kullanılarak oluşturulmuştur. Ancak ilgili teknolojilerin tüm popüler tarayıcılar için standart hale geldiği ana kadar, ilgili amaçlar için JavaScript programlama dili kullanıldı. Hatta daha önceleri (2010'dan önce), geliştirdikleri sitenin farklı ekranlarda doğru bir şekilde görüntülenmesi için aynı sayfaların birkaç sürümünü, ancak farklı işaretlemelerle oluşturmaları gerekiyordu.

Neden duyarlı bir sayfa düzenine ihtiyacınız var?

Nispeten yakın zamana kadar, tarayıcının alt kısmındaki birçok siteyi ziyaret ederken, sayfayı yatay olarak kaydıran bir kaydırıcı görebiliyordunuz. Bu, örneğin, İnternet tarayıcı penceresi tam ekrana genişletilmediyse, ancak nispeten küçük bir alanını işgal ettiyse oldu. Ayrıca, görüntünün görüntülendiği ekranın çözünürlüğü 800 x 600 veya daha da fazlası 640 x 480 piksel olduğunda da hemen hemen her zaman görülebilir.

Bugün, mobil cihaz sahipleri bile nadiren böyle bir şeyle karşılaşıyor. Bunun nedeni, yalnızca modern ekranların çözünürlüğünün HD veya daha yüksek olması değil, aynı zamanda duyarlı sayfa düzeninin artık neredeyse standart hale gelmesi gerçeğinde yatmaktadır.

Duyarlı tasarım neden ve ne zaman ortaya çıktı?

21. yüzyılın ikinci on yılının başında, evrensel web sayfalarının geliştirilmesine izin veren teknolojiler yaratmaya güçlü bir ihtiyaç vardı. Uyarlanabilir tasarımın yaratılmasını ve geliştirilmesini tetikleyen ana ön koşullar şunlardı:

• internete büyük yeni kullanıcı akışı;
• farklı ekran çözünürlüklerine sahip birçok cihazın ortaya çıkması;
• Aynı içeriğe sahip çeşitli sayfalara sahip sitelere yaptırımlar uygulamaya başlayan arama motorlarının baskısı.

İlk yaratan kişi, resmi olarak web tasarımcısı Ethan Marcott'tur. 2010 yılının ortalarında, web sayfalarının farklı çalışma alanı çözünürlüklerine sahip tarayıcılarda normal görüntülenmesi sorununu çözmesi gereken bir teknolojiden bahsettiği materyali yayınladı.

Bir süre sonra, tanınmış başka bir podcast yayıncısı, meslektaşının bahsettiği kavramlara eklemeler önerdi.

Uyarlanabilir düzen neyin yardımıyla ve nasıl oluşturulur?

Uyarlanabilir bir yerleşimin nasıl yapılacağı sorusuna geçmeden önce, kullanılan ana teknolojileri kısaca ele almak gerekir. Şimdi iki tane var: HTML5 ve CSS3. Yakın zamana kadar HTML4 ve CSS2 kullanılıyordu ancak bunlarla evrensel bir tasarım oluşturabilmek için JavaScript de kullanmak gerekiyordu.

CSS3, Basamaklı Stil Sayfalarının yeni neslidir. Bu teknolojinin amacı, kullanıcının tarayıcısında sayfa öğelerini görüntülemek için kurallar oluşturmaktır. Bununla, örneğin, kullanıcının belirli bir ekran çözünürlüğünde bir öğenin hangi boyutta olması gerektiğini belirleyebilir veya her zaman belirli bir alan yüzdesini (% 100 - tüm çalışma alanını doldurarak) kaplaması gerektiğine dair bir kural belirleyebilirsiniz. tarayıcı).

Üçüncü nesilde, düzen tasarımcısının her belirli izin için ayrı sınıflar oluşturabileceği "medya sorguları" kuralı ortaya çıktı.

Çok önemli bir nokta!

Duyarlı tasarım için CSS3 kullanmayı planlayan bir kişi, CSS2'den farklı olarak Basamaklı Stil Sayfaları 3'ün pikselleri değil nesnelerin boyutunu belirtmek için yüzdeleri kullandığını bilmelidir.

HTML5'e gelince, doğrudan sayfayı işaretler, yani belirli öğelerin nereye yerleştirilmesi gerektiğini belirtir. Nesnelerin çözünürlüğe ayarlanması için, HTML etiketi parametreleri önceden CSS3 kullanılarak oluşturulmuş sınıfları belirtir.

Duyarlı düzenin basit bir örneği

Duyarlı bir düzenin ne olduğunu anlamak için örnekler mümkün olduğunca basit olmalıdır. Bu nedenle, hazırlanan görüntünün tarayıcının çalışma alanının çözünürlüğüne göre otomatik olarak ayarlandığı bir değişken düşünelim.

İlk olarak, HTML kullanarak öğenin kendisini sayfaya yerleştireceğiz:

DIV etiketi, içerdiği her şeyin ayrı bir blok olduğunu belirtir. Sayfada bu tür birçok blok olduğunda, "class" niteliği belirtilir. Bu, tarayıcının belirli bir blok için hangi kuralın uygulanacağını anlaması için gereklidir.

Şimdi, sözde kuralın kendisini oluşturmanız gerekiyor.

CSS kapsayıcısı:

Div ( genişlik: %100; metin hizalama: merkez; ) div img( ağırlık: %100; yükseklik: otomatik; )

Bu kod, yalnızca uyarlanabilir düzen için izinleri ayarlar. Özellikle, yükseklik (yükseklik) otomatik olarak ayarlanırken genişliğin (ağırlık) her zaman web tarayıcısı istemci alanının genişliğinin %100'ü olması gerektiğini belirtir.

Uyarlanabilir düzeni kontrol etme

Uyarlanabilir düzeni kontrol etmek için özel araçlar vardır. Örneğin, GoogleChrome tarayıcısında "F12" tuşuna basabilir ve ardından açılan panelde akıllı telefon ve tablet görüntüsünün bulunduğu simgeye tıklayabilirsiniz. Bu eylemden sonra, ilgilendiğiniz çözünürlüğü belirtmeniz gereken birkaç panel daha görünecektir.

Daha da kolay hale getirilebilir. Duyarlı tasarımın çalışıp çalışmadığını kontrol etmek için CTRL'yi basılı tutmanız ve ardından "+" veya "-" üzerine tıklamanız gerekir. Bu işlemden sonra, sayfa buna göre artmalı veya azalmalıdır, ancak uyarlanabilir mizanpajın uygulandığı öğe, oranlarının oranını koruyacaktır (veya kurallarda belirtilen başka bir şey yapacaktır).

Duyarlı tasarımın düzenini basitleştiren araçlar

Duyarlı tasarım düzeni oldukça zaman alan bir iştir. Bu nedenle, tüm bu prosedürlerin uygulanma süresini azaltmak için özel araçlar kullanmak daha iyidir. İyi bilinen Bootstrap* çerçevesi bunlardan biri olarak adlandırılabilir.

Örneğin, HTML ve CSS için bu araç takımı, tasarım geliştirmede kullanılabilecek çok sayıda önceden tanımlanmış sınıf içerir. Ayrıca, tüm kurallara ve standartlara uygun olarak uyarlanabilir öğeler oluşturmanıza izin veren dinamik olanları da içerir.

Kullanmaya başlamak için önce doğrudan CSS3 ve HTML5 hakkında bilgi edinmeli, ardından çerçevenin özelliklerini öğrenmelisiniz. Bununla birlikte, onunla çalışmanın karmaşıklıklarının çoğunu anladıktan sonra, duyarlı web sitesi tasarımı geliştirme süresini birçok kez azaltabilirsiniz.

*Bootstrap, Twitter Inc. tarafından geliştirilen açık kaynaklı yazılımdır. Ücretsiz olarak dağıtılır ve her zaman tavsiye isteyebileceğiniz geniş bir topluluğa sahiptir.