All language subtitles for 3. A note about web browsers

af Afrikaans
ak Akan
sq Albanian
am Amharic
ar Arabic
hy Armenian
az Azerbaijani
eu Basque
be Belarusian
bem Bemba
bn Bengali
bh Bihari
bs Bosnian
br Breton
bg Bulgarian
km Cambodian
ca Catalan
ceb Cebuano
chr Cherokee
ny Chichewa
zh-CN Chinese (Simplified)
zh-TW Chinese (Traditional)
co Corsican
hr Croatian
cs Czech
da Danish
nl Dutch
en English
eo Esperanto
et Estonian
ee Ewe
fo Faroese
tl Filipino
fi Finnish
fr French Download
fy Frisian
gaa Ga
gl Galician
ka Georgian
de German
el Greek
gn Guarani
gu Gujarati
ht Haitian Creole
ha Hausa
haw Hawaiian
iw Hebrew
hi Hindi
hmn Hmong
hu Hungarian
is Icelandic
ig Igbo
id Indonesian
ia Interlingua
ga Irish
it Italian
ja Japanese
jw Javanese
kn Kannada
kk Kazakh
rw Kinyarwanda
rn Kirundi
kg Kongo
ko Korean
kri Krio (Sierra Leone)
ku Kurdish
ckb Kurdish (Soranî)
ky Kyrgyz
lo Laothian
la Latin
lv Latvian
ln Lingala
lt Lithuanian
loz Lozi
lg Luganda
ach Luo
lb Luxembourgish
mk Macedonian
mg Malagasy
ms Malay
ml Malayalam
mt Maltese
mi Maori
mr Marathi
mfe Mauritian Creole
mo Moldavian
mn Mongolian
my Myanmar (Burmese)
sr-ME Montenegrin
ne Nepali
pcm Nigerian Pidgin
nso Northern Sotho
no Norwegian
nn Norwegian (Nynorsk)
oc Occitan
or Oriya
om Oromo
ps Pashto
fa Persian
pl Polish
pt-BR Portuguese (Brazil)
pt Portuguese (Portugal)
pa Punjabi
qu Quechua
ro Romanian
rm Romansh
nyn Runyakitara
ru Russian
sm Samoan
gd Scots Gaelic
sr Serbian
sh Serbo-Croatian
st Sesotho
tn Setswana
crs Seychellois Creole
sn Shona
sd Sindhi
si Sinhalese
sk Slovak
sl Slovenian
so Somali
es Spanish
es-419 Spanish (Latin American)
su Sundanese
sw Swahili
sv Swedish
tg Tajik
ta Tamil
tt Tatar
te Telugu
th Thai
ti Tigrinya
to Tonga
lua Tshiluba
tum Tumbuka
tr Turkish
tk Turkmen
tw Twi
ug Uighur
uk Ukrainian
ur Urdu
uz Uzbek
vi Vietnamese
cy Welsh
wo Wolof
xh Xhosa
yi Yiddish
yo Yoruba
zu Zulu
Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: 1 1 00:00:01,691 --> 00:00:04,137 So far we have developed a website 2 2 00:00:04,137 --> 00:00:08,608 and used the Google Chrome browser to see how it looks. 3 3 00:00:08,608 --> 00:00:11,745 In an ideal world we would be able to create 4 4 00:00:11,745 --> 00:00:14,764 our site using everything we've learned so far. 5 5 00:00:14,764 --> 00:00:18,318 And the website would look great in any browser. 6 6 00:00:18,318 --> 00:00:21,034 Now, unfortunately each browser interprets 7 7 00:00:21,034 --> 00:00:24,451 HTML and CSS in a slightly different way. 8 8 00:00:25,400 --> 00:00:27,072 Which means that a website may appear 9 9 00:00:27,072 --> 00:00:31,112 differently to visitors using different browsers. 10 10 00:00:31,112 --> 00:00:34,061 So, once we've created our website we have to 11 11 00:00:34,061 --> 00:00:37,382 review how it appears on multiple browsers. 12 12 00:00:37,382 --> 00:00:40,145 This is very very important. 13 13 00:00:40,145 --> 00:00:42,281 The most popular browsers right now 14 14 00:00:42,281 --> 00:00:46,448 are Google Chrome, Internet Explorer, Firefox and Safari. 15 15 00:00:47,621 --> 00:00:49,456 Here we have the world wide market share 16 16 00:00:49,456 --> 00:00:53,171 of all browsers as of January 2015. 17 17 00:00:53,171 --> 00:00:55,145 And here we see that Google Chrome 18 18 00:00:55,145 --> 00:00:58,478 has almost 50% of the market share. 19 19 00:01:00,049 --> 00:01:02,740 Now the first thing we have to do in 20 20 00:01:02,740 --> 00:01:05,771 order to make CSS3 work the same way 21 21 00:01:05,771 --> 00:01:09,938 in every browser is prefixing some CSS3 properties. 22 22 00:01:11,646 --> 00:01:14,177 And CSS3 browser prefixes are a way 23 23 00:01:14,177 --> 00:01:16,867 for browser makers to add support 24 24 00:01:16,867 --> 00:01:20,950 for new CSS features in a kind of testing period. 25 25 00:01:22,974 --> 00:01:27,848 Here are CSS browser prefixes for different browsers. 26 26 00:01:27,848 --> 00:01:32,353 So it's webkit for Android, Chrome, IOS and Safari browsers 27 27 00:01:32,353 --> 00:01:36,520 moz for Firefox, ms for Internet Explorer and o for Opera. 28 28 00:01:40,558 --> 00:01:43,413 And here is an example for the border radius property 29 29 00:01:43,413 --> 00:01:46,386 with different browser prefixes. 30 30 00:01:46,386 --> 00:01:49,341 With this code the boarder radius property 31 31 00:01:49,341 --> 00:01:53,380 will work even on older browsers of Chrome or Firefox. 32 32 00:01:53,380 --> 00:01:55,075 Because the older versions of the modern 33 33 00:01:55,075 --> 00:01:57,118 browsers always cause the biggest 34 34 00:01:57,118 --> 00:01:59,618 problems to us web developers. 35 35 00:02:01,159 --> 00:02:02,320 Now it seems a little bit boring 36 36 00:02:02,320 --> 00:02:06,360 to add all these prefixes manually, right? 37 37 00:02:06,360 --> 00:02:08,543 Good news is we don't have to. 38 38 00:02:08,543 --> 00:02:10,354 Because there is another great bracket 39 39 00:02:10,354 --> 00:02:13,558 extension that does the job for us. 40 40 00:02:13,558 --> 00:02:17,225 So let's go back to brackets and install it. 41 41 00:02:18,429 --> 00:02:20,774 So, the extension we're going to install 42 42 00:02:20,774 --> 00:02:23,480 is called autoprefixer. 43 43 00:02:23,480 --> 00:02:27,503 So again hit here to extensions button 44 44 00:02:27,503 --> 00:02:30,920 and now right here we write autoprefixer. 45 45 00:02:34,697 --> 00:02:36,392 So then you hit install here. 46 46 00:02:36,392 --> 00:02:41,175 I already have it installed so I will not do it. 47 47 00:02:41,175 --> 00:02:44,171 So I hope you have it installed by now. 48 48 00:02:44,171 --> 00:02:45,842 And now it's very very easy. 49 49 00:02:45,842 --> 00:02:50,009 We just select all the code hitting command a or control a. 50 50 00:02:51,253 --> 00:02:53,760 And then we come to this edit menu 51 51 00:02:53,760 --> 00:02:57,731 and down here we have autoprefix selection. 52 52 00:02:57,731 --> 00:03:00,424 So we hit that button and now all 53 53 00:03:00,424 --> 00:03:03,373 the relevant properties are prefixed. 54 54 00:03:03,373 --> 00:03:07,274 So let's scroll down here and see what we have for instance. 55 55 00:03:07,274 --> 00:03:11,441 So here, the transition property was prefixed for webkit. 56 56 00:03:14,357 --> 00:03:17,027 And this extension is actually previously marked 57 57 00:03:17,027 --> 00:03:20,533 because it only prefixes the properties 58 58 00:03:20,533 --> 00:03:23,435 that need prefixing in each browser. 59 59 00:03:23,435 --> 00:03:25,711 So in this case all webkit browsers. 60 60 00:03:25,711 --> 00:03:29,044 Such as Chrome, IOS, Android and Safari. 61 61 00:03:30,007 --> 00:03:33,174 So again we have the webkit transition 62 62 00:03:34,281 --> 00:03:36,072 and we show what else we have. 63 63 00:03:36,072 --> 00:03:37,567 Here we have to transform property 64 64 00:03:37,567 --> 00:03:41,734 and this is for webkit and for the Internet Explorer. 65 65 00:03:43,363 --> 00:03:45,831 So we see this is pretty smart. 66 66 00:03:45,831 --> 00:03:48,998 Here again and it helps us do our job. 67 67 00:03:50,957 --> 00:03:54,534 And we should do the same here in this CSS file. 68 68 00:03:54,534 --> 00:03:58,701 So again, command a and then we hit autoprefix selection. 69 69 00:04:02,358 --> 00:04:04,289 And to be absolutely sure we can 70 70 00:04:04,289 --> 00:04:08,141 do the same here in our grid CSS file. 71 71 00:04:08,141 --> 00:04:09,273 I actually don't know if this is 72 72 00:04:09,273 --> 00:04:12,940 necessary but we'll do it just to make sure. 73 73 00:04:18,076 --> 00:04:21,083 Now all our code is prefixed. 74 74 00:04:21,083 --> 00:04:22,894 So we should now test our website 75 75 00:04:22,894 --> 00:04:26,894 on the four major browsers as I told you before. 76 76 00:04:27,794 --> 00:04:30,301 So Google Chrome here obviously not necessary because 77 77 00:04:30,301 --> 00:04:33,258 we already know it works well with it 78 78 00:04:33,258 --> 00:04:37,778 since we used it all the time to test our website. 79 79 00:04:37,778 --> 00:04:39,861 So next up I have Safari. 80 80 00:04:41,911 --> 00:04:45,093 So this is the Google Chrome browser. 81 81 00:04:45,093 --> 00:04:46,676 Now I have Firefox. 82 82 00:04:48,138 --> 00:04:52,055 So let me open my index page HTML file with it. 83 83 00:04:59,533 --> 00:05:01,950 Alright, so this is Firefox. 84 84 00:05:04,038 --> 00:05:06,894 And well we see that everything works 85 85 00:05:06,894 --> 00:05:11,061 exactly the way as it works in Google Chrome right? 86 86 00:05:13,256 --> 00:05:17,006 So no problems here everything's fine, great. 87 87 00:05:19,943 --> 00:05:23,360 And now I will test it on Safari as well. 88 88 00:05:25,261 --> 00:05:27,844 I have it opened here actually. 89 89 00:05:37,483 --> 00:05:39,036 Doesn't work this way okay so I will 90 90 00:05:39,036 --> 00:05:40,869 make open with Safari. 91 91 00:05:45,785 --> 00:05:47,035 And here we go. 92 92 00:05:48,101 --> 00:05:51,654 Again let's test it, let's see if everything works. 93 93 00:05:51,654 --> 00:05:54,071 So all these animations work. 94 94 00:05:55,369 --> 00:05:56,952 All our effects and 95 95 00:05:59,464 --> 00:06:03,295 so things look a little different here. 96 96 00:06:03,295 --> 00:06:05,989 For instance this box here looks different in Chrome. 97 97 00:06:05,989 --> 00:06:07,419 But that's nothing we could change. 98 98 00:06:07,419 --> 00:06:09,958 That's really something which has to do 99 99 00:06:09,958 --> 00:06:13,208 with the browser and operating systems. 100 100 00:06:14,902 --> 00:06:17,990 Now for PC users they can not test their website 101 101 00:06:17,990 --> 00:06:21,682 on Safari because it only runs on a Mac. 102 102 00:06:21,682 --> 00:06:25,096 But maybe you can use a Mac from a friend or so 103 103 00:06:25,096 --> 00:06:29,263 and test if your webpage looks good with the Safari browser. 104 104 00:06:30,831 --> 00:06:33,734 And then we have the Internet Explorer and this time 105 105 00:06:33,734 --> 00:06:36,125 the Mac users have the problem because 106 106 00:06:36,125 --> 00:06:40,119 we cannot install the Internet Explorer on a Mac. 107 107 00:06:40,119 --> 00:06:42,371 So I will actually not be able to show 108 108 00:06:42,371 --> 00:06:46,388 you how it looks like on the Internet Explorer. 109 109 00:06:46,388 --> 00:06:48,478 So if you have a Mac and you want to test 110 110 00:06:48,478 --> 00:06:51,079 if your website looks good on a Internet Explorer 111 111 00:06:51,079 --> 00:06:53,354 you can for example ask a friend of yours 112 112 00:06:53,354 --> 00:06:56,326 which has a Windows computer and see if your 113 113 00:06:56,326 --> 00:07:00,409 website looks great on Internet Explorer as well. 114 114 00:07:01,830 --> 00:07:04,671 So actually on the newer version of the Internet Explorer 115 115 00:07:04,671 --> 00:07:08,754 like 11 or 10 everything we did should look fine. 116 116 00:07:11,141 --> 00:07:13,231 The most problematic browsers are the older 117 117 00:07:13,231 --> 00:07:16,814 versions like Internet Explorer 6, 7 and 8 118 118 00:07:18,736 --> 00:07:21,524 because many of the CSS3 styles 119 119 00:07:21,524 --> 00:07:23,683 don't work on these browsers. 120 120 00:07:23,683 --> 00:07:25,866 They are still around but for us 121 121 00:07:25,866 --> 00:07:29,720 web developers hopefully not forever. 122 122 00:07:29,720 --> 00:07:32,298 And we will not concentrate so much on these 123 123 00:07:32,298 --> 00:07:34,527 older versions because that would require 124 124 00:07:34,527 --> 00:07:36,610 very specific techniques. 125 125 00:07:37,662 --> 00:07:39,357 And actually there is a rather 126 126 00:07:39,357 --> 00:07:42,933 complex way of using the Internet Explorer on a Mac. 127 127 00:07:42,933 --> 00:07:45,115 And to find out more about that check 128 128 00:07:45,115 --> 00:07:47,282 out the link in the ebook. 129 129 00:07:48,296 --> 00:07:51,385 Now there are however some things that we can do 130 130 00:07:51,385 --> 00:07:54,032 in order to make some of the parts 131 131 00:07:54,032 --> 00:07:58,032 of our website work great in older web browsers. 132 132 00:07:59,435 --> 00:08:03,459 So we will use three JavaScript scripts to enable some of 133 133 00:08:03,459 --> 00:08:07,338 the new functionalities in older browsers. 134 134 00:08:07,338 --> 00:08:09,868 The first one there is a little script called 135 135 00:08:09,868 --> 00:08:13,700 respond.js which enables the browser to understand 136 136 00:08:13,700 --> 00:08:16,974 and execute CSS media queries which we 137 137 00:08:16,974 --> 00:08:19,557 need for responsive web design. 138 138 00:08:21,474 --> 00:08:23,224 So let me close this. 139 139 00:08:25,121 --> 00:08:29,069 There is this website JsDelivr where we can get 140 140 00:08:29,069 --> 00:08:31,736 many scripts like that for free. 141 141 00:08:33,573 --> 00:08:37,312 More on that later in the next section. 142 142 00:08:37,312 --> 00:08:40,312 But for now let's just type respond. 143 143 00:08:42,862 --> 00:08:45,862 Okay here we go and hit integration. 144 144 00:08:47,273 --> 00:08:50,190 All we need to do is copy this code 145 145 00:08:52,962 --> 00:08:57,129 and paste it at the bottom of our HTML file right here. 146 146 00:08:59,046 --> 00:09:03,213 So really after the body we paste our script files. 147 147 00:09:04,851 --> 00:09:06,615 So again we will learn more about 148 148 00:09:06,615 --> 00:09:09,820 JavaScript in the next lecture. 149 149 00:09:09,820 --> 00:09:13,987 But for now, let's just copy those scripts right here. 150 150 00:09:15,160 --> 00:09:16,716 So the second script I'm going to 151 151 00:09:16,716 --> 00:09:19,618 use here is called HTML5Shiv. 152 152 00:09:19,618 --> 00:09:23,334 And this enables us to use and style 153 153 00:09:23,334 --> 00:09:26,399 HTML5 elements in older browsers that were 154 154 00:09:26,399 --> 00:09:29,732 available before HTML5 actually existed. 155 155 00:09:31,507 --> 00:09:33,295 And this is pretty useful and we will include 156 156 00:09:33,295 --> 00:09:36,462 it just as we included respond before. 157 157 00:09:39,075 --> 00:09:40,158 So HTML5Shiv. 158 158 00:09:44,188 --> 00:09:47,438 So click this and then the min version 159 159 00:09:49,973 --> 00:09:51,890 and paste it down here. 160 160 00:09:53,606 --> 00:09:56,939 And the last one we will use selectivizr 161 161 00:09:58,504 --> 00:10:02,421 or something like that we'll just type it here. 162 162 00:10:06,269 --> 00:10:08,702 That's right so we will use this one. 163 163 00:10:08,702 --> 00:10:13,137 And this allows us to use CSS3 pseudo classes 164 164 00:10:13,137 --> 00:10:15,575 like less child and first child. 165 165 00:10:15,575 --> 00:10:18,325 Or Internet Explorer 6, 7, and 8. 166 166 00:10:20,553 --> 00:10:24,720 So these are just some of the things that you can do. 167 167 00:10:25,801 --> 00:10:29,968 There are many more but these are some simple solutions. 168 168 00:10:34,578 --> 00:10:37,410 Now one very handy tool to see what exactly 169 169 00:10:37,410 --> 00:10:40,493 works on which browser is caniuse.com 170 170 00:10:42,008 --> 00:10:43,726 Which is this website. 171 171 00:10:43,726 --> 00:10:47,511 And in here we can just write CSS properties 172 172 00:10:47,511 --> 00:10:49,694 and I did this with transform. 173 173 00:10:49,694 --> 00:10:53,901 And it shows us exactly where this works. 174 174 00:10:53,901 --> 00:10:56,408 So we see that transform doesn't work 175 175 00:10:56,408 --> 00:11:00,575 in Internet Explorer 8 it works on 9 with the prefix ms. 176 176 00:11:02,526 --> 00:11:06,693 And for 10 and 11 it works just fine without any prefix. 177 177 00:11:10,224 --> 00:11:13,776 So for Google Chrome for instance version 31 178 178 00:11:13,776 --> 00:11:16,104 it needs the webkit but from then 179 179 00:11:16,104 --> 00:11:18,053 we don't need that anymore. 180 180 00:11:18,053 --> 00:11:20,303 Or for Safari for instance 181 181 00:11:21,319 --> 00:11:24,344 it also needs the webkit prefix 182 182 00:11:24,344 --> 00:11:26,811 or for the IOS Safari. 183 183 00:11:26,811 --> 00:11:31,185 And our bracket extensions already took care of that. 184 184 00:11:31,185 --> 00:11:34,918 So whenever we need to know if a CSS property 185 185 00:11:34,918 --> 00:11:37,667 works or not on a certain browser 186 186 00:11:37,667 --> 00:11:40,584 we can use this very handy website. 187 187 00:11:41,933 --> 00:11:45,165 So for me, this part is the most boring 188 188 00:11:45,165 --> 00:11:47,510 part of the web developer work. 189 189 00:11:47,510 --> 00:11:48,877 Working with all the browsers and 190 190 00:11:48,877 --> 00:11:51,352 looking what works and what doesn't. 191 191 00:11:51,352 --> 00:11:53,990 But well we still have to do it 192 192 00:11:53,990 --> 00:11:56,126 because it is super important that we 193 193 00:11:56,126 --> 00:12:00,293 make a website work on as many browsers as possible. 194 194 00:12:01,731 --> 00:12:04,757 So and with this lecture we close this section 195 195 00:12:04,757 --> 00:12:06,855 where we built the static part of our 196 196 00:12:06,855 --> 00:12:09,688 website project with HTML and CSS. 197 197 00:12:11,149 --> 00:12:13,149 And it is already great. 198 198 00:12:14,005 --> 00:12:15,955 Now if you were not able to follow 199 199 00:12:15,955 --> 00:12:18,161 all the lectures or did not understand 200 200 00:12:18,161 --> 00:12:20,158 everything, you can download all 201 201 00:12:20,158 --> 00:12:22,495 the codes for the entire project 202 202 00:12:22,495 --> 00:12:25,824 from the link in the description of this video. 203 203 00:12:25,824 --> 00:12:27,983 And as always please feel free to 204 204 00:12:27,983 --> 00:12:31,373 ask your questions in the course forms. 205 205 00:12:31,373 --> 00:12:33,509 And then when you're read join me in the 206 206 00:12:33,509 --> 00:12:35,676 next section about jQuery. 18025

Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.