Menciptakan Fleksibel Layouts dengan CSS3

Menciptakan Fleksibel Layouts dengan CSS3.
Jadi CSS3 datang dikemas penuh banyak teknik baru dan
sifat yang dapat kita gunakan untuk lay out struktur dan
konten dalam halaman kita.
Sekarang, banyak dari teknik ini baru, dan mereka
spesifikasi menjalani perubahan sepanjang waktu.
Jadi browser mengalami waktu yang sulit menjaga dengan mereka.
Tapi masa depan tentu cerah.
Dan ini jenis hal-hal yang Anda akan
lihat merevolusi bagaimana kita lay out kami
struktur dan konten kami.
Jadi di bahasan ini ini, tujuan kami adalah untuk hanya mendapatkan akrab dengan semua
dari potongan-potongan ini, apa yang bisa mereka lakukan.
Kita akan mendapatkan beberapa demo pergi.
Kita akan melompat keluar di web dan melihat bagaimana mereka saat ini
diimplementasikan.
Dan kita akan mendapatkan akrab dengan beberapa kode sebagai
baik di sepanjang jalan.
Jadi kita akan menendang bahasan ini ini off dengan gambaran singkat.
Kita akan mendapatkan akrab dengan semua sifat CSS3 dan bagaimana
mereka terlihat di atas kertas.
Dan kemudian kita akan melompat ke situs Microsoft dan mendapatkan
akrab dengan masing-masing ini secara individual.
Mereka punya CSS3 besar tangan- daerah lebih dalam mereka
situs test drive.
Ini dasarnya generator kode untuk semua hal ini,
tapi benar-benar, apa yang ada adalah sehingga Anda dapat mempelajari semua
properti.
Dan kita bisa melakukannya langsung.
Jadi kita bisa mengubah properti yang kita inginkan karena berkaitan dengan masing-masing
salah satu teknologi tersebut.
Dan seperti yang kita mengubahnya, hal itu akan memberi kita output hidup.
Dan itu juga akan memberi kita kode bahwa itu menghasilkan.
Jadi itu adalah cara yang bagus untuk belajar bagaimana semua hal ini bekerja, dan
semuanya bekerja di IE 10.
Jadi itulah alasan lain.
Dan sementara kita mendapatkan akrab dengan hal ini juga, kami akan melompat
ke Virtual bahasan ini Lab.
Aku melemparkan bersama-sama hanya demo kecil yang membutuhkan banyak ini
dan membawa mereka bersama-sama dalam satu.
Jadi kita akan lihat itu.
Dan sepanjang jalan, kita akan kepala ke caniuse.com untuk memeriksa
mendukung browser bagi banyak dari daerah-daerah di CSS3.
Yang pertama kita akan lihat adalah Kotak Fleksibel
Model, atau dikenal sebagai FlexBox.
Dan apa yang memungkinkan kita untuk melakukan, itu menangani salah satu masalah
yang kita miliki dalam CSS.
Dan itu adalah, apakah Anda pernah mencoba untuk berbaris apa-apa
secara vertikal maupun horizontal, dan kemudian mencoba untuk merata
spasi segala sesuatu yang ada di dalam wadah itu?
Ya, bukan hal yang mudah untuk dilakukan, setidaknya tidak baik,
cara mudah untuk melakukannya.
Nah, FlexBox perbaikan itu, karena apa yang memungkinkan kita untuk
lakukan adalah mengambil sebuah wadah -
katakanlah kita telah div sini yang berisi nav a, kami
konten, dan sidebar kita.
Jika kita menandai wadah ini memiliki tampilan FlexBox,
maka semua objek anak-anak dalam sini, kami telah penuh
kontrol bagaimana mereka ditata.
Karena apa yang akan lakukan adalah, kita dapat mengatakan kita ingin ini menjadi
10 % di sini.
Dan kemudian ini menjadi 80 % dari lebar.
Dan kemudian akan menggunakannya untuk ukuran mereka tergantung pada
lebar halaman kami.
Jadi itu adalah cara yang bagus untuk mengambil ruang yang tidak terpakai dan membagi-bagi itu
up secara merata di semua objek anak-anak.
Oleh karena itu flex istilah.
Hal lain yang tidak pernah benar-benar langsung yang
layout jaringan.
Kami harus menggunakan dragon teknologi
untuk mendapatkannya bekerja.
Kita akan membutuhkan tabel dalam HTML, kita akan membutuhkan beberapa JavaScript untuk
memanipulasi struktur tabel, dan kemudian kita akan perlu
CSS untuk cukup mereka semua.
Dan itu disamakan dengan tidak langsung
cara untuk melakukannya.
Ini selalu mengambil banyak waktu dan usaha dan
energi untuk menyelesaikannya.
Nah sekarang, CSS3 memperkenalkan layout grid sebenarnya di mana kita
bisa melakukannya murni dalam CSS.
Dan itu sangat akrab.
Ini seperti membangun sebuah meja.
Kami memiliki grid, maka kita memiliki baris, kita memiliki kolom.
Hanya itu jauh lebih fleksibel.
Kami memiliki kontrol lebih banyak atas posisi dan di mana
isi berjalan dalam grid kami.
Tapi grid umumnya digunakan untuk mengiris dan dadu utama
bagian dari antarmuka pengguna kami.
Sejauh konten pergi, meletakkan konten, kami punya beberapa
properti benar-benar keren untuk bekerja dengan.
Kami punya multi-kolom, yang hanya membuatnya sangat mudah untuk
kita untuk mengambil konten dan membaginya menjadi beberapa kolom
gaya koran.
Kami juga punya pengecualian.
Pengecualian benar-benar, benar-benar rapi.
Saya tidak sabar untuk menunjukkan salah satu demo yang saya temukan di
web, bahwa Anda harus melihat hanya karena itu besar
pelaksanaan pengecualian.
Tapi pada dasarnya, apa yang memungkinkan kita lakukan adalah mengambil
unsur atau mengatakan sebuah grafis SVG dan membungkus konten di sekitarnya.
Jadi masalah yang kita punya sebelumnya untuk pengecualian adalah mengapung.
Dan mengapung, kita tidak pernah benar-benar mendapatkan teks
melilit itu.
Mengapung akan selalu mendapatkan di jalan.
Nah, dengan pengecualian, kita dengan mudah dapat mengambil teks lain, atau
unsur-unsur lain, atau bahkan seperti yang saya sebutkan, grafis, seperti
Grafis SVG, dan membungkus teks di sekitar itu gaya majalah.
Dan kemudian daerah memungkinkan kita mengalir konten di elemen.
Jadi jika kita memiliki satu paragraf besar, dan kami ingin hal itu
terlihat seperti paragraf hanya di beberapa elemen, kita
bisa mengalir konten yang melalui beberapa elemen.
Dan kekuatan yang sesungguhnya kita akan mulai melihat adalah ketika
pengecualian dan daerah digabungkan.
Sekarang kita dapat mulai melakukan beberapa hal yang sangat licin.
Jadi sekarang kita dapat membuat wilayah di seluruh halaman yang
dihubungkan bersama, tapi masih di daerah yang berbeda, atau mungkin mereka
bahkan saling tumpang tindih, dan kita masih bisa pipa yang sama
isi semua jalan melalui mereka.
Baik.
Mari kita lihat hal ini dalam tindakan.
Sekarang, kita akan kepala ke Virtual Lab bahasan ini
di mana saya memiliki Internet Explorer 10 diinstal.
Jadi kita akan menggunakan Internet Explorer 10, pergi ke Microsoft
situs test drive, dan melihat banyak hal-hal ini di
tindakan, melihat beberapa kode.
Dan kemudian saya juga didownload dan diinstal Google Chrome
Canary, yang merupakan versi beta terbaru dan terbesar dari
Google Chrome.
Aku akan menunjukkan kepada Anda bagaimana kita bisa mengubah beberapa flag untuk mengaktifkan banyak
fitur WebKit, semua hal ini.
Dan kemudian kita akan melihat di demo kami, dan kami akan melihat bagaimana kita
benar-benar dapat kode barang-barang kami sendiri dan menjalankannya dalam
Google Chrome.
Baik.
Jadi kita di Virtual bahasan ini Lab.
Mari kita jalankan Internet Explorer 10.
Dan sekali kita di sini, saya telah menjadi favorited situs test drive kami
atas mereka, tangan di situs CSS3 test drive.
Jadi mari kita kepala di sana.
Dan jika kita gulir ke kanan, inilah semua hal kita
akan melihat di sini.
Tata letak multi-kolom, layout grid, tata letak kotak yang fleksibel,
daerah, dan mengapung posisi, yang pada dasarnya
pengecualian.
Sekarang, mari kita mulai dengan Fleksibel Box Layout.
Inilah yang sepertinya.
Jadi ini adalah wadah kami di sini.
Wadah ini memiliki tampilan MS Box.
Jika kita melakukan hal ini di Chrome, itu
akan WebKit Box.
Tapi begitu kita memiliki sebuah kotak, sekarang apa pun di dalam kotak ini
ditata bagaimana kita menginginkannya.
Dan kita punya alignment, yang akan hanya memberitahu kami
di mana itu selaras.
Jadi di sini Anda dapat melihat, karena saya mengubahnya, Anda dapat melihat
perubahan kode.
Ini adalah cara yang bagus untuk belajar hal-hal, juga.
Dan semua properti dan bagaimana mereka bekerja.
Berikut paket kami.
Jadi kita bisa memilih di mana kita ingin pak untuk memulai
dari dan mengalir dari.
Mulai dan pusat, membenarkan, kita akan membagi-bagi itu merata.
Dan kemudian Anda juga dapat memilih arah Anda.
Jika Anda ingin menjadi berturut-turut, jika Anda ingin menjadi kolom, jika
Anda ingin baris terbalik, kolom terbalik.
Dan kemudian Anda juga dapat memilih bagaimana Anda ingin untuk membungkus jika
yang meluap batas-batas wadah kami.
Jadi sekali kita telah kontainer kami mengatur dan semua
properti pada bagaimana kita ingin item dalam wadah yang
mengalir, maka kita dapat mengatur properti item tertentu.
Dan di sinilah kita akan menentukan apa yang fleksibel kita.
Jadi jika kita ingin kotak 2 untuk melenturkan - mengatakan, misalnya di sini,
kami ingin box 1 menjadi nav, kotak 3 menjadi sidebar kita, dan
kami ingin konten kami di sini untuk melenturkan, kita bisa
menempatkan fleksibel kami sebagai 1.
Apa itu artinya jika kotak ini adalah untuk memperluas sama sekali, maka
item kami tertekuk akan mengambil semua ruang ekstra.
Jadi kita akan mendapatkan demo yang baik tentang bagaimana ini bekerja ketika kita mendapatkan
ke Visual Studio di sini segera.
Mari kita gulir ke bawah ke bawah sini.
Kami juga memiliki layout jaringan.
Mari kita klik pada Grid di sana di bagian bawah, dan mendengar itu.
Berikut ini contoh jaringan kami.
Jadi hal pertama yang akan kita lakukan di sini, mari kita membawa
ukuran ini turun sedikit.
Bagaimana 350 ?
Yang terlihat baik.
Dan jalan, kode di sini, segera setelah kami mendapatkan lebih dari
di sini untuk struktur grid, ada di sini di sebelah kiri.
Jadi, inilah apa itu.
Hanya mengatur tampilan Anda ke ms -grid jika
Anda berada di Internet Explorer.
Jika Anda ingin melakukan hal ini di Chrome, lakukan webkit -grid.
Dan kemudian Anda bisa mengatur baris dan kolom Anda.
Itu saja untuk struktur.
Berapa banyak baris yang Anda inginkan, dan berapa banyak kolom yang Anda inginkan?
Dan di sini kita bisa menghapus dan menambahkan mereka cukup
mudah menggunakan UI ini.
Cukup sederhana di sana.
Anda juga dapat memiliki ukuran tetap jika Anda ingin.
Jika kita kepala ke item grid, sekarang kita bisa mulai perpipaan di
konten ke masing-masing sel-sel ini.
Dan Anda dapat dengan mudah menjangkau, baris dan kolom.
Dan kemudian Anda juga dapat mengatakan di mana baris awal kita adalah dan
di mana kolom awal kita juga.
Jadi cukup sederhana sejauh grid berjalan.
Ada hanya tidak banyak untuk itu.
Dan itu mengagumkan dan mudah untuk bekerja dengan, yang adalah apa yang kita
inginkan, karena ada banyak untuk itu sebelum makhluk ini
tersedia sejak kami harus menggunakan semua
teknologi untuk mewujudkannya.
Tapi sifat cukup sederhana sebagai
baik di sini di CSS.
Dan mereka memberikan beberapa grid sampel untuk bekerja dengan.
9 dengan 9, inilah satu - 3 kolom.
Tampak serupa benar ?
Berikut header kita, footer kami, sidebar, nav, dan konten.
Di bawah itu, kita memiliki jaringan yang lebih menarik.
Sepertinya logo Windows.
Dan di bagian bawah di sini, kami memiliki jaringan yang kompleks yang memiliki
banyak hal yang terjadi.
Sekarang, jika kita gulir ke bawah ke bawah, mari kita kepala ke kami
multi-kolom dan melihat bagaimana kita dapat membagi konten tekstual
terlihat seperti surat kabar.
Dan aku tidak yakin apa pun bisa semudah
layout multi- kolom, karena itu hanya masalah menemukan
apapun kontainer Anda adalah yang berisi konten Anda,
dan kemudian menentukan jumlah kolom.
Berapa banyak kolom yang Anda inginkan?
Di sini kita dapat menentukan tiga.
Sekarang akan memecahnya menjadi tiga kolom.
Dan kami memiliki kontrol atas lebar kolom, kesenjangan
di antara mereka.
Jika kita ingin memiliki aturan, Anda dapat melihat bahwa kita bisa mendapatkan bagus
perbedaan visual antara kolom kami di sini.
Dan Anda memiliki kontrol penuh atas gaya aturan itu,
warna, semua yang bagus.
Dan di bagian bawah di sini, Anda dapat mengontrol bagaimana data
dalam wadah yang ditulis dgn tanda penghubung.
Jadi sekarang tidak.
Jika kita memukul Auto, itu akan squish semuanya bersama-sama untuk mencoba
muat dan ditulis dgn tanda penghubung sesuatu yang berjalan
di baris yang terpisah.
Jadi, Anda memiliki kontrol penuh atas hal itu.
Pretty cool dan mudah untuk bekerja dengan di sini.
Sekali lagi, kita benar-benar hanya menentukan kolom Anda di sini, berapa banyak
kolom, dan kemudian Anda dapat gaya segalanya.
Dan kemudian jika Anda ingin tanda hubung juga, Anda
dapat menempatkan bahwa dalam sana.
Jadi itu semua cukup sederhana.
Mari kita lihat di sini di mengapung diposisikan.
Ini keren, juga, karena ini adalah bagaimana kita bisa melakukan
pengecualian, dan kita dapat memiliki teks berjalan di sekitar hal-hal seperti
gambar atau elemen lain yang berisi teks.
Jadi mari kita gulir ke bawah sedikit di sini, dan sekarang Anda
bisa melihat itu hanya mengambang.
Inilah masalah dengan float.
Ini mengganggu teks kami.
Jika kita melakukan wrap ms - aliran, namun, sekarang melihatnya.
Lihat membungkus teks di sekitar item kami, adalah elemen di sini?
Pretty cool.
Dan di sini kita dapat mengontrol mana itu.
Jadi kita hanya mendorong itu bersama.
Ada kotak di sini.
Kami hanya mendorongnya sepanjang grid.
Kita bisa melakukan kolom dan baris mencakup, kita bisa
membawanya dan pergi.
Tapi tidak peduli di mana kita katakan, teks membungkus di sekitar itu.
Benar-benar keren.
Dan juga, mudah untuk bekerja dengan.
Kami hanya menggunakan properti aliran bungkus.
Dan kita punya beberapa properti di sini untuk mengatur.
Kita akan melihat ini di sini juga ketika kita
masuk ke demo kami.
Tapi satu hal yang menyenangkan tentang ini - dan saya akan menunjukkan kepada Anda
sedikit lebih ketika kita masuk ke dalam pengecualian, karena ada kita
benar-benar dapat mengambil teks kita dan melakukan sesuatu yang keren dengan itu.
Seperti ini, bukannya kotak, bisa lebih teks,
warna yang berbeda.
Atau kita bisa menempatkan margin sekitarnya.
Dan sekarang kita punya teks dalam teks yang
melilit teks.
Dan itu terlihat mengagumkan.
Tapi ini akan menjadi besar untuk gambar seperti.
Jika Anda ingin gambar tepat di tengah-tengah teks Anda, sekarang
Anda dapat membungkus teks di sekitar gambar suka memiliki
gambar mengapung di atasnya atau di bawahnya atau di sekitarnya.
Mari kita menuju ke sini dan melihat daerah.
Daerah benar-benar keren.
Sekali lagi, ini adalah bagaimana kita dapat mengalir konten di seluruh elemen.
Jadi mari kita lakukan ini.
Check this out.
Jadi ini adalah satu besar - seperti yang Anda lihat di sini dengan sederhana -
itu hanya satu blok besar teks.
Jadi sebagai unsur, itu hanya tampak seperti ini.
Dan ini adalah bagaimana kita akan membacanya.
Kami akan gulir sekitar dan membaca semuanya.
Uh.
Sekarang, jika kita memukul Complex, dan CSS3 -
sebenarnya, mari kita pergi sederhana di wilayah CSS3.
Jadi sekarang, daripada gulir ke bawah, kita dapat menekan
Halaman 1, Page 2.
Dan kita bisa mengapung di kedua dari dibs ini.
Jika kita melakukan Complex, check this out.
Sekarang kita memiliki banyak elemen, satu blok besar
teks yang mengalir melalui daerah masing-masing.
Jadi itulah hal yang benar-benar keren tentang daerah.
Dan itu cukup sederhana untuk dilakukan, juga.
Kami mendirikan sumber kami, di mana pun data kami berasal, dan
kita melakukan arus ke dalam, dan kami nama itu.
Kemudian pada semua kontainer kami yang lain, kami akan pergi ke
mengalir dari, dan kita akan menentukan sumber kami, di mana itu
datang dari, dan itu akan mengalir konten yang melalui semua
daerah tersebut.
Jadi itu benar-benar, benar-benar mudah untuk bekerja dengan.
Mungkin bonus terbesar dari semua hal ini adalah ada hanya
tidak banyak untuk itu.
Ini semua CSS didorong, sehingga itu semua hanya menyiapkan CSS Anda
properti.
Dan itu saja.
Pemetaan mereka bersama-sama.
Baik.
Sekarang, sebelum kita melompat ke demo kami, kutunjukkan
sesuatu yang dingin, dan bagaimana semua hal ini bekerja sama untuk
membuat sesuatu yang rapi.
Saya ingat pernah membaca artikel ini setahun yang lalu, dan
Saya hanya terpesona oleh itu.
Saya pikir, sekarang ini adalah masa depan web.
Ini benar-benar hal-hal rapi.
Dan itu menunjukkan bagaimana semua hal ini bekerja bersama-sama.
Jadi aku hanya akan Google di sini, pengecualian HTML5Rocks.
Mereka memiliki sebuah artikel yang mengagumkan di sini.
Majalah - seperti tata letak, oke ?
Jadi check this out.
Jika kita scroll ke bawah, lihat ini.
Sekarang, ini adalah menggunakan pengecualian dan grafis SVG
untuk menentukan bagaimana teks harus ditata.
Dan mereka bekerja dalam hubungannya dengan gambar latar belakang di sini
sehingga terlihat seperti itu mengalir di sepanjang batu ini.
Bukankah itu keren ?
Dan jika kita gulir ke bawah sini, di sini satu lagi.
Ini benar-benar menggunakan daerah bersama dengan pengecualian mengalir
data melalui, dan tata letak multi- kolom.
Jadi menggunakan tiga dari apa yang kita hanya melihat
untuk membuat pekerjaan itu.
Cukup manis.
Dan jika saya kita gulir ke bawah lebih jauh di sini menjelang
bawah, ada satu lagi.
Lihat itu.
Itu agak rapi.
Bagus pie chart, lagi menggunakan semua teks mengalir melalui
seluruh wilayah ini, salah satu teks besar yang mengalir melalui itu semua.
Agak dingin.
Dan saya pikir itu saja.
Jadi itulah yang saya ingin menunjukkan kepada Anda, karena saya pikir
itu benar-benar rapi, dan masa depan web ini sangat
cerah dengan teknologi tata letak ini karena kita dapat melakukan
hal-hal yang jauh lebih dinamis dan cairan daripada kita
sebelum bisa.
Mari selami demo.
Jadi saya sudah punya Visual Studio dibuka.
Mari kita membawanya ke permukaan.
Saya menambahkan sebuah website baru ke dalam solusi kami yang ada di sini,
16 - css_layouts.
Dan dalam HTML kita, saya menambahkan halaman baru di sini disebut
css_layouts, yang kita telah terbuka.
Jadi hal pertama yang saya ingin lakukan adalah hanya mengambil lihat ini
dalam browser.
Jadi, jika kita klik kanan di atasnya, melihatnya di Google Chrome, itu
mungkin tidak akan terlihat sangat baik.
Ini tidak terlihat terlalu buruk.
Tapi aku bisa tahu hanya dengan melihat bahwa kami memiliki beberapa
hal-hal yang bekerja dengan baik keluar dari pintu gerbang.
Kami memiliki model kotak kami fleksibel, FlexBox bekerja,
karena saya memiliki div sekitar tiga bidang ini
di sini, nav kami, konten kami, dan pihak kita.
Dan bekerja seperti yang kita lihat di papan tulis.
Kami telah mengambil ini naik 80 %, ini mengambil 10 %, dan ini
mengambil 10 %.
Jadi ini bekerja.
Saya juga memiliki kotak fleksibel lain menjadi konten kami.
Ini diatur sebagai kotak fleksibel di sini.
Dan itu berarti bahwa dua pasal tersebut, saya memiliki keduanya set
dengan nilai satu untuk flex, jadi mereka berdua mengambil
up jumlah yang sama ruang, dan itu merata
di ruang putih.
Ini semua baris dengan sangat baik.
Satu hal yang kita tidak memiliki bekerja, meskipun, adalah daerah.
Saya memiliki empat daerah di sini, empat divs mana semua teks ini
seharusnya mengalir melalui.
Dan kemudian di sini juga, saya memiliki pengecualian mengatur
yang berjalan pada poligon SVG yang harus memilikinya
mengalir ke bawah dan melihat jenis seperti petir.
Jadi kita benar-benar menggunakan pengecualian untuk model teks, banyak
seperti Anda hanya melihat di sana dalam artikel yang melakukannya
sekitar batu besar di sana.
Sekarang, jika Anda memiliki versi terbaru dari Chrome, Anda tidak akan
perlu menggunakan Google Chrome Canary.
Tapi aku hanya ingin menunjukkan bahwa itu ada.
Jika Anda ingin versi pendarahan tepi terbaru
Chrome, Anda dapat men-download Google Chrome Canary, yang
tentu memiliki dukungan untuk semua hal yang
kita hanya melihat.
Mari kita coba untuk mendapatkan kerja ini, meskipun, dalam versi kita saat ini
Chrome, yang juga merupakan versi terbaru.
Dan kita bisa melakukan itu dengan membuka tab dan akan
Chrome / / flags.
Dan sekali Anda berada di halaman bendera di sini, hanya melakukan pencarian.
Aku akan melakukan Control- F untuk WebKit eksperimental.
Dan ada itu.
Jadi setelah Anda menekan daerah ini di sini, cukup klik Aktifkan.
Dan kemudian Anda ingin memukul Luncurkan Ulang yang
tombol untuk peluncuran itu.
Mari kita kembali ke sini ke halaman kami, dan
hey, lihat itu.
Ia bekerja.
Semua fitur kami bekerja.
Baik.
Dan saya juga tidak disebutkan juga di sini, kami telah kami
multi-kolom terjadi di sini dengan teks kami.
Tapi inilah wilayah kami mengatur dengan semua data kami mengalir
melalui daerah tersebut, orang-orang divs.
Dan di sini, kami memiliki pengecualian kami mengatur mana
tidak benar-benar terlihat seperti petir.
Itu seharusnya, tapi cukup dekat.
Sepertinya cacing menggantung atau sesuatu, saya tidak tahu.
Tapi ada itu.
Ini semua jenis mengalir di sana melalui sidebar kita.
Mari kita lihat beberapa kode.
Jadi mari kita kembali ke Visual Studio.
Kita pertama akan melihat kotak fleksibel.
Jadi bagaimana ini bekerja, jika kita gulir ke bawah sini untuk HTML kita,
kita memiliki div yang ditandai sebagai Main.
Sekarang, dengan header dan footer kami berada di luar itu, sehingga mereka
tidak akan meregangkan.
Tapi semua konten dalam utama kami kemudian
ini akan meregangkan.
Dan kami memiliki nav, bagian, dan sidebar, samping.
Dan jika kita gulir ke atas, di sini adalah empat daerah.
Berikut div utama kami, dan inilah bagian kami, kami nav,
dan kami samping.
Jadi dalam utama kami, ini adalah wadah besar kita bahwa kita ingin
anak objek untuk melenturkan.
Kami mengatur layar untuk WebKit -flex.
Kemudian kita dapat mengontrol bagaimana mengalir.
Apakah kita ingin menjadi baris, apakah kita ingin menjadi kolom ?
Di sini kita memilih baris.
Dan sekarang, apa yang akan lakukan itu akan memungkinkan kita untuk terjadi
ke dalam setiap bagian dan mengatur bagaimana mereka akan melenturkan.
Dan tiga parameter di sini akan menjadi bagaimana tumbuh,
bagaimana menyusut, dan kemudian apa nilai awal kita.
Dan saya pikir saya punya itu pada 80, 10, dan 10, tapi sebenarnya saya punya
itu pada 70, 15 dan 15.
Sekarang, Anda akan melihat sedikit lebih baik di sini ketika kita masuk ke
Media query bagaimana memperluas dan menyusut kerja.
Karena kita akan mengambil browser kita dan menyusut ke
tentang ukuran smartphone, dan Anda akan
untuk melihat bagaimana hal ini bekerja mengagumkan.
Karena WebKit, bersama dengan browser, akan membuat yang
konten sehingga bentuk seperti itu pada smartphone.
Berbaris jauh lebih baik, dan
vertikal, seperti kolom oriented.
Dan itu hanya keren.
Ini sangat keren bagaimana semua hal ini bekerja.
Dan juga perhatikan di sini kita memiliki perintah, sehingga kita dapat menentukan
pesanan kami, nav kami, maka bagian kita, maka kita samping.
Jadi, Anda masih dapat menimpa urutan yang didirikan pada
aliran HTML dengan menggunakan CSS, yang
juga benar-benar keren.
Sekarang, kami juga memiliki bagian utama kami set
sebagai wadah fleksibel.
Lihat, hal yang sama.
Kami mengatur layar untuk WebKit - flex, hanya saja kali ini kita
memiliki tata letak kolom.
Dan itulah yang memberi kita tata letak ini di sini.
Sekarang lihat ini.
Mari kita lakukan sesuatu jenis dingin di sini.
Mari kita gulir ke bawah ke HTML kita.
Mari kita paste di artikel lain.
Dan itu digolongkan sesuai, untuk multi- kolom.
Mari kita simpan ini, kembali ke browser dan tekan Refresh.
Check it out.
Lihat bagaimana yang bekerja ?
Sekarang, itu merata karena jika kepala kita kembali dan
lihat ini di sini, itu merata
di semua artikel.
Karena jika kita kepala ke artikel kami di sini, kami hanya memiliki
fleksibel sangat sederhana set up, seperti yang kita lihat di
Microsoft demo, sebagai salah satu.
Jadi itu hanya berarti mereka semua akan merata
didistribusikan.
Kita dapat terus menambahkan artikel di sini dan itu akan terus menyusut
semua yang lain.
Dan mereka semua akan akhirnya menjadi ukuran yang sama.
Jadi itulah model box yang fleksibel.
Dan itulah yang akan Anda gunakan banyak di masa depan untuk melakukan
horisontal dan vertikal susun, dan merata spasi
elemen kami dalam wadah ini.
Dan berbicara tentang beberapa kolom, Anda dapat melihat kami memiliki
beberapa kolom di sini.
Jika kita kembali, Anda dapat melihat betapa mudahnya ini adalah untuk bekerja dengan.
Berikut kelas multi- kolom kami.
Kami hanya menyiapkan count kami.
Kami mendirikan lebar kami, kesenjangan antara mereka, dan aturan kami,
dan kami baik untuk pergi.
Mari kita kepala di sini.
Kami akan kembali ke pengelompokan dan bersarang.
Mari kita lihat pengecualian kami.
Jadi di sini adalah pengecualian kami.
Dan jika kita gulir ke bawah ke HTML di sini, Anda dapat melihat di kami
samping, saya hanya membuat div, classed sebagai pengecualian, yang
berisi worm sampel yang sama dari beberapa data.
Dan jika kita naik ke atas sini, inilah pengecualian yang
digolongkan CSS penanda sini, pemilih, dengan semua kami
properti.
Jadi kita hanya menentukan tinggi kami, ukuran font.
Tapi di sinilah kita dapat menentukan tanda hubung kami.
Kami mengatakan Auto sana.
Dan kemudian kita menggunakan bentuk WebKit dalam, kita
lewat sebuah SVG poligon, dan menentukan semua
koordinat sana.
Yang akan memberi kita melihat ini dan merasa.
Jadi dengan menggunakan SVG, Anda lihat di bahasan inis sebelumnya, kami menciptakan
logo GG.
Anda hampir dapat menciptakan sesuatu.
Dan apa pun yang Anda akhirnya membuat, Anda dapat memiliki teks
berlari sepanjang bahwa jalan yang sama.
Juga, jika kita gulir ke bawah, inilah daerah kami.
Dan jika kita melihat di sini, inilah data kami.
Anda dapat melihat kami memiliki semua data yang hanya dalam satu baris panjang besar
dalam div.
Dan kami ingin pipa bahwa data mengalir melalui
empat divs sini.
Jadi itulah mengapa kita memiliki gaya data aktual kami mengatur di sini.
Dan ini adalah di mana kita akan menentukan aliran kita ke dalam, dan
maka kita hanya nama itu.
Dan sekarang, dengan semua divs kami yang lain, kita bisa hanya mengatakan aliran
froms yang bernama mengalir ke.
Dan itu hanya akan pergi ke depan dan mengalir melalui.
Itu saja, hanya dua baris kode.
Satu untuk data, dan kemudian satu untuk setiap divs yang akan
mengalir ke dalamnya.
Dan itu saja.
Itulah betapa mudahnya untuk mengatur daerah.
Semua hal-hal lain yang saya lakukan di sini, ini hanya
bekerja dengan masing-masing div individual untuk mengubah
warna latar belakang sehingga Anda bisa merasakan ini dari terang ke gelap.
Jadi kita melakukan gradien di semua
elemen-elemen juga.
Tapi itu betapa mudahnya untuk bekerja dengan daerah.
Jadi kapan saja Anda inginkan mengalir konten melalui beberapa
elemen, kita bisa menggunakan daerah untuk membuat
terjadi relatif mudah.
Beberapa tips desain di sini yang merupakan bagian dari
tujuan untuk bahasan ini ini akan menjadi
pengelompokan dan bersarang.
Dan ini hanya cara yang dapat Anda desain CSS Anda
menghindari duplikasi.
Kami ingin menghindari duplikasi sebanyak mungkin, terus keluar
CSS bagus dan rapi.
Dan di sini adalah contoh yang baik dari pengelompokan.
Pengelompokan memungkinkan kita untuk hanya menetapkan gaya yang sama untuk
beberapa elemen.
Dan Anda hanya memisahkan penyeleksi Anda dengan koma.
Jadi dalam hal ini, kami hanya melakukan elemen lurus
memilih, tetapi Anda juga dapat mencampur dan mencocokkan.
Jika Anda ingin melakukan semacam memilih kelas bersama dengan
elemen bersama dengan ID, maka Anda bisa melakukan
itu semua dalam satu tembakan.
Dan itu akan gaya mereka semua dalam satu tembakan.
Jadi ini akan menghindari kita memiliki header dan footer dengan baik
informasi yang sama dinyatakan dua kali.
Tip lain yang bagus untuk merancang Anda
CSS menggunakan bersarang.
Sekarang, kita memiliki contoh yang buruk di sini dengan desain di kami
multi- kolom bagian di sini.
Kami memiliki sebuah artikel, dan kemudian kita memiliki sebuah artikel yang menggunakan
pemilih untuk mengambil apa-apa dengan kelas multi- kolom.
Sekarang, karena cara bahwa kita memiliki halaman HTML ini
dirancang, jika kita gulir ke bawah sini, tidak ada cara lain, tidak ada
pemilih lain kita bisa menggunakan yang akan membawa kami ke utama,
bagian, dan artikel.
Yang berarti kita tidak benar-benar membutuhkan kelas ini di sini karena
kita bisa mendapatkan artikel ini hanya akan menjadi ID dari utama,
ikuti melalui bagian, dan artikel.
Jadi itu berarti kita bisa merapikan beberapa HTML kita dengan
declassing artikel ini, seperti begitu.
Dan sekarang kita bisa gulir ke atas sini, dan jika kita menemukan
bagian kami kami hanya di, di sini kita pergi, kita bisa
menyingkirkan semua ini.
Kita bisa memindahkan ini ke artikel kami, dan kemudian menyingkirkan
pemilih seluruhnya.
Jadi kita membersihkannya sedikit, membuatnya
sedikit lebih mudah dibaca.
Tapi itulah yang bersarang adalah semua tentang, yang memungkinkan kita untuk menyimpan
pada mengklasifikasikan dan Iding segalanya.
Karena selama kita mendefinisikan dan kami mencari jalan kita
dari waktu ke depan, dan kami desain dengan benar, maka kita tidak boleh
membutuhkan banyak karena kita harus mampu menavigasi
menggunakan selektor di mana pun kita ingin pergi
dengan sedikit usaha.
Tapi mari kita hanya mengambil melihat ini.
Aku akan memukul F5 dan lihat itu, tidak ada perbedaan.
Tidak ada perbedaan karena itu hasil yang sama,
hanya dengan kode kurang.
Last but not least, mari kita kepala ke caniuse.com dan melihat
apa beberapa dukungan seperti di browser untuk
fitur kami melihat.
Jadi aku hanya akan menuju langsung ke caniuse.com.
Dan mari kita mulai dengan FlexBox.
Kami hanya akan mulai mengetik di flex, dan lihat itu.
Di sana kami pergi.
Fleksibel Box Tata Letak Module, metode elemen positioning
di tumpukan horizontal atau vertikal, seperti yang kita lihat.
Dan kita punya dukungan yang baik untuk FlexBox luar sana hari ini,
terutama di Chrome, didukung sepenuhnya.
IE, itu akan didukung penuh dalam waktu dekat.
Dan kemudian sekarang mari kita coba satu lagi di sini.
Bagaimana multi- kolom ?
Kami melihat multi-kolom, bukan?
Cukup ketik dalam multi dan gulir ke bawah, melihat apakah kita dapat menemukannya.
Ini dia.
Tata letak multi-kolom dan metode mengalir informasi dalam
beberapa kolom.
Sebagian didukung dalam Chrome.
Saya pikir masalahnya adalah beberapa kotak bayangan.
Ya, kotak bayangan ketika item dipotong oleh kolom.
Jadi tidak ada yang terlalu besar.
Tapi IE sepenuhnya mendukung itu sekarang dalam versi saat ini dan
dalam waktu dekat.
Mari kita kembali ke atas.
Bagaimana dengan layout grid ?
Banyak merah di sini untuk grid.
Anda dapat melihat IE adalah satu-satunya yang mendukung itu benar-benar penuh,
meskipun dilaporkan harus didukung dalam Chrome 27.
Satu lagi di sini, mari kita lakukan daerah.
Dan daerah, banyak merah untuk juga.
Tidak ada yang benar-benar sepenuhnya mendukung itu, tapi IE 10 sebagian
mendukungnya.
Dan Chrome tidak selama kita mengaktifkan mereka eksperimental
Fitur WebKit.
Baik untuk menguji teknologi ini baru dalam pengembangan.
Jadi revolusi akan datang.
Ini akan mengambil sedikit masih sebelum mereka menyelesaikan
spesifikasi untuk teknologi yang mengagumkan di sini di CSS3.
Dan kemudian Anda akan melihat lebih banyak dukungan cross-browser, banyak
lebih kuning dan hijau di sini di caniuse.
Dan saat itulah kita akan benar-benar mulai menggali dan mulai
menggunakan hal ini di alam liar.
Dalam bahasan ini, kami belajar bagaimana untuk membuat layout yang fleksibel
dengan CSS3, di mana kita melihat banyak teknologi yang akan datang
yang akan merevolusi bagaimana kita merancang
layout kami pada akhirnya pengembangan web depan dengan CSS3.
Kami mendapat akrab dengan model kotak yang fleksibel, cara
bahwa kita dapat mengatur item dalam sebuah wadah, menumpuknya
horizontal dan vertikal.
Dan kemudian membagi-bagi ruang ekstra di dalam wadah yang
di semua objek tersebut.
Kami mendapat akrab dengan multi- kolom.
Kami melihat bahwa multi - kolom adalah cara yang bisa kita ambil data teks
dan membaginya di kolom.
Mudah untuk bekerja dengan.
Kami melihat bagaimana pengecualian bekerja.
Sebuah cara yang bagus bahwa kita dapat membungkus teks di sekitar
elemen atau benda lainnya.
Kami melihat jaringan keselarasan sebagai teknologi tata letak lain yang
bisa kita gunakan untuk mengiris dan dadu halaman untuk membuat bagus
grid seperti UI.
Dan kemudian kita juga melihat bagaimana kita bisa menggunakan daerah mengalir
Informasi di beberapa elemen.
Saya berharap ini telah informatif untuk Anda, dan saya
ingin mengucapkan terima kasih untuk melihat.

Membuat animasi dan Adaptive UIS dengan CSS3

Membuat animasi dan Adaptive UIS dengan CSS3.
Dalam Nugget ini, kita akan melihat bagaimana kita dapat membumbui kami
halaman dengan menghidupkan elemen, baik 2D dan 3D
animasi, dengan menggunakan transformasi dan
transisi.
Kita juga akan melihat bagaimana kita dapat menggunakan query media untuk
menciptakan UIS yang render secara berbeda berdasarkan pada
perangkat pengguna dan beberapa properti lain yang kita dapat query
untuk mengetahui perangkat apa yang render halaman.
Ini adalah fitur fantastis yang semua orang
benar-benar bersemangat.
Jadi kita akan mendapatkan Nugget ini off dengan gambaran singkat hanya untuk
berbicara tentang transformasi, baik 2D, 3D, merasakan untuk
apa transisi adalah semua tentang.
Dan kita akan berbicara tentang pertanyaan media dan mendapatkan akrab dengan
beberapa sintaks.
Dan kemudian kita akan melompat ke lab Nugget virtual.
Kita akan mulai dengan transformasi.
Kita akan merasakan beberapa 2D sederhana dan 3D
transformasi sehingga Anda dapat melihat hal-hal yang dapat kita lakukan
terhadap unsur-unsur dan objek dalam halaman kita.
Kemudian kita akan mendapatkan akrab dengan transisi.
Kita akan melihat bagaimana kita dapat mempermudah dalam dari satu gaya ke yang lain
bukan hanya flip gaya segera.
Ini adalah indikasi visual yang baik bahwa kita transisi dari
satu gaya yang lain.
Dan di akhir di sini, kita akan melihat pertanyaan media.
Kita akan tata letak yang telah kami bangun ketika kita berbicara tentang CSS
layout, Nugget sebelumnya dari yang satu ini, di mana kita membangun
tata letak dengan flexbox a.
Dan kita akan melihat bagaimana kita bisa mengubah ukuran browser kita, dan kita
permintaan media yang akan mengambil alih setelah kami
memukul kondisi tertentu.
Dan itu akan merestrukturisasi halaman kami seluruh didasarkan pada kami
kondisi dalam gaya kami.
Jadi itu adalah fitur yang sangat, benar-benar manis.
Dan kita akan melihat baik pada cara kerjanya.
Jadi di sini kita, tiga besar hal yang kita akan bahas pada
Nugget ini.
Mari kita mulai dengan transformasi.
Jadi transformasi memungkinkan kita untuk mengubah ukuran suatu elemen,
bentuk, posisi, sudut, semua hal yang baik.
Dan kita bisa melakukannya dalam 2D ​​atau 3D.
Sekarang dalam 2D ​​, kita hanya memiliki ini xy - koordinat, dan
opsional, tergantung pada apa yang kita lakukan, sudut.
Jadi misalnya, jika kita memiliki unsur sini di katakan
0x, 0y, dan kemudian kita sebut menerjemahkan di atasnya, menerjemahkan
metode dalam CSS hanya cukup bergerak objek dari satu
lokasi ke lokasi lain di sepanjang x, y adalah.
Jadi jika kita katakan menerjemahkan 100, 100, maka akan cukup hanya
memindahkan bahwa objek 100 lebih, 100 ke bawah.
Jadi bagi pengguna, jika kita melakukan hal ini di halaman dan kami lakukan
menerjemahkan tanpa transisi, hal itu hanya akan
otomatis menghilang dari sini dan muncul di sini.
Di situlah transisi ikut bermain.
Karena dengan transisi, kita dapat mengatakan memindahkannya dari sini
di sini, hanya melakukannya di interval waktu tertentu, di
hal itu akan terlihat seperti itu bergerak.
Jadi itulah yang akan memberikan tampilan animasi.
Jadi itu benar-benar semua transformasi sekitar yang
memanipulasi sumbu untuk objek.
Dan kita punya beberapa yang berbeda
metode untuk bekerja dengan.
Ada sedikit lebih dari ini, tetapi ini adalah beberapa
yang paling populer Anda akan melihat di luar sana.
Ini adalah metode 2D.
Dan dalam dunia 2D, kita benar-benar hanya perlu khawatir tentang
x, y dan kemudian opsional sudut, tergantung pada
Metode kita panggil.
Tapi menerjemahkan, misalnya karena Anda hanya melihat, hanya bergerak
sebuah objek dari satu x, y untuk x yang lain.
Scaling adalah mengubah ukuran obyek.
Jadi obyek yang tidak bisa bergerak, tapi kami mungkin ingin memperluas
atau menyusut itu.
Skewing itu adalah cara bahwa kita dapat mengubah sebuah
objek pada x nya, sumbu y.
Dan kemudian memutar adalah bagaimana kita bergerak searah jarum jam di sekitar.
Dunia 3D hanya menambahkan dimensi lain, sumbu lain.
Sekarang kita memiliki z - axis untuk dipikirkan.
Jadi kita memiliki x, y, dan z, yang memberi kita bahwa
pesawat tiga dimensi.
Dan itu benar-benar satu-satunya perbedaan antara 2D dan
Metode 3D ​​sekarang kita memiliki parameter lain ketika kita bekerja
dengan ini.
Kami memiliki x, y.
Kami juga memiliki z.
Dan kemudian opsional tergantung pada apa yang kita bekerja dengan, kita
memiliki sudut.
Jadi ketika kita sebut menerjemahkan 3D dalam CSS kami dan kami
lulus dalam x, y, z dan sudut, kita dapat memindahkan objek di sekitar
bahwa seluruh rencana dan itu akan memberikan kita bahwa 3D tampilan dan nuansa.
Jadi, Anda akan mendapatkan visual tentang bagaimana kedua pekerjaan ini dan melihat
beberapa kode CSS sehingga Anda dapat melihat itu benar-benar tidak yang buruk untuk
bekerja dengan dan Anda dapat melakukan beberapa pretty cool dan kuat
hal dengan itu.
Transisi adalah apa yang memungkinkan kita untuk menambahkan efek visual yang
ketika kita mengubah gaya pada objek, perubahan atas
interval tertentu.
Daripada hanya berubah secara otomatis, berubah jadi
memberikan pemberitahuan visual yang baik bahwa kita bergerak
dengan gaya baru ini.
Dan contoh yang baik dari hal ini adalah menu.
Kami memiliki menu mengatur di salah satu daerah sampel kami di mana jika
kita memegang mouse kita -
dan ini adalah bagian yang sulit dari itu - kita pegang mouse kita lebih
menu itu, itu akan, lebih dari setengah detik, kemudahan ke dalamnya.
Kemudian ketika kita mengambil mouse kita dari itu, itu akan memudahkan
dari kembali ke putih.
Jadi menyiapkan transisi sangat sederhana.
Ini hanya menggunakan properti transisi, dan kemudian apa
properti yang Anda inginkan transisi terjadi di?
Kami mengatakan warna.
Dan melihat kami memiliki warna diatur di sini, dan kemudian kita memiliki
warna awal.
Jadi ini adalah deklarasi awal gaya ini.
Jadi ini adalah putih di sini -
baik, agak putih.
Ini lebih seperti putih keabu-abuan.
Segera setelah halaman merender pertama kalinya, itu duduk
pada warna ini.
Kemudian pengguna memegang mouse mereka selama ini, dan itu
akan mengambil setengah detik untuk transisi
warna ini, kuning.
Dan ketika mereka mengambil mouse mereka dari itu, maka ia akan mengambil
babak kedua lain untuk transisi kembali ke warna itu.
Dan transisi yang mudah untuk bekerja dengan dan mudah untuk membangun.
Ini hanya hanya masalah ketika kami mendirikan transisi kita
menetapkan properti kami -
dalam kasus ini, kita melakukan color - menentukan waktu Anda
menunda, dan kemudian menentukan apa yang disebut waktunya
fungsi, yang merupakan efek yang akan terjadi di sini
ketika itu waktu.
Ada kemudahan -in, kemudahan -out.
Kemudahan -in, kemudahan -out, seperti yang kami gunakan di sini, linear, dan kemudian
ada bezier juga.
Akhirnya, kami memiliki mengagumkan pertanyaan media fitur yang,
lagi, memungkinkan kita untuk membuat adaptif UIS.
Karena apa yang akan memungkinkan kita untuk melakukan - dan aku hanya akan mengambil
Browser sebagai contoh di sini - mari kita mengatakan bahwa kita secara penuh
layar dalam browser.
Dan kita menggunakan sebuah situs yang terlihat seperti ini di mana kita memiliki
header kita, footer kita, nav kami, kami
konten, dan sidebar kita.
Sekarang katakanlah kita menyusut browser kita ke bawah 600 piksel.
Apa yang akan terjadi adalah browser akan membuat - ulang
Halaman terlihat seperti sesuatu yang ada di smartphone,
sesuatu yang sedikit lebih mudah untuk bekerja
dengan di bawah 600 piksel.
Jadi itu adalah cara mudah bagus untuk menggunakan CSS murni untuk memberikan bagus
Pengalaman ramah di banyak perangkat di banyak berbeda
resolusi.
Dan di sini adalah cara kerjanya.
Kami menggunakan media direktif ini.
Dan kemudian kita mengikutinya dengan tipe.
Saat ini kami sedang mengatakan semua.
Jadi kita katakan perangkat apapun.
Setiap perangkat yang memiliki lebar maksimum 600 piksel, kita akan menggunakan
gaya ini di sini.
Apa pun yang berjalan di bawah 600 piksel, ia akan beradaptasi dan menggunakan
gaya ini.
Dan ini semua parameter di sini bisa apa saja dari layar,
yang biasanya layar komputer warna.
Ini bisa menjadi proyeksi untuk jenis proyeksi presentasi besar.
Hal ini dapat genggam untuk apa pun
yang memiliki layar kecil.
Ini bisa menjadi Braille bagi mereka Braille taktil umpan balik jenis
perangkat.
Atau seperti yang saya katakan di sini, Anda dapat menggunakan semua yang akan menargetkan
semuanya.
Ada juga maka kondisi.
Jadi kita bisa memiliki banyak, banyak kondisi jika kita ingin.
Jadi kita bisa melakukan dan lebar maksimal sebesar 600 piksel dan
orientasi landscape sama, hal semacam itu.
Dari sana itu hanya masalah pengaturan gaya kami
bawahnya sehingga ketika semua kondisi ini benar,
ini adalah gaya yang akan diterapkan.
Baiklah mari kita kepala ke lab Nugget virtual dan melihat bagaimana
semua hal ini bekerja.
Kita akan mulai dengan transformasi.
Kami akan memindahkan hal sekitar.
Kemudian kita akan menuju ke transisi.
Dan di akhir di sini, kita akan melihat permintaan media untuk membuat
UI adaptif.
Kami berada di lab Nugget virtual.
Jadi mari kita membuka Visual Studio 2012 Edition Web Developer.
Kami memiliki website baru dalam solusi kami untuk ini
seri, 17 - CSS_AnimateAdapt.
Dan kita akan mulai di sini dengan index.html kami.
Anda dapat melihat kita tidak memiliki gaya di sini sekarang.
Bahkan, jika kita melihat ini - dan jika anda sudah mengikuti
seri berurutan, Anda akan tahu kita belum benar-benar
melihat ini dalam beberapa saat karena kami bekerja dengan struktur
dan beberapa hal lain, JavaScript.
Tapi aku menambahkan segala sesuatu yang kita lakukan untuk saat ini untuk itu.
Jadi kita memiliki semua tips kami, keren mencari tips baru dengan
font ini yang kita pelajari.
Dan kita sudah mendapat menu kami diisi di sini juga.
Sehingga Anda dapat melihat semua demo di setiap teknologi di sini,
dan bahkan alat kami di sini untuk validasi yang akan membuka
Kirim Tip a.
Jadi apa yang kita akan lakukan untuk memulai adalah hanya melakukan beberapa sederhana
transformasi.
Kita akan mulai dengan transformasi 2D sederhana bahwa ketika kita
tahan mouse kami selama logo gg, itu akan meledakkannya.
Ini akan membuatnya terlihat benar-benar besar.
Dan kemudian kita akan melakukan hal yang sama dengan tips kami di sini.
Kami akan terus mouse kita di atasnya, dan kita akan meledakkannya.
Kami akan menggunakan transformasi 3D untuk melakukan itu.
Dan kemudian kita akan menggabungkan transisi.
Jadi bukan hanya muncul di hasil akhir, itu akan
transisi dari kondisi saat ini untuk itu 2D atau 3D negara.
Baik.
Jadi mari kita bermain bola di sini.
Mari kita meminimalkan browser, kepala ke gaya kami.
Dan hal pertama yang akan kita lakukan adalah bahwa logo gg.
Dan jika kita gulir ke bawah, kita bisa melihat kita memilikinya IDed, tidak
digolongkan sebagai gg.
Jadi mari kita lakukan ini.
Kita akan mengatakan gg, kita akan menerapkan gaya ke Anda.
Dan apa yang kita akan berlaku di sini adalah mari kita
hanya melakukan melayang-layang ini.
Jadi kita akan mengatakan ketika kita membawa lebih dari itu seperti begitu, kami hanya
ingin melakukan transformasi sederhana.
Kita akan menggunakan WebKit karena itu adalah Chrome
versi di sini.
Kita akan melakukan transformasi WebKit a.
Apa yang kita akan mengubah?
Kita akan menggunakan metode skala di sini.
Dan apa yang kita ingin mengubahnya ke?
Bagaimana dengan 1.5, yang akan menjadikannya salah satu setengah kali lebih besar
daripada sekarang.
Baik.
Itu cukup sederhana.
Baik.
Mari kita simpan itu, kepala kembali ke browser, refresh.
Sekarang jika kita memegang mouse kita di atasnya, menonton ini.
Boom.
Ada itu.
Jika kita mengambil mouse kita off, itu akan kembali ke ukuran aslinya.
Jadi, cara yang sangat sederhana untuk menggunakan skala untuk mengubah ukuran suatu objek.
Mari kita satu sama lain dalam sini.
Dan yang satu ini, kita akan melakukan artikel kami.
Jadi mari kita lakukan sebuah artikel.
Dan itulah yang kami tip.
Pasal, hover.
Apa yang kita inginkan untuk hover di sini?
Bagaimana kita mengubah WebKit lagi.
Hanya saja kali ini, mari kita putar.
Katakanlah mari kita putar 360 derajat di sini.
Harus baik.
Itu saja yang perlu kita lakukan.
Mari skala juga.
Dan ini adalah untuk menunjukkan bahwa Anda dapat menggabungkan
metode ini bersama-sama.
Lihat itu.
Jadi mari kita lakukan ini.
Mari kita juga skala.
Bagaimana kalau hanya 1.2?
Terlihat bagus.
Menyimpannya.
Kepala kembali ke browser, refresh, dan lihat ini.
Whoop.
Whoop.
Whoop.
Whoop.
Di sana kami pergi.
Sekarang kita zoom in
Tapi itu hanya semacam terjadi.
Kami tidak transisi itu.
Kami tidak melakukan apapun animasi.
Itu semua hanya semacam terjadi.
Jadi baik dari orang transformasi yang 2D
transformasi.
Kita dapat dengan mudah membuat 3D dengan mengetikkan 3D di sini.
Dan omong-omong, memeriksa Intellisense, di sini adalah semua
metode transformasi yang bisa kita gunakan.
Dan hanya dicatat bahwa Anda masih dapat bekerja dengan individu
metode juga.
Jika Anda hanya peduli tentang akses tertentu, maka Anda dapat
bekerja dengan itu.
Tapi mari kita pergi ke depan dan memilih memutar 3D.
Dan sekarang kita dapat menggunakan x, y, dan z di sini.
Jadi kita dapat mengatakan 50 pada x, y negatif pada 50, dan kemudian
mengatakan bagaimana sekitar 30 pada z.
Sekarang hasilnya akan terlihat sama.
Kita tidak akan melihat perbedaan sama sekali karena
Hasil akhirnya adalah sama, benar.
Jadi apa yang kita akan perlu Anda lakukan adalah menggabungkan transisi
sehingga kita dapat benar-benar melihatnya pergi dari tempat itu
itu ke tempat itu.
Dan kita akan dapat melihatnya memutar sepanjang
semua orang sumbu.
Jadi mari kita mewujudkannya.
Mari kita menambah pemilih lain di sini.
Mari kita mulai dengan gambar kita.
Dan apa yang kita akan katakan adalah WebKit transisi.
Apa properti yang ingin kita transisi dari?
Nah, kita ingin satu ini di sini karena itu satu-satunya
kami telah menyiapkan pula.
Yang itu.
Kami ingin ini terjadi transformasi.
Dan bagaimana kita akan mengatakan setengah detik.
Jadi kita akan lakukan 0.5s.
Dan kemudian sekarang apa efek yang kita inginkan?
Dan inilah semua efek yang bisa kita pilih dari sini.
Dan mari kita pergi ke depan dan memilih bagaimana tentang kemudahan -in.
Baik.
Mari kita simpan.
Tekan refresh.
Dan sekarang kita memegang mouse kami atas logo ini, lihat
bagaimana meledak.
Kami membiarkan pergi, ia pergi.
Meledak, kembali.
Jadi bukan hanya hal yang seketika.
Transisi dari gaya asli dengan gaya
bahwa kita telah diberitahu untuk transisi ke.
Mari kita satu sama lain terjadi di sini.
Mari kita artikel kami.
Dan untuk yang satu ini saya hanya akan cukup banyak melakukan
hal yang sama di sini.
Mari kita paste ini di sini.
Dan semuanya terlihat baik.
Mari kita membuat kemudahan ini pada tingkat yang lebih cepat.
Dan kami akan melakukan keduanya kemudahan masuk dan keluar untuk mempengaruhi kami.
Dan kemudian mari kita juga melakukan hal ini, hanya untuk menunjukkan Anda pertama di sini jadi
Anda dapat melihat apa yang tampak seperti di 2D.
Dan kemudian kita akan membuatnya 3D.
Tapi itu akan menyelamatkannya.
Kami akan membalik kembali ke browser.
Kami akan menekan refresh.
Dan ada itu.
Jadi sekarang itu hanya berputar di sepanjang xy.
Tidak ada z - axis kita perlu khawatir tentang di sini, hanya cukup
berputar dan zoom pada waktu yang sama.
Itu agak rapi mencari.
Sekarang, mari kita buat 3D ini.
Sekali lagi di sini, mari kita pergi 50, negatif 50, 30.
Kami akan menyimpannya, kembali, refresh.
Dan sekarang itu akan terlihat seperti - melihat bagaimana kita punya bahwa
z - pesawat di sana.
Ini benar-benar tampak 3D.
Ini berputar di semua tiga sumbu ada untuk memberikan kita bahwa
jenis dingin tidak hanya flip, baik sandal dan berputar terlihat.
Jadi ada kita pergi.
Dan juga di dalam halaman demo kami di sini, kami punya beberapa
transisi lainnya terjadi di yang kita miliki - seperti yang Anda lihat di
whiteboard, setiap saat kita memegang mouse kami atas salah satu dari
tag anchor tersebut dalam menu kami, dibutuhkan setengah detik untuk
transisi dari putih ke kuning dan kemudian kembali dari
kuning menjadi putih.
Agak dingin.
Juga, ini sistem menu keseluruhan didorong off transisi
seperti yang kita bicarakan dalam Nugget sebelumnya juga.
Kami transisi tinggi dan tingkat transparansi sehingga
menunjukkan dan terlihat seperti itu jatuh ke bawah ketika pengguna
memegang mouse-nya di atas salah satu item menu ini.
Mari kita lihat query media di sini.
Dan mari kita membuka halaman lain.
Aku punya di dalam halaman HTML folder kami di sini disebut
CSS_adaptive.
Sekarang ini sangat mirip dengan Nugget sebelumnya dimana jika saya
menunjukkan kepada Anda dalam browser di sini, kami memiliki header kita.
Kami memiliki konten nav kami di dalam semua duduk di dalam flexbox a,
dan kemudian kita memiliki footer kami.
Jadi perbedaan besar di sini adalah mereka mengambil semua barang-barang itu,
semua konten, yang kita miliki dalam hal ini hanya untuk tetap
sederhana dan mudah dan menjaga CSS kami minimal.
Tapi jadi apa yang akan terjadi di sini hanya untuk menunjukkan, jika kita
mengambil ini dan kami mengubah ukurannya ke bawah lebar 600 pixel, lihat
apa yang terjadi di sana?
Sekarang nav kami berada di atas, konten kami berada di tengah, dan
sisi kami di bawah.
Keren.
Dan jika kita mengambil ini lebih besar sedikit, ternyata kembali.
Jadi itulah permintaan media dalam tindakan.
Dan itu adalah hal yang benar-benar licin, dan semua dilakukan
melalui CSS.
Jadi mari kita lihat bagaimana kita melakukannya.
Dan itu cukup sederhana sebenarnya.
Jika kita kepala ke bawah sini, Anda dapat melihat saya memiliki
permintaan media yang mengatur.
Kita mulai dengan direktif Media.
Kemudian kita tentukan perangkat kita atau jenis kami.
Dan di sini, kita dapat mengatakan sesuatu seperti genggam jika kita hanya ingin
untuk menargetkan gaya ini di bawah sini terhadap perangkat genggam.
Dan kemudian kita dapat menambahkan kondisi bersama dengan tipe kami.
Dan ini adalah di mana kita bisa query seperti max
lebar layar.
Kita bisa melakukan resolusi di sini.
Kita bisa melakukan perangkat.
Ada banyak sifat yang berbeda yang dapat Anda gunakan
untuk kondisi Anda.
Dari sana itu hanya masalah pengaturan gaya Anda saat
semua kondisi tersebut adalah benar.
Dan untuk demo sederhana kami di sini, semua yang kita katakan adalah utama kami
div yang merupakan div yang flexbox kami dan membungkus dalam semua
daerah kami di sini, nav kami, konten kami, dan pihak kita.
Kami hanya mengubah jenis fleksibel untuk kolom dari baris.
Karena awalnya sini itu dibentuk -
di atas dalam CSS asli kita, itu ditetapkan sebagai baris.
Jadi itulah mengapa itu diatur seperti ini dalam tata letak baris.
Dan kemudian jika kita pergi di bawah 600 pixel pada
lebar, itu akan mengubahnya, ubah ke kolom.
Mengagumkan hal, dan mudah dilakukan.
Menjaga hal semacam ini di CSS daripada membuang-buang banyak
waktu melakukannya dalam JavaScript sangat besar.
Ini akan membuat banyak pengembang web bahagia.
Dalam CBT Nugget, kita belajar bagaimana untuk membuat animasi dan
user interface adaptif dengan CSS3.
Kami mulai dengan gambaran singkat di mana kami mendapat akrab
dengan transformasi, cara kita dapat memindahkan benda kami
dan elemen di sekitar halaman di nya x -, y -, dan jika kita berada di
3D, z - sumbu.
Kami juga mendapat akrab dengan transisi.
Kami melihat bahwa kita dapat menggunakan transisi untuk membuat
animasi.
Tapi pada dasarnya dengan cara yang kita dapat mengurangi atau meringankan
keluar dari satu gaya lain melalui
jangka waktu tertentu.
Kami juga mendapat akrab dengan pertanyaan media, cara yang bagus untuk
membuat output yang berbeda berdasarkan perangkat dan kondisi.
Dan kemudian kita melompat ke laboratorium Nugget virtual dan kami melihat
bagaimana semua hal ini bekerja.
Kami melihat beberapa transformasi dasar, transisi,
dan bagaimana kita bisa mengatur permintaan media untuk mengubah
menampilkan ketika kondisi tertentu adalah benar.
Saya berharap ini telah informatif untuk Anda, dan saya akan
mengucapkan terima kasih untuk melihat.

Pemakaian Data

Aplikasi dan website hari ini, mereka tidak lagi ini memiliki identitas mandiri.  Mereka mengandalkan aplikasi lain dan website dan layanan web untuk mendorong dan menarik data dari.  Jadi ini berarti kita akan membutuhkan pemahaman yang baik tentang format data platform-independen ini bahwa kita akan akan menggunakan untuk bertukar informasi antara sistem.

Dan saya maksudkan JSON, JavaScript Object Notation, dan XML, Extensible Markup Language.  Jadi kita akan menendang bahasan ini dengan sebuah gambaran singkat untuk berbicara tentang kedua format data ini, bagaimana mereka berbeda dari satu sama lain dan di mana kita harus menggunakan satu atau yang lain.  Kami juga akan berbicara tentang layanan web.  Banyak kali, layanan web akan kembali baik XML atau JSON.  Jadi itu sebabnya ada baiknya untuk mengetahui bagaimana bekerja dengan baik dari mereka, karena Anda mungkin harus bekerja dengan layanan web yang hanya mengembalikan salah satu atau kedua dari mereka.  Dan Anda harus membuat keputusan.  Dari sana, kita akan melompat ke lab bahasan virtual.

Kita akan mulai dengan JSON - cara membuat, bagaimana untuk mengkonsumsi dan menampilkannya di website kami.  Kami akan melakukan hal yang sama dengan XML.  Dapatkan merasakan seperti apa.  Kami akan mengkonsumsinya, mengurai, dan menampilkan di halaman web kami.  Jadi setelah kita mendapatkan beberapa contoh sederhana tentang bagaimana format ini melihat dan bagaimana kita dapat bekerja dengan mereka, maka kita akan mendapatkan yang baik Misalnya, baik, contoh nyata terjadi bagaimana memanfaatkan ke layanan web publik.  Google memiliki layanan web yang dapat kita gunakan yang duduk di atas YouTube yang benar-benar hanya mesin pencari di atas YouTube yang mengembalikan JSON objek.  Jadi kita akan mengambil bahwa layanan web dan tarik ke bawah makan dan menampilkannya dalam halaman kita sendiri.

Jadi kita bisa streaming video langsung dari YouTube pada halaman kami.  Saya juga akan menunjukkan kepada Anda layanan web keren yang dapat kita gunakan layanan web cuaca yang kita dapat memanfaatkan itu kita akan menggunakan Ajax dengan untuk secara dinamis memperbarui bagian dari website kami yang terus-menerus menunjukkan cuaca untuk lokasi tertentu  Jadi apa JSON semua tentang ? Nah, JSON adalah, sekali lagi, JavaScript Object Notation.

Dan meskipun memiliki kata JavaScript di dalamnya, itu tidak terikat hanya JavaScript.  Ini platform-independen, terbaca-manusia, ringan, format data sederhana yang dapat kita gunakan untuk bertukar informasi di internet.  JSON menjadi semakin lebih populer karena mudah untuk bekerja dengan, karena itu ringan.  Dan lagi karena dalam dunia pengembangan web, kita bisa mudah mengambil objek JSON dan mengubahnya menjadi JavaScript keberatan untuk bekerja dengan dalam script kita.  XML sangat populer karena sudah sekitar untuk sementara, dan memiliki banyak manfaat yang sama seperti JSON.  Ini platform-independen, bahasa-independen, terbaca-manusia.  Dimana XML mulai mendapatkan rap buruk adalah format itu sendiri, terutama karena tag berakhir di sini benar-benar bloats semuanya.

Lihatlah.  Kita punya banyak data di sini dalam tag dari data itu sendiri.  Jadi ini adalah alasan itu mendapat rap buruk, di sini.  Hits.  Dibutuhkan lebih banyak ruang untuk menggambarkan data ini dibandingkan dengandata itu sendiri.  Jadi seperti mengambil palu godam untuk paku untuk pekerjaan kecil di mana JSON akan lebih cocok bagi mereka yang kecil pekerjaan karena palu.  Jadi ini adalah mengapa JSON jauh lebih cocok untuk web, karena itu benar-benar dimaksudkan untuk pertukaran data ringan.

Jadi apakah kita bertukar informasi dari web kami aplikasi ke server kami atau layanan web, itu sempurna.  Dan fakta bahwa itu diterjemahkan menjadi JavaScript benda dengan sedikit usaha yang lebih baik, karena parsing  XML, sekali lagi, bisa menjadi hal yang tepat waktu Dimana XML lebih cocok untuk mewakili kompleks, struktur data yang saling terkait, jenis perusahaan barang. Layanan Web.  Anggap saja sebagai kendaraan yang mendorong data ini sekitar internet.  Ini adalah teknologi cross-platform yang dapat kita gunakan untuk pertukaran informasi.  Jadi itu adalah " always on" jenis hal yang duduk di web layanan yang siapa pun dapat memanfaatkan dan menggunakan.  Dan siapapun yang membangun layanan web memiliki kontrol atas apa format data mereka mengekspos melalui itu.  Misalnya, jika mereka menggunakan SOAP, yang dikenal sebagai XML layanan web, Simple Object Access Protocol hanya hanya paket dan mengirim XML.  Jadi dalam hal ini, jika seseorang membangun sebuah layanan web SOAP XML bahwa Anda memasuki, Anda terjebak dengan XML.  Tapi sekali lagi, siapa pun bisa benar-benar, jika mereka membangun dalam, katakanlah, NET, mereka dapat membangun layanan web.  Dan mereka dapat memilih untuk serialize data yang keluar itu sebagai JSON.  Dan misalnya di sini, layanan REST web mendapatkan jenis populer.

Ini adalah singkatan dari Negara Transfer.  Ini adalah cara yang kita bisa langsung bekerja dengan benda-benda kami dari hasil panggilan.  Dan Anda dapat memformat hasil dalam XML atau JSON.  Dan lagi, Anda jenis memiliki kontrol penuh atas format yang keluar dari layanan web.  Tapi banyak kali, tergantung pada apakah Anda bekerja dengan vendor atau jika Anda bekerja dengan web publik layanan, banyak layanan web publik bahwa saya telah bekerja dengan mendukung berbagai macam format, yang baik.  Ini fleksibel.

Dan apa yang kita inginkan sebagai pengembang web karena, jujur ​​, kita tidak ingin bekerja dengan XML di ujung depan.  Ini kikuk.  Ini kembung.  Dan dibutuhkan banyak waktu untuk mengurai.  JSON sangat cocok untuk hal semacam itu.  Baiklah, kenapa tidak kita kepala ke lab bahasan maya dan melihat bagaimana rasanya bekerja dengan kedua format ini.  Kami berada dalam mesin pengembangan kami di lab bahasan virtual.  Mari kita membuka Visual Studio 2012 Web Developer Express. Kami memiliki proyek baru dalam solusi ini disebut
Consuming_Data mana, di sini, kami memiliki halaman baru kita akan untuk bekerja dengan apa yang disebut consuming_data.  Kami juga memiliki sebuah folder di sini disebut XML.  Setelah kita masuk ke XML, kita akan bekerja dengan file XML ini.  Dan mari kita mulai di sini dengan hanya menyisipkan dalam naskah dan bekerja dengan JSON.  Jadi aku akan paste di sekelompok kode di sini.  Kita akan mulai di bagian atas.

Kita akan mulai, hanya sangat sederhana, dengan mendapatkan memahamkan apa format data JSON terlihat seperti dan bagaimana kita dapat bekerja dengan secara langsung.  Sekarang, di masa lalu, ketika kita menciptakan objek dalam JavaScript, kami menciptakan sebuah kelas.  Dan kemudian kami menciptakan sebuah benda hidup berdasarkan kelas itu.  Di sini, terlihat sangat mirip bukan? Kami menciptakan objek JSON dengan cepat.  Dan ini adalah mengapa diterjemahkan menjadi objek JavaScript dengan baik, karena itu hanya cukup properti, nilai, dipisahkan oleh titik dua.  Itu saja.  Sekarang kita bisa mulai bekerja dengan objek JSON ini seolah-olah itu biasa, objek lama berdasarkan kelas di mana kita hanya bisa mengatakan tip, property.  Dan itu akan memberi kita nilai.  Jadi ini adalah tentang benar-benar sebagai mudah karena mendapat.  Mari kita simpan ini.  Saya akan klik kanan pada halaman kami.  Kita akan melihatnya dalam browser.  Dan mari kita pergi ke depan dan memilih di sini, saat ini beban up, Dapatkan Tip JSON.  Cukup sederhana.  Kami hanya mengambil data dan sekarang menempatkan sebagai HTML.

Mudah, kan? Hampir terlalu mudah.  Tapi itulah apa yang kita sukai.  Jadi mari kita gulir ke bawah dan mendapatkan sedikit lebih kompleks contoh di sini.  Di sini kita memiliki rutinitas getTips JSON bahwa kita
telah terikat dengan sebuah tombol.  Dan di sini kami menciptakan lebih dari obyek yang kompleks yang
berisi sebuah array asosiatif.  Array asosiatif hanya cukup berarti, lagi, item, nilai.  Dan dalam hal ini, nilai kita adalah sekelompok objek tip diformat sebagai JSON.  Jadi sekarang, jika kita ingin bekerja dengan ini, kita bisa menelepon tips.  OldTips, yang akan memberi kita semua tips ini.  Dan kemudian tips.  NewTips, yang akan memberi kita semua tips ini.  Dan jadi kita memanggil displayJSONTips ini dua kali.  Pertama kali iterates melalui, itu akan menampilkan semua yang lama dan.

Kedua kalinya, semua yang baru.  Dan jika scroll ke bawah dan melihat fungsi ini, aku akan mulai melemparkan beberapa jQuery kamu sekarang kita yang tahu bagaimana menggunakannya.  Dan biarkan aku hanya melakukan ini.  Mari saya mendapatkan barang ini keluar dari sini sehingga Anda dapat melihat betapa mudahnya fungsi ini adalah dengan menggunakan dan kami akan tempel semua kembali masuk Jadi di sini adalah.  Berikut fungsi jQuery kami.  Dan apa yang kita lakukan adalah kita melewati dalam data JSON.  Jadi pertama kali masuk, itu akan berisi semua tips tua.  Dalam hal ini, kami hanya akan melakukan - menggunakan Fungsi JQuery.  each yang akan iterate melalui masing-masing dari mereka JSON item.  Dan di sini itu akan kembali, dalam kami
fungsi anonim di sini, saya dan kemudian barang.

Ini adalah jika Anda ingin bekerja dengan indeks, seperti yang kita lakukan dengan loop.  Item adalah jika kita ingin bekerja dengan objek dan properti secara langsung.  Sekarang, biarkan aku paste seluruh kode ini kembali ke sini, yang harus tampak akrab.  Ini adalah kode yang kami dibangun di dalam loop kita kembali ketika kita berbicara tentang bagaimana melakukan loop di bahasan aliran kami.  Dan kami telah diperluas di atasnya seluruh bahasan sejak saat itu.  Tapi pada dasarnya, semua yang kita lakukan adalah sedikit logika dan kemudian format.  Tapi titik nyata di sini adalah, lihat, bekerja dengan hal ini adalah seperti bekerja dengan objek JavaScript.  Kami hanya melakukan item.  property seperti yang kami lakukan di atas.  Jadi mari kita menyelamatkan satu ini.  Kepala kembali ke browser.  Refresh.  Dan sekarang, jika kita lakukan Dapatkan Tips JSON, hasil yang sama. Jadi itu hanya membuktikan bahwa format data JSON sangat sederhana untuk membaca, memahami, membuat, dan kemudian lulus sekitar antara sistem.   Jadi di sini pertama adalah semua tips lama kita.  Kemudian kita mendapatkan dua tips baru terakhir kami.  Jadi bagaimana hal ini dibandingkan dengan XML ? Mari kita gulir ke bawah sini dan menyisipkan beberapa kode yang lebih dalam blok script kami.  Dan kita akan gulir ke atas, dan hal pertama yang kita miliki di sini adalah hanya fungsi yang disebut getTipsXML, yang menggunakan Ajax untuk memuat file.  Dan sekali file yang dimuat, itu akan memukul ini fungsi callback disebut displayXMLTips dan mengambil XML.  Jadi kita akan mendapatkan data sini dari tips xml kami.

Dan jika kita gulir ke bawah di Solution Explorer sini ke proyek kami dan atas tips.  xml, inilah seperti apa.  Dan sekarang ini XML sangat sederhana.  Jadi ini akan sangat sederhana untuk mengurai.  Tetapi jika kita memiliki XML yang kompleks, Anda akan melihat bahwa itu akan mengambil lebih banyak karena parsing XML adalah banyak seperti parsing DOM. Anda harus benar-benar menemukan apa yang Anda cari dan kemudian berjalan melalui node untuk mengekstrak informasi yang Anda ingin ekstrak.  Dan sekarang, jika kita gulir ke bawah ke fungsi displayXMLTips kami, itu jenis membuatnya tampak mudah karena kita menggunakan jQuery. Tapi kau akan melihat beberapa nuansa kecil di sini.  Dan lagi, ini adalah XML sangat sederhana.  Tapi setidaknya, JSON masih jauh lebih mudah untuk bekerja dengan karena, nomor satu, kita harus, daripada melakukan masing-masing dan loop melalui segala sesuatu dalam daftar node kami, dalamXML kami, kami benar-benar harus menemukan.  Kita harus melakukan Find pada ujung.

Jadi ini benar-benar akan kemudian melakukan Masing-masing itu. Jadi ini akan menarik keluar setiap tip tunggal dan semua anak-anak di bawah elemen ujung dalam XML. Dan kemudian kita melakukan sesuatu yang funky. Di sini, saya akan menunjukkan bahwa dalam satu detik. Dan kemudian jika kita ingin bekerja dengan node di bawahnya tips, kita perlu melakukan ini. Kita perlu Find lain. Jadi ini adalah bagaimana hal tersebut akan benar-benar memperlambat karena kita terus-menerus mencari DOM, XML DOM, untuk menemukan node ini dan kemudian ekstrak nilai-nilai. Tapi selain itu, itu tidak terlalu buruk penggalian karena itu jauh seperti kami hanya melakukan. Maksudku, itu tidak semudah seperti di object. property JSON. Tapi Anda mendapatkan ide di sini adalah kami hanya menarik keluar semua nilai elemen. Sekarang jika kita memiliki atribut di sini, sekali lagi, kita perlu menggunakan beberapa kode yang berbeda untuk mencabut atribut XML juga. Sekarang, mari kita lihat apa ini tampak seperti di browser. Mari kita simpan. Kepala dilakukan untuk browser, refresh dan hit Dapatkan Tips XML. Ada itu. Ada dua tips kami diambil dari file XML kami. Tidak terlalu buruk. Sekarang, mari kita lihat dan mari kita menghapus funky ini potongan kode di sini. Hit simpan. Kepala kembali ke browser. Hit Refresh.

Dan sekarang memukul Dapatkan Tips. Jadi ini hanya apa yang saya maksud. Nuansa sedikit bekerja sama dengan XML memberi kita kosong node, hasil kosong di masing-masing dari mereka. Jadi itulah yang ini sepotong defensif sedikit kode melakukan di sini, ini hanya memastikan bahwa jika tidak ada nilai tip ini, jika kita mendapatkan tip kosong di sini, maka itu akan kembali benar. Ini seperti melakukan terus dalam loop. Jadi itu hanya parser XML yang funky dan memberikan kita spasi node kembali sebagai nilai. Hal-hal begitu banyak kecil seperti itu. XML akan membuat Anda gila jika Anda bekerja dengan itu terlalu lama.  Sekarang, jika Anda ingat, di sini kita membuat panggilan Ajax, kan? Kami melakukan ini adalah panggilan asynchronous sehingga akan menyebutnya.  Dan itu akan callback ke halaman kami di sini melalui kami callback bila dilakukan. Salah satu tujuan untuk bahasan ini adalah untuk juga melakukannya dengan menggunakan XMLHttpRequest. Dan dalam bahasan sebelumnya, ketika kita melakukan callback kita benar-benar melihat bagaimana melakukan keduanya. Dan XMLHttpRequest dan kemudian permintaan Ajax. Sehingga Anda dapat melihat bagaimana mereka berdua berbeda dalam sintaks.

Yah, aku melakukan hal yang sama lagi di sini. Dan dengan XML kita, jika kita ingin melakukan hal yang sama hal, ini dia. Hanya daripada menggunakan callback di sini, kami langsung menempatkan dalam acara rutin kami yang sebenarnya, yang kita akan masih panggilan displayXMLTips. Jadi saat ini, kami hanya melakukannya sedikit berbeda. Alih-alih menggunakan Ajax, kami menggunakan XMLHttpRequest. Dan itu kode yang sama persis bahwa kita melihat kembali pada kami callback bahasan. Tapi aku hanya ingin menunjukkan dua arah yang Anda bisa melakukannya. Dan XMLHttpRequest yang jenis cara lama melakukan. Jadi jika Anda dipaksa untuk melakukannya dengan cara ini, maka sekarang Anda tahu bagaimana. Tapi jika Anda tidak, cara terbaik untuk dilakukan adalah benar-benar menggunakan jQuery dan Ajax.

Tapi inilah hasilnya. Jika kita memukul F5, di sini itu Muat Tips XHR. Berikut ini Tips Dapatkan XML. Mereka berdua melakukan hal yang sama. Dan aku hanya menambahkan di sini. Jadi itu sebabnya setiap kali kita klik, itu hanya menambahkan lebih banyak tips. Sekarang mari kita lakukan sesuatu yang keren. Mari kita lihat bagaimana kita benar-benar bisa menggunakan JSON di dunia nyata untuk menarik kembali data dari layanan web, mengurai itu, dan menampilkannya. Jadi aku akan menyisipkan sekelompok kode di sini. Mari kita mulai dengan pakan YouTube kami. Jadi kita punya dua blok kode di sini. Salah satu yang akan menggunakan layanan web, web YouTube kami layanan, untuk mendapatkan hasil JSON dan pipa mereka ke dalam video pakan dalam halaman kami. Kemudian kita akan melihat bagaimana untuk membuat panggilan Ajax cuaca yang layanan dan membawa kembali cuaca untuk lokasi tertentu. Baiklah, jadi mari kita mulai dengan pakan YouTube kami. Jadi jika kita ingin memanggil web service, kita bisa melakukan sesuatu seperti ini. Anda akan perlu untuk mendapatkan URL dari layanan web. Dan sekarang kita benar-benar akan menerima beberapa parameter ketika kita sebut ini. Pengguna, dengan cara ini kita dapat memberikan pengguna kontrol atas apa yang pengguna mereka ingin menarik umpan dari dari YouTube. Dan kemudian hasilnya max untuk menarik kembali. Jadi semua yang kita lakukan kemudian adalah kita sedang membangun URL kami dengan nilai-nilai.

Jadi di sini adalah layanan web yang sebenarnya YouTube. gdata. youtube. co m / feeds / api / pengguna. Dan kemudian Anda lulus dalam pengguna. Dan kemudian Anda bisa, juga sebagai parameter - ada sekelompok parameter lain di luar sana juga - lulus dalam hasil max dan kemudian jumlah maksimum hasil.  Dan di sinilah kita benar-benar meminta yang kita inginkan JSON. Dan kita juga mengatakan kita ingin callback kami terjadi tepat dalam fungsi ini di sini. Anda juga dapat menempatkan metode callback yang sebenarnya di sini. Dan kemudian akan callback ke metode bahwa ketika Anda sudah selesai. Sekarang, kami hanya melakukan itu semua dalam satu tembakan dalam sini.  Dan inilah di mana kita akan menggunakan metode getJSON jQuery. Hal ini keren karena itu akan mendapatkan semua JSON dari layanan web dan kemudian mengirimnya melalui argumen ini data yang di sini dalam fungsi callback kami.

Dari sana, kita akan dilakukan di masing-masing. Kita akan loop melalui semua data. feed. entry tersebut. Ini adalah koleksi objek JSON yang akan berisi semua informasi yang kita butuhkan. Kita akan mengekstrak id. Aku akan menunjukkan kepada Anda dalam sedikit. Kita perlu id itu. Dan inilah dia. Barang, lihat, seperti yang kami lakukan sebelumnya di mana kami melewati di i untuk indeks atau teks karena kami bekerja dengan itu. Kami bekerja dengan item sendiri untuk mengekstrak ID tersebut, $ t berisi nilai yang sebenarnya, yang benar-benar akan berisi URL dengan embel id di akhir. Jadi itulah sebabnya kami hanya mengganti. Kita akan menyingkirkan ini bagian dari URL yang akan memberi kita hanya id. Kemudian kita mengekstrak judul, yang akan menjadi nama YouTube video. Kemudian kita mengekstrak penulis pertama. Kemudian kita mengekstrak tanggal. Dan kita hanya mengambil 10 karakter pertama lepas tanggal yang akan memberi kita yeah, bulan, dan hari. Kemudian kita akan menghasilkan sekelompok HTML berdasarkan data tersebut. Kita akan menggunakan kembali gaya kami tip.

Dimana kita akan membuat sebuah artikel, kami akan membuat header. Kali ini, header akan berisi Judul video. Kemudian kita akan menggunakan pemutar YouTube HTML5 baru, yang membutuhkan iFrame ini dan teks HTML.  Kemudian Anda tentukan tinggi dan lebar Anda. Dan sumber Anda akan menjadi hak ini di sini. youtube. com / embed / id dan video, itulah sebabnya mengapa kita diperlukan untuk mengekstrak id dari JSON tersebut. Kemudian kami punya beberapa hal lain dalam sana. Kami hanya menempatkan 0 pada frame sehingga kita tidak melihatnya. Dan kemudian kita hanya, dalam footer kami, kami menempatkan diupload oleh penulis.

Dan kemudian kami juga menempatkan tanggal di atasnya.  Jadi itu saja. Kami hanya dihasilkan HTML ada, penggalian nilai-nilai yang kita diekstrak dari JSON. Dan saya juga menambahkan baris kode ini untuk Anda di sini.  Ini benar-benar akan menggunakan Flash Player yang lama. Jadi jika Anda ingin menggunakan Flash Player, Anda hanya dapat ganti baris iFrame ini dengan garis objek di sini. Dan itu akan membuatnya tua SWF Flash Player atas baru HTML5 player. Dan kemudian kita hanya pipa semua itu ke DIV kami, seperti kami sudah
telah melakukan. Dan itu itu. Satu hal lagi saya ingin menunjukkan di sini adalah saya menambahkan ini console. log dan lulus pada item kami. Hal ini akan mencatat seluruh objek JSON kami ke jendela konsol
dalam browser. Jadi kita dapat menggunakan alat pengembang kami untuk melihat itu. Dan ini baik untuk tujuan pembangunan. Jika situs Anda memasuki, layanan web Anda memanfaatkan tidak memiliki dokumentasi yang baik, maka ini cara yang bagus untuk melihat semua item yang kita dapat bekerja dengan.  Jadi saya menambahkan di sini. Mari kita simpan dan kita lihat bagaimana ini terlihat.

Jadi kita akan me-refresh halaman kami di sini. Aku akan memukul Dapatkan YouTube Pakan, dan memeriksa itu.
Ada itu. Ada lima. Oh, dan omong-omong, aku mungkin harus menunjukkan Anda. Di bagian bawah di sini, kita sebut getYouTubeFeed. Mengirimkan bahasanbahasans sebagai pengguna kami dan 5.  Jadi kita harus mendapatkan lima video streaming di, terbaru lima video dari bahasanbahasans pengguna atas di YouTube. Dan inilah dia. Di sini semua dari mereka. Tidak buruk. Untuk sedikit kode, kita mendapatkan banyak fungsi dari itu. Dan itu terlihat cukup keren, dan semuanya bekerja besar. Dan jika kita memukul F12 untuk masuk ke alat pengembang kami, maka lebih ke tab Console, berikut adalah lima dari objek tersebut.

\Jika kita memperluas yang pertama, inilah yang pertama. Dan Anda bisa melihat semua jenis di sini. Jadi kita dapat melihat bahwa penulis kami adalah array, dan itulah sebabnya kami harus mengeluarkan indeks nol dari array. Dan kemudian kami pergi melalui nama $ t, yang ditarik keluar bahasanbahasans. Bahkan, jika kita kepala ke sini, Anda dapat benar-benar melihat bahwa - lihat ini - barang, penulis, 0. name. t. Yang ditarik keluar dan disimpan penulis dalam sini, dan kemudian kita hanya pipa itu ke HTML kita. Tetapi jika Anda gulir ke bawah sini, ada lebih banyak informasi kita bisa memanfaatkan.

Kita bisa mendapatkan kategori jika kita ingin, istilah pencarian, daftar goes on pada. Konten, judul. Berikut penerbit mana kita menarik kami tanggal dari sana. Berikut ubin. Untuk objek pertama di sana, ada bahasan mikro. Diperbarui. Hanya ada statistik lainnya di sini. Ada banyak informasi yang baik tentang video ini. Dan omong-omong, id. Di sinilah kita benar-benar mengeluarkan id ini. Jadi kami yang ganti ini, yang memberi kami id ini, yang kita kemudian bisa membangun URL embed. Terjadilah bahwa ke pemutar video, dan itulah yang kita dapatkan. Jadi hal-hal yang cukup mengagumkan. Dan omong-omong, jika Anda ingin mempelajari lebih lanjut tentang bagaimana memanfaatkan layanan web publik seperti yang YouTube di sini, kepala ke developers. google. com / YouTube. Ini adalah tempat yang bagus untuk belajar bagaimana melakukan banyak hal dalam banyak bahasa yang berbeda. Bahkan, di sini saya menggunakan API Dokumentasi YouTube data untuk versi 2. 0. Di dalam Perpustakaan Guides Client dan Kode mereka memiliki JSON / JavaScript Guide.

Ini hanya bagaimana sangat, sangat dasar untuk bangun dan berjalan. Benar-benar cepat. Dan hanya output judul feed tertentu ke dalam daftar. Ada juga panduan yang lebih rinci di sini. Ada Panduan Referensi juga, yang akan memberi Anda banyak informasi yang baik tentang apa parameter Anda dapat melewati. Berikut banyak parameter yang kita melewati Layanan YouTube yang kita cari di sana. Dan hanya banyak informasi yang baik di sini tentang bagaimana tekan dan menggunakan layanan web dan semua bahwa Anda bisa melakukannya. Sekarang, layanan web lain yang saya ingin menunjukkan bahwa saya menyadap menggunakan Weather Underground keran di dan tarik cuaca out, kondisi cuaca untuk lokasi tertentu. Aku hanya sulit dikodekan dalam sini Eugene, Oregon.  Markas bahasans. Jadi kita akan melihat apa cuaca seperti di daerah mereka.


Dan kita menggunakan callback Ajax saat ini. Jadi kita hanya melakukan ajax. Lewat di URL, yang dataType, jsonp. Dan kemudian pada kesuksesan, kami hanya menempatkan dalam anonim fungsi inline di sini di mana, sekali lagi, inilah item kami. Kita akan console. log tersebut agar kami dapat menganalisis semua JSON yang datang kembali. Dan kita hanya akan menyimpan semua informasi ini dalam sebuah artikel. Kita akan mengekstrak kota, negara, zip dari lokasi JSON object. Dan kemudian juga, ada sebuah URL ikon kecil keren yang menunjukkan
kondisi saat ini. Jadi kita akan mendorong itu ke daerah di mana kami biasanya memiliki kami betapa panas hit kami. Jadi thumbs up, jempol ke bawah, kebakaran, semua hal semacam itu.  Dan kemudian kami akan menampilkan kondisi saat ini dan seterusnya dan lain sebagainya. Tapi lihatlah ini. Sangat sedikit kode, sekali lagi, kali ini untuk melakukan Ajax callback untuk memasuki layanan web. Jadi ini sangat cocok untuk hal-hal seperti ini. Cuaca, di mana Anda terus-menerus akan menjadi memperbarui itu. Daripada posting dan menyegarkan seluruh halaman, sekarang Ajax bisa mengambil alih dan memperbarui sedikit porsi halaman kapan saja ia memiliki update. Sempurna untuk apa JSON dibangun untuk juga, karena itu kecil, sederhana, dan itu kinerja tinggi. Itu hal kecil, untuk memperbarui applet kecil di suatu tempat di sudut atau halaman web akan mengambil mikrodetik dapat dilakukan. Jadi mari kita simpan ini. Kepala ke browser sekali lagi di sini. Refresh. Dan kali ini mari kita cuaca Ajax.

Hei, ada itu. Jadi ada itu. Eugene, Oregon. Ini saat berawan, dan dingin. Brrr. 48 derajat Fahrenheit, 9 derajat Celcius. Kami bahkan memiliki elemen terakhir diperbarui di sini. Hit F12. Dan di sini adalah objek. Pengamatan saat ini. Ini berisi semua informasi terkini tentang cuaca di sana di baik tua Eugene, Oregon.  Berikut adalah semua informasi yang baik.  Jadi aku hanya meraih feelslike_string, yang memberikan kami berdua Fahrenheit dan Celsius.  Anda bisa melakukan satu atau yang lain jika Anda ingin orang-orang tertentu.  Saya juga meraih terakhir kali diperbarui, yang ada di sini.  Dan kemudian inilah URL icon I disalurkan ke citra tersebut.  Saat ini, itu berawan.  Nah, melihat semua informasi yang baik di sini kita bisa tarik.  Kita bisa mendapatkan angin gust cuaca, hampir semuanya.  Dan inilah lokasi JSON object yang memberi kita semua informasi tentang lokasi dan bahkan di mana cuaca diekstrak dari.  Dan last but not least, biarkan saya menunjukkan kepada Anda Doodler dan bagaimana ini berlaku untuk Doodler.

Jadi dalam Doodler, kita melakukan hal yang persis sama.  Kami menarik kembali bahwa JSON pakan melalui web Google layanan, dan kemudian kami menampilkannya di sini melalui HTML5 ini pemutar video.  Yang dengan cara, jika Anda mengklik kanan pada video, Anda dapat memberitahu bahwa ini adalah pemutar video HTML5 karena kami memiliki bagus klik menu kanan daripada yang lama Flash plug-in menu ketika Anda mengklik kanan di atasnya.  Satu-satunya perbedaan di sini juga adalah bahwa kita sedang menampilkan sebuah sedikit berbeda.  Kami memiliki korsel bagus yang menunjukkan semua video baru-baru ini feed semua dilakukan dengan menggunakan CSS.  Jadi konsumsi data mengagumkan.

Ini masa depan.

Ini adalah apa yang memungkinkan kita untuk memperkaya website kami dengan lainnya informasi dan sistem masyarakat.  Dan itu juga memungkinkan kita untuk mengekspos data kita sendiri sehingga orang lain dapat memperkaya situs Web mereka dengan informasi kami.  Dan itu hanya menarik untuk menjadi bagian dari web karena tampaknya seperti itu berkembang lebih dekat dan lebih dekat, seiring waktu, ke yang besar, sistem yang terintegrasi.  Dalam bahasan, kami belajar bagaimana untuk mengkonsumsi data.  Kita mulai dengan gambaran.  Kami berbicara tentang apa JSON dan XML.  Mereka berdua terbaca-manusia, platform-independen, data yang format yang digunakan untuk bertukar informasi di seluruh internet.  Kami melihat bahwa perbedaan besar antara mereka adalah JSON yang baik untuk hal-hal web, baik untuk kecil ringan, mudah, struktur data sederhana untuk bertukar informasi.  Dan bekerja dengan sangat baik JavaScript.  Dan kita melihat bahwa XML lebih format untuk jenis perusahaan barang.  Kami juga melihat bahwa layanan web adalah apa yang mendorong semua data ini di internet.  Kemudian kami melompat ke laboratorium bahasan virtual.  Kami melihat bagaimana mengkonsumsi JSON.  Kami melihat bagaimana mengkonsumsi XML.  Dan kemudian kita meletakkannya bersama-sama dengan memanfaatkan publik layanan web untuk pull down JSON, mengurai, dan menampilkannya pada halaman web kami.  Saya berharap ini telah informatif untuk Anda.

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.