Можностей, предоставляемых веб-разработчикам
жүктеу/скачать 5,47 Mb. Pdf көрінісі
|
[Bryus Louson, Remi SHarp] Izuchaem HTML5. Bibliot(z-lib.org)
- Бұл бет үшін навигация:
- My interesting life
- Yesterday
| Таблица 1 .1 .
Имена классов Популярность Значение Частота 1 footer 179 528 2 menu 146 637 3 style1 138 308 4 msonormal 123 374 5 text 122 911 6 content 113 951 7 title 91 957 8 style2 89 851 9 header 89 247 10 copyright 86 979 11 button 81 503 12 main 69 620 13 style3 69 349 14 small 68 995 15 nav 68 634 16 clear 68 571 17 search 59 802 18 style4 56 032 19 logo 48 831 20 body 48 052 Если исключить из рассмотрения классы, явно относящиеся к оформлению, мы можем получить представление о структурах, которые авторы пытаются реализовать при созда- нии веб-страниц. 30 • Глава 1 Таблица 1 .2 . Имена id Популярность Значение Частота 1 footer 288 061 2 content 228 661 3 header 223 726 4 logo 121 352 5 container 119 877 6 main 106 327 7 table1 101 677 8 menu 96 161 9 layer1 93 920 10 autonumber1 77 350 11 search 74 887 12 nav 72 057 13 wrapper 66 730 14 top 66 615 15 table2 57 934 16 layer2 56 823 17 sidebar 52 416 18 image1 48 922 19 banner 44 592 20 navigation 43 664 Точно так же, как в HTML 5 обнаруживаются характерные черты раннего поколения Сети — мира ученых и инженеров (именно поэтому в нем есть такие элементы, как , и ), HTML5 служит отражением состояния Сети в период его разработки: добавлено 30 новых элементов, и выбор многих из них основан на данных вышеприве- денного списка имен классов и id , поскольку это именно то, что разработчики на самом деле используют. Пока нас интересуют скорее практические цели, чем философские размышления, давайте будем их использовать. В качестве примера здесь приводится разметка главной страницы блога, выполненная в стиле HTML 5 с использованием семантически нейтрального эле- мента . My interesting lifeMenuОсновная структура • 31 YesterdayToday I drank coffee for breakfast. 14 hours later, ¬ I went to bed. TuesdayRan out of coffee, so had orange juice for breakfast. ¬ It was from concentrate. This is copyright by Bruce Sharp. Contact me to ¬ negotiate the movie rights. Применив простые таблицы стилей, зададим оформление. #sidebar {float:left; width:20%;} .post {float:right; width:79%;} #footer {clear:both;} Схематическое изображение нашей страницы показано на рис. 1.4. div id="header" div div div id="footer" div id= "side- bar" Рис . 1 .4 . Структура нашего блога в HTML 5 Хотя в этой разметке нет ничего совсем уж неправильного (и она будет прекрасно работать в новом мире HTML5), почти вся структура документа оказывается неизвестной браузеру, так как единственный HTML-элемент, который мы можем использовать для выделения от- HTML-элемент, который мы можем использовать для выделения от- -элемент, который мы можем использовать для выделения от- дельных фрагментов страницы, — это семантически нейтральный (определенный в HTML 5 как «универсальный механизм для оформления структуры документов»). Но если все отображается правильно, что плохого в данном коде? Зачем использовать до- полнительные элементы и добавлять семантику? 32 • Глава 1 Представим себе «умный» браузер, в котором с помощью специального сочетания клавиш можно быстро переходить к панели навигации страницы. Вопрос в следующем: как он узнает, куда переходить? Одни разработчики используют > , другие — , , или всевозможные их эквиваленты на разных языках. Данные из приведенных выше таблиц Opera MAMA наводят на мысль о том, что menu , nav , sidebar и navigation можно было бы считать синонимами, однако гарантии нет: на веб-сайте ресторана > может использоваться не для навигации, а для определения списка блюд. НУ ПОЧЕМУ ЖЕ ЗДЕСЬ НЕТ ЭЛЕМЕНТА Довольно просто представить себе, как работало бы наше гипотетическое сочетание клавиш «переход к панели навигации», однако гораздо чаще пользователю требуется быстрый переход к основной области контента Некоторые дизайнеры для удобства работы с сайтом добавляют вверху страницы ссылку «skip links», которая позволяет программам экранного доступа обойти элементы навигации Правда же, было бы здорово, если бы в браузерах предусматривалось со- четание клавиш, позволяющее сразу же перескочить к основному содержимому? Но ведь в HTML5 нет элемента в таком случае браузер узнает, где начинается основная область контента? На самом деле определить это очень просто: для этого можно использовать «алгоритм Скуби-Ду» (как я его называю) Всегда очевидно, что в костюме привидения скрывается угрюмый приврат- ник заброшенного парка развлечений, просто потому, что он единственный персонаж серии, который не является Фредом, Дафной, Велмой, Шэгги и Скуби Точно так же первый фрагмент контента, не заключенный в теги жүктеу/скачать 5,47 Mb. Достарыңызбен бөлісу:
|