Web Arayüzleri Oluşturma: Nereden Başlamalı

İlan

Tuğla ve harçtan daha fazlası, bilgisayar kodu ve pikseller 21. yüzyıl ekonomisinin temelidir. Tarayıcınızda "Sayfa Kaynağı" veya "Geliştirici Araçları" na baktıysanız, büyük olasılıkla bir metin dağınıklığıyla karşılaştı ve web sayfasının nasıl çalıştığını merak ettiniz.

Web geliştiricileri çağırıyor G,raphical User bennterfaces (GUI) toplu olarak başlangıç ​​aşaması bir web sayfasının arka ucunun aksine. Ön uç, kullanıcının manipüle edebileceği, işlem yapabileceği ve başka şekilde kullanabileceği şeydir. Arka uç, ön uç tarafından ima edilen tüm bilgi ve görevleri içeren ve destekleyen bir altyapı olarak düşünülebilir.

Bu makale ön uç hakkındadır. Bölgeyi haritalandıracağız, böylece ön ucu ne yapan farklılıkları ve yetenekleri anlayabilirsiniz. çekici ve etkileşimli web oluşturmak için web geliştiricisinin araçlarını anlamlandırmaya ve kullanmaya nasıl başlayacağınızı gösterir sayfaları.

Web Tasarımı ve Ön Uç Geliştirmeye Karşı

Büyük organizasyonlarda tasarım ve geliştirme, farklı beceri setlerine sahip profesyonel ekipler tarafından üstlenilen görevlerdir. Tasarımcılar belirli bir görsel ve etkileşim tasarımı yaratırlar; ön uç geliştiriciler bunu uygulardı.

Bununla birlikte, bir birey için keşifinizi sınırlamak için bir neden yoktur: sadece gelişmeyle ilgilendiğiniz için, tasarım vizyonunuz olmadığı anlamına gelmez, bunun tersi de geçerlidir. Temel web teknolojileri veya tasarım ilkeleri hakkında az miktarda bilgi sahibi olmak, kariyerinizde veya işinizde oldukça faydalı olabilir.

Ön uç geliştirme, gittikçe daha az bir kodlama faaliyetidir. Dahası, düşüncesinde yarısından fazla tasarım olduğu için: baskı üretimi dünyasından birçok kavram çizilir. Daha azı, çünkü bilgisayar kodu kullanırken, bu kod daha az karmaşık, daha bağışlayıcı ve programlamadan daha az temel bilgi gerektiren bir çeşittir diğer web programlama dilleri (birçoğu arka uçta bulunabilir) Hangi Programlama Dilini Öğrenecek - Web ProgramlamaBugün, internete güç veren çeşitli web programlama dillerine bakacağız. Bu, yeni başlayanların programlama serisinin dördüncü bölümüdür. Bölüm 1, biz temel öğrendim ... Daha fazla oku .

Web'in Ön Ucu: İşaretleme, Stil Sayfası ve Programlama Dilleri

Çoğu web sayfası bir dizi teknolojiyle oluşturulur: köprü metni biçimlendirme dili (HTML), basamaklı stil sayfaları (CSS) ve JavaScript (JS):

• İşaretleme dilleri HTML gibi bir belgeyi işaretlemek etiketler. Etiketler semantik içeriği sınırlar ve belgeyi yapılandırır. Yapılandırılmış belgeler tarz.
• CSS bir stil sayfası dili ve baskı stili yönlerin bir sayfa oluşturucusuna (bir baskı makinesi için son yazdırılabilir görüntüyü oluşturan) yönlendirmesi; web üzerinde, CSS genel olarak tipografi ve mizanpaj gibi içeriğin sunumunu ve grafik yerleştirmeyi belirler.
• JavaScript, önceki ikisinin aksine, Programlama dili. JS, etkileşimi ve kullanıcı girişini yönetir ve kullanıcının ürettiği etkinliklere odaklanır. Resmi biraz daha doldurmak için, olay güdümlü bir paradigmanın tersi, programlamanın kullanıcı girdisine bakılmaksızın yürütüldüğü yerdir.

HTML

Yirmi yılı aşkın bir süredir ve HTML'nin temel amacı aynıdır: bir okuyucu için amaçlanan metni belgeyi ayrıştırmak için gereken yapıdan ayırmak.

Neden ihtiyacın var

HTML neden hala önemlidir? Basitçe ifade etmek gerekirse, HTML, içeriğinizin anlamsal anlamının yattığı yerdir. Bu, arama motoru örümcekleri ve ekran okuyucuları gibi makine okuyucuları için gereklidir (erişilebilirlik için). Zamanla, anlamsal olanı ve yapısal olanı ayırmanın önemi zamanla azalmak yerine büyüdü. HTML'nin (5) en son sürümü,

,

HTML Öğesinin Anatomisi

HTML öğeleri, en azından, etiketleri açma ve kapatma, her etiket , böyle bir paragraf etiketi, aşağıdaki camgöbeği. Öğeler alabilir Öznitellikler, öğeyi HTML ve JS'nin etkileyebileceği bir grubun üyesi yapan “sınıf” gibi macentada aşağıdaki gibi. stil içeriği aşağıda kırmızı renkle yazılmış olan öznitelik aslında yalnızca bu öğe için bir defalık bir CSS kuralı oluşturmanın bir yoludur. (Aşağıda tartışacağımız gibi CSS en iyi site veya sayfa düzeyinde yazılır.)

Bu işaretlemenin sonucu:

Düz paragraf metni burada.

Ekstra Kredi (İleri Düzey)

Her türlü geliştirici, uygulama hızına takıntılıdır. Bu amaçla, yazma ve okunabilir satırlar oluşturma hızları için dilleri kendileri optimize edeceklerdir. Buna denir sözdizimsel şekerleme. HTML topluluğu bu çabalardan birkaçını üretti.

Muhtemelen acemi olduğunuzda neden geliştirici merkezli bir kısayol kullanıyorsunuz? Daha basit biçimlendirmede bir şeyler oluşturarak, standart bir sonuncuya karşı doğrularken, ifadeye değil niyeti odaklayabilirsiniz. Basitleştirilmiş biçimlendirmede oluşturduğunuz kaynak dosyaları geçerli HTML'ye derlenir veya derleyici belirli bir satır numarasına hata atar. Kayıp bir köşeli parantez için "etiket çorbası" ile avlanmaktan daha öğretici bulabilirsiniz. Her biri, bunları HTML'ye dönüştürmek için bir aracı yazılım gerektirir. (Bu ekstra sonuçta.)

• haml (HTML Soyutlama İşaretleme Dili) | gerektirir Yakut (daha önce düşünceli bir şekilde yazdığımız 3 Ruby Programlama Dilini Öğrenmeye Başlamanın Etkileşimli, Eğlenceli, Ücretsiz YollarıRuby etkileyici, çok üst düzey bir betik dilidir. Web'de esas olarak Ruby on Rails web geliştirme çerçevesinin bir parçası olarak, aynı zamanda bağımsız olarak kullanılır. Ruby'nin ne olduğunu merak ediyorsanız (değil ... Daha fazla oku ) derlemek
• Jade [Bozuk URL Kaldırıldı] | gerektirir node.js (burada bir giriş bulacaksınız Düğüm nedir. JS ve Neden Bakım Yapmalıyım? [Web Geliştirme]JavaScript, tarayıcıda çalışan sadece istemci tarafı bir programlama dilidir, değil mi? Artık değil. Node.js, sunucuda JavaScript çalıştırmanın bir yoludur; ama çok daha fazlası. Eğer... Daha fazla oku ) derlemek
• İnce | Ruby'nin derlenmesini gerektirir (yukarıdaki gibi)

CSS

CSS, semantik içeriğin ve belge sunumunun ayrı olarak yerleştirilmesini sağlar, böylece düzen, renkler ve tipografi gibi stilistik özellikleri taşınabilir ve farklı belgeler için uygulanabilir hale getirir. İçerik ve görsel tasarım ayrı olduğunda, geliştirici görsel tasarımda daha fazla esneklik ve tutarlılık kazanır.

Neden ihtiyacın var

Unstyled web siteleri korkunç ve zevksiz görünüyor. Okunabilir olsalar da, CSS, sağladığı düzen nedeniyle görsel bilgi hiyerarşisinin temel taşıdır. Örneğin, aşağıdaki şekil, bölümün geçerli üst gezinme menüsünü kısmen göstermektedir. makeuseof.com, herhangi bir CSS uygulanmadan.

Tipografi ve renk dışında, stilsiz menünün dikey olduğuna dikkat edin, çünkü tarayıcının varsayılan stili budur. 1990 yılında interneti yeniden oluşturmak istemeniz pek olası değildir, bu nedenle sağlıklı ve sürekli bir CSS bilgisi dozunun gerçekten yetkin olmasını istersiniz. Ayrıca, iPhone'lar, tabletler, vb. Gibi farklı boyutlardaki ve bağlı cihazların yükselmesiyle en önemli becerilerin “Duyarlı Tasarım” veya farklı ekrana uyum sağlayan web sayfaları haline gelmesi boyutları. Tüm bunlar CSS ile gerçekleştirilir.

Bir CSS Kuralının Anatomisi

CSS kuralları şu üç yerden birinde yazılır: a) bir öğe içinde satır içi, b)

İdeal olarak, stiller birden fazla web sayfasının başvurabileceği ayrı stil sayfalarında yazılır. Aynı kurallar dizisini kullanarak yazarlar zamandan tasarruf edebilir ve daha fazla düzen ve tutarlılıkla görsel sunum oluşturabilirler. (Satır içi stiller, site veya hatta sayfa çapında bir stilin temelini oluşturmanıza yardımcı olamaz - bu yüzden en iyi şekilde belirli ihtiyaçları karşılamak için kullanılırlar.)

CSS kuralları bir selektör, yeşil yazılı. Bu durumda, kural için seçici p, paragraf için: kural paragraf öğelerine uygulanır. Kural, aksine "kıvırcık ayraçlar" içine eklenmiştir . Bu durumda, kural paragraf metninin yazı tipini normal yapar.

CSS kuralları bu girişin izin verdiğinden daha karmaşık ve karmaşık olabilir. Bu nedenle, taahhüt edilen zaman açısından, CSS'nin ustalaşması HTML'den çok daha uzun sürecek.

Ekstra Kredi (İleri Düzey)

HTML gibi, CSS de daha fazla, daha hızlı ulaşmak isteyenler için optimizasyonlarına sahiptir.

• SUKDÖ'nün (ve SCSS) | Yukarıdaki gibi Ruby gerektirir
• Az | Yukarıdaki gibi Node.js gerektirir

JavaScript

Birçok insan kodlamayı düşündüğünde, bunu bilgisayara talimat vermek olarak düşünürler. nasılyapmak şey. Bu, bir programlama dilinin görevidir, ön uç denklemine son ekimizdir.

Programlama dilleri genellikle anlambilimlerinde kullandıkları soyutlama düzeyine, ata dillerine, paradigmalar, ve onların Yazma disiplinleri. JavaScript basit sınıflandırmaya karşı koyar çünkü çok farklı amaçlara uyacak şekilde çok sayıda çerçeveye genişletilmiştir. Kodlama kavramlarına sahip saksağan oynayan esnek, belirsiz bir şekilde C-ailesinden türetilmiş, çok paradigma, gevşek tipte hibrit bukalemun. Çok genel amaçlı bir dilin harika bir örneği ya da birçok farklı dilin çok kötü bir örneğidir.

Neden ihtiyacın var

Neden JavaScript öğrenmelisiniz? Meslektaşımın da belirttiği gibi, JavaScript'in şampiyonları ve dedektörleri var Yeni Başlayanlar İçin Öğrenmesi Gereken 6 En Kolay Programlama DiliProgramlamayı öğrenmek, eğitim süreci kadar doğru dili bulmaktır. İşte yeni başlayanlar için en kolay altı programlama dili. Daha fazla oku özellikle ilk kez öğrenenler için uygunluğu durumunda. Bu belki günümüzün en popüler programlama dili. Kodlama krallığının geri kalanını anlamak için güçlü bir temel oluşturmasa da, Ruby veya PHP ile birlikte JS öğrenmek için iyi bir argüman var.

Bununla birlikte, vanilya JS çok ileri gitmiyor - bugünün web sayfalarından çerçeveler sorumlu.

Popüler Çerçeveler

• Açısal, Google’ın GMail ve diğerleri gibi web uygulamaları için JS çerçevesi.
• JQuery Web'i Etkileşimli Hale Getirme: jQuery'ye GirişjQuery, neredeyse her modern web sitesinin kullandığı bir istemci tarafı komut dosyası kitaplığıdır - web sitelerini etkileşimli hale getirir. Tek Javascript kütüphanesi değil, ancak en gelişmiş, en desteklenen ve en yaygın kullanılan kütüphanedir ... Daha fazla oku , zaten MUO tarafından kapsanıyor Web'i Etkileşimli Hale Getirme: jQuery'ye GirişjQuery, neredeyse her modern web sitesinin kullandığı bir istemci tarafı komut dosyası kitaplığıdır - web sitelerini etkileşimli hale getirir. Tek Javascript kütüphanesi değil, ancak en gelişmiş, en desteklenen ve en yaygın kullanılan kütüphanedir ... Daha fazla oku WordPress'i diğer uygulamalar arasında güçlendirir.
• Tepki, Facebook mühendislik lejyonları tarafından inşa edilmiş, kullanıcı arayüzü oluşturmak için yapılmıştır.

Ekstra Kredi (İleri Düzey)

JavaScript’in en içten doğası, yapının bir şekilde dayatılması için yalvarır. Aşağıdaki şeker kaplamalarının her biri,

• CoffeeScript | Yukarıdaki gibi Node.js gerektirir
• daktilo ile yazılmış yazı | Yukarıdaki gibi Node.js gerektirir

Öğrenmeye Nereden Başlamalı

Ön uç geliştirme artık her türlü bilgi çalışanı için önemli bir iş becerisi olarak kabul edildiğinden, e-öğrenme kursları şeklinde birçok başlangıç ​​noktası bulacaksınız. İşte okuyucularımız için yaptığımız küratör bir liste:

• Coursera (Ücretli)
  Coursera, üniversitelerden ve öğrenim kurumlarından çevrimiçi kurslar toplar. Fiyat aralığı bir kurs için 50-250 USD arasındadır, ancak yüksek bir bilgi standardı ve yüksek yeterlilik sonuçları reklamını yaparlar.
• Genel Kurul Toplantısı (Bedava)
  Genel Kurul, ücretli mesleki eğitim için popüler bir seçenektir. Dash onların ücretsiz teklifidir ve HTML / CSS / JS'yi kapsar.
• MakeUseOf.com - 2017 Kodunu Öğrenin Paketi (Ücretli, Fiş)
  Ön ve arka uç web geliştirme gamını kapsayan 10 sınıfa ömür boyu erişim, en az 20 USD.
• Mozilla Geliştirici Ağı (Bedava)
  MDN yetkili olmakla birlikte, sınıf stili eğitimden veya yalnızca çevrimiçi oyunlardan oluşan tekliflerden daha fazla dokümantasyon tarzından yararlanır.
• Ağaç ev (Ücretli)
  Başka bir çevrimiçi teklif, bu bir ders yerine aylık ödenir. Bu, viral Medium yazısında Karen X Cheng'in tavsiyesi üzerine geliyor.Tasarım okuluna gitmeden tasarımcı olarak iş bulma.”
• Web Tasarım Öğreticileri - Envato Tuts + (Eşit Kalitede Ücretsiz ve Ücretli İçerik Karışık)
  Tek seferlik makaleler ve genellikle tek bir konuda yüksek kaliteli, spesifik ve hedeflenmiş bilgilerin çok parçalı serileri.

Başlangıç

Ön uç geliştirmenin yeni başlayanlar için sahip olduğu avantajlardan biri, çoğunlukla, Pahalı özel araçlar: ön uç geliştirmenin en temel aracı, tarayıcınızın tarayıcısıyla eşleştirilen metin düzenleyicisidir. tercih:

• Gibi metin editörleri Git’in Atom metin editörü, Yüce metin (ücretli) veya Microsoft tarafından VS Kodu
• Gibi tarayıcılar Mozilla Firefox veya Google Chrome
• Barındırma veya yerel bir sunucuya sahip olmak (ancak bu makalenin kapsamı dışında) XAMPP) kurmak.

Daha kullanışlı, daha az kalıcı ise alternatifler web tabanlı canlı editörlerdir:

• Codepen.io
• JSbin.com

Kısa Kesimler

HTML yapıları çoğunlukla iyi anlaşılmıştır ve büyük bir sıklıkta yeniden anahtarlamaya tam olarak layık değildir. CSS için, ortalama sitenin stil sayfası binlerce satır uzunluğundadır ve birkaç modern sayfanın yalnızca elle yazıldığına bahse girebilirsiniz. Etkileşim açısından bazı standartlar ortaya çıktı. Bu gerçekler sayesinde, birçok ön uç geliştiricinin önceden oluşturulmuş çerçeveleri bir omurga olarak kullandığını ve sonra gerektiğinde ince ayar yapmayı, kaldırmayı veya değiştirmeyi göreceksiniz.

• çizme atkısı, aslında Twitter tarafından geliştirilen, bugün web'de yaygın olarak bulunan HTML, CSS ve JS şablonlarını içerir. Bootstrap neredeyse bir ortak dil web geliştirme başlangıcında.
• Yapı temeli kendisini dünyanın en gelişmiş çerçevesi olarak tasarlar ve küçük boyut ve hız üzerinde durularak oluşturulur.

Referans malzemesi

• A List Apart - A listesi, “Web Sitesi Yapanlar İçin”
• Kullanabilirmiyim - “HTML5, CSS3 vb. İçin destek tabloları”
• CSS-Tricks - CSS topluluğu için bir merkez ve en iyi uygulamalar ve uyumluluk hakkında bilgi kaynağı
• HTML Living Standard Belgeleri - “Yaşam Standardı - Web Geliştiricisinin Sürümü”
• HTML5 Lütfen - “Yeni ve parlakı sorumlu bir şekilde kullanın”
• Smashing Dergisi - “Profesyonel Web Tasarımcıları ve Geliştiricileri İçin”

Sonuç

Umarız ön uç dünyasına bu yönelimi beğenmişsinizdir. Gördüğünüz gibi, ön uç geliştirme, çok fazla olasılıkla dolu, ancak birçok giriş noktasına sahip bir alandır. Öğrenmek, portföyünüze etkileyici bir beceri katacak ve kariyerinizde bir sonraki adımı atmanızı veya tamamen yeni bir taneye geçmenizi sağlayacaktır.

Geliştiriciler: Ön uç yığınınızda neler var?

Yeni başlayanlar: Sizi yönlendirmek için başka ne ekleyebiliriz?