Pengenalan kepada pembangunan web

Kembali pada hari saya (OK, sebelum hari saya), profesion pemaju web adalah satu yang rendah. Ia menduduki tempat di bawah puppy pembenci tetapi di atas Yankees peminat pada skala penghormatan profesional. Kerana semua tag dan imej ketelusan spacer kita digunakan, kita dilihat sebagai penggodam mentah tanpa rasa estetika.

Well, kita masih ada kelemahan dalam erti estetik, tetapi sebagai Web telah membangunkan begitu juga profesion pemaju web. Hari ini terdapat banyak alat yang boleh kita gunakan untuk membuat yang ditulis dengan baik, standard mematuhi, dan cantik (OK, mungkin tidak yang terkini) laman web. Kebanyakan laman web yang hebat yang anda gunakan pada hari ini (palam tahu malu: termasuk yang ini) dibina menggunakan alat ini.

Sekawanan kami alat di akhir pelayar telah membolehkan kami untuk mewujudkan perkara-perkara di web yang tidak dapat dibayangkan hanya 10 tahun yang lalu, seperti banyak rangkaian sosial yang mengaku sebagai cara terbaik untuk membuang masa anda, “panas” startups berteknologi mendakwa telah merevolusikan sesuatu yang telah dilakukan seribu kali, dan klon Angry Birds yang mengaku sebagai hanya sedikit lebih buruk daripada yang asal. Semua di web. Jadi mungkin alat ini tidak pergi ke yang paling besar kegunaan.

Jadi apakah alat-alat yang menakjubkan saya telah bercakap tentang? Menerajui telah menjadi (terus-terang yang menakjubkan) bahasa dipanggil HTML5, CSS3, dan JavaScript, yang saya nama samaran 3 penunggang kuda daripada webocalypse yang. Berikut adalah melihat setiap satu:

HTML

HTML (betul dikenali sebagai HyperText Markup Language; anda boleh lihat mengapa orang-orang yang tidak mahu kelihatan buruk hanya menggunakan akronim) adalah Bahasa yang digunakan untuk meletakkan laman web. Klik kanan pada halaman ini dan klik “Lihat Sumber”. Itu HTML yang menggunakan halaman ini.

Pada asasnya, HTML adalah sekumpulan tag, yang pelayar menterjemah dan membentangkan. Sebagai contoh, melihat kod HTML ini:

<p>Saya tidak tahu tentang anda, tetapi saya suka butang menekan.</p>

<br>

<butang>Klik saya!</butang>

Ini kod HTML telah dibalut teks dalam perenggan yang (yang <p> tag bermula perenggan, yang </p> tag berakhir perenggan.) Ada satu baris (yang <br>) dan kemudian butang anda boleh klik ke kandungan jantung anda. Penyemak imbas anda akan meletakkan ia keluar di skrin untuk anda.

Jadi, itu semua baik dan baik. Tetapi jika anda mempunyai apa-apa tetapi HTML, you get a webpage that looks like it came straight out of the 1990’s. Tidak banyak yang baik keluar dari dekad itu pula (gaya rambut, muzik, dan lain-lain) Tetapi tunggu! Terdapat lebih!

CSS

Satu lagi singkatan. Musim panas. CSS bermaksud Cascading Style Sheets, yang sedikit kesilapan nama kerana mereka tidak benar-benar terjun (apa cara yang… ia kod komputer, tidak air terjun!) CSS adalah Bahasa yang digunakan untuk laman web gaya. Ini, terlalu, ditafsirkan oleh pelayar anda.

CSS dan HTML kerja bersama-sama – HTML membuat susun atur halaman ini, CSS memberikan bakat yang. Bayangkan membina rumah: HTML menyediakan rangka kayu yang berwarna hijau tetapi perlu, CSS menambah warna-warna neon dan perabot yang aneh.

CSS adalah bahasa yang cukup mudah: tag HTML tertentu (seperti perenggan), anda boleh menentukan nilai-nilai untuk kelas pelbagai gaya. Penyemak imbas anda akan membaca CSS dan memohon kepada semua tag HTML yang hampir sama. Sebagai contoh:

p {

warna: merah;

font-saiz: 16px;

}

Jadi setiap perenggan (barangan dalam HTML <p> tag) akan mempunyai merah fon dan 16 piksel dalam saiz. Jika anda perasan, ini adalah sebahagian daripada gaya yang sama anda boleh gunakan dalam Microsoft Word dan aplikasi lain.

Jadi sekarang laman web anda yang dibentangkan dan mereka kelihatan cantik. Tetapi di sini adalah perkara yang: itu sahaja yang mereka lakukan. Mereka hanya duduk di sana dan kelihatan cantik. Yang besar dan semua, tetapi pengguna web mahu lebih. Mereka mahu animasi mewah. Mereka mahu pop-up (OK, mungkin mereka tidak kembali dalam 2002, tetapi saya menyimpang.) Mereka mahu butang yang akan melakukan barangan apabila anda klik pada mereka.

Mengenai yang terkini – bahawa satu isu. Anda boleh membuat <butang> dalam HTML, dan anda boleh klik minggu semua, tetapi ia tidak melakukan apa-apa bila-bila masa tidak lama lagi. Jika anda ingin butang untuk, oh saya tidak tahu, bergerak gajah anda di seluruh skrin dan menyerang sesuatu, then you need something more.

JavaScript

JavaScript adalah tidak sapaan, jika anda tertanya-tanya. Mereka memanggilnya JavaScript kerana ia kelihatan seperti bahasa pengaturcaraan yang dipanggil Jawa, yang pelik menyebabkan ia tidak. Bagaimanapun, JavaScript adalah a proper programming language that causes all the dynamic effects yang anda lihat di web.

Seperti mana-mana bahasa pengaturcaraan, JavaScript adalah satu siri arahan yang membuat pembolehubah dan menggunakan fungsi-fungsi. Bahagian yang sejuk kira-kira JavaScript (baik, as cool as a programming language can be) is that you can access those HTML elements (like paragraphs and buttons) and CSS styles (like font color and size) and change them. Look at this code:

var paragraph = $(‘p’);

paragraph.css(‘color’,’blue’);

This JavaScript code will find all the paragraphs on the page – yang $ sign tells the browser to find all matching elements, and the ‘p’ means it needs to choose paragraphs (remember the <p> element from HTML?) Then you can store the paragraphs to a variable, and the command the browser to change their color CSS style to biru.

Apa yang saya dapati menarik (lagi, ini adalah semua dari sudut pandangan yang “webdev”) ialah bagaimana elegan tiga bahasa bekerjasama. Barisan terakhir JavaScript berinteraksi dengan HTML halaman dan CSS yang digunakan untuk gaya ia. Ia tidak seperti bahasa ini hanya komponen yang berbeza daripada perkara yang sama – mereka satu dan sama, dua pihak yang berbeza mesin menakjubkan yang sama.

Bunyi yang menarik? Saya fikir ia. Itu hanya sebahagian daripada keindahan web.