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

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

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

Уважаемые хабровчане, представляю вам вольный перевод статьи Avoiding common HTML5 mistakes. Здесь мы рассмотрим частые ошибки в HTML5 разметке с точки зрения семантики, и как их избежать.

Уязвимость в Google Webmaster Tools позволяла удалить любой сайт из индекса, даже если вы не являлись его владельцем. Это было возможным из-за ненадлежащей проверки параметров запроса.

https://www.google.com/webmasters/tools/removals-request?hl=en&siteUrl=http://{YOUR_URL}/&urlt={URL_TO_BLOCK}

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

Казалось бы, установка и настройка счетчика Google Analytics — задачи простые. На деле, эта «простота» скрывает за собой множество подводных камней. Мы постоянно сталкиваемся с тонкостями, неочевидными особенностями подсчета и глубоко спрятавшимися ошибками (конечно, обычно виноваты мы сами:).

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

Проверка регулярных выражений при установке целей

Достаточно часто при указании адреса цели приходится использовать регулярные выражения: например, если искомый фрагмент адреса окружен другими частями. Регулярные выражения – тонкая материя, а ждать обновления данных для проверки правильности написания не хочется. Проверить правильность выражения можно мгновенно, перейдя в раздел «Содержание – Самое популярное содержание» и введя в поле фильтра выражение. Содержимое сразу же отфильтруется, а вы сможете убедиться в корректности кода.

И, надо сказать, как раз вовремя — очень многим веб-мастерам приходилось придумывать всякие «костыли» для получения информации о том, сколько же посетителей заходит на сайт из социальных сетей. А теперь разработчики из Google создали интересный инструмент (насколько он удобный и эффективный — покажет время), позволяющий все это отслеживать без всяких проблем.

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

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

Представляю вашему вниманию перевод статьи под названием "Innovative Techniques To Simplify Sign-Ups and Log-Ins" от Anthony T. Перевели в компании UXDepot специально для пользователей Хабрахабра с одобрением издания Smashing Magazine.

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



Форма авторизации на сайте Basecamp

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

Эта статья была опубликована еще в 2008 году на официальном сайте Adobe. В ней Nick Myers (ведущий визуальный дизайнер компании Cooper) рассказывает о преимуществах Fireworks в проектировании интерактивных продуктов.

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



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

Представляю свой проект — бесплатный скрипт интернет-магазина OpenStore на основе Drupal и модуля Ubercart

Сайт проекта
Скачать
Багтреккер

В ноябре 2009 года я познакомился с www.opencart.com и остался очень доволен этой CMS построенной с соблюдением основных принципов MVC. Это просто замечательная система код которой можно легко адаптировать под собственные нужды. Файлы системы разделены по папкам controller, model, view, language.

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

Важным для меня преимуществом является высокая скорость генерации страницы. Простой код с разделением на модель, вью, контроллер. Шаблоны дизайна лежат в папках с понятной структурой. Простая система по сравнению с magento commerce в которой что-то поменять ну очень не просто.

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

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

Однако, в зависимости от вида, каждые 7, 11, 13 или 17 лет периодические цикады одновременно массово вылезают на свет и превращаются в шумных летающих тварей, спариваются и вскоре умирают.

Хотя наши странные цикады весело уходят в иной мир, возникает очевидный вопрос: это просто случайность, или числа 7, 11, 13 и 17 какие-то особенные?

На прошедшем Фестивале 404 я рулил дизайнерской секцией. Самые интересные доклады секции были записаны на видео. Предлагаю вашему вниманию подборочку наиболее интерестного дизайнерского видео с Фестиваля.

Вся дизайнерская секция была во второй день, но самый полезный дизайнерский доклад открывал Фестиваль в первый день. Перед нами выступил Билл Бакстон — дизайнер с большой буквы. Что там дизайнер — ученый, специалист по взаимодействию человека и компьютера, личность мирового масштаба.

Билл Бакстон (Microsoft Research)
Дизайн, веб-сайты и новые стандарты

Всё началось в 1993 с браузера Mosaic, тогда наши представления о веб-сайтах складывались из традиций GUI, которые в свою очередь были продиктованы персональными компьютерами и ноутбуками. Но с тех пор, когда смартфоны стали использовать для доступа в интернет, стало понятно, что традиционная модель не идеальна. В своей презентации я загляну за эру мобильных устройств и расскажу про цифровую эко-систему в которой мы будем жить совсем скоро, а так же о разных формах жизни, которые населят эту систему. Нынешние проблемы с вебом и мобильным интернетом померкнут в сравнении с грядущими переменами. Браузеры будущего будут отличаться от нынешних, как сейчас интернет отличается от газет и журналов.

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

В 2002 году Марк Ньюхаус (Mark Newhouse) опубликовал статью «Укрощение списков» ("Taming Lists"), довольно-таки интересную часть которой он посвятил объяснению того, как создавать собственные списки, украшенные псевдо-элементами. Почти десять лет спустя Николас Галлахер (Nicolas Gallagher) изобрел технику, которая использует псевдо-элементы из спрайтов, для создания фоновых изображений.
Сегондя, основываясь на опыте гигантов, мы постараемся развить эту тему. Мы обсудим, как можно украсить элементы без дополнительной разметки, используя только технику CSS-спрайтов. Результат будет работать также в Internet Explorer 6 и 7 версии.

В продолжении темы о Drupal’е хочу предоставить несколько расширенный обзор модулей. С помощью некоторых из них можно строить уже не просто standalone-блог, а сообщество с элементами социальности. Список, конечно же, не претендует на полноту и основывается лишь на личном опыте автора.

Итак, вот они:

Уделяйте достаточное внимание шаблонам

Люди тратят большое количество времени, используя различные интерфейсы (Facebook, Google, Windows, Mac OS и т.д.). В них уже могут быть представлены решения проблем, с которыми вы сталкиваетесь при проектировании. Поэтому не стоит изобретать колесо. Используя привычные шаблоны интерфейсов вы поможете пользователям почувствовать себя как дома.

CoTweet имеет привычный по почтовым клиентам шаблон.

Вы PM. Как узнать – готова ли вёрстка к реальному использованию?
Вы заказчик. Как убедиться, что работа выполнена качественно?
Как оценить качество вёрстки?

Когда я стал тим-лидом, а позже PM, передо мной стала задача проверять вёрстку наших проектов. Нужно было выработать формальные, легкопроверяемые критерии, соответствие кода которым, должно было давать некую гарантию, что не будет факапов и ни клиент, ни программеры не сказажут потом “WTF?”.

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

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

Итак что же это за список?

Краткая версия теперь доступна на html5checklist.com (github), где можно вносить pull-request'ы.

История обновлений:

• 2015/08/11: Актуализировал рекомендации по оптимизации скорости загрузки. Добавил требование поддержки Retina. Дополнил «19. Мелочи» требованием что изображения должны масштабироваться в зависимости от размера окна.
• 2015/08/10: актуализирован список исключений для CSSLint
• 2015/07/29: актуализирован пункт №13 «плохо»/«хорошо»
• 2015/04/08: добавлено требование использования препроцессоров и рекомендация использования систем сборки
• 2013/04/25: добавлены анализаторами качества кода: CSSLint и JSHint, указан сайт подбора css font stack (спасибо @fliptheweb), мелкие уточнения (работу интерактивных элементов страницы, что не пропадает фон на высоких разрешениях, не должно быть пустых презентационных блоков, при проверках контента — пробовать удалять заголовки, менять местами блоки)
• 2013/04/24: добавил пункт об минимизации каскада (БЭМ-техники, MCSS, SMACSS), необходимости вписывания в экран моб. устройства, заменил ссылку на проверочный текст отображения стандартного html на код с normalize.css, поправил пример где в рекомендации встречался длинный каскад, упомянул про Opera на Presto и новый уровень семантики — в именах классов BEM.
• 2012/04/12: отсортировал пункты проверки в порядке важности, выделил главные, дополнил статью подробностями
• 2011/12/07: дополнил согласно доклада на WSD Минск'2011.
• 2011/07/19: добавлено про повышение надёжности вёрстки благодаря html5-тэгам, про необходимость favicon/apple-touch-icon, отсутствие багов при ресайзе textarea
• 2011/06/15: добавил пояснения какие ошибки валидации допустимы, рассказал про отсутствие официальной кнопки «HTML5 Valid» и про официальное лого HTML5 на сайте.

К разработке мобильной версии сайта можно подойти по-разному: создать отдельный стиль или полностью переработать дизайн и html-разметку. Но в обоих случаях важно определить, когда загружать мобильную версию сайта, а когда – компьютерную. Это можно сделать несколькими способами.