Статьи

Web Essentials 2005: день второй

Если вы еще этого не сделали, ознакомьтесь с кратким изложением первого дня (теперь исправлено 3 опечатки в AM).

Последний день Web Essentials 2005 (WE05) в Сиднее означал больше всего … кроме, возможно, сна. Не имея предвидения, чтобы записаться на завтрак Тантек Челик, я смог заснуть до блаженного часа 8 утра, но потом все вернулось к этому:

Рабочий процесс веб-стандартов , Молли Holzchlag Holzschlag

Молли хотела начать свою вторую презентацию, ответив на несколько вопросов аудитории о проекте веб-стандартов (WaSP), Microsoft и будущем Internet Explorer.

Предметы, которые были покрыты

  • Следующий основной выпуск Руководства по доступности веб-контента (WCAG 2.0) — это кризисный проект. Люди уходят по разным причинам, мешая прогрессу в спецификации, и часть того, что было завершено, весьма спорна.
  • Microsoft может увидеть революцию изнутри, теперь, когда ее сотрудники имеют возможность вести блог и тем самым общаться напрямую с пользователями. Посмотрите IEBlog .
  • Принятие стандартов в индустрии веб-разработок — это похожая история о образованном меньшинстве, способствующем переменам внутри неохотных организаций.
  • XHTML 2.0: когда он будет завершен и, что более важно, сможет ли он служить опытным веб-разработчикам, не добавляя существенных барьеров для входа для случайных издателей контента?

Конечно, к тому времени, когда она прошла через все это, у нее оставалось всего 15 минут, чтобы представить концепцию прототипирования CSS-дизайна и его сильные стороны. К счастью, у следующего оратора это было…

Быстрое проектирование прототипов со стандартами , Эрик Мейер

В первом выступлении Эрика мы упустили возможность увидеть, как он втирает какой-то реальный CSS-код в представление, и эта сессия восполнила это. Он продемонстрировал, как дизайнерские решения, такие как макет страницы и выбор цвета, могут быть приняты прямо на встрече с клиентами путем взлома кода CSS для быстрого предварительного просмотра идей дизайна. Чтобы сделать это, он провел аудиторию через весь этот процесс с дизайном старого сайта Netscape DevEdge, попросив идеи о том, что нужно перенести в другое место и выполнив макет с помощью нескольких быстрых CSS-изменений.

Если вы чувствуете себя достаточно уверенно с вашими навыками CSS, чтобы сделать это на реальной встрече с клиентом, Эрик усвоил несколько процедурных моментов:

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

Проектирование для доступности: помимо основ , Дерек Фезерстоун

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

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

Иногда все сводится к вдумчивой разметке: почему бы не поместить все обязательные поля в «обязательный» набор полей и все необязательные поля в «необязательный» набор полей? Иногда вам действительно нужно поиграть с программой чтения с экрана, чтобы придумать блестяще простые идеи, такие как отправка формы идентификатору фрагмента #results, который указывает прямо на ссылку на результаты поиска (#details) на получившейся странице, что позволяет программа чтения с экрана, чтобы пропустить прямо над вашим полем поиска снова в верхней части страницы.

Дерек произвел государственный переворот, когда показал полностью доступную кроссворд DHTML. Стоит отследить слайды и исходный код этого сеанса, чтобы увидеть этот пример с включенными таблицами стилей и без них.

Понимание Ajax: заглядывая под одеяло , Тим Лукас

Тим дал достаточно подробное и прагматичное введение в AJAX (который, несмотря на свою защиту альтернативы, SitePoint по-прежнему пишется со всеми заглавными буквами) — асинхронный JavaScript и XML. Камерон Адамс недавно описал эту чертову проблему в SitePoint с помощью AJAX: полезная интерактивность с удаленными сценариями , поэтому я не буду вдаваться в основы этой технологии. Однако Тим коснулся нескольких особенно полезных самородков:

  • Избежать уязвимостей межсайтового скриптинга (XSS) в приложениях AJAX обычно просто: защитите деструктивные / необратимые операции, такие как выход пользователей из системы и удаление записей, с помощью запроса POST, и проверьте учетные данные для этого запроса, требуя передачи действительного идентификатора сеанса в качестве параметра в URL ссылки (а не просто в cookie!).
  • Все приложения AJAX, которые сейчас пользуются большой популярностью, разрабатываются с нуля, чтобы требовать работы AJAX (т. Е. JavaScript, ActiveX включен). Но лучше всего создавать «тупой» сайт, а затем улучшать его с помощью AJAX изящно-разлагаемым образом.

Показав несколько классических примеров использования AJAX (обновление результатов с сервера на лету, перетаскивание элементов списка для записи их нового порядка на сервере и т. Д.), Тим немного рассказал о некоторых наборах инструментов, которые существуют сегодня: DOJO (решает большие проблемы, предварительное сжатие JavaScript 4 МБ, довольно страшно), Rico (без поддержки Safari, поэтому не стоит тратить время), SAJAX ( пока решает мелкие проблемы, PHP-ориентирован на данный момент, но растет ) и Prototype / script.aculo.us (в комплекте с Ruby on Rails выдает красивый код JavaScript).

Он подчеркнул, что ни один из этих наборов инструментов еще не решил проблемы доступности с AJAX, но новаторам это необходимо выяснить. Если вы хотите использовать AJAX сегодня — проблемы с доступностью не остановили Google Maps ! — набор инструментов может быть лучшим способом сделать это.

Атрибут названия: для чего он хорош? Стив Фолкнер

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

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

В частности, современные программы чтения с экрана (например, JAWS ) обычно игнорируют заголовки текстовых ссылок по умолчанию (а при тонкой настройке вы слышите значение атрибута заголовка вместо текста ссылки). Тем не менее, они, кажется, читают атрибут title в текстовых полях довольно надежно. На примере недавней статьи A List Apart, в которой интенсивно использовался атрибут title со встроенными ссылками, он продемонстрировал, как ссылки могут стать запутанными или вводить в заблуждение, если в атрибут заголовка помещается критическая информация.

Некоторые примеры практического совета, который Стив получил в результате своего тестирования:

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

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

JavaScript и DOM , Кэмерон Адамс

Кэмерон является соавтором книги о JavaScript для нас — «Антологии JavaScript», так что было очень приятно быть там, поскольку он поделился некоторыми идеями и блестящими примерами, с которыми он в настоящее время играет. Отрадно и немного досадно — когда пишется книга, когда он успел клонировать интерфейс Mac OS X в DHTML?

Кэмерон дал отличный обзор объектной модели документа (DOM), подкрепленный множеством интересных примеров, от абсурдного оживленного удара Эрика Мейера и Дуга Боумана (у которого, очевидно, есть тело преступника) до изящного, модульного проверка формы, все с острым умом и множеством веселья, которые можно заметить, если вы внимательно посмотрите на его скриншоты («Сексуальные цыпочки», кто-нибудь?).

Для меня настал момент, когда Кэмерон понял, почему слайды презентации S5 перестали продвигаться после того, как он отключил JavaScript в своем браузере, чтобы показать, насколько изящно деградировал один из его примеров. «Кто-нибудь может дать мне определение иронии?»

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

Микроформаты: развитие Интернета , Тантек Челик

Проще говоря, микроформаты — это простые стандарты для использования расширяемых битов HTML — метатега и атрибутов class, rel и rev — для добавления значимых функциональных возможностей в сеть сегодня без необходимости ждать появления новых стандартов для поддержки этой функциональности. На этом занятии Тантек проделал огромную работу по объяснению мотивации для микроформатов и фундаментальным проектным решениям, которые принимаются о них, чтобы сделать их полезными и успешными за очень короткое время.

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

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

Затем Тантек провел нас через краткую историю микроформатов, демонстрируя те, которые доступны сегодня в том порядке, в котором они возникли. Особенно привлекательны были форматы hCard и hCalendar , которые позволяют встраивать данные контактов и событий на веб-страницах в стандартизированный формат, который может быть прочитан совместимыми с vCard и iCalendar приложениями через простой букмарклет.

Похоже, что микроформаты переходят от успеха к успеху в плане усыновления в условиях дикой природы (например, более 40 000 представителей Avon теперь имеют контактную информацию hCard в Интернете — первый в истории формат персональных данных, который женщины быстрее внедряют, чем мужчины?), И Тантек обрисовал в общих чертах некоторые из проектных решений, которые были приняты для микроформатов, которые, по его мнению, способствуют этому принятию:

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

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

Проектирование Next Web: принципы ориентированного на пользователя дизайна, переведенные для Web 2.0 , Джефф Веен

Это была обязательная сессия Web 2.0 конференции, и, к счастью, Джефф принес всю энергию на сцену, что это новое движение / технология / архитектура / что угодно, одновременно рассеивая всю шумиху. Джефф выдвинул несколько идей, которые являются центральными для Web 2.0, а затем предположил, что для разработчиков в окопах Web 2.0 означает решение старых проблем с использованием новых платформ, которые воплощают эти идеи.

Так что да, подкастинг — это на самом деле просто новое название для потокового аудио, но это открытая стандартная платформа для этого, которая породила всевозможные инструменты, сообщества и возможности, которые раньше никогда не были доступны, как вики и блоги. к системам управления контентом, а также упреждающей навигации (AJAX à la Google Maps) к предыдущей технологии веб-картографирования.

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

Завтра, краткий обзор моего опыта в WE05 и того, что я забрал у него. До тех пор, я иду спать!