Belweb technology-history

1

ТЭХНАЛОГII ВЭБ-ДЫЗАЙНА

К.т.н., дацент Ганчарова Святлана Аляксандраўна

2

Інтэрнет

Інтэрнет - сусветная сістэма аб'яднаных камп'ютэрных сетак, пабудаваная на базе пратаколу TCP / IP.

Інтэрнет ўтварае глабальную інфармацыйную прастору, служыць фізічнай асновай для Сусветнага павуціны (World Wide Web, WWW) і мноства іншых сістэм (пратаколаў) перадачы дадзеных.

Дзень Інтэрнету - 30 верасня.

1 студзеня 1983г. – дзень увядзення пратаколу TCP / IP.

3 чэрвеня 2011 была прынятая рэзалюцыя ААН, якая прызнае доступ у Інтэрнет базавым правам чалавека. Адключэнне канкрэтных рэгіёнаў ад Інтэрнэту з чэрвеня 2011 году лічыцца парушэннем правоў чалавека.

3

Ключавыя прынцыпы Iнтэрнета

Інтэрнет складаецца з многіх тысяч карпаратыўных, навуковых, урадавых і хатніх кампутарных сетак. Аб'яднанне сетак рознай архітэктуры і тапалогіі стала магчыма дзякуючы пратаколу IP (англ. Internet Protocol) і прынцыпу маршрутызацыі пакетаў дадзеных.Пратакол IP быў спецыяльна створаны агнастычным ў дачыненні да фізічных каналаў сувязі. Гэта значыць, любая сістэма (сетка) перадачы лічбавых дадзеных, правадная або бесправадная, для якой існуе стандарт інкапсуляцыі у яе IP-пакетаў, можа перадаваць і трафік Інтэрнету. Агнастыцызм пратаколу IP, у прыватнасці, азначае, што кампутар або маршрутызатар павінен ведаць тып сетак, да якіх ён непасрэдна далучаны, і ўмець працаваць з гэтымі сеткамі; але не абавязаны (і ў большасці выпадкаў не можа) ведаць, якія сеткі знаходзяцца за маршрутызатарамі.На стыках сетак спецыяльныя маршрутызатары (праграмныя або апаратныя) займаюцца аўтаматычным сартаваннем і перанакіраваннем пакетаў дадзеных, зыходзячы з IP-адрасоў атрымальнікаў гэтых пакетаў. Пратакол IP ўтварае адзіную адрасную прастору ў маштабах усяго свету, але ў кожнай асобнай сеткі можа існаваць і ўласная адрасная падпрастора, якая выбіраецца зыходзячы з класа сеткі. Такая арганізацыя IP-адрасоў дазваляе маршрутызатарам адназначна вызначаць далейшы напрамак для кожнага пакета дадзеных. У выніку, паміж асобнымі сеткамі Інтэрнэту не ўзнікае канфліктаў, і дадзеныя бесперашкодна і дакладна перадаюцца з сеткі ў сетку па ўсёй планеце і бліжняму космасу.

4

Сёрф Вінт і Роберт Кан - стваральнікі пратаколу перадачы дадзеных TCP / IP, які па гэты дзень з'яўляецца стандартам для перадачы дадзеных у Інтэрнеце.

5

Розніца паміж паняццямі Інтэрнет і Вэб (WWW)

Інтэрнет: сетку кампутараў, якія аб'яднаны каналамі сувязі і выкарыстоўваюць

пратаколы TCP / IP для сувязі.Вэб: сетка сайтаў, якія выкарыстоўваюць гіперспасылкі для пераходаў ад старонкі

да старонцы.

6

Класіфікацыя вэб-сайтаў

Прыклад: Suzuki (http://www.suzuki.com/)6

Карпаратыўныя сайты - афіцыйнае прадстаўніцтва кампаніі, прадпрыемства, арганізацыі ў Інтэрнэце

7

Акадэмiчныя сайты

Прыклад: (http://www.ox.ac.uk)


8

Прома / прэзентацыйныя сайты - служаць для рэкламы пэўных акцый, мерапрыемстваў, падзей, прасоўвання канкрэтных тэхналогій, сэрвісаў, тавараў або паслуг.

Прыклад: сайт-анонс гульнi Спайдармэн http://demo.northkingdom.com/comcast/spiderman3/8


9Прыклад камерцыйнага праекту (Флэш-сайт). http://www.redbullbnrg.com/


10Прыклад сайта партфолiа дызайнера. http://www.cgpolis.com/3d.htm

Персанальныя сайты


11

Арт-сайт Дзенiса Степкiна – флэш-дызайнера http://polcarstva.net


12

Электронныя крамы - арыентаваныя на атрыманне прыбытку ад продажу тавараў або паслуг.

Прыклад: Iнтэрнет-крама OZ.by (http://www.oz.by)

12


13

Онлайн-сэрвісы - доступ да пэўнага набору паслуг.

Прыклад: Пошукавая сiстэма Google (http://www.google.com)

13


14Прыклад партала http://tut.by

15

Кам'юніці - віртуальны цэнтр засяроджвання людзей, звязаных пэўнай агульнай прыкметай або цікавасцю

Прыклад: LiveJournal.com

15


16

Кантэнт-праекты - спецыялізуюцца на нейкім пэўным тэматычным змесце.

Прыклад: Мiнск стары i новы (http://minsk-old-new.com/)

16


17

Парталы - вялікі віртуальны масіў інфармацыі, які ўключае ў сябе мноства розных тэматычных раздзелаў меншага памеру, альбо некаторую колькасць самастойных праектаў

Тып (а) Тып (б)

(а) Прыклад вертыкальнага партала - Partal - Зрэз дызайну Беларусіhttp://www.partal.by/

(Б) Прыклад гарызантальнага партала - Культура Расііhttp://www.russianculture.ru/


18

http://demo.northkingdom.com/ - прыклады апошніх тэндэнцый дызайну сайтаўhttp://archive.org/web/ - вэб-архіў сайтаў з моманту з’яўлення Вэба.

http://demo.northkingdom.com/

http://demo.northkingdom.com/

http://archive.org/web/



19

Інфармацыя ў інтэрнеце можа адлюстроўвацца як пасіўна (гэта значыць карыстальнік можа толькі счытваць яе), так і актыўна - тады карыстальнік можа дадаваць інфармацыю і рэдагаваць яе. Да спосабаў актыўнага адлюстравання інфармацыі адносяцца:

гасцявыя кнігі,форумы,чаты,блогі,вікі-праекты,сацыяльныя сеткі,сістэмы кіравання кантэнтам.

Спосабы актыўнага адлюстравання інфармацыі ў Сусветнай павуціне

Варта адзначыць, што гэта дзяленне вельмі ўмоўна. Так, скажам, блог або гасцявую кнігу можна разглядаць як прыватны выпадак форуму, які, у сваю чаргу, з'яўляецца прыватным выпадкам сістэмы кіравання кантэнтам. Звычайна розніца праяўляецца ў прызначэнні, падыходзе і пазіцыянаванні таго ці іншага прадукту.

20

Перспектывы развіцця Сусветнай павуціны

У цяперашні час намеціліся дзве тэндэнцыі ў развіцці Сусветнай павуціны: семантычная павуціна і сацыяльная павуціна.

Семантычная павуціна мяркуе паляпшэнне складнасці і рэлевантнасці інфармацыі ў Сусветнай павуціне праз увядзенне новых фарматаў метададзеных. Сацыяльная павуціна накiравана на працу па ўпарадкаванні наяўнай у Павуціне інфармацыі, якая выконваецца самімі карыстальнікамі Павуціны.

У рамках другога напрамку напрацоўкі, якія з'яўляюцца часткай семантычнай павуціны, актыўна выкарыстоўваюцца ў якасці інструментаў (RSS і іншыя фарматы вэб-каналаў, OPML, мiкрафарматы XHTML).

21

12 крытэрыяў якасці рэсурсаў:• празрыстасць

• эфектыўнасць

• падтрымка

• даступнасць

• арыентацыя на карыстальніка

• рэактыўнасць

• шматмоўнасць

• сумяшчальнасць

• кіруемасць

• захаванасць

• прадукцыйнасць

• наведвальнасць

22

Персаналіі вэб-дызайну

Цім Бернерс-Лі(Tim Burners-Lee)

Сэр Цімаці Джон Бернерс-Лі (англ. Sir Timothy John «Tim» Berners-Lee; нар. 8 чэрвеня 1955) - брытанскі навуковец, вынаходнік URI, URL, HTTP, HTML, вынаходнік Сусветнай павуціны (сумесна з Робертам Кайо) і дзейны кіраўнік кансорцыума Сусветнай павуціны. Аўтар канцэпцыі семантычнай павуціння. Аўтар мноства іншых распрацовак у галіне інфармацыйных тэхналогій.

23

Роберт Кайо

(Robert Cailliau)

Роберт Кайо (англ. Robert Cailliau) (нарадзіўся 26 студзеня 1947 года) сумесна з сэрам Цімам Бернерсом-Лі вынайшаў тэхналогію Сусветнай павуціны (World Wide Web). Месца нараджэння: Тонгерен, Бельгія.

У 1989 годзе незалежна ад Ціма Бернерса-Лі прапанаваў сістэму гіпертэксту для доступу да дакументацыі CERN. У 1990 годзе гэта прывяло да сумеснай прапановы гэтай тэхналогіі, а затым і да стварэння Сусветнай павуціны (World Wide Web). Распрацоўшчык першага www-сервера.

Персаналіі веб-дызайну

24

17 мая 1991 супрацоўнік Еўрапейскай лабараторыі па ядзерных даследаваннях CERN ў Жэневе, кансультант па праграмным забеспячэнні Цім Бернес-Лі прыляпіў на адзін з кампутараў у сваёй лабараторыі налепку з надпісам «This machine is a server, DO NOT POWER IT DOWN !!". Гэты першы ў свеце web-сервер рэалізаваў "Вялікую тэхналагічную тройку": URL-адрасаванне, HTML-разметку і HTTP-пратакол у кантэксце адзінай мадэлі кліент-сервер. (см. дакумент Global Networking: a Timeline http://www.ciolek.com/GLOBAL/1900late.html)

25

Першы ў свеце вэб-сайт з'явіўся ў Інтэрнеце 6 жніўня 1991 г. http://info.cern.ch/На гэтым сайце апісвалася што такое Сусветная павуціна, як усталяваць вэб-сервер, як займець браўзэр і г.д. Гэты сайт таксама з'яўляўся першым у свеце інтэрнэт-каталогам, таму што пазней Цім Бернерс-Лі размясціў і падтрымліваў там спіс спасылак на іншыя сайты .

26

1994 г. - асноўную працу па развіцці Сусветнай павуціны ўзяў на сябе Кансорцыум Сусветнай павуціны (англ. World Wide Web Consortium, W3C), заснаваны і да гэтага часу узначалены Цімам Бернерсом-Лі.

Кансорцыум распрацоўвае і ўкараняе адзіныя прынцыпы і тэхналагічныя стандарты для Інтэрнет і Сусветнай павуціны (званыя «Рэкамендацыямі», англ. W3C Recommendations).

Місія W3C: «Цалкам раскрыць патэнцыял Сусветнай павуціны, шляхам стварэння пратаколаў і прынцыпаў, якія гарантуюць доўгатэрміновае развіццё Сеткі». Дзве іншыя важнейшыя задачы Кансорцыума - забяспечыць поўную «інтэрнацыяналізацыю Сеткі» і зрабіць Сетку даступнай для людзей з абмежаванымі магчымасцямі.

Усе Рэкамендацыі Кансорцыума Сусветнай павуціны адкрытыя, гэта значыць не абаронены патэнтамі і могуць укараняцца любым чалавекам без усялякіх фінансавых адлічэнняў кансорцыуму.

W3C

27

Афіцыйны сайт Кансорцыўму Сусветнай павуціны (W3C) www.w3.org

28

Аб некалькіх важных прынцыпах:

Магчымасць рэдагаваць інфармацыю Павуціны не менш важная, чым магчымасць проста падарожнічаць па ёй. У гэтым сэнсе Бернерс-Лі вельмі разлічвае на канцэпцыю WYSIWYG, хаця Wiki - гэта таксама крок у патрэбным кірунку.

Кампутары могуць быць выкарыстаны для «фонавых працэсаў», якія дапамагаюць людзям працаваць разам.

Кожны аспект Інтэрнету павінен працаваць як павуціна, а не як іерархія. У гэтым сэнсе вельмі непрыемным выключэннем з'яўляецца сістэма імёнаў даменаў (па-ангельску. Domain Name System, DNS), кіраваная арганізацыяй ICANN.

Навукоўцы-кампутаршчыкі нясуць не толькі тэхнічную адказнасць, але і маральную.

29

Арцемій Лебедзеў http://www.artlebedev.ru/

Арцемій Лебедзеў нарадзіўся 13 лютага 1975. Сын пісьменніцы Таццяны Талстой і філолага Андрэя Лебедзева. Пасля школы паступіў на факультэт журналістыкі МДУ ім. М. В. Ламаносава, які ня скончыў, адлічылі з 2-га курса.

У 1995 годзе заснаваў студыю WebDesign (у 1998 перайменаваную ў «Студыю Арцемія Лебедзева»), якая з'яўляецца адной з першых і найбуйнейшых студый вэб-дызайну ў Рунэце.

Некамерцыйныя праектыmetro.ru — сайт, прысвечаны Маскоўскаму метрапалітэнуsokr.ru — слоўнік скарачэнняўЗбор твораў Акуніна http://www.akunin.ru/«Н. Ж. М. Д.» — калекцыя інструкцый, налепак і этыкетак, шыльдаў, плакатаў, цэннікаў, аб'яў і іншай друкаванай і рукапіснай прадукцыі, якая змяшчае смешныя памылкі друку, недарэчнае словаўжыванне або вельмі неадэкватны пераклад з іншай мовыКоводство — выданне, прысвечанае графічнаму і прамысловаму дызайну, праектаванню інтэрфейсаў, тыпаграфікі, семіётыкі і візуалізацыіСайт гурта «Акварыум» http://www.aquarium.ru/

Персаналіі вэб-дызайну. Рунэт.

http://www.tema.ru/rrr/main.html

http://www.tema.ru/rrr/main.html

http://www.artlebedev.ru/kovodstvo/sections/

30

31

Дзмітрый Кірсанаў

«Веб.Дизайн. Книга Дмитрия Кирсанова»

Якаб Нільсэн (Jakob Nielsen)

Спецыаліст па web-usability

Персаналіі вэб-дызайну. Кнiгi.

32

Стіў Круг(Steve Krug)

«Не заставляйте

меня думать»

Джэффры Зельдман (Jeffrey Zeldman)

«Designing With Web

Standards»

Луі Разенфельд (Louis Rosenfeld )

«Information Architecture for the

World Wide Web»

Джэссі Джеймс Гарретт (Jesse James Garrett)

«The Elements of User

Experience»

Персаналіі вэб-дызайну. Кнiгi.

33

Развіццё вэб-дызайну ішло па двух асноўных напрамках:

— з развіццём праграмных і інструментальных сродкаў:

1. HTML-дызайн; выкарыстанне ў дызайне табліц для разметкі;2. CSS (каскадныя табліцы стыляў);3. Flash (дынамічны дызайн);4. CMS (сістэма кіравання кантэнтам);5. HTML5, CSS3, Ajax (Asynchronous Javascript and XML).

.

— з развіццём тэхнічных сродкаў :

1. ўдасканаленне сродкаў вываду інфармацыі (маніторы, іх разрозненне і колераперадача);2. павелічэнне прапускной магчымасці каналаў сувязі.

34

Тэкставыя дакументы, якія змяшчаюць код на мове HTML (такія дакументы традыцыйна маюць пашырэнне .html або .htm), апрацоўваюцца адмысловымі праграмамі, якія адлюстроўваюць дакумент у яго фарматаваным выглядзе. Такія праграмы, званыя «браўзэрамі» або «інтэрнэт-аглядальнікамі», звычайна прадстаўляюць карыстальнiку зручны інтэрфейс для запыту вэб-старонак, іх прагляду (і вываду на іншыя знешнія прылады) і, пры неабходнасці, адпраўкі уведзеных карыстальнікам дадзеных на сервер.

ПапулярныяInternet Explorer, Mozilla Firefox, Google Chrome, Opera, Yandex, Safari

Менш распаўсюджаныя

Netscape Navigator, Flock, Maxthon, Konqueror, SeaMonkey, Green Browser, Avant Browser, AOL Explorer, Galeon, Epiphany, Kazehakase, Charon, Arachne, Links2, Slimbrowser, FastIE, MyBrowser, Dillo, K-Meleon, Arora.

ТэкставыяAlynx, ELinks, Links, Lynx, Netrik, w3m, WebbIE, MacWWW

Для партатыўных прылад

IE Mobile, Mozilla Fennec, Opera Mini, Wapalta, Safari для iPhone, WebKit Mobile, Mobile Text Web Browser, MobiBrowser.

Браўзеры

http://sourceforge.net/projects/mtwb/

http://www.javawidget.com/Read_rus.htm#MobiBrowser

35

Вэб-сервер — гэта сервер, які прымае HTTP-запыты ад кліентаў, звычайна вэб-браўзэраў, і які выдае ім HTTP-адказы, звычайна разам з HTML-старонкай, малюнкам, файламi, медыя-патокам або іншымi дадзенымi.

Вэб-серверам называюць як праграмнае забеспячэнне, якое выконвае функцыі вэб-сервера, так і непасрэдна кампутар, на якім гэта праграмнае забеспячэнне працуе.

Клiент, якім звычайна з'яўляецца вэб-браўзэр, перадае вэб-серверу запыты на атрыманне рэсурсаў, пазначаных URL-адрасамі. Рэсурсы - гэта HTML-старонкі, выявы, файлы, медыя-патокі або іншыя дадзеныя, якія неабходныя кліенту. У адказ вэб-сервер перадае кліенту запытаныя дадзеныя. Гэты абмен адбываецца па пратаколе HTTP.

Найбольш распаўсюджаныя вэб-серверы:

Apache — вольны вэб-сервер, найбольш часта выкарыстоўваецца ў Unix-падобных аперацыйных сістэмах;IIS ад кампаніі Microsoft, які распаўсюджваецца з АС сямейства Windows;nginx - вольны вэб-сервер, які распрацоўваецца Ігарам Сысоевым з 2002 года і які карыстаецца вялікай папулярнасцю на буйных сайтах.

Вэб-сервер

36

Тэхналогіі пабудовы вэб-прыкладанняў• Кліенцкія сродкі распрацоўкі вэб-прыкладанняў

HTML CSS JAVASCRIPT

• Серверныя тэхналогіі распрацоўкі вэб-прыкладанняў

PERL PHP PYTHON ASP

36

37

Актуальныя тэхналогіі пры распрацоўцы вэб-прыкладанняў

XHTML Мікрафарматы Фрэймворкі

AJAX JSON RSS

Ruby/Ruby on Rails ASP.NET

38

Перспектыўныя тэхналогіі распрацоўкі вэб-прыкладанняў

CSS3SilverlightFlex

39

Характарыстыка тэхналогій

КрытэрыйHTML

XHTML

JAVASCRIPT

JS-фреймворк

CSS

CSS3

CSS-фреймворк

Мiкрафарматы

RSS

AJAX

JSON

Хуткасць распрацоўкі 2 3 1 3 2 3 3 3 2 2 2

Неабходны ўзровень ведаў 2 2 1 2 1 2 2 3 2 1 1

Падтрымка браўзэрамі 2 3 2 3 2 1 2 1 2 2 3

Кліенцкія прыкладанні

Серверныя прыкладанні

Крытэрый PHPPYTHON

PERL

ASP.NET

RUBY

Хуткасць распрацоўкі 2 2 1 3 3

Падтрымка ААП 2 2 1 3 3

Платформа 3 3 3 1 3

Нагрузка на сервер 3 2 3 1 1

Шкала крытэрыяў1. Слабы2. Сярэдні3. Высокi

Чым вышэй баль, тым лепш

40

Тэхналогія AJAX (Асінхронны JavaScript + XML), была вядома даўно. Аднак, дзякуючы з'яўленню тэрміна AJAX, які ўвёў Джіс Джэймс Гаррет (Jesse James Garrett) у лютым 2005г., яна стала незвычайна моднай.

Сутнасць тэхналогіі AJAX заключаецца ў змене зместу загружанай вэб-старонкі без яе поўнай перазагрузкі, дзякуючы чаму дасягаецца высокая дынамічнасць сайтаў. Тэхналогія грунтуецца на падзеле дадзеных і падзагрузкі тых ці іншых кампанентаў па меры неабходнасці.

AJAX тэхналогіяй у строгім сэнсе слова не з'яўляецца. Гэта проста абрэвіятура, якая пазначае падыход да стварэння вэб-прыкладанняў з дапамогай наступных тэхналогій:

• стандартызаванае ўяўленне сродкамі XHTML і CSS;

• дынамічнае адлюстраванне і ўзаемадзеянне з карыстальнікам з дапамогай DOM;

• абмен і апрацоўка дадзеных у выглядзе XML і XSLT;

• JavaScript;

• асінхронныя запыты з дапамогай аб'екта XMLHttpRequest.

AJAX

41

AJAX• Калі ў стандартным вэб-прыкладанні апрацоўкай ўсёй інфармацыі займаецца сервер, тады

як браўзэр адказвае толькі за ўзаемадзеянне з карыстальнікам, перадачу запытаў і вывад атрыманай HTML-старонкi, то ў Ajax-дадатку паміж карыстальнікам і серверам з'яўляецца яшчэ адзін пасрэднік - рухавік Ajax. Ён вызначае, якія запыты можна апрацаваць "на месцы", а за якімі неабходна звяртацца на сервер.

• Паводзіны сервера таксама змянілiся. Калі раней на кожны запыт сервер выдаваў новую старонку, то зараз ён адсылае толькі тыя дадзеныя, якія патрэбныя кліенту, а HTML з іх прама ў браўзэры фарміруе рухавік Ajax.

• Асінхроннасць выяўляецца ў тым, што далёка не кожны клік карыстальніка даходзіць да сервера, прычым адваротнае таксама справядліва -далеко не кожная рэакцыя сервера абумоўлена запытам карыстальніка. Большую частку запытаў фарміруе рухавік Ajax, прычым яго можна напісаць так, што ён будзе загружаць інфармацыю, прадбачачы дзеянні карыстальніка.

• Зразумела, што з такой схемай працы якасная нагрузка на сервер змяняецца - калі раней запытаў было мала, але кожны з іх патрабаваў значных рэсурсаў (серверу трэба выцягнуць інфармацыю з БД, сфарміраваць з яе вэб-старонку і аддаць браўзэру), то зараз задача сервера спрашчаецца (фарміраваць вэб-старонкі не трэба, ды і аб'ём перадаваных дадзеных менш), але запытаў апрацоўваць даводзіцца больш.

• Аднак самая важная праблема AJAX заключаецца ў тым што, захоўваючы лакальную копію загружанага дакумента, наведвальнік старонкі, на самай справе, нічога не захоўвае!

• AJAX ня прызначаны для загрузкі кантэнту! Загружаны матэрыял з'яўляецца часовым і існуе толькі да закрыцця браўзэра, таму што ён не запісваецца ў тэкст старонкі, а толькі захоўваецца ў аператыўнай памяці. Прысвечаны ў гэтыя рэчы наведвальнік выдзеліць тэкст і скапіруе ў файл, але не прысвечаны, ніколі не зразумее, чаму, наведваючы старонку на сайце, ён бачыць адно, а адкрываючы яе лакальную копію - іншае.

42

AJAX

Асаблівасці асінхроннай мадэлі

• Складанасць у рэалізацыі– Асінхронная мадэль складаней для адладкі– Недастатковыя магчымасці браўзэра (javascript)

• Стан гонкi (race conditions)– Нявызначана паслядоўнасць выканання– Можна рабіць шмат адначасовых задач ("вудаў"), але задача, пачатая

першай, можа скончыцца апошняй.• Рэакцыя тут жа, але невядома, які будзе вынік. Больш складанай

апрацоўка памылак– Памылак камунікацыі - разрыў сувязі, і т.п.– Карыстальніцкіх памылак - напрыклад, не хапіла прывілеяў

• Кантроль цэласнасці (bugproof) – Напрыклад, рэдактар адправіў асінхронны запыт на выдаленне галінкі

дрэва. Дабаўленне ў яе трэба адключыць, пакуль не прыйдзе адказ сервера. Калі раптам не хапіла прывілеяў, то аперацыя не ўдалася.

• Iнтэрактыўнасць• Хуткі інтэрфейс

43

AJAX

Сінхронная мадэль vs Асінхронная мадэль

• У звычайным праграмаванні ўсе аперацыі носяць сінхронны характар, г. зн выконваюцца адна за адной.

• Умоўна кажучы, мы дзейнічаем так:

закідваем вуду – чакаем, калі клюне – клюнула - ўключаем падцяжку спінінга• Пры асінхронным падыходзе мы:

вешаем на вудзiла спецыяльны дэтэктар клёва, задаем яму цягнуць спінінг, калі клюне – закідваем вуду – займаемся іншымі справамі – дэтэктар клева спрацоўвае, запускаючы падцяжку спінінга

• Такiм чынам, у сінхронным выпадку вуда пастаянна прыкоўвае нашу ўвагу. Лоўля рыбы - паслядоўны працэс. У асінхронным варыянце - мы спачатку задалі праграму, што рабіць пры клеве, а затым апусцілі вуду лавіць і заняліся іншымі справамі. Напрыклад, паставілі яшчэ 5 такіх вуд.

• Асінхронныя праграмаванне складаней, чым сінхроннае, і спачатку нязвыкла, таму што ў ім загадзя задаецца тое, што спрацуе пасля. Гэта значыць,, праграму "што рабіць, калі клюне" трэба задаць да таго, як клюнула, і наогул невядома, ці ёсць у вадаёме рыба.

44

AJAXПеравагі• Эканомія трафікуЗамест загрузкі ўсёй старонкі досыць загрузіць толькі частку, што змянілася, як правіла даволі невялікую.• Памяншэнне нагрузкі на серверДа прыкладу, на старонцы працы з поштай, калі вы адзначаеце прачытаныя лісты, серверу дастаткова ўнесці змены ў базу дадзеных і адправіць кліенцкаму скрыпту паведамленне аб паспяховым выкананні аперацыі без неабходнасці паўторна ствараць старонку і перадаваць яе кліенту.• Паскарэнне рэакцыі інтэрфейсуПаколькі трэба загрузіць толькі частку, што змянілася, карыстальнік бачыць вынік сваіх дзеянняў хутчэй.

Недахопы• Адсутнасць інтэграцыі са стандартнымі інструментамі браўзэраДынамічна створаныя старонкі не рэгіструюцца браўзэрам у гісторыі наведвання старонак, таму не працуе кнопка «Назад», якая прадстаўляе карыстальнікам магчымасць вярнуцца да прагледжаных раней старонак, але існуюць скрыпты, якія могуць вырашыць гэтую праблему.Іншы недахоп змянення зместу старонкі пры пастаянным URL заключаецца ў немагчымасці захавання закладкі на жаданы матэрыял. Часткова вырашыць гэтыю праблему можна з дапамогай дынамічнай змены ідэнтыфікатара фрагмента (часткі URL пасля #), што дазваляюць многія браўзэры.• Дынамічна загружаемы змест недаступны пошукавікам (калі не правяраць запыт, звычайны ён або

XMLHttpRequest)Пошукавыя машыны не могуць выконваць JavaScript, таму распрацоўшчыкі павінны паклапаціцца аб альтэрнатыўных спосабах доступу да зместу сайта.• Старыя метады уліку статыстыкі сайтаў становяцца неактуальныміМногія сэрвісы статыстыкі вядуць ўлік праглядаў новых старонак сайта. Для сайтаў, старонкі якіх шырока выкарыстоўваюць AJAX, такая статыстыка губляе актуальнасць.• Ускладненне праектаПераразмяркоўваецца логіка апрацоўкі дадзеных - адбываецца вылучэнне і частковы перанос на бок кліента працэсаў першаснага фарматавання дадзеных. Гэта ўскладняе кантроль цэласнасці фарматаў і тыпаў. Канчатковы эфект тэхналогіі можа быць нівеліраваны неабгрунтаваным ростам выдаткаў на кодынг і кіраванне праектам, а таксама рызыкай зніжэння даступнасці сэрвісу для канчатковых карыстальнікаў.

45

• Google - адна з першых сістэм, якая прапанавала "жывы пошук" (live search). Карыстальнік друкуе пошукавую фразу, а сістэма аўтадапаўняе яе, атрымліваючы спіс самых верагодных дапаўненняў з сервера.

«Жывы пошук», live search.

Код, который это обеспечивает, работает следующим образом.Активируется примерно при каждом нажатии клавиши

Время посылки последнего запроса отслеживаетсяДля "обычной" скорости печати - запрос отсылается при каждом нажатииДля "программистской" скорости - каждые несколько нажатийСоздается скрытый DIV, который показывается при начале печатиDIV заполняется ответом сервера Текущий результат подсвечен, можно перемещаться и выбиратьПри нажатии правой стрелки, поиск в подрезультатахРезультаты кэшируются при нажатии на "удалить", обращения к серверу не происходитВремя на осуществление запроса отслеживается для управления частотой запросов к серверу Обычный модем будет обращаться к серверу меньше,Подключение по выделенной линии - запросы идут чаще.

Прыклады AJAX

46

На момант яго з'яўлення ён быў адзіным адкрытым паштовым сэрвісам, якія выкарыстоўваюць AJAX для наступных падзей.

• Праверка памылак ўводу формы ДА сабміта• На сервер перадаецца імя карыстальніка, вынік праверкі вяртаецца на

старонку.• "Імгненная" загрузка• Браўзэр звяртаецца да сервера толькі за данымі, а не абнаўляе ўвесь

грувасткі інтэрфейс• Аўтаматычная "дастаўка" лістоў у адкрытую тэчку• Час ад часу адпраўляецца запыт на сервер і, калі прыйшлі новыя

лісты, яны з'яўляюцца ў браўзэры.• Аўтадапаўненне• Дастаткова ўвесці першыя літары імя адрасата, і астатнія дапаўняюцца

аўтаматычна, як у дэсктоп-прыкладаннях.• Вынік: шырокая папулярнасць, высокі попыт на экаўнты з моманту

адкрыцця.

Gmail.


47

• Аўтазапаўненне і спіс варыянтаў тэкставага поля.• Валідацыя ў рэжыме рэальнага часу.• Запаўненне вэб формаў - гэта адно з найбольш стамляючых заняткаў,

а самы змрочны момант - гэта калі пасля запаўнення формы і націску кнопкі "Submit" выскоквае цэлы спіс памылак і прыходзіцца палі запаўняць нанава. Адзін са спосабаў пазбавіцца ад гэтай праблемы - гэта дадаць валідацыю ўводных дадзеных пры дапамозе Ajax, якая будзе інфармаваць карыстальніка аб наяўнасці памылкі непасрэдна ў момант яе здзяйснення.

• Inline рэдагаванне• Магчымасць рэдагаваць што-небудзь у inline рэжыме - гэта можа

зрабіць працэс выкарыстання вашага рэсурсу больш зручным і запамінальным. Што можа быць зграбней, чым магчымасць два разы клікнуць па тэкставым полі і быць здольным адразу ж яго рэдагаваць?

• Ajax загрузка. • Загрузка файлаў пры дапамозе Ajax - дазваляе «бачыць» прагрэс

загрузкі.


48

ClickHeat пакажа, куды клікаюць вашыя карыстальнікі.


49

Рэйтынг у выглядзе зорачак на Ajax.• Стварэнне функцыі рэйтынгу дае магчымасць карыстальніку

выказацца, а вашаму сайту дадае інтэрактыўнасці.


50

Ajax форма для падпіскі.• Павышэнне юзабіліці вэб-формаў пры дапамозе

аўтапаведамленняў (павышэнне зручнасці запаўнення вэб-формаў)


51

JCrop.• Фотарэдагаванне фатаграфій онлайн - гэта не вельмі займальны

працэс, незалежна ад таго карыстаецеся вы спецыяльнымi сэрвісамi тыпу Picnic або запускаеце Photoshop. Ці не лепш было б, калі вэбсайт, куды вы заліваеце свае фота, дазваляў бы вам абрэзаць іх пры гэтым?


52
