Есть такой консорциум — W3C, который известен тем, что разрабатывает различные стандарты для интернет сайтов. На этот раз они разработали стандарт мобильных сайтов. Другими словами, W3C упорядочили накопленные знания многих WAP мастеров в одном документе, который назвали Mobile Web Best Practices 1.0. Прочитать его можно тут.

Написание хорошего ТЗ для разработки сайта еще та проблема, и я поделюсь своим опытом по созданию «человеко-понятного» описания для заказчика для разработчика.

В последнее время столкнулся с тем, что Prototype не такая уж клевая библиотека. Даже в компрессии напару с scriptaculous занимают много места да и синтаксис странный. Для меня загадка, почему в Rails включили именно его. jQuery по синтаксису намного больше похож на Ruby и более легковесная библиотека. Собственно немного порыскал и нашел неплохие шпаргалки на jQuery, чтоб освоение протекало несколько легче.

1. jQuery Color Cheatsheet (PNG)
   
   
   

В W3Cast #3 Денис ( CurlyBrace) затронул тему использования styleguides, а у меня как раз уже была статья по этой теме. Поэтому я решил поделиться ей, чтобы показать наглядные примеры, демонстрирующих возможности «стилевых гидов».
«Стилевые гиды» — это свод правил и соглашений, предоставляющих разработчикам информацию о структуре кода и принятых правилах оформления. Чаще всего используется группой разработчиков, при совместном участии в проекте или же для самодисциплины при разработке кода.
Если проект большой, то он обрастает многочисленными файлами CSS с различными цветовыми схемами, типографикой и другими стилевыми установками. Чтобы избежать путаницы в структуре кода и не забыть что да как, нужно разрабатывать структурированный код, который впоследствии будет проще использовать, править и частично использовать в других проектах.

Несколько дней назад Daniel Glazman опубликовал на своем блоге новость о том, что он вместе с David Hyatt успешно реализовали идею о CSS-константах (статья в моем блоге). Уже сегодня каждый может увидеть CSS-константы в действии. Для этого нужно установить свежую версию WebKit Nightly Builds.

Собственно, вот мой маленький тест: стили блока div я задала константами.

Вопрос о внедрении Flash с помощью разметки соответствующей стандартам возникает достаточно часто, между тем у этой проблемы есть достаточно известное решение — SWFObject. SWFObject 2 не только позволяет внедрять Flash динамически, с помощью JavaScript, но и статически, когда для внедрения используется стандартная разметка, а JavaScript только исправляет неразрешимые с помощью разметки проблемы, при этом даже если JavaScript отключен пользователи все равно увидят Flash.

К сожалению, в наше время перенасыщенное рекламой, у многих сложился стереотип, что дизайн – это просто симпатичная и яркая картинка.

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

Сделав сногсшибательную картинку, иногда видишь, что все-таки в ней что-то не так. И это отражается на потребителе, когда продажи товара просто не идут. В отличие от конкурента, у которого совершенно пустая белая картинка, с парой выражений (скажем с рекламным слоганом) и логотипом.

На тему эффективного дизайна можно привести несколько ссылок:

10 принципов эффективного веб-дизайна
Пять дизайнерских правил применяемых в Web

Это из того что вспомнилось. Рекомендуется почитать блог Дизайн пользовательских интерфейсов и юзабилити.

Это, скажем так преамбула, которую можно отнести к любому направлению дизайна. В этой статье мы поговорим о Web-дизайне и о применении Золотого Сечения и Правила Третей.

Одной из главных задач эффективного дизайна в Web – это ясность и интуитивность. А также концентрация внимания пользователя на нужных местах страницы. Как этого добиваются?

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

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

Эпидемия советов по вёрстке добралась и до меня (спасибо Юре Артюху) — с удовольствием ими поделюсь. Данные советы довольно общие и в принципе применимы к многим IT-специальностям, — вёрстка здесь используется просто как пример.

Что такое CSS инструменты?

CSS инструменты — набор стилей, которые могут оказаться полезными на любом веб-проекте.
Идея CSS инструментов состоит в том, чтобы включить в отдельную таблицу эти наиболее используемые стили и всегда иметь их под рукой.

А чем бы вы этот набор дополнили?

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

Из всех видов тестирования веб-приложений, самым, по моему мнению, востребованным и распространённым, является тестирование работы системы у пользователей с различным каналом доступа. Ну, может быть, кроме теста совместимости в разных браузерах. И так, нам почти в каждом проекте нужно или очень желательно посмотреть, как люди с разной скоростью подключения будут видеть наш проект. Особенно это касается веб-приложений — от этого иногда зависит вообще работоспособность проекта, в частности, когда загружаются большие AJAX-библиотеки и проект часто взаимодействует с сервером. Вот как раз для таких случаев есть проект Sloppy.

Не все сайты делаются студией и после отдаются заказчику.

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

Тут и без бинокля видно, что неплохо бы использовать для хранения php и html кода репозиторий.

Но как это сделать правильней?
С дизайнерами и программистами все достаточно просто, они разрабатывают код на локальных машинах и изменения вносят в репозиторий. Можно даже настроить cron, чтобы периодически последние изменения из репозитория выкладывались на online сайт.

Но как быть с контентом?
Контент меняется только на online версии, чтобы не усложнять дело синхронизацией данных из разных БД. Но не весь контент хранится в базе, часто CMS контент статических страниц хранят в .php файлах, из-за чего появляются новые файлы и изменения, которые приходится периодически с «online» переносить в репозиторий, и делать это вручную во избежание конфликтов версий.

Интересно, кто сталкивался и как решал подобные задачи.

При создании объекта есть два способа описать требования: «что должен уметь/делать объект» (описание цели) и «каким должен быть объект» (описание реализации). Прощу прощения если формулировка не точна, источника сией мысли я не знаю, формулирую сам. Далее речь пойдет о втором способе описания объекта — дизайна сайта.

Приветствую всех читателей. Популярность AJAX такая, что это, по сути, уже стандарт де-факто для многих проектов. Хотя, как и все технологии (особенно, новые и/или модные), она часто применяется (чего уж грех таить) и там, где без нее не обойтись, и там, где вполне можно, а зачастую и нужно. Впрочем, сегодня речь пойдет о другом.

Одним из неприятных моментов при использовании AJAX – является отсутствие прямых ссылок на динамически сгенерированные страницы или их отдельные части. Здесь кроется и вообще-то концептуальный вопрос – а что, собственно говоря, является в таком подходе страницей – она не имеет некоторого статического представления, каждый раз совершенно другая (не путать с динамической генерацией на сервере), и, фактически, предоставляет пользователю окно в многомерное представление самой себя.

Но все же – допустим, у нас есть простенький, но претенциозный веб-сайт визитка, где по переходам меню AJAX подгружает и выводит контент, а мы хотим дать знакомому по ICQ ссылку на контактную страницу (или любую другую, не суть важно).

Есть два подхода решения проблемы ссылок.

Вашему внимание предлагается достаточно большой отрывок статьи «Levels of HTML knowledge», написанной Роджером Йоханссеном 30 Мая 2006 года.

Прим. переводчика: Изначально я опубликовал этот пост в виде юмористических выдержек из трех статей, написанных тремя разными авторами и озаглавленных схожим образом: «Уровни владения HTML», «Уровни владения CSS» и «Уровни владения Javascript». Что, конечно же, было довольно глупой затеей. Осознание допущенной ошибки пришло через 5 минут и два минуса к посту и карме. Исправляюсь. Перевод «Уровней владения CSS» ждите завтра.

Может Google Analytics и бесплатная платформа, но она все же основана на проприетарной технологии, которая предполагает, что время от времени вам придется получать сообщения, которые Google сочтет нужным разослать, причем потенциальной аудиторией части этих рассылок являются пользователи других сервисов Google (например, компании, использующие AdWords). Использование Google Analytics предполагает то, что в будущем вы будете утомлены сотрудничеством с Google.Обратите внимание на Piwik, проект, который позиционируется в качестве бесплатной альтернативы Google Analytics и обладает открытым программным кодом. Это дочерний проект OpenX, альтернативный сервер контекстного поиска с открытым программным кодом, способный заменить Google Ad Manager. [прим.: мы начали его использовать на RWW]



В то время как OpenX зарекомендовала себя успешной и популярной, Piwik — проект еще откровенно зеленый? и пользователи еще только присматриваются к этой платформе. Впервые она была представлена публике как PHPMyVisites? и актуальная версия носит индекс всего лишь 0.1.5, что является отличительным знаком стабильности ПО.

Примечание: ниже находится перевод статьи The future of web standards, в которой автор рассматривает текущее состояние организаций, связанных с разработкой веб-стандартов, и возможное будущее как организаций, так и самих веб-стандартов вообще. Мои комментарии далее даны курсивом.

Индустрию веб-дизайна и веб-разработок, основанных на применении стандартов, в последнее время достаточно сильно будоражит. Статья Andy Clarke «CSS Unworking Group», по видимому, открыла дорогу обсуждению текущего неудовлетворительного состояния подхода (или отсутствия оного) по стандартизации новых возможностей для веб-разработчиков и дизайнеров. Статья Alex'а Russell «The W3C Cannot Save Us» и моего друга и бывшего коллеги Jeff'a Croft «Do we need a return to the browser wars?» продолжила эту дискуссию, как и Stuart Langridge c «Reigniting the browser wars», которая появилась уже после того, как я закончил первый черновой вариант этой своей заметки.

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

Первая, не слишком лицеприятная, заключается в том, что текущий прогресс разработки новых стандартов, в лучшем случае, заморожен. HTML был создан из первоначальной задумки до версии 4.01 менее чем за десятилетие. Но текущая версия 4.01 не изменялась еще с конца прошлого тысячелетия (XHTML не сильно лучше: версия 1.0 была, практически, идентична HTML 4.01, за исключением XML-синтаксиса, а XHTML 1.1 не сильно изменил ситуацию, так как все новшества фокусировались на реорганизации и разделении стандартов на модули). Совершенно аналогично, CSS застыл на спецификации версии 2 с 1998, а CSS 2.1 по-прежнему всего лишь «Candidate Recommendation».

Второй проблемой является то, что все основные нововведения в интернете появляются из проприетарных технологий: Flash выскакивает везде, где только можно, Microsoft и Adobe раздельно работают над следующим поколением RIA (rich internet application), а наиболее модное слово — «AJAX» — изначально произошло из исключительно Microsoft'овской технологии (XMLHttpRequest), которая тем или иным образом была включена в другие браузеры.

Для кого эта статья?

Html кодерам – начинающим кодерам поможет повысить
свой профессиональный уровень; оценить текущую ситуацию
в проектах, предупредить негативное течение проекта.Тем, кто
ещё только определяется «быть или не быть» больше вкурить
о профессии html кодер. Те же, кто в кодинге давно врятле
найдут в статье что-то новое для себя, а некоторые вещи
даже могут показаться не достойными внимания. Однако стоит
помнить, что очевидные вещи для одного — это неизвестный
мир для другого, а ваш опыт хорошей практики может быть
выходом из сложной сложившейся ситуации для кого-то.
Руководству – узнать, какие мероприятия стоит провести
в компании для улучшения рабочего процесса, повышения
опыта работников, уменьшения издержек (за счёт уменьшения
перерасхода проектного времени и учёта не просчитанных
ранее активностей) и повышения качества.
Руководителям проектов (Project managers) – поможет
учесть некоторые специфические риски проекта: узнать о
неизвестных ранее поглотителях проектного времени и не
запланированных активностях; узнать о реальных трудозатратах
по некоторым активностям; оценить и улучшить текущий уровень
ведения проектов.
Другим участникам web разработок – поможет больше
узнать о трудовых буднях своих коллег.

Ниже располагается перевод заметки CSS — A Recipe for Success, в которой рассматривается создание средствами HTML/CSS в браузере некоторого образца меню. В статье освещены довольно интересные случаи, и подробно описано их решение.

Если вы посмотрите на стандартное ресторанное меню (или рецепт), там слева расположены названия блюд, за ними идет пунктирная линия до правого края, где расположена цена этого блюда. Давайте посмотрим на рисунок 1, чтобы понять, о чем идет речь.


Рисунок 1

Хотя, на первый взгляд, внешне не представляется сложностей, чтобы повторить это с помощью HTML, однако, все не так просто, и можно наткнуться на достаточное количество подводных камней. Но обо всем по порядку!

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

Продолжение...

Эта статья является продолжением Части1:
Работа HTML кодера.