смартфоны и планшетники. веб разработка помимо...
TRANSCRIPT
![Page 1: смартфоны и планшетники. веб разработка помимо десктопа. Patrick h. lauke. зал 1](https://reader033.vdocuments.net/reader033/viewer/2022051515/5555c9a9d8b42a711f8b468b/html5/thumbnails/1.jpg)
СМАРТФОНЫ И ПЛАНШЕТНИКИMOBILE-FRIENDLY ВЕБ-РАЗРАБОТКА ПОМИМО ДЕСКТОПА
Patrick H. Lauke / RIT++ Conference 2011 / Moscow / 25 April 2011
![Page 2: смартфоны и планшетники. веб разработка помимо десктопа. Patrick h. lauke. зал 1](https://reader033.vdocuments.net/reader033/viewer/2022051515/5555c9a9d8b42a711f8b468b/html5/thumbnails/2.jpg)
mobile web is increasingly important
![Page 3: смартфоны и планшетники. веб разработка помимо десктопа. Patrick h. lauke. зал 1](https://reader033.vdocuments.net/reader033/viewer/2022051515/5555c9a9d8b42a711f8b468b/html5/thumbnails/3.jpg)
we need a website optimised for iPhone
![Page 4: смартфоны и планшетники. веб разработка помимо десктопа. Patrick h. lauke. зал 1](https://reader033.vdocuments.net/reader033/viewer/2022051515/5555c9a9d8b42a711f8b468b/html5/thumbnails/4.jpg)
oh, und another onefor the iPad
![Page 5: смартфоны и планшетники. веб разработка помимо десктопа. Patrick h. lauke. зал 1](https://reader033.vdocuments.net/reader033/viewer/2022051515/5555c9a9d8b42a711f8b468b/html5/thumbnails/5.jpg)
“remove iPhone from ass”Peter-Paul Koch, The iPhone obsession
www.quirksmode.org/blog/archives/2010/02/the_iphone_obse.html
![Page 6: смартфоны и планшетники. веб разработка помимо десктопа. Patrick h. lauke. зал 1](https://reader033.vdocuments.net/reader033/viewer/2022051515/5555c9a9d8b42a711f8b468b/html5/thumbnails/6.jpg)
sites that work on (almost) all mobile devices
![Page 7: смартфоны и планшетники. веб разработка помимо десктопа. Patrick h. lauke. зал 1](https://reader033.vdocuments.net/reader033/viewer/2022051515/5555c9a9d8b42a711f8b468b/html5/thumbnails/7.jpg)
![Page 8: смартфоны и планшетники. веб разработка помимо десктопа. Patrick h. lauke. зал 1](https://reader033.vdocuments.net/reader033/viewer/2022051515/5555c9a9d8b42a711f8b468b/html5/thumbnails/8.jpg)
![Page 9: смартфоны и планшетники. веб разработка помимо десктопа. Patrick h. lauke. зал 1](https://reader033.vdocuments.net/reader033/viewer/2022051515/5555c9a9d8b42a711f8b468b/html5/thumbnails/9.jpg)
what exactly is a “mobile device”?
![Page 10: смартфоны и планшетники. веб разработка помимо десктопа. Patrick h. lauke. зал 1](https://reader033.vdocuments.net/reader033/viewer/2022051515/5555c9a9d8b42a711f8b468b/html5/thumbnails/10.jpg)
![Page 11: смартфоны и планшетники. веб разработка помимо десктопа. Patrick h. lauke. зал 1](https://reader033.vdocuments.net/reader033/viewer/2022051515/5555c9a9d8b42a711f8b468b/html5/thumbnails/11.jpg)
![Page 12: смартфоны и планшетники. веб разработка помимо десктопа. Patrick h. lauke. зал 1](https://reader033.vdocuments.net/reader033/viewer/2022051515/5555c9a9d8b42a711f8b468b/html5/thumbnails/12.jpg)
3 approaches
![Page 13: смартфоны и планшетники. веб разработка помимо десктопа. Patrick h. lauke. зал 1](https://reader033.vdocuments.net/reader033/viewer/2022051515/5555c9a9d8b42a711f8b468b/html5/thumbnails/13.jpg)
1. do nothing
![Page 14: смартфоны и планшетники. веб разработка помимо десктопа. Patrick h. lauke. зал 1](https://reader033.vdocuments.net/reader033/viewer/2022051515/5555c9a9d8b42a711f8b468b/html5/thumbnails/14.jpg)
not WAP or text anymore...
![Page 15: смартфоны и планшетники. веб разработка помимо десктопа. Patrick h. lauke. зал 1](https://reader033.vdocuments.net/reader033/viewer/2022051515/5555c9a9d8b42a711f8b468b/html5/thumbnails/15.jpg)
modern mobile browserswork ok with “normal” sites
![Page 16: смартфоны и планшетники. веб разработка помимо десктопа. Patrick h. lauke. зал 1](https://reader033.vdocuments.net/reader033/viewer/2022051515/5555c9a9d8b42a711f8b468b/html5/thumbnails/16.jpg)
![Page 17: смартфоны и планшетники. веб разработка помимо десктопа. Patrick h. lauke. зал 1](https://reader033.vdocuments.net/reader033/viewer/2022051515/5555c9a9d8b42a711f8b468b/html5/thumbnails/17.jpg)
“but the mobile context...”
![Page 18: смартфоны и планшетники. веб разработка помимо десктопа. Patrick h. lauke. зал 1](https://reader033.vdocuments.net/reader033/viewer/2022051515/5555c9a9d8b42a711f8b468b/html5/thumbnails/18.jpg)
“Desktop computers and mobile devices are so different that the only way to offer a great user experience is to create two
separate designs — typically with fewer features for mobile.”www.useit.com/alertbox/mobile-redesign.html
![Page 19: смартфоны и планшетники. веб разработка помимо десктопа. Patrick h. lauke. зал 1](https://reader033.vdocuments.net/reader033/viewer/2022051515/5555c9a9d8b42a711f8b468b/html5/thumbnails/19.jpg)
2. separate mobile site(m.flickr.com, mobile.mysite.com, ...)
![Page 20: смартфоны и планшетники. веб разработка помимо десктопа. Patrick h. lauke. зал 1](https://reader033.vdocuments.net/reader033/viewer/2022051515/5555c9a9d8b42a711f8b468b/html5/thumbnails/20.jpg)
внимание: browser sniffingphoto: http://www.flickr.com/photos/timdorr/2096272747/
![Page 21: смартфоны и планшетники. веб разработка помимо десктопа. Patrick h. lauke. зал 1](https://reader033.vdocuments.net/reader033/viewer/2022051515/5555c9a9d8b42a711f8b468b/html5/thumbnails/21.jpg)
let the user decide:desktop or mobile?
![Page 22: смартфоны и планшетники. веб разработка помимо десктопа. Patrick h. lauke. зал 1](https://reader033.vdocuments.net/reader033/viewer/2022051515/5555c9a9d8b42a711f8b468b/html5/thumbnails/22.jpg)
![Page 23: смартфоны и планшетники. веб разработка помимо десктопа. Patrick h. lauke. зал 1](https://reader033.vdocuments.net/reader033/viewer/2022051515/5555c9a9d8b42a711f8b468b/html5/thumbnails/23.jpg)
![Page 24: смартфоны и планшетники. веб разработка помимо десктопа. Patrick h. lauke. зал 1](https://reader033.vdocuments.net/reader033/viewer/2022051515/5555c9a9d8b42a711f8b468b/html5/thumbnails/24.jpg)
![Page 25: смартфоны и планшетники. веб разработка помимо десктопа. Patrick h. lauke. зал 1](https://reader033.vdocuments.net/reader033/viewer/2022051515/5555c9a9d8b42a711f8b468b/html5/thumbnails/25.jpg)
![Page 26: смартфоны и планшетники. веб разработка помимо десктопа. Patrick h. lauke. зал 1](https://reader033.vdocuments.net/reader033/viewer/2022051515/5555c9a9d8b42a711f8b468b/html5/thumbnails/26.jpg)
![Page 27: смартфоны и планшетники. веб разработка помимо десктопа. Patrick h. lauke. зал 1](https://reader033.vdocuments.net/reader033/viewer/2022051515/5555c9a9d8b42a711f8b468b/html5/thumbnails/27.jpg)
refactored for small screen,not dumbed down for mobile
![Page 28: смартфоны и планшетники. веб разработка помимо десктопа. Patrick h. lauke. зал 1](https://reader033.vdocuments.net/reader033/viewer/2022051515/5555c9a9d8b42a711f8b468b/html5/thumbnails/28.jpg)
3. single adaptive site
![Page 29: смартфоны и планшетники. веб разработка помимо десктопа. Patrick h. lauke. зал 1](https://reader033.vdocuments.net/reader033/viewer/2022051515/5555c9a9d8b42a711f8b468b/html5/thumbnails/29.jpg)
nothing new...fluid layout, progressive enhancement, graceful degradation
![Page 30: смартфоны и планшетники. веб разработка помимо десктопа. Patrick h. lauke. зал 1](https://reader033.vdocuments.net/reader033/viewer/2022051515/5555c9a9d8b42a711f8b468b/html5/thumbnails/30.jpg)
www.alistapart.com/articles/dao
The Sage “... accepts the ebb and flow of things, Nurtures them, but does not own them,”
Tao Te Ching; 2 Abstraction
![Page 31: смартфоны и планшетники. веб разработка помимо десктопа. Patrick h. lauke. зал 1](https://reader033.vdocuments.net/reader033/viewer/2022051515/5555c9a9d8b42a711f8b468b/html5/thumbnails/31.jpg)
adaptive layouts
![Page 32: смартфоны и планшетники. веб разработка помимо десктопа. Patrick h. lauke. зал 1](https://reader033.vdocuments.net/reader033/viewer/2022051515/5555c9a9d8b42a711f8b468b/html5/thumbnails/32.jpg)
CSS 2.1 Media Types
![Page 33: смартфоны и планшетники. веб разработка помимо десктопа. Patrick h. lauke. зал 1](https://reader033.vdocuments.net/reader033/viewer/2022051515/5555c9a9d8b42a711f8b468b/html5/thumbnails/33.jpg)
Media types
all brailleembossed handheldprint projectionscreen speechtty tv
![Page 34: смартфоны и планшетники. веб разработка помимо десктопа. Patrick h. lauke. зал 1](https://reader033.vdocuments.net/reader033/viewer/2022051515/5555c9a9d8b42a711f8b468b/html5/thumbnails/34.jpg)
CSS 2.1 Media Types<link rel="stylesheet" ... media="print" href="...">
@import url("...") print;
@media print { // insert CSS rules here}
![Page 35: смартфоны и планшетники. веб разработка помимо десктопа. Patrick h. lauke. зал 1](https://reader033.vdocuments.net/reader033/viewer/2022051515/5555c9a9d8b42a711f8b468b/html5/thumbnails/35.jpg)
CSS 3 Media Queries“...the new hotness” Jeffrey Zeldman
http://www.zeldman.com/2010/04/08/best-aea-yet/
![Page 36: смартфоны и планшетники. веб разработка помимо десктопа. Patrick h. lauke. зал 1](https://reader033.vdocuments.net/reader033/viewer/2022051515/5555c9a9d8b42a711f8b468b/html5/thumbnails/36.jpg)
CSS 3 Media Queries
● extend concept of CSS 2.1 Media Types● more granular control of capabilities
http://www.w3.org/TR/css3-mediaqueries/
![Page 37: смартфоны и планшетники. веб разработка помимо десктопа. Patrick h. lauke. зал 1](https://reader033.vdocuments.net/reader033/viewer/2022051515/5555c9a9d8b42a711f8b468b/html5/thumbnails/37.jpg)
Media featureswidth colorheight color-indexdevice-width monochromedevice-height resolutionorientation scanaspect-ratio griddevice-aspect-ratio
![Page 38: смартфоны и планшетники. веб разработка помимо десктопа. Patrick h. lauke. зал 1](https://reader033.vdocuments.net/reader033/viewer/2022051515/5555c9a9d8b42a711f8b468b/html5/thumbnails/38.jpg)
CSS 3 Media Queries<link rel="stylesheet" ... media="screen and (max-width:480px)" href="...">
@import url("...") screen and (max-width:480px);
@media screen and (max-width:480px) { // insert CSS rules here}
![Page 39: смартфоны и планшетники. веб разработка помимо десктопа. Patrick h. lauke. зал 1](https://reader033.vdocuments.net/reader033/viewer/2022051515/5555c9a9d8b42a711f8b468b/html5/thumbnails/39.jpg)
Multiple media queries@media screen and (max-width:480px) { // screen device and width < 480px }
@media screen and (max-width:980px) { // screen device and width < 980px }
@media screen and (min-width:980px) { // screen device and width > 980px }
![Page 40: смартфоны и планшетники. веб разработка помимо десктопа. Patrick h. lauke. зал 1](https://reader033.vdocuments.net/reader033/viewer/2022051515/5555c9a9d8b42a711f8b468b/html5/thumbnails/40.jpg)
www.alistapart.com/articles/responsive-web-design
![Page 45: смартфоны и планшетники. веб разработка помимо десктопа. Patrick h. lauke. зал 1](https://reader033.vdocuments.net/reader033/viewer/2022051515/5555c9a9d8b42a711f8b468b/html5/thumbnails/45.jpg)
www.themaninblue.com/writing/perspective/2004/09/21
![Page 46: смартфоны и планшетники. веб разработка помимо десктопа. Patrick h. lauke. зал 1](https://reader033.vdocuments.net/reader033/viewer/2022051515/5555c9a9d8b42a711f8b468b/html5/thumbnails/46.jpg)
“not a magic bullet...”
![Page 47: смартфоны и планшетники. веб разработка помимо десктопа. Patrick h. lauke. зал 1](https://reader033.vdocuments.net/reader033/viewer/2022051515/5555c9a9d8b42a711f8b468b/html5/thumbnails/47.jpg)
viewport meta
![Page 48: смартфоны и планшетники. веб разработка помимо десктопа. Patrick h. lauke. зал 1](https://reader033.vdocuments.net/reader033/viewer/2022051515/5555c9a9d8b42a711f8b468b/html5/thumbnails/48.jpg)
physical vs virtual pixels
![Page 49: смартфоны и планшетники. веб разработка помимо десктопа. Patrick h. lauke. зал 1](https://reader033.vdocuments.net/reader033/viewer/2022051515/5555c9a9d8b42a711f8b468b/html5/thumbnails/49.jpg)
![Page 50: смартфоны и планшетники. веб разработка помимо десктопа. Patrick h. lauke. зал 1](https://reader033.vdocuments.net/reader033/viewer/2022051515/5555c9a9d8b42a711f8b468b/html5/thumbnails/50.jpg)
mobile devices lie(to better serve the user)
![Page 51: смартфоны и планшетники. веб разработка помимо десктопа. Patrick h. lauke. зал 1](https://reader033.vdocuments.net/reader033/viewer/2022051515/5555c9a9d8b42a711f8b468b/html5/thumbnails/51.jpg)
viewport metasuggests sizing to mobile browser
![Page 52: смартфоны и планшетники. веб разработка помимо десктопа. Patrick h. lauke. зал 1](https://reader033.vdocuments.net/reader033/viewer/2022051515/5555c9a9d8b42a711f8b468b/html5/thumbnails/52.jpg)
viewport meta<meta name="viewport" content="width=320,user-scalable=no">
http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
![Page 53: смартфоны и планшетники. веб разработка помимо десктопа. Patrick h. lauke. зал 1](https://reader033.vdocuments.net/reader033/viewer/2022051515/5555c9a9d8b42a711f8b468b/html5/thumbnails/53.jpg)
Viewport properties
width initial-scaleheight minimum-scaleuser-scalable maximum-scale
![Page 54: смартфоны и планшетники. веб разработка помимо десктопа. Patrick h. lauke. зал 1](https://reader033.vdocuments.net/reader033/viewer/2022051515/5555c9a9d8b42a711f8b468b/html5/thumbnails/54.jpg)
![Page 55: смартфоны и планшетники. веб разработка помимо десктопа. Patrick h. lauke. зал 1](https://reader033.vdocuments.net/reader033/viewer/2022051515/5555c9a9d8b42a711f8b468b/html5/thumbnails/55.jpg)
![Page 56: смартфоны и планшетники. веб разработка помимо десктопа. Patrick h. lauke. зал 1](https://reader033.vdocuments.net/reader033/viewer/2022051515/5555c9a9d8b42a711f8b468b/html5/thumbnails/56.jpg)
<meta name="viewport" content="width=550">
![Page 57: смартфоны и планшетники. веб разработка помимо десктопа. Patrick h. lauke. зал 1](https://reader033.vdocuments.net/reader033/viewer/2022051515/5555c9a9d8b42a711f8b468b/html5/thumbnails/57.jpg)
![Page 58: смартфоны и планшетники. веб разработка помимо десктопа. Patrick h. lauke. зал 1](https://reader033.vdocuments.net/reader033/viewer/2022051515/5555c9a9d8b42a711f8b468b/html5/thumbnails/58.jpg)
<meta name="viewport"content="width=device-width">
+
@media screen and (…) { … }
![Page 59: смартфоны и планшетники. веб разработка помимо десктопа. Patrick h. lauke. зал 1](https://reader033.vdocuments.net/reader033/viewer/2022051515/5555c9a9d8b42a711f8b468b/html5/thumbnails/59.jpg)
CSS Device Adaptation@viewport { width: device-width;}
@viewport { width: 320px; zoom: 2.3; user-zoom: fixed;}
dev.w3.org/csswg/css-device-adapt
Momentan nur in Opera Mobile 11 beta mit -o- prefix dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport
![Page 60: смартфоны и планшетники. веб разработка помимо десктопа. Patrick h. lauke. зал 1](https://reader033.vdocuments.net/reader033/viewer/2022051515/5555c9a9d8b42a711f8b468b/html5/thumbnails/60.jpg)
Viewport properties
width / min-width / max-width user-zoom
height / min-height / max-height orientation
zoom / min-zoom / max-zoom
![Page 61: смартфоны и планшетники. веб разработка помимо десктопа. Patrick h. lauke. зал 1](https://reader033.vdocuments.net/reader033/viewer/2022051515/5555c9a9d8b42a711f8b468b/html5/thumbnails/61.jpg)
touch interfaces
![Page 62: смартфоны и планшетники. веб разработка помимо десктопа. Patrick h. lauke. зал 1](https://reader033.vdocuments.net/reader033/viewer/2022051515/5555c9a9d8b42a711f8b468b/html5/thumbnails/62.jpg)
:hoveronmouseover(...)onmouseout(...)
![Page 63: смартфоны и планшетники. веб разработка помимо десктопа. Patrick h. lauke. зал 1](https://reader033.vdocuments.net/reader033/viewer/2022051515/5555c9a9d8b42a711f8b468b/html5/thumbnails/63.jpg)
![Page 64: смартфоны и планшетники. веб разработка помимо десктопа. Patrick h. lauke. зал 1](https://reader033.vdocuments.net/reader033/viewer/2022051515/5555c9a9d8b42a711f8b468b/html5/thumbnails/64.jpg)
no hover ontouch devices*
*but some devices/browsers fake it
![Page 65: смартфоны и планшетники. веб разработка помимо десктопа. Patrick h. lauke. зал 1](https://reader033.vdocuments.net/reader033/viewer/2022051515/5555c9a9d8b42a711f8b468b/html5/thumbnails/65.jpg)
:focusonfocus(...)onblur(...)
![Page 66: смартфоны и планшетники. веб разработка помимо десктопа. Patrick h. lauke. зал 1](https://reader033.vdocuments.net/reader033/viewer/2022051515/5555c9a9d8b42a711f8b468b/html5/thumbnails/66.jpg)
no focus ontouch devices*
*only after an actual click
![Page 67: смартфоны и планшетники. веб разработка помимо десктопа. Patrick h. lauke. зал 1](https://reader033.vdocuments.net/reader033/viewer/2022051515/5555c9a9d8b42a711f8b468b/html5/thumbnails/67.jpg)
touch events
window.addEventListener('touchstart', function(e){ … }, true);window.addEventListener('touchmove', function(e){ … }, true);window.addEventListener('touchend', function(e){ … }, true);
e.touches[0].pageX; e.touches[0].pageY; …
![Page 68: смартфоны и планшетники. веб разработка помимо десктопа. Patrick h. lauke. зал 1](https://reader033.vdocuments.net/reader033/viewer/2022051515/5555c9a9d8b42a711f8b468b/html5/thumbnails/68.jpg)
progressive enhancement:mouse, keyboard and touch events
![Page 69: смартфоны и планшетники. веб разработка помимо десктопа. Patrick h. lauke. зал 1](https://reader033.vdocuments.net/reader033/viewer/2022051515/5555c9a9d8b42a711f8b468b/html5/thumbnails/69.jpg)
![Page 70: смартфоны и планшетники. веб разработка помимо десктопа. Patrick h. lauke. зал 1](https://reader033.vdocuments.net/reader033/viewer/2022051515/5555c9a9d8b42a711f8b468b/html5/thumbnails/70.jpg)
multimedia
![Page 71: смартфоны и планшетники. веб разработка помимо десктопа. Patrick h. lauke. зал 1](https://reader033.vdocuments.net/reader033/viewer/2022051515/5555c9a9d8b42a711f8b468b/html5/thumbnails/71.jpg)
video, audio und canvaswithout plug-ins
(Java / Flash / Silverlight absent from some devices)
![Page 72: смартфоны и планшетники. веб разработка помимо десктопа. Patrick h. lauke. зал 1](https://reader033.vdocuments.net/reader033/viewer/2022051515/5555c9a9d8b42a711f8b468b/html5/thumbnails/72.jpg)
![Page 73: смартфоны и планшетники. веб разработка помимо десктопа. Patrick h. lauke. зал 1](https://reader033.vdocuments.net/reader033/viewer/2022051515/5555c9a9d8b42a711f8b468b/html5/thumbnails/73.jpg)
geolocation
![Page 74: смартфоны и планшетники. веб разработка помимо десктопа. Patrick h. lauke. зал 1](https://reader033.vdocuments.net/reader033/viewer/2022051515/5555c9a9d8b42a711f8b468b/html5/thumbnails/74.jpg)
navigator.geolocation.getCurrentPosition(success, error);navigator.geolocation.watchCurrentPosition(success, error);
function success(position) {/* where's Wally? */var lat = position.coords.latitude;var long = position.coords.longitude;...
}
![Page 75: смартфоны и планшетники. веб разработка помимо десктопа. Patrick h. lauke. зал 1](https://reader033.vdocuments.net/reader033/viewer/2022051515/5555c9a9d8b42a711f8b468b/html5/thumbnails/75.jpg)
progressive enhancement:geolocation in addition to other
methods (IP address look-up, form, ...)
![Page 76: смартфоны и планшетники. веб разработка помимо десктопа. Patrick h. lauke. зал 1](https://reader033.vdocuments.net/reader033/viewer/2022051515/5555c9a9d8b42a711f8b468b/html5/thumbnails/76.jpg)
online/offline
![Page 77: смартфоны и планшетники. веб разработка помимо десктопа. Patrick h. lauke. зал 1](https://reader033.vdocuments.net/reader033/viewer/2022051515/5555c9a9d8b42a711f8b468b/html5/thumbnails/77.jpg)
application cache, localStorage/sessionStorage,
WebSQL, IndexDB
![Page 78: смартфоны и планшетники. веб разработка помимо десктопа. Patrick h. lauke. зал 1](https://reader033.vdocuments.net/reader033/viewer/2022051515/5555c9a9d8b42a711f8b468b/html5/thumbnails/78.jpg)
…and more (work in progress)WebGL, device API, orientation …
![Page 79: смартфоны и планшетники. веб разработка помимо десктопа. Patrick h. lauke. зал 1](https://reader033.vdocuments.net/reader033/viewer/2022051515/5555c9a9d8b42a711f8b468b/html5/thumbnails/79.jpg)
adaptive techniquesnot just for “mobile”
![Page 80: смартфоны и планшетники. веб разработка помимо десктопа. Patrick h. lauke. зал 1](https://reader033.vdocuments.net/reader033/viewer/2022051515/5555c9a9d8b42a711f8b468b/html5/thumbnails/80.jpg)
twitter.com/#!/stephenhay/status/23350345962889216
![Page 81: смартфоны и планшетники. веб разработка помимо десктопа. Patrick h. lauke. зал 1](https://reader033.vdocuments.net/reader033/viewer/2022051515/5555c9a9d8b42a711f8b468b/html5/thumbnails/81.jpg)
1. do nothing2. separate mobile site3. single adaptive site
![Page 82: смартфоны и планшетники. веб разработка помимо десктопа. Patrick h. lauke. зал 1](https://reader033.vdocuments.net/reader033/viewer/2022051515/5555c9a9d8b42a711f8b468b/html5/thumbnails/82.jpg)
Спасибоwww.opera.com/developer
Игорь Калинаускас Lift. Поднимите внутреннюючетырех сразу, помимо основной работы) для меня является
ОРГАНИЗАЦИЯ CATOP · воспитательный центр, дом для нуждающихся детей и наркологический центр8. Помимо