1 00:00:00,180 --> 00:00:07,980 Hello guys. Welcome to the course "Web technologies  and web design for beginners" and today   2 00:00:08,880 --> 00:00:13,020 we're gonna talk about cross browser  and cross-platform programming. 3 00:00:13,620 --> 00:00:21,780 Why cross-platform programming is important? Internet is nowadays a huge part of human life. 4 00:00:21,780 --> 00:00:30,000 Almost four and a half billion users worldwide use it, which is fifty six percent of the entire population  5 00:00:30,000 --> 00:00:36,840 of the Earth. It's obvious that they use wide  variety of technologies. To create document that   6 00:00:36,840 --> 00:00:44,100 will fit everyone we should consider support  of different browsers, different screen sizes, 7 00:00:44,100 --> 00:00:50,040 and different platforms. Nowadays most people  use Google Chrome but there are those who use   8 00:00:50,040 --> 00:00:59,700 Safari, those who use Firefox, Internet Explorer and  Mozilla. Most of the CSS properties present in the   9 00:00:59,700 --> 00:01:06,480 approved standards are supported by all modern browsers and devices. Currently the   10 00:01:06,480 --> 00:01:13,380 line between the computers and portable devices with which users visit web pages almost erased. 11 00:01:13,380 --> 00:01:22,560 All devices can be classified into groups by  screen size, proportions, screen navigation method, etc. 12 00:01:22,560 --> 00:01:29,700 Each of these parameters affects the usability  of web page that you're designing. Comparing the   13 00:01:29,700 --> 00:01:35,820 screen of a desktop computer or laptop to a mobile  device you can see, that despite the same declared   14 00:01:35,820 --> 00:01:42,960 resolution in pixels the actual physical size  of the mobile device is several times smaller. 15 00:01:42,960 --> 00:01:51,960 Nowadays users mostly use smartphone to browse  websites. Less of them use laptops, even less use   16 00:01:51,960 --> 00:02:00,240 tablets, some of them still use computers and one  percent of users use netbooks or even smart TVs. 17 00:02:03,000 --> 00:02:11,100 If you design for mobile browser you should  consider that the page elements, which size is   18 00:02:11,100 --> 00:02:17,280 set in pixels, can be displayed correctly in  a computer but will be unacceptably small on   19 00:02:17,280 --> 00:02:24,360 a mobile device. In this case mobile browser  will try to squeeze the page to fit it all   20 00:02:24,360 --> 00:02:31,500 into a mobile phone screen and will make  it hardly readable. Or it will add horizontal   21 00:02:31,500 --> 00:02:39,300 and vertical scrolls which may make reading  quite hard. Unless special instructions are given   22 00:02:39,960 --> 00:02:47,460 the browser will decide itself how to handle your  page. The correct page should have only vertical   23 00:02:47,460 --> 00:02:53,580 scroll and should have the font size easily  readable for users even on smallest devices. 24 00:02:54,480 --> 00:03:02,700 To handle this there is a special meta tag  which is called "viewport" with which help   25 00:03:02,700 --> 00:03:10,560 you can manage initial settings and even  the settings the user can handle himself. 26 00:03:14,220 --> 00:03:21,540 Web page elements can be measured in absolute and  relative values. Absolute units of measurements do   27 00:03:21,540 --> 00:03:28,200 not depend on anything, they will not change  their value with any changes or settings. 28 00:03:28,200 --> 00:03:35,280 In HTML and CSS there are five absolute units of  measurement that are still present. First of all   29 00:03:35,280 --> 00:03:43,800 these are inches - European unit of measurement with  a distance equal to 2.54 centimeters, marked as "in". 30 00:03:43,800 --> 00:03:55,560 The second one is centimeter, which is equal  to almost 40 percent of inch. It's denoted as "cm". 31 00:03:56,160 --> 00:04:04,980 Also we have millimeter which is 10 percent of a  centimeter. The fourth element of measurement   32 00:04:04,980 --> 00:04:12,780 is points which is standard printing unit of  measurement. And pica which is also standard   33 00:04:12,780 --> 00:04:20,820 printing unit of measurement but it's rarely used.  Relative units of measurement are characterized by   34 00:04:20,820 --> 00:04:27,660 the fact that their value is calculated relative  to some other value. The dimensions denoted by   35 00:04:27,660 --> 00:04:35,160 these values may change due to external factors such as screen size, viewports, width, 36 00:04:35,160 --> 00:04:44,640 user settings etc. There are four relative units  of measurement in HTML nowadays. First of all   37 00:04:44,640 --> 00:04:53,460 it's "em" - letter M of typographical font which is  used in the current web page it's equal to the   38 00:04:53,460 --> 00:05:03,120 size of a huge letter M. The next one is letter Єx"  which is basically the same but it's calculated   39 00:05:03,120 --> 00:05:12,420 by the height of a lowercase letter x. The next  one surprisingly is pixel, because pixel element   40 00:05:12,420 --> 00:05:21,240 is monitor screen element which can be painted  with only one color. A pixel is relative value, 41 00:05:21,240 --> 00:05:29,940 because of its ability to scale depending on the  monitor screen size. In fact the pixel depends on   42 00:05:29,940 --> 00:05:36,600 the diagonal of the screen, which is constant, and  the resolution, which waries depending on the user   43 00:05:36,600 --> 00:05:44,580 settings. The last relative unit of measurement  is percentage. Percentage value is a real number   44 00:05:44,580 --> 00:05:51,960 calculated by browser and it depends on the  property, to which it's assigned - either it is   45 00:05:51,960 --> 00:05:58,020 calculated by the another property of this element  or it depends on the parent element or whatever. 46 00:05:58,920 --> 00:06:05,160 Next time guys we will talk about  media requests and dynamic adapting   47 00:06:05,160 --> 00:06:11,640 of the page depending on the different screen size. Thanks for watching and stay tuned!