Доступная среда
Версия для слабовидящих
г.Томск, ул. Герцена, 18

+7 (3822) 97-71-39, доб. 301  ✉ office@tomtit.tomsk.ru

Адрес для приема документов от абитуриентов: ✉ priem@tomtit.tomsk.ru

Как и в чем работать по проектированию и разработке интерфейсов пользователя (09.04.2020)

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

Своими рекомендациями делится мастер производственного обучения Юлия Владимировна Комарова.

 

1. Первая из программ для верстки сайтов - это редактор кода

  • Atom
  • Brackets
  • Sublime Text 3

Однако не беда, если вы не можете по каким-либо причинам их установить, подойдет работа в стандартном блокноте windows или Notepad++.

Если же вы остановились на IDE PHPStorm, тогда вам могут пригодиться сочетания горячих клавиш:

  • Выравнивание кода (выделять всё crtl+A, выравнивать ctrl+alt+L)
  • Поиск по всему проекту + найти и заменить (ctrl+shift+F)
  • Найти метод или его использование (ctrl + клик левой кнопкой мыши)
  • Закомитить + запушить (ctrl + K, ctrl + shift + K)
  • Обнять часть кода новым тегом html (ctrl +alt +J)
  • Показать идентичные куски кода (ctrl+alt+shift+J)

 

2. Emmet

Программа для верстки сайтов в программе редактора кода. Набор плагинов для текстовых редакторов. Этот товарищ поможет быстрее набирать код в HTML & CSS.
Например, такой строкой:
nav>ul>li*3
По нажатию на tab вы получите такой код:

  • <nav>
  •   <ul>
  •         <li></li>
  •              <li></li>
  •              <li></li>
  •       </ul>
  • </nav>

 

3. CSS препроцессоры

Это конечно не программа для верстки сайтов, а, наверное, быстрый и умный способ написания кода CSS. Можно использовать LESS, SASS, SCSS. Разобравшись с одним из них, остальные вы тоже поймете. Они отличаются только синтаксисом. Я использую препроцессоры потому что в них есть:

  • Вложенность
  • Переменные
  • Примеси
  • Расширители

Код css получается более удобочитаемым, структурированным, легко редактируемый и расширяемый. Ух, какие длинные слова, но они очень важны для верстальщика HTM!

4. Онлайн программы, для верстки и работы с .psd макетами сайтов

И еще, когда нет под рукой Photoshop или просто хочется что-то новенького, можно использовать для препарирования .PSD макета онлайн программы типа:

  • avocode.com
  • assets2.adobe.com

Не забываем валидировать свой код на validator.w3.org .

 

Удачи!

61pordegoutejed3