Общие рекомендации

Получайте удовольствие!

Да-да! Первым пунктом на виднейшее место. Процесс верстки должен приносить удовольствие. Гармония! Ритм! Внутренняя эстетика!

Конечно же эстетика, а так же трезвость и логичность в каждом элементе. Удовольствие от того, что создаешь на своих глазах из цепочки кода что-то осмысленное, каждый div, каждый параграф, каждое свойство элемента. Да — работа должна приносить удовольствие.

Купите книгу

В советские времена бытовало мнение, что книга — лучший подарок. Неспроста. Купите (одолжите, выиграйте в карты) книгу (да-да! ту бумажную, самую), в которой доходчиво рассказано о том, что такое CSS и XHTML. Такие книги есть. Большинство написана по-английски, но есть что прочесть и русскоязычному читателю. Загляните в ближайший книжный магазин. Поройтесь в сетевых книжных развалах типа books.ru

Не верьте тем, кто говорит, словно спецификации, которые опубликованы Консорциумом W3, максимально пригодны для изучения основ. Че-пу-ха. Они написаны для браузеров, а не для людей. Не усложняйте себе жизнь. Копаться в спецификациях начнете тогда, когда довольно освоитесь.

Что ж, в свое время я именно спецификации очень многие моменты прояснил для себя раз и навсегда.
Конечно, практика и еще раз практика просто необходимы, но как бы банально не звучало, практика без теории — ничто. А на просторах интернета, чего уж говорить, немало откровенно неверной искаженной информации по верстке, где авторы сами запутывают своих же читателей.

Пишите код в простом текстовом редакторе

Да, именно так. Забудьте ненадолго о той заветной папке, в которой собраны дистрибутивы HomeSite, TopStyle либо чего-то-там-еще. По жизни успеете ими воспользоваться. Легкий текстовый редактор типа Notepad либо FAR поможет вам на начальном этапе до конца прочувствовать процесс написания кода. Проверено — работает.

Что работает? Скорость печати возрастает — бесспорно. А вот TopStyle — лично для меня (да и не только) — проверенный редактор, в котором сверстан не один десяток сайтов, которые, в свою очередь, приносят дивиденды своим авторам. Хотя, справедливости ради, отметить хочется, что первые несколько месяцев активно пытался использовать Dreamweaver. Но не сошлись характерами. А верстать в блокноте — без autocomplete — не для меня. Время — деньги.

Начните потихоньку совершенствовать английский

Не откладывайте в долгий ящик. Знание английского пригодится еще не раз (дочитайте до конца). Помните: великие css-джедаи пишут наиболее часто по-английски. Не ждите, пока кто-то переведет на русский, а прочтите сами.

Это факт. Непреложный. Английский в кодинге абсолютно необходим. Жизненно. Самые хорошие и полезные статьи прочитал как раз на английском языке.

Не забывайте о практике

Чуть-чуть освоившись, примитесь за дело. Практика, практика а кроме того раз практика. Вы можете начать верстать кое-что свое, или приняться за исправление существующих сайтов. Второе даже предпочтительней т.к. тотчас окунет вас в настоящую работу, позволив более надежно закрепить навыки. Не бойтесь оказаться не у дел — в Сети полно отличных (но нехорошо сверстанных) сайтов, обладатели которых не откажутся от вашей посильной помощи. Санитаром быть леса не так уж и плохо.

Браузеры

Раз уж серьезно принялись за дело — инсталлируйте несколько разных браузеров. Джентльменский набор таков: Internet Explorer 6.0 (и ранние, в случае, если не лень возиться), Mozilla Firefox, Opera. Добавьте по вкусу еще каких-нибудь.

Обязательно снабдите Firefox довольно-таки полезным расширением WebDeveloper.

Со всем соглашусь. Но главный помощник при отладке верстки сайта для меня — расширение Firebug.

Следите за новостями. RSS вам в помощь

Блочная вёрстка, как и любая развивающаяся технология, регулярно пополняется новыми приёмами, техниками и т.п. О них пишут. Ваша задача: не пропустить что-то важное. Пожалуй, лучшим способом сбора новостей можно назвать чтение RSS-лент известных сайтов. В частности, Webmascon транслирует свои новости в свою RSS-ленту Webmascon Daily.

Подробней об RSS читайте на нашем сайте, и в других не менее полезных местах. Загляните в нашу коллекцию RSS-лент.

Общение

Не бойтесь спрашивать. В Сети достаточно мест, где можно задать вопрос о вёрстке, и получить на него квалифицированный ответ. К таковым местам можно отнести наш форум, сообщества ru_coding и ru_webdev в Живом Журнале, deforum.ru, фидошные конференции fido7.ru.html.chainik и fido7.ru.html.profy и т.д.

Работайте с Сетью

Ниже приведены некоторые ссылки на полезные ресурсы. Преимущественно англоязычные (Вот и пригодился английский язык! Спасибо школе и институту!). Предполагается, что обращаться к ним подобает лишь тогда, когда собственных знаний для решения проблемы не хватает.

1. Webmascon, рубрика «Вёрстка»
2. Шпаргалка по CSS
3. Web-Dev-Bookmarks (Закладки вебразработчика) — полезнейший набор ссылок на всевозможные вопросы, связанные с вёрсткой, вебстандартами и т.п.
4. css/edge
5. http://alistapart.com/
6. http://www.digital-web.com/
7. http://www.456bereastreet.com/lab/
8. и т.д.

Для начала хватит. Список будет пополнятся в процессе освоения. Уж поверьте.

Время не стоит на месте, и появилась уйма ресурсов, посвященных проблемам CSS: http://cssing.org.ua, http://www.htmlbook.ru/

Подробней о важном

Лишь четыре важных замечания. Всё остальное вы найдёте в Сети.

Избегайте стереотипов

Неоднократно доводилось видеть, как люди мучались, верстая «блоками» изначально табличные макеты. Эти кодеры считали блочную вёрстку эдакой прилизанной с точки зрения вебстандартов технологией, призванной на новом качественном уровне решать старые табличные задачи. Это не совсем верно. «Старые задачи» ограничивались самим кодом — нельзя было менять внешний вид, не изменив теги, составляющие код таблиц. Что мы имеем сегодня? Один XHTML код — и бесчисленные варианты отображения страницы (достаточно менять CSS код). Взгляните на CSSZengarden. Обдумайте эти нехитрые соображения, и, приступая к работе, не дайте мозгу запереть вас в душной комнате табличной вёрстки — выйдите наружу, а там решите, останетесь возле дома или пойдёте дальше.

Для начала взгляните на базовые CSS-макеты: «Quick-Links to the Layouts».

Опять же — таблицы там, где это явно видно. Не раз попадались варианты, когда и календари верстали с помощью списков. Я не говорю, что это неверно, я и сам так делал, но ЗАЧЕМ?..

Не ограничивайтесь написанием стилей лишь для браузеров

Технология CSS хороша тем, что позволяет управлять отображением страниц не только на экранах ваших мониторов, если вы просматриваете эти страницы с помощью браузеров, но и отображением в других устройствах. Ради лучшего эффекта от учёбы пишите стили не только для браузеров, но также стили для печати и стили для портативных устройств. Разберётесь с этим — повысится качество написания основного кода.

Помните о DOCTYPE

Начинающие нередко о нём забывают (или не знают?) Не забывайте указывать DOCTYPE. Страница , в которой он не указан, отображается в так называемом «режиме несоответствия стандартам» (quirks-mode), что нередко сбивает новичков с толку.

Проверяйте код

Проверяйте код валидатором. Экономит время и нервы.

Статья очень хорошая, полезно, объективно, и даже спустя время, многие постулаты остаются весьма актуальными и по сей день.

Ajax — не просто акроним, это идея

Вообще Ajax и является акронимом от «Асинхронный JavaScript и XML», это не раскрывает его идеологию. Ajax — идеология, которая гласит, что для работы серверного веб-приложения, совершенно не обязательно перезагружать всю страницу, бесполезно гоняя данные от сервера к клиенту и обратно. Использование Ajax’a позволяет сделать веб-приложение более гибким и современным, позволяя пользователям работать с веб-приложением более продуктивно и удобно.

Это по-настоящему JavaScript

Ajax-приложения пишут на JavaScript и, обычно, используют объект XMLHttpRequest для передачи данных (для браузеров от Microsoft — ActiveXObject(Microsoft.XMLHTTP) — ничего не поделаешь). Объект XMLHttpRequest был одобрен World Wide Web Consortium. Так как технология получила широко распространение относительно только что, то никакого общего стандарта нет, как следствие — различные браузеры могут по разному понимать Ajax либо просить особо подхода, яркий пример чего — браузеры от Microsoft. Для более глобальной совместимости можно применять иные технические решения, например фреймы, кукисы, Java-аплет либо Flash. Впрочем в случае, если фреймы и куки не всегда справляются с возложенной задачей, то Java-аплет либо Flash чересчур тяжеловесны. Вы когда-то в страшном сне представляли админку WordPress’a сделанную целиком на флеше?

Независимо от того, используете вы Ajax либо нет, JavaScript поднялся до новых, раньше не доступных ему, высот. Сейчас это полноценный инструмент для современного веб-мастера, игнорировать его более нет смысла, он полезен и удобен для пользователя. К примеру я активно начал учить JavaScript, в случае, если раньше я довольствовался каким-то общим представлением и написанием несложных скриптов — то теперь я начал рыть глубже, так как я собираюсь работать с Ajax более тесно.

Разработчики, которые считают JavaScript вредным или второсортным языком, избегают его как только могут. Впрочем в случае, если перед вами стоит задача написать Ajax-приложение, вам все равно придется применять JavaScript. Аналогией могут служить разве что Java-аплеты либо Flash.

Ajax чрезвычайно интерактивен, потому при ошибках проектирования приложения либо кодинга, могут возникнуть проблемы. Ajax принял в наследство все правила отличного тона от JavaScript, все правила и запреты — касается написания, отладки и тестирования уже готового приложения.

XML вовсе необязателен

Не смотря на то, что «X» в акрониме Ajax пошла именно от XML, его использование вовсе необязательно. Весьма допустимо применять просто текст, допустим, с разделителями, а то и просто части HTML кода (что я и делаю, в общем-то, скрипт, к которому отправлялся запрос генерирует готовый фрагмент кода, который просто заменяет прошлый код). А кроме того кто-нибудь использует YAML разметку.

XMLHttpRequest пока нехорошо работает с бинарным форматом данных, в отличие от Flash. Но в ближайшее время такая ситуация, по-моему, будет исправлена. Уже теперь есть фиксы, костыли — но все не то.

Как вывод — проанализируйте, какой формат данных в вашем случае удобней и быстрее обрабатывается. Например для несложных манипуляций замечательно подойдет YAML либо CSV, а XML будет излишне толстым

Рассчитывайте и планируйте увеличение HTTP запросов

Очевиднейшая проблема для веб-мастера заключается в том, что что веб-приложение отныне будет отсылать не пару сотен Kb раз, например, в 10 минут, а более зачастую более мелкими объемами. На деле это означает возможность появления задержек в обработке Ajax-запросов и усиления нагрузок на веб-сервер. Это следует принимать во внимание еще на уровне проектирования Ajax-приложения.

Оптимизируйте Ajax-запросы осторожно

Не переусердствуйте, так как оптимизация запроса в результате даст вам наименьший выигрыш в скорости отправки-получения запроса. Лучше включите компрессию на стороне сервера. Все инновационные браузеры это поймут и оценят.

Впрочем есть решение лучше — кеширование запросов. Причем не утруждайте себя изобретением велосипеда с попыткой закешировать это на строноне клиента — кешируйте прямо на сервере. Ajax-приложение выйграет от данного немало больше, чем от сжатия.

Помните о максимальном числе соединений

Ajax-приложения ограничены спецификацией HTTP, которая позволяет открывать в одно и то же время не более двух соединений к одному сетевому адресу. Отличная новость в том, что в большинстве случаев данные ограничения отсутствуют. Впрочем могут возникнуть проблемы с браузером, либо с сетевым администратором. Впрочем последним, по хорошему, закрыть бы на это глаза.

Следите за полученными ответами

В традиционном веб-приложении, разработчики обычно не заморачиваются порядком получения данных пользователями. Да на самом деле, это и не требуется. Ajax такого не любит. Важно соблюдать очередность «отправка-прием-обработка полученного», в противном случае могут возникнуть совершенно внезапные проблемы.

Пристально следите за ошибками

Уже немало лет пользователи, при проблемах с отображением страницы нажимают кнопку «Назад» в браузере. В современных Ajax-приложениях это также важно. Же обычной gif картинки мало для определения состояния запроса.

При появлении ошибки отправляйте себе нотисы, для их анализа и ликвидации ошибок и проблем. А пользователю выведите что-то дружелюбное после определенного времени. Стоит также признать, что инновационные JS/Ajax фреймворки не умеют нормально работать с тайм-аутом.

Старая сказка о безопасности

В действительности Ajax-приложение так же безопасно, традиционное и как. Заголовки одинаковы, средства и способы коммуникации — также одинаковы. Вообще стоит отдельной строкой уделить внимание некоторым вещам, же классические ошибки могут спокойны стать наследством Ajax-приложения.

Это XSS — сам по себе он не является новинкой, просто с распространением Ajax-приложений начал набирать популярность. Хотя бы фильтруйте каждой HTML код, приходящий от пользователя. Так же проверяйте HTTP Referer — так как это важно.

Теперь сетевые профессионалы приходят к выводу, что ненадлежащая защита сайта, который активно использует JavaScript, может привести не только к несанкционированному доступу к вашему серверу, но и к компьютеру вашего посетителя. Будьте аккуратны и осторожны, же после будет неприятно узнать, что из-за вашей лени у кого-то увели аську либо кошелек.

Этот текст является свободным переводом с изменениями и дополнениями статьи 10 things IT needs to know about Ajax.

Ну, а если Ваши финансы позволяют отправиться на отдых куда-нибудь подальше от мрачной и серой российской действительности, забыть обо всех «прелестях» местной погоды, то могу посоветовать отправиться в страну юго-восточной Азии — Вьетнам.  И зайдя на один из сайтов, вы можете оформить он-лайн тур во Вьетнам, буквально не вставая из-за компьютера.

Основные отличия от CSS

• Стилевые таблицы XSL позволяют определять оформление элемента в зависимости от его месторасположения внутри документа, то есть к двум элементам с одинаковым названием могут применяться различные правила форматирования.
• Языком, лежащим в основе XSL, является XML, а это означает, что XSL более гибок, универсален, и у разработчиков появляется возможность использования средства для контроля за корректностью составления таких стилевых списков (используя DTD или схемы данных).
• Таблицы XSL не являются каскадными, подобно CSS, так как чрезвычайно сложно обеспечить «каскадируемость» стилевых описаний, или, другими словами, возможность объединения отдельных элементов форматирования путём вложенных описаний стиля, в ситуации, когда структура выходного документа заранее неизвестна и он создаётся в процессе самого разбора. Однако в XSL существует возможность задавать правила для стилей, при помощи которых можно изменять свойства стилевого оформления, что позволяет использовать довольно сложные приёмы форматирования.