Компот и мухи веб-разработки

Русский интернет (уже наконец) вовсю осваивает “дизайн через CSS”, но многие все равно не понимают, почему именно надо дизайнить так, а не по-старому, через таблицы. Руководствуются, как часто бывает, тем, что это модно. А многие, в общем-то, и не спешат уходить от таблиц, не считая, что в них есть что-то плохое. Я собираюсь написать длинный цикл статей о веб-разработке новыми методами. Главная моя цель - структурировать на русском языке те знания, которых полно в разрозненном виде по всей сети.

В этой первой статье я постараюсь рассказать о самой сути современных стандартов разметки веб-страниц и о целях, которые преследовались при их написании. То есть, эта статья о том, “что это” и “зачем это”, а не “как это”.
Понятия

Для начала я хочу определиться с понятием “табличная верстка”. Если вы начинали заниматься веб-разработкой в 90-е годы, то знаете, что верстать страницу можно было двумя способами: потоком или таблицами. Первый способ - это попросту отсутствие всякой верстки, когда один за другим сверху вниз идут заголовки и абзацы. А таблицы - это когда вся страница представляется в виде сетки, в которую в нужные места уже вставляются текст, картинки и другие таблицы. Причем, сама по себе структура этих

позволяет создать сетку любой сложности. Однако, если быть совсем честным, то только одной сеткой дело не ограничивалось. Таблицы использовались еще и для разных оформительских нужд, например: это единственный способ центрирования содержимого по вертикали с помощью таблицы 3×3 ячейки делались рамки с оформлением углов добавьте свое, наверняка у вас полно любимых приемов Вот это: … я и называю табличной версткой. Проблема Есть куча исторических причин, почему HTML в конце 90-х годов прошлого века стал выглядеть именно так, но это тема отдельной статьи. Однако, примерно в то время все больше стало появляться людей, которые, смотря на то, куда это все развивается, стали громко говорить, что это плохо. Я постараюсь здесь свести воедино то, что эти и другие “евангелисты” неустанно говорят и пишут в книжках по поводу недостатков табличной верстки. Много кода Табличная верстка занимает неприлично много места. Страница более-менее хорошо упакованного сайта легко может занимать и 80КБ, и 120КБ… Это без картинок. Все это выливается не только в медленную загрузку и отрисовку, но и в немаленькие деньги за трафик как для сайтов, так и для клиентов. Ведь если картинки хотя бы кешируются браузером, то всю верстку для каждой новой страницы он неминуемо грузит заново, как бы похожа на предыдущую та ни была (кто тут сказал слово “фрейм”? не надо…). Трудная правка Табличную верстку трудно править вручную. Несмотря на большое развитие визуальных редакторов кода, от этой проблемы они не спасают. Если ваш сайт - динамический, значит он собирается из кусков шаблонов. И значит шаблоны будут состоять из фрагментов таблиц. Если вам приходилось когда-нибудь смотреть в такой фрагмент и думать, относится ли вот эта к вашей части или закрывает ячейку из верхней части шаблона, вы понимаете, о чем я говорю… Заодно прошу прощения, если причинил кому-то боль этими темными воспоминаниями. Негибкий дизайн в разработке Предположим, вы любовно и аккуратно нарезали нарисованный дизайнером макет в табличную раскладку, закодировали и повесили на тестовый сайт. И теперь вам остается только надеяться, чтобы заказчик не сказал что-нибудь типа “а давайте повесим вот тут в середину еще банер”. Потому что эта самая “середина”, непосредственно связана с краями, и если туда что-нибудь запихнуть, то в краях появятся большие пропуски, и отодвинут вниз то, что там должно было быть вместо них. Перерезай все окружающие блоки, дорогой верстальщик! Индексация поисковиками Если содержимое страницы представляет собой кашу из содержательной части и оформления, то разобраться, что есть что, автоматически очень сложно (читай: невозможно). Поэтому такие сайты хуже индексируются поисковыми роботами. Совместимость с устройствами Любой сайт, сверстанный таблицами, предназначен для просмотра на большом графическом экране с помощью распространенных браузеров. Как насчет всего остального? Веб придумывался не только для этого. Одной из идей была повсеместность, чтобы веб был доступен на бумаге, на мобильном телефоне, PDA, текстовом терминале, мог быть начитан голосом. Все это очень трудно с таблицами. Я бы даже сказал - невозможно, потому что искусственного интеллекта, способного отличить ячейку с навигацией от ячейки с основным содержимым, у нас пока еще так и нет. Многие мне возражают, что, мол, кому вообще нужны эти 0,000…% пользователей, пользующиеся этой экзотикой? Я думаю, это во многом путание причины и следствия: потому и 0,000…%, что нет сайтов, которыми можно нормально пользоваться ненастольными средствами. Думаю, если эта ситуация будет меняться так, как сейчас меняется, мы уже скоро застанем время, когда веб на PDA будет казаться обычным делом. Ну вот. Кажется, достаточно :-). Что взамен Взамен W3C - организация, занимающаяся стандартами для веба - предлагает нам две спецификации: HTML 4 и CSS 2. Я ни в коем случае не предлагаю вам их читать сейчас. Не вздумайте. Это точные детализированные справочники, и чтение их в качестве художественного произведения ничего, кроме головной боли и разочарования в жизненных идеалах, не принесет. Тем более, самой сути, зачем они обе существуют, там, в общем-то, и не объяснено. Я и ссылки-то поставил всего-навсего потому, что должны же быть ссылки на спецификации в статье про HTML и CSS! А суть состоит в том, что нам предлагается разделить “компот” и “мух” - содержимое и оформление страниц, и пользоваться для того и другого разными средствами. HTML - для описания содержимого, его структуры, а CSS - для оформления и верстки. Здесь важно остановиться и вчитаться в последнее предложение предыдущего абзаца еще раз. В нем неприметно поселилась ключевая мысль всей этой статьи. То есть, буквально, из HTML выкидывается все, что связано с тем, как он выглядит, а в CSS к бордюрчикам и цветам (с которых он начинался) добавляются средства для размещения элементов на странице, сдвигания, отступания и пр. Персональный кабинет логин пароль     Инструменты разработчика Документация Учебник Использование текста Добавление звука "Горячие" клавиши Шрифты Публикация и экспорт Клипарт Рисование Создание анимации Создание интерактивных клипов Значки Работа с объектами Использование символов и образцов Создание элементов интерфейса Скрипты Perl PHP C++ Эффекты Fotoshop Основы Flash Использование импортированной графики Использование слоев Все о вебдизайне Новости вебдизайна Популярное PHP. Пишем счетчик просмотров для каждой страницы сайта на php На некоторых сайтах часто можно увидеть следующую надпись внизу страницы или под статьями: "Всего просмотров xxx. Сегодня xx". На первый взгляд ничего примечательного... Пишем 'гостевую книгу' с нуля на php Почти на каждом более-менее популярном сайте есть форум или гостевая книга, эти элементы нужны для постоянного общения автора сайта с его пользователями. Но многие... Окна сообщений Хотя всплывающие окна это и очень эффективный метод получения новых подписчиков, есть один еще более успешный. Сочетая его с хорошим стимулом, вы в буквальном смыс�... Собственная статистика поисковых слов (Яндекс, Рамблер, Google,...) на PHP В этой статья я бы хотел поделиться с вами своей новой разработкой – анализатором поисковых запросов с популярных поисковых систем, посмотреть, что это такое, и ка�... Гостевая книга на PHP. В этой статье рассказывается о том, как создать гостевую книгу, описывается её структура и реализация. За пределами статьи остаются дизайн, вёрстка, оформление и т.�... Организация CSS-файлов: Совет 1 - Флаги CSS Organization Tip 1: FlagsВам приходилось писать и работать с большими CSS-файлами? Мучались с бесконечным скроллингом вверх-вниз в поисках нужной части кода? CSS-файлы, с котор�... Частые ошибки в веб-дизайне. Разметка текста – одна из самых важных характеристик дизайна. В большей части проектов текст доминирует, так что хорошо подобранные шрифты могут стать ключом к ра�... Компот и мухи веб-разработки Русский интернет (уже наконец) вовсю осваивает “дизайн через CSS”, но многие все равно не понимают, почему именно надо дизайнить так, а не по-старому, через таблицы. Р... Создаем веб-дизайн на тему комиксов, Photoshop и HTML+CSS Давайте начнем! Для быстроты изложения я опущу объяснение основ (вроде того, как создать слой-маску или отредактировать обработчики или векторную фигуру). Вам нужн�... HTML 4 не является языком оформления веб-страниц. Он является языком логической разметки страниц. Раньше, создавая HTML-документ, вы думали о том, что этот заголовок будет сделан жирной верданой золотистого цвета и о... Немного о PHP. Интернет уже давно прочно вошел в нашу жизнь. Это смелое утверждение можно доказывать или опровергать много раз, но так или иначе все меняется, а с этим спорить никт... Основы написания PHP программ Как и в любом языке программирования в PHP есть свои правила, константы, зарезервированные слова и операторы, с помощью которых выполняются различные манипуляции с �... История РНР Начинать нужно всегда с самого простого, и сейчас я попробую познакомить Вас с программированием на скриптовом языке РНР. РНР (читается как пи-эйч-пи) появился на св... Особенности РНР Как и у всякого языка программирования, у РНР есть свой синтаксис. Он очень похож на синтаксис языка С или Perl. Программисты, пишущие на этих языках, смогут освоить РН... Введение в PHP PHP - это скриптовый язык программирования, который исполняет весь свой код на стороне сервера, а клиенту выдается только результат работы скрипта. Изначально PHP рас�... Теги Календарь < Ноябрь 2011 > П В С Ч П С В   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30         Наши фото Укажите свое мастерство Рисую на 5+ Верстаю на 5+ Учусь рисовать, сейчас на 4 Учусь верстать, сейчас на 4 Знаю флеш на 5+ Учусь флеш,сейчас на 4 Умею все   Обрати внимание Факторы, влияющие на результаты поиска (поисковой выдачи) На данный момент поисковыми системами при ранжировании сайтов используются два фактора:Соответствие текста страницы запросу, введенному пользователем (поискова�... Хороший дизайн Как-то раз собрались авторитетные дизайнеры со всего мира и стали думать, что такое хороший дизайн. Думали - думали, и пришли к выводу: Хороший дизайн - это дизайн, ко�... На заметку Твой сайт Изготовление сайта - штука тяжёлая и занимает кучу времени. Так что длительность прогулок под Луной с любимой девушкой, а для кого и с любимым бойфрендом, придется с... JavaScript: очистка формы Для очистки формы существует специальная кнопка Reset, при нажатии на которую данные формы возвращаются в исходное значение. Если ввести свои данные в форму, а затем �... Copyright © 2012. Портал WEB мастера, все для вэбмастера, шрифты, клипарт, анимация, значки, звук, видео, новые задумки.