Pengantar - Pemrograman HTML5 dengan JavaScript dan CSS3

Programming di HTML5 dengan JavaScript dan CSS3

Hey semuanya.

Aku akan menjadi pemandu Anda melalui web development yang indah, di mana kita akan belajar teknologi terbaru dan teknologi web terbesar, benar, teknologi ini yang merupakan inti dari pengembangan front-end web. Tujuan kami dalam pengantar ini adalah untuk mendapatkan Anda terbiasa dengan apa yang akan kita akan bicarakan dalam seri ini. Semua teknologi yang indah, HTML5, JavaScript, CSS3, jQuery, AJAX, JSON, kita punya semuanya.

Jadi kita akan mengambil hanya gambaran singkat tentang apa ini peran teknologi berada dalam  pengembangan web dan bagaimana mereka bekerja sama untuk membangun sebuah situs yang mengagumkan. Kemudian kita akan mendapatkan akrab dengan bahasan. Kita akan menuju ke situs Microsoft. Kita akan mendapatkan akrab dengan apa yang akan mereka harapkan dari kami dan melihat tujuan dan berbicara sedikit tentang segala sesuatu yang tercakup dalam tahun ini.

Pada saat yang sama, kita akan berbicara tentang ikhtisar dan bagaimana kaitannya dengan tujuan dalam bahasan. Dan pada akhir materi ini, kita akan melihat sebuah contoh situs secara bersama-sama benar-benar hanya untuk menunjukkan bagaimana semua teknologi ini bisa datang bersama untuk membuat sesuatu yang menyenangkan dan sejuk dan segar.

Dan tujuan dengan situs web sampel ini tidak membawa Anda melalui semua kode dan membangunnya sepanjang seri, karena itu akan berakhir satu, besar, spaghetti-kode berantakan lebih buruk dari yang sudah ada . Kami akan melakukan banyak coding. Otak Anda akan semua kode keluar pada akhir seri ini. Namun gol dengan bahasan lebih dari desain sudut pandang .

Pada setiap akhir materi, kami hanya akan mengambil beberapa menit untuk berbicara tentang di mana konsep atau teknologi cocok dalam sebuah situs web lengkap. Mari kita bicara sedikit tentang teknologi yang membentuk bahasan seri ini dan sebagian besar pengembangan web saat ini. Dan jika saya harus menggambarkan ketiga teknologi tersebut di satu kata, saya akan mempertimbangkan struktur HTML , JavaScript interaksi dengan struktur dan konten, dan Presentasi CSS .

Apa masing-masing dari mereka benar-benar adalah, HTML5 dianggap sebagai markup language.

Apa itu bahasa markup?

Ini adalah bahasa berbasis tag yang menggambarkan struktur dan berisi konten dalam halaman. Dan saya ingat ketika HTML5 keluar. Ada tweet yang mengagumkan dari wanita ini. Dia mengatakan, HTML5 bukan bahasa markup, itu bahasa mashup. Dan itu adalah salah satu tweet paling keren yang saya lihat tentang HTML5 karena dia sudah mati. Ini mash up banyak, banyak, banyak teknologi yang berbeda. Kami punya hal-hal seperti audio dan video sekarang native didukung, yang berarti kita tidak lagi harus bergantung pada plug-in. Aku sedang melihat Anda, Flash -untuk konten multimedia. Dan hanya untuk beberapa nama lebih dari ini fitur, kita punya semantik. Semantik adalah cara yang lebih baik untuk menggambarkan struktur dan isi situs kami .

Browser memahami mereka lebih baik .

Kita bisa memahami mereka lebih baik karena mereka lebih mudah dibaca. Jadi itu besar, sebagian besar dari HTML5. Dan itu sebenarnya video pertama bahwa kita akan masuk ke dalam adalah benar-benar memahami bagaimana struktur sebuah website dengan menggunakan fitur semantik HTML5. Kami juga punya penyimpanan offline, yang pada dasarnya adalah sekarang, bukan hanya mengandalkan cookies untuk offline penyimpanan, kita memiliki seluruh database dalam browser. Jadi kita punya cara yang jauh lebih efisien untuk menyimpan dan bekerja dengan data secara lokal di browser. Kami punya cara-cara baru untuk berkomunikasi dengan server melalui pekerja web dan proses latar belakang.

Kami juga punya akses perangkat.

Kami punya cara yang lebih mudah untuk berinteraksi dengan perangkat input dan output. Kami punya 2D dan 3D grafis dengan SVG dan kanvas. Dan daftar berjalan dan terus.Jadi kita akan menutupi banyak dari seluruh seri. Tapi Anda bisa melihat mengapa hal itu bahasa mashup daripada hanya bahasa markup. Ini bukan hanya untuk menciptakan struktur dan menggambarkan isi lagi. Ini jauh lebih dari itu karena kita dapat melakukan jauh lebih banyak dengan semua fitur asli.

Jadi HTML5 mengagumkan.

Ini di sini untuk tinggal. Ini adalah standar masa depan web. Jadi itu adalah waktu yang tepat untuk belajar dan terlibat. Kami juga memiliki JavaScript, bahasa scripting kami pilihan. Ini adalah bahasa berbasis browser kami, sangat populer, telah sekitar untuk waktu yang sangat lama. Paling sering digunakan untuk melakukan hal-hal seperti dinamis memperbarui struktur dan konten dari suatu halaman web tanpa harus kembali ke server dan refresh seluruh halaman. Kami punya banyak teknologi muncul selama tahun yang meningkatkan JavaScript, atau setidaknya meningkatkan pengalaman baik bagi pengembang dan pengguna akhir, hal-hal seperti jQuery.

jQuery adalah library JavaScript terbesar di luar sana, paling populer juga, karena menyederhanakan JavaScript. Hal ini mendorong perkembangan pesat untuk pengembang web karena benar-benar hanya menyederhanakan mengembangkan dan menulis JavaScript code.

Satu lagi adalah AJAX, Asynchronous JavaScript dan XML. Ini adalah teknologi yang meningkatkan pengalaman pengguna. Di masa lalu, jika kami harus memperbarui seluruh halaman atau mungkin hanya sebagian kecil dari isi halaman , kami harus menyerahkan seluruh halaman pula. AJAX memungkinkan kita untuk hanya mengirimkan hanya konten yang kita butuhkan. Jadi jika kita harus pergi ke server untuk mendapatkan hanya sedikit bit informasi, kita bisa melakukan itu, dan kemudian memperbarui hanya bahwa sedikit informasi dalam halaman web tanpa memperbarui seluruh halaman. Jadi secara dramatis meningkatkan pengalaman bagi pengguna, yang meningkatkan kualitas website kami. Akhirnya, kami memiliki CSS3, yang merupakan bahasa stylesheet kami, untuk membantu kita presentasi terpisah dari konten.

Jadi itulah keindahan. CSS, ketika keluar, itu hanya hal yang paling keren karena sekarang daripada harus satu ini, besar, halaman spaghetti -kode yang berisi semua konten kami dan semua styling informasi, sekarang kita memisahkannya. Kita punya tingkat yang baik dari pemisahan . Dan CSS3 menambahkan banyak fitur baru yang membuat hal-hal cantik , tetapi juga mudah untuk dilakukan. Hal-hal seperti animasi dan transisi, yang , sebelum CSS3, biasanya dilakukan dalam JavaScript dan mengambil banyak waktu, coding pengalaman, pengujian, dan tweaking untuk mendapatkan mereka benar, sekarang mudah dicapai dengan menggunakan CSS3. Jadi kita akan mengambil yang baik melihat bagaimana semua ini teknologi bekerja secara individu dan kolektif bersama-sama untuk membangun sebuah website, dan kita akan memiliki banyak bersenang-senang melakukannya.

Tapi untuk saat ini , mari kita kepala ke dalam browser dan mendapatkan akrab dengan persyaratan, per Microsoft. Jadi di sini saya memiliki browser terbuka. Buka browser favorit Anda. Hanya melakukan pencarian Google di sini. Dan link pertama di sini harus membawa kita hak untuk persyaratan ujian di website Microsoft . Hal pertama yang saya ingin tunjukkan adalah kita akan menjadi menggunakan Visual Studio 2012 untuk lingkungan pengembangan kami . Kami akan menggunakan Express Edition , yang
gratis , dan kita akan menggunakan versi Web dari Mengekspresikan Edition .

Bahkan , saya hanya menunjukkan Anda di mana Anda dapat men-download . Jika Anda hanya api membuka pencarian Google lain di sini , mari kita ketik Visual Studio 2012 Express. Di sana kami pergi .
Dan klik pada link pertama di sini , dan itu akan membawa Anda tepat ke halaman rumah . Jadi jika halaman awal perubahan di sini , maka Anda dapat menemukannya di Produk , Produk ekspres 2012 . Dan di sini mereka . Ada empat versi berbeda dari Express, Web , Windows 8, Desktop , dan Telepon . Jadi kita tertarik dalam edisi Web .

Ini dia . Setelah Anda berada di sana , tekan saja Download link . Ini akan membawa kita di sini di mana Anda dapat memilih bahasa Anda , dan maka Anda hanya dapat menekan Install Now , dan itu akan men-download dan menginstalnya melalui web . Satu hal yang saya ingin menunjukkan adalah itu gratis selama 30 hari kecuali jika Anda mendaftar. Pendaftaran gratis. Jadi mendaftar , Anda akan mendapatkan kunci , pop masuk Di sini, Visual Studio Express 2012 untuk Web . Dan Anda akan memilikinya selamanya . Jadi ini adalah apa yang kita akan menggunakan. Jangan ragu untuk men-download . Hit jeda, dan mencoba hal-hal ini seperti yang kita pergi. Sekarang, sejauh tujuan ujian , mari kita gulir ke bawah sedikit.

Memperluas Keterampilan Terukur, dan Anda dapat melihat itu pecah menjadi empat kategori. Kami telah Mengimplementasikan dan Memanipulasi Dokumen Struktur dan Obyek. Kami memiliki Pelaksana Program Arus, Mengakses dan Mengamankan Data, dan kemudian CSS3. Dan ini semua cukup terbagi rata pada setiap 25 %.

Jadi masing-masing ini membentuk 25 % dari ujian . Kita akan mulai di sini . Bahkan , bagaimana Anda dapat menghubungkan hal ini dengan seri adalah masing-masing poin-poin tersebut dalam seri. Jadi yang seharusnya memberi Anda cara yang baik untuk berhubungan untuk tujuan dalam ujian dan menemukan Anda jalan di sekitar jauh lebih mudah .

Jadi yang pertama 25 % , itu akan hanya bekerja dengan dokumen model objek dan sedikit dari segala sesuatu. Jadi pertama-tama kita akan mendapatkan akrab dengan fitur semantik baru HTML5 dan bagaimana struktur dokumen . Kami akan bekerja dengan pemrograman bekerja dengan elemen dan kemudian pemrograman bekerja dengan gaya . Jadi kita akan mendapatkan perasaan yang baik untuk HTML5 dan JavaScript dan bahkan sedikit di sini dari CSS . Dan kemudian kita akan masuk ke API HTML5, melihat banyak fitur HTML5 baru . Dan kemudian kita akan melihat besar di JavaScript dimulai dengan akhir pertama 25 % , benda , variabel , benda , dan metode. Dan kemudian kita akan masuk ke semua hanya dasar inti JavaScript hal di sini dengan menerapkan aliran program. Kita akan mulai dengan tiga pertama . Di dalam sini benar-benar hanya akan menjadi semua , sekali lagi, inti JavaScript pemrograman . Dan kemudian kita akan masuk ke beberapa hal yang rapi, callback, dan bagaimana untuk bekerja dengan jQuery dan AJAX , dan kemudian pekerja web Proses untuk menelurkan off ancaman latar belakang. Lalu kita akan masuk ke beberapa orang maju JavaScript teknologi dengan mengakses dan mengamankan data. Pasangan pertama di sini hanya memvalidasi input pengguna.

Anda akan bisa melihat bagaimana melakukannya di kedua HTML5 dan JavaScript. Dan kemudian mengkonsumsi data, yang akan fokus pada JSON, yang saya tidak berpikir saya sebutkan kembali slide kami, kan? Aku harus lupa yang satu itu. JSON adalah singkatan dari JavaScript Object Notation. Ini dasarnya dengan cara yang kita dapat melewatkan objek kita antara klien dan server. Ini adalah alternatif yang bagus untuk XML karena XML, sementara besar, dan itu standar, itu dapat dibaca manusia, itu sedikit sedikit membengkak. Ini tidak baik untuk alasan kinerja. JSON adalah seperti versi super-ringan dari XML. Jadi kita akan melihat bagaimana untuk bekerja dengan baik format . Dan kemudian kita akan melihat bagaimana cerita bersambung, deserialize, dan mengirimkan data baik JSON dan XML, dengan sedikit jQuery dan objek XMLHTTP Request.

Dan bagian terakhir yang akan fokus hanya pada CSS3 -bagaimana bisa melakukan segalanya dari styling hanya dasar untuk menciptakan konten fleksibel untuk membuat animasi. Dan ini adalah di mana kita akan melihat transisi, transformasi, animasi. Dan kemudian kita akan melihat bagaimana menggunakan penyeleksi dengan jQuery, dan kemudian juga bagaimana struktur file menggunakan penyeleksi. Jadi cukup banyak istirahat itu turun sebagai  sekali lagi, struktur, interaksi, dan kemudian bagian terakhir adalah presentasi. Plus, kami punya bagian tentang data karena apa website tanpa data dan berkomunikasi antara client dan server? Mari kita membuka tab lain. Dan aku memilikinya sebagai link di sini, favorit di sini pada file sistem, jadi mari kita membukanya. Dan Anda bisa melihat langsung dari kelelawar, kita punya animasi .

Dan jika kita memegang mouse anda ke atas judul, kita punya lebih animasi. Jadi demo ini dikemas penuh fitur baru dari HTML5 dan CSS3, dan bahkan menggunakan JSON dan jQuery untuk menarik ini YouTube pakan menjadi halaman kami di sini. Jadi seluruh struktur adalah HTML5. Ini semua markup semantik yang berisi struktur, dan saya bahkan menggunakan baru, fitur ini HTML5 keren disebut kanvas. Dan seluruh tujuan dari Doodler adalah untuk membawa Whiteboard kepada Anda .

Jadi sekarang Anda dapat memiliki papan tulis sendiri sambil menonton seri ini. Jadi ini adalah menyenangkan. Itu keren. Dan yang lebih penting  dibutuhkan semua teknologi yang kita akan belajar dan membawa mereka ke demo. Jadi sekali lagi, kami tidak akan pergi melalui semua kode di sini. Kami pasti akan memasok dengan seri. Tapi kami pasti akan berbicara tentang, pada akhir setiap bahasan, di mana konsep itu dan mana yang cocok teknologi dalam lengkap aplikasi seperti Doodler. Dalam bahasan ini, kami mengambil pengantar bahasan pemrograman di HTML5 dengan JavaScript dan CSS3. Kami mulai dengan gambaran teknologi untuk mendapatkan akrab dengan semua teknologi ini .

Kita akan belajar tentang HTML5, JavaScript, dan CSS3 yang berat . Kita juga akan melihat jQuery, AJAX, dan JSON. Dari sana, kami mendapat akrab dengan bahasan, yang tujuan, struktur, dan juga bagaimana seri bahasan berkaitan dengan tujuan tersebut . Dan pada akhirnya, kami mengambil melihat situs contoh kita akan referensi pada akhir setiap bahasan. Saya berharap ini telah informatif untuk Anda, dan saya.