Web geliştirme giriş

Benim zamanımda (Tamam, Benim gün önce), web geliştirici meslek düşük biriydi. Bu profesyonel onur ölçekte yavrusu hater aşağıda ama Yankees hayranı yukarıda sıralanmış. Kullanılan tüm etiketleri ve şeffaflık ayırıcı görüntülerin Çünkü, Biz estetik duygusu olan ham hacker olarak görüldü.

Iyi, biz hala estetik anlamda eksik olabilir, ancak Web geliştirdi böylece web geliştirici mesleği. Bu gün biz iyi yazılmış yapmak için kullanabileceğiniz sayısız araçları vardır, standartlara uygun, ve güzel (Tamam, belki bu sonuncusu) web sayfaları. Eğer bugün kullandığımız büyük web sitelerinin çoğu (utanmaz fiş: Bu da dahil olmak üzere) Bu araçları kullanarak inşa edilir.

Tarayıcınızın ucunda araçları bizim kuş sürüsü bize düşünülemez web şeyler yaratmak için izin var sadece 10 yıl önce, gibi sayısız sosyal ağlar zaman kaybetmeyin için en iyi yol olduğunu iddia eden, “sıcak” zaten bin kere yapılmış bir şey devrim için iddia teknoloji start, ve Angry Birds klonlar orijinalinden daha sadece biraz daha kötü olduğunu iddia eden. Web üzerinde tüm. Yani belki bu araçlar kullanımların büyük gitmedin.

Yani bahsediyoruz oldum bu inanılmaz araçları nelerdir? Öncülük olmuştur (açıkçası şaşırtıcı) HTML5 denilen diller, CSS3, ve JavaScript, ki ben takma 3 webocalypse arasında atlısı. Burada her biri bir bakalım:

HTML

HTML (Düzgün HyperText Markup Language olarak bilinir; kötü bakmak istemiyorum insanlar sadece kısaltmasını kullanmak neden görebilirsiniz) olan dil web sayfaları hazırlamak için kullanılan. Bu sayfada sağ tıklayın ve “Kaynağı Görüntüle”. Bu sayfanın kullandığı HTML bulunuyor.

Aslında, HTML bir demet etiketler, bu tarayıcı yorumluyor ve ortaya koyar. Örneğin, Bu HTML kodunu bakmak:

<p>Seni bilmiyorum, ama ben basarak düğmeleri gibi.</p>

<br>

<düğme>Beni tıklayın!</düğme>

Bu HTML kodu bir paragraf metni tamamladı (the <p> etiketi bir paragraf başlar, the </p> etiketi bir paragraf biter.) Bir çizgi var (the <br>) ve sonra bir düğme sizin doya tıklayabilirsiniz. Tarayıcınız sizin için ekranda ortaya koymak olacaktır.

Böylece tüm iyi ve güzel. Ama HTML şey varsa, you get a webpage that looks like it came straight out of the 1990’s. Çok iyi değil zaten bu on çıktı (saç modelleri, müzik, vb) Ama bekleyin! Daha var!

CSS

Başka bir kısaltmadır. Yay. CSS açılımı Cascading Style Sheets, hangi onlar gerçekten bir yanlış isim biraz basamakla yok çünkü (ne olursa olsun, bu araçlar… Bu bilgisayar kod, bir şelale!) CSS olduğunu dil tarzı web sayfalarına kullanılan. Bu, çok, tarayıcınız tarafından yorumlanır.

Birlikte CSS ve HTML çalışmaları – HTML sayfanızın düzenini yapar, CSS onun yetenek verir. Bir ev inşa düşünün: HTML sıkıcı ama gerekli ahşap çerçeve sağlar, CSS neon renkleri ve ilginç mobilya ekler.

CSS oldukça basit bir dildir: Belirli bir HTML etiketi için (Bir paragraf gibi), Çeşitli stil sınıflar için değerleri belirleyebilirsiniz. Tarayıcınız CSS okumak ve tüm eşleşen HTML etiketleri için geçerli olacaktır. Örneğin:

p {

renk: kırmızı;

font-size: 16px;

}

Böylece her paragraf (HTML şeyler <p> etiketler) sahip olacak kırmızı yazı tipi ve olmayacak 16 piksel boyutunda. Eğer fark varsa, Bu Microsoft Word kullanabileceğiniz Aynı stilleri bazıları ve diğer uygulamalar.

Yani artık web sayfalarını ortaya koydu ve onlar güzel görünüyorsun. Ama burada bir şey: onlar yapmak hepsi. Onlar sadece orada oturup güzel bakmak. Harika ve tüm hangisi, ancak web kullanıcıların daha istiyorum. Onlar fantezi animasyonlar istiyorum. Onlar pop-up istiyorum (Tamam, belki onlar geri yaptım 2002, ama ben sapmak.) Onlar üzerlerine tıkladığınızda şeyler yapacak düğmelerini istiyorum.

Bu sonuncusu hakkında – bu bir sorundur. Bir yapabilirsiniz <düğme> HTML, ve bütün hafta bunu tıklayabilirsiniz, ama her zaman yakında bir şey yapıyor değil. Eğer düğmeye istiyorsanız, oh bilmiyorum, Ekranın genelinde fil taşımak ve bir şey saldırı, o zaman bir şey daha gerekiyor.

JavaScript'i

JavaScript değil bir kısaltmadır, Eğer merak ediyorsan,. Java denilen bir programlama dili gibi görünüyordu, çünkü JavaScript denir, öyle değil neden garip olan. Zaten, JavaScript tüm dinamik etkilere neden uygun bir programlama dili Eğer web üzerinde görmek.

Herhangi bir programlama dili gibi, JavaScript değişkenleri yapmak ve işlevleri kullanmak komutları bir dizi. JavaScript hakkında serin bölümü (iyi, Bir programlama dili olabilir gibi serin) Eğer bu HTML öğelerini erişebilirsiniz olduğunu (paragraflar ve düğmeler gibi) ve CSS stilleri (yazı tipi, renk ve boyut gibi) ve onları değiştirmek. Bu kod bak:

var paragraf = $('S');

paragraph.css('Renk','Mavi');

Bu JavaScript kodu sayfadaki tüm paragraflar bulacaksınız – the $ işareti tüm eşleşen öğeleri bulmak için tarayıcı söyler, ve "s’ bu paragrafları seçmek gerekiyor demektir (hatırlamak <p> HTML elemanı?) Sonra bir değişkene paragraflar saklayabilirsiniz, ve komut tarayıcı kendi renk CSS stilini değiştirmek için mavi.

Ben ilginç bulduğum şey (tekrar, Bu tüm bir bakış açısından olduğu “webdev”) üç dil birlikte çalışmak ne kadar zarif olduğunu. JavaScript bu son satırı sayfanın HTML ile etkileşim ve CSS bunu stil kullanılır. Bu diller, aynı şey sadece farklı bileşenleri gibi değil – Onlar bir ve aynı konum, aynı şaşırtıcı makinenin farklı yanları.

Büyüleyici ses? Ben öyle düşünüyorum. Bu web güzelliği sadece bir parçası.