??????????? ????? ?????????? ? Web 2.0

1
??????????? ????? ?????????? ? Web 2.0
2
??????????

• Web 2.0, ?????????? ? ???????????
• ??????? ?? ???? ?????????? ? ?????? ?? ????????
• ???? ?????? ?? ???????? ?? ????????????

3
???????????

• ????????, ????? ?????? ????? ??????? ...
• ?????
• ??????
• ???????
• ??????????
• ... ?? ??????????

4
??????????

• ????????, ????? ?????? ?????? ???? ????? ??
  ?????????? ??????????? ?? ...
• ????
• ???????
• ???????
• ... ? ???????? (??????????) ???????????

5
Web 1.0 ? Web 2.0

• Web 1.0
• ???????
• ????? ???????? ? HTML-a
• Web 2.0
• ?????????? ??? ? CSS
• Javascript ? AJAX
• ????? ????? ?????????? ? ???????????????
  ???????????

6
??? Web, ???? ???????? (1)

• ???? ?????????? ??? ???????? ??????????
• AJAX, Flash, Flex, Silverlight
• ????????? ??????????
• ???? ??? ?????????? ? ????????? ????
• slider, tree, progress bar
• ?????? ? ???????? ?????????? ? ?????? ?? web

7
??? Web, ???? ???????? (2)

• Jakob Nielsen Web 2.0 ??????????? ??????
  ??????
• ????????? ??????????
• ?????? ????? ???????????
• ?????? ? ???????????? ??????????
• ??????? ? ??????????? ???????
• 37 Signals Do less

8
??? Web, ???? ???????? (3)

• ??????? ???? ?, ? ???? ?? ?? ????? ?????
• ????? ?????????

9
??????? ??? ??????????

• ??? ????????? ?
• N ?????? ?? N ???? ?????
• ?????? ?? ?????
• ?????? ?? ?????
• ?????? ?? ??????? ????????
• ?????? ?? ?????
• ?????? ?? ????? ????? ?? ?. ??????
• 1 ?????? ?? ?????? ????????

10
??????? ?? ???? ?????????? (1)

• display none
• ????????? ?? ?????? ? ?? ????????? ?????
• ???????
• .none position absolute left -3000px
• ???????????? ???????
• visibility hidden
• width 0 height 0 overflow hidden

11
??????? ?? ???? ?????????? (2)

• ??????, ????????? ??????? ?????? (composite
  links)
• JAWS ??????? ??????? 2 ??????
• Windows Eyes ??????? ?????????? 2
• ???????
• ?? ?????? ?? 2 ?????? ? ????
• ???????????? ?? HTML ??????????
• ??????, ????????? ???? ? ????????

12
??????? ?? ???? ?????????? (3)

• layout, float ? ????????? ????????
• ????????? ?????? ?? ?????????? ????????????
  ?????
• ?????? ? ???????? ???????? ?????
• ???????
• ????? ?????????? ?? CSS-a
• ??????? ??????? ?? ???????? ? Javascript

13
??????? ?? ???? ?????????? (4)

• ?????? ??????? ?? ??????????
• ???????
• ??????????? ????????? ?? ?????? ???? ??
  ???????????? ? Javascript
• ????? ????????? ?? ?????? ?? ??????????
• ??-?????? ????? ? timestamp, honey pots, ????????
  ? ??.
• ?????????? ?? ?????????
• ????? ?????????????????

14
??????? ?? ???? ?????????? (5)

• ?????? ?????? ??? ???????
• ??????? ?/??? ???????????? ???????? ?? ?????????
• ???????
• ???????? ?? ????????????
• ???????????? ?? ?????? ? ??????? ? ?????????????
• ?????????? ?? ?????????? ?? ???????????? ?
  javascript

15
??????? ?? ???? ?????????? (6)

• ?????????? ?? ?????????? ? AJAX
• ???????
• ???????????? ?? ?????????? ? ?????? ??? ???????,
  ?????? ? ?????????http//domain.com/page.phpnewC
  ontent

16
??? ?????? ??? javascript (1)

• Unobtrusive javascript
• ??????? ?? ????? ???????? ?? javascript ????
  ??????? ???? ?? ??? ????????????
• structure (HTML)
• presentation (CSS)
• behaviour (javascript)

17
??? ?????? ??? javascript (2)

• Progressive enhancement
• ??????? ?? ????????? ?? ??????????? ? ??????????
• ?????? ?? ???????????? ? ????????? ??????????????
  ?? ????? ???? ??????
• ?????? ?? ??????????? ?????????????? ? ??????????
  ???? ????, ????? ????? ?? ?? ??????????

18
??? ?????? ??? ???????????? (1)

• ??????????, ????? ?? ?? ???????? ??
  ??????????????? ??????????, ?????? ?? ????
• ??? (name)
• ???? (role) ??????? ????? ??? ????? ? ????
• ???????? ????????? (state)

19
??? ?????? ??? ???????????? (2)

• WAI-ARIA Roadmap
• ltinput type"text" name"email"
  aaarequired"true" /gt
• ltdiv role"wairolebutton" aaacontrols"price"gtch
  ange sort orderlt/divgt
• lth2 id"price" aaasort"descending"gtpricelt/h2gt
• ??????? ??????? ????? ?? ?????????

20
?? ????? ?? ???????? ? ?????

• ????? ? ??? ???? ?? ?? ??????????
• ?????? ?? ?????...
• ... ? ???????? ??????????

21
?????????!

• ???? ?????
• dimodi_at_abv.bg
• http//dimodi.com/