Design Вc Тг Иг Пг Цв Вд Пв Ид

Верстаем?

Материалы по HTML, CSS и вспомогательным инструментам

С чего начать?

  1. www.postroika.ru - очень просто, прибавляет энтузиазма, но устарело.
  2. lab_html.pdf - документ, авторская методичка, очень краткое введение в HTML+CSS.
  3. softwaremaniacs.org/blog/category/primer - читать снизу вверх! Блог Ивана Сагалаева, единственный известный нам источник, аналитически подходящий к верстке на CSS. Достоин выучивания наизусть.
  4. Примеры CSS: 1  2  3  4  5  6  7  8  9  10  11  12 
  5. htmlbook.ru - самый главный русскоязычный сайт по HTML+CSS
  6. Электронный справочник - офф-лайн версия htmlbook, бесплатно. Не пугайтесь оформления подписки. Скачаете - отпишетесь.
  7. shpargalkablog.ru - тоже рекомендуем.
  8. cssdot.ru - справочник, советы. Полезный ресурс.
  9. www.wisdomweb.ru/CSSd - вполне толковый справочник, понятный и удобный

Инструменты

Лаборатория "потрошителя"

  1. Ctrl+U - исходный код страницы, инструмент №1. Работает ВСЕГДА. Текст можно копировать, ссылки кликабельны.
  2. "Инструменты разработчика". В хроме, если это не нарушено, вызывается клавишами Ctrl+Shift+I. В классах это как раз нарушено, все сочетания с Ctrl+Shift сломаны переключением раскладок. Но не все так плохо! Вызываются через ПКМ на любом элементе страницы, в хроме пункт называется "Проверить элемент", в FireFox - "Исследовать элемент", в других браузерах - догадываемся по аналогии. Сразу подсвечивается код выбранного элемента, справа - CSS. Все подробно, круто, наглядно. Возможностей там куча.
  3. FireBug - плагин для браузера FireFox. Еще более навороченный, чем "Инструменты разработчика", по принципам действия - похож.

Основные инструменты

  1. Geany - наш выбор и рекомендация. Статейка про него: http://alv.me/?p=49
  2. Bootstrap - фреймворк, помогает сэкономить кучу времени. Статья: bootstrap
  3. Boilerplate - еще один набор "быстрого старта", чуть попроще.
    А вот - статья, в которой кратко говорится, чем они (bootstrap и boilerplate) отличаюся.

Вспомогательные инструменты

  1. CSS Lint - "Мы раним ваши чувства (и поможем писать код лучше)" - проверка качества CSS.
  2. csstemplater.com - рус. сервис для создания шаблонов HTML. Посетить обязательно!
  3. pages.github.com

WYSIWYG-инструменты

- то, что мы НЕ рекомендуем
  1. Визивиг-редактор для создания HTML кода (типа MS Word): vladmaxi.net/html-editor - для "нетянуг" )) ну и просто побаловаться
  2. Ну, и CSS-генераторы, раз уж так: habrahabr.ru/post/168149

Некоторые требования к сайтам

  1. Кроссбраузерность - одинаковое отображение всеми браузерами.
    • Вендорные префиксы и беспрефиксные свойства. Новость дня: анимации стали беспрефиксными.
    • Gracefull degradation (изящная деградация)
    • Официальное известие о смерти ИЕ6 - 1 марта 2010! На фото - символический гроб в компании Google, к которому Microsoft прислала венок цветов.
    • www.iwanttouse.com - статистика поддержки свойств браузерами.
    • www.w3schools.com - статистика браузеров, версия сайта w3schools.
  2. Эргономика
  3. Usability

Работа в команде

  1. "Песочницы": обмен кусочками кода + демонстрация
    • JSFIDDLE - Экран поделен на 4 окна: 3 из них - для HTML, CSS, JS, а в 4-м отображается результат. Регистрация приветствуется, но не требуется.
      Пример: jsfiddle.net/26cE7
      Заметна ориентация на JS, даже в названии присутствует.
    • dabblet.com - примерно то же. Пример
  2. GitHub - ресурс планетарного масштаба для обмена кодом. 2-шаговая бесплатная регистрация
  3. БЭМ - методология организации взаимодействия разработчиков в команде (от Яндекса)
  4. mdo.github.io/code-guide - грамотное оформление кода (eng), а также пример адаптивной верстки (см. также История Д.). Автор - Марк Отто (ник mdo) - дизайнер Twitter и создатель Bootstrap

Преодолеваем ограничения CSS

  1. OOCSS - объектно-ориентированные CSS
  2. LESS, SASS - препроцессоры CSS (добавляют переменные и функции в CSS)

Короткие заметки, комментарии

  1. См. На нашем сайте

Цитата дня

  1. См. Цитата дня

Задачи

1