WebDesign.Doc - электронная библиотека веб-мастера: Мастерская. Выпуск 200
WEbDESiGN.doc // №200
Приветствую, дорогие друзья и коллеги!
На связи Путченков Дмитрий, ведущий рассылки.
читайте в этом выпуске:
Библиотека веб-мастера
Сборник функций PHP 2009.10
PHP5 в подлиннике
Web 2.0: создание приложений на PHP
Мастерская
Концепция: верстка HTML-страниц ячейками
Авторские видеокурсы по веб-дизайну. Новинки
→ новости WebMasterZone:
В канун Нового года на лучшие диски по веб-дизайну будет действовать небывалая скидка - 50%! Это значит, что сделав заказ с 10.12 по 28.12 Вы сможете приобрести любой DVD всего за 250 руб, а CD всего за 150 руб. Узнать подробнее...
Библиотека веб-мастера
→ Сборник функций PHP 2009.10
Программа содержит описание более 3000 стандартных переменных и функций языка PHP.
Рассматриваются основы функционирования Web-серверов, сборка исполняемого модуля РНР в ОС Unix, инструментарий Web-разработчика (в том числе утилиты отладки сценариев), синтаксис и стандартные функции языка. Приведено описание функций РНР для работы с массивами, файлами, СУБД MySQL, регулярными выражениями формата PCRE, графическими примитивами, почтой, сессиями и т.д. Особое внимание уделено новым возможностям языка по работе с XML-документами, объектно-ориентированному программированию, а также подходам к
отделению PHP-кода от HTML-шаблонов сайта.
Многие современные книги по программированию посвящены конкретным методикам или программным пакетам, и позволяют глубоко понять предмет. Но из них не всегда можно узнать, как применить полученные знания на практике. Замысел книги, которую вы держите в руках, - начав с чистого листа, использовать известные вам идеи и методы для разработки законченного веб-приложения со всем необходимым кодом.
Разрабатываемое в книге приложение следует концепции Web 2.0. Это означает, кроме прочего, что его код строго следует нынешним стандартам веб и активно использует технологию Ajax. Чтобы достичь этого, используются система управления шаблонами Smarty и каскадные таблицы стилей CSS, а также библиотека JavaScript-кода Smarty. Кроме того, для создания наглядного и оригинального интерфейса применяются несложные визуальные эффекты из библиотеки JavaScript-кода Script. aculo.us.
Для облегчения разработки большого объема кода привлечена библиотека Zend Framework с открытым кодом на языке РНР 5, позволяющая решать многие рутинные проблемы веб-программирования. В книге ее средствами реализуются такие задачи, как абстрактный уровень базы данных (с акцентом на MySQL H.PostgreSQL), вход в систему, аутентификация пользователей, поиск по сайту.
Приложение для Web 2.0 из этой книги представляет собой многопользовательскую систему блогов. Она позволяет посетителям сайта регистрировать и вести собственный веб-дневник. При написании заметок в блоги пользователи могут добавлять в них фотографии, присваивать тематические метки, задавать географическое положение с помощью службы Google Maps. При отображении заметок в браузере используются микроформаты.
Верстальщики знают, делая первый сайт, мы позволяем себе разные вольности, например, указать стили прямо в тэгах; вместо стиля с margin, добавляем BR и т.д. Второй сайт мы делаем лучше, ведь в голове копошится мысль, чтобы как-то систематизировать свои стили и HTML-разметку. На третьем сайте окончательно и бесповоротно рождается желание (кричащее все громче с каждым последующим сайтом) все унифицировать: и css-стили, и HTML-разметку.
Данная работа является скорее «мыслью вслух», чем какой-то конечной разработкой, поэтому просьба не устраивать холиваров и не высказывать своё «фи» не по поводу.
Любая web-страница имеет какую-то структуру. Обычно это блоки, расположенные определенным образом. Если мы, для примера, посмотрим на мой сайт, то увидим, что есть верхние два блока: название сайта, меню. Ниже следует блок сайдбара (с виджетами) и справа - основной текст. Замыкает страницу подвал с какой-то информацией.
Тут я хочу остановиться и сделать маленькое замечание. Давайте взглянем на сайт глазами «чайника», который вообще ничего не понимает в HTML. То есть нас совершенно не интересует каким образом все это сделано - нам просто важно как блоки расположены на странице.
Мысленно уберем все тексты и картинки и оставим только блоки. То есть сейчас мы не будем углубляться в то, что у них за содержимое, нас просто интересует их расположение.
Технически как правило, это тэги DIV. Для того, чтобы их выравнивать относительно друг друга, они делаются «плавающими» - float. Тут сложность в том, что DIV изначально не совсем были предназначены для такого поведения. Когда появилась поддержка CSS2 со стороны браузеров, то дело несколько улучшилось, но, опять же, есть проблема не совсем одинакового поведения «плавающих» блоков в разных браузерах. Наш горячо «любимый» Internet Explorer до сих пор имеет своё
особое представление о поведении таких блоков и верстальщики вынуждены идти на массу ухищрений, чтобы как-то обойти все эти неурядицы.
Впрочем, сейчас речь идет не о браузерах, а о том, что мы пытаемся получить, располагая DIV'ы по странице. Ответ очевиден - ячейки в некой «каркасной» сетке/таблице.
Практически в любом сайте можно увидеть табличную структуру. И это нормально, прежде всего потому что это удобно и логично. И практически любой сайт начинается с разработки его каркаса - таблицы/сетки. В этой сетке верстальщик определяет используемые ячейки и уже в них располагаются нужные блоки. Дальше мы углубляемся в CSS, чтобы расположить DIV'ы, когласно этим ячейкам.
Как я уже сказал, «плавающие» DIV'ы не совсем удобный «материал», поэтому стили для описания каркаса получаются довольно-таки громоздкими. На сегодняшний день, благодаря усилиям вебмастеров и разработчиков браузеров, мы имеем более-менее нормальную поддержку «плавающих» блоков и тему можно было бы закрыть, если бы не несколько «но».
Мы знаем, что в HTML давным-давно существует тэг TABLE. Почему же среди верстальщиков фраза «табличная верстка» стала чуть ли не ругательной?
От таблиц отказались по двум основным причинам. Во-первых, при верстке таблицами приходится оперировать столбцами и ячейками, поэтому HTML-код получается более сложным, за счет открытия/закрытия строк (TR). Кроме этого для таблицы нужно следить за количеством ячеек в каждой строке. В общем работа с таблицей требует более щепетильного отношения.
Вторая причина - раньше браузеры не отображали содержимое таблиц пока не встретят её конец. В принципе это верно, потому что при постепенной загрузке страница могла переверстываться «по ходу». Особенно, если в таблице были сгруппированные ячейки.
Теперь давайте расмотрим некоторые недостатки блочной (DIV) верстки по сравнению с таблицами.
Главный из них это то, что практически все плавающие блоки следует помещать в еще один блок-контейнер, поскольку (по определению) float-элементы браузер выводит из «стандартного» потока вывода и позиционирует «отдельно». Из-за разных браузеров как раз и возникает такая потребность. То есть на практике нужно добавлять еще много DIV, из-за чего увеличивается и HTML-разметка, и CSS-стили.
Также следует отметить и сложности с выравниванием парных блоков по высоте. На сегодняшний день разработано несколько методов, от «обманки» в виде фонового изображения, до дополнительных блоков (только ради этого) и специальных JS-скриптов.
С таблицами же таких проблем просто нет - они изначально и создавались с таким поведением. Так почему же мы отказываемся от специально разработанного TABLE и пытаемся получить эту же самую таблицу, но с помощью других тэгов?
Если сравнить количество тэгов и css-стилей для таблиц, то мы увидим, что их ничуть не больше, чем при блочной верстке. Это раньше мы видели массу вложений таблиц в таблицу, стили прямо в тэгах. Сейчас же ситуация принципиально другая - HTML-разметка точно такая же: с классами и id, а стили вполне компактные и понятные. И главное нет стилей/хаков/пр. для иммитации табличного поведения. Ну а про совместимость между браузерами можно легенды складывать.
Что же касается постепенного отображения, то этот недостаток можно списывать в утиль. Современные браузеры пытаются предугадать отображение таблицы и показывают её по мере загрузки. Если нет группированных ячеек, то отображение будет сразу корректным без переверсток.
Тут, кстати, как раз наоборот - проблема с блочной версткой. На медленном соединении, HTML успевает загрузиться раньше, чем CSS-стили. Если сверстать страницу на таблице, то расположение элементов будет сразу корректным, потому что таблица так устроена по определению. А при блочной верстке вначале увидим гиганскую ленту всех блоков один под другим, а уже по мере загрузки стилей, переверстку как положено. Такое поведение я часто встречаю на FireFox 3.5 (на других не проверял). (Но, если строго,
то медленные соединения сейчас уже совсем не те, что пару лет назад, поэтому скорость загрузки страницы в браузере уже никто не учитывает.)
У табличной верстки есть еще один очень серьезный плюс - в ней никогда не будет «съехавших» сайдбаров.
Впрочем, я нисколько не собираюсь вас агитировать за табличную верстку, просто отмечу, что для верстки она идеально подходит и все идеологические соображения по этому поводу следует выкинуть на свалку.
Но табличная верстка меня заинтересовала не просто так. Создание сайтов моя основная работа. Большинство сайтов похожи друг на друга по своей HTML-разметке, различия только в CSS-стилях. И вот, чтобы каждый раз не изобретать велосипед, я придумал один HTML и несколько CSS-каркасов (что-то роде Zen Garden). Таким образом, когда я делаю новый сайт я смотрю под какую «модель» он подходит и копирую нужный CSS-файл.
Все это замечательно, но если встречается нестандартная задача, то приходится заново проходить через муки творчества, пытаясь заставить нужный DIV-блок отобразиться там где нужно мне, а не там, где решила фирма Майкрософт.
Тут, собственно, и появилась идея - отказаться от HTML-верстки или хотя бы свести её к минимуму.
Конечно же HTML будет, но его не нужно будет верстать в привычном виде. Вместо создания HTML, нужно использовать PHP-функции, которые будут описывать, наполнять и выводить ячейки каркаса. Таблица для этой задачи подходит идеальным образом, поэтому я именно на ней и решил остановиться.
Впрочем, если у вас хватит знаний, то можно сделать что-то аналогичное и для блочной верстки.
Рассмотрим используемые функции.
grid_start(название сетки /это более правильно, чем таблица/, количество строк, количество столбцов) - задаем сетку.
Теперь вернемся к блокам этого сайта и попробуем описать их с помощью моего метода:
У нас будут созданы три TABLE: #head, #main и #footer. При этом автоматически будут проставлены все классы для всех строк и ячеек. То есть здесь мы лишь описываем каркас страницы, а дальнейшую кастомизацию и оформление делаем как обычно с помощью css-стилей.
Такой подход позволяет значительно сократить написание каркаса страницы, особенно для CMS.
Я намеренно не стал углубляться в тонкости и детали реализации функций «grid_» - это лишь пример, показывающий концепцию. В реальном проекте наверное можно дополнить функции прочими параметрами, как например произвольный класс, id, подключение не файла, а выполнение функции и т.д. Тут фантазия уже неограничена.
Видеокурс "Профессиональное создание Интернет-магазина под ключ"
Полный и качественный видеокурс по созданию интернет-магазина под ключ для любого уровня подготовленности.
68 уроков полностью раскроют все тонкости и нюансы профессионального создания интернет-магазинов.
Надеюсь, что вам понравился этот выпуск рассылки и вы узнали что-то новое и полезное для себя. Если у вас есть пожелания или предложения как сделать рассылку лучше, присылайте их на наш e-mail:
admin@wm-zone.info
