Донецкий техникум промышленной автоматики

Програми для ефективної верстки CSS і HTML

  1. 1. XRefresh
  2. Zen Coding

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

1. XRefresh

XRefresh   - це плагін для браузера, який виробляє оновлення поточної веб-сторінки після зміни файлів в окремих папках XRefresh - це плагін для браузера, який виробляє оновлення поточної веб-сторінки після зміни файлів в окремих папках. Це значно спрощує процес верстки сторінок. Тепер більше не потрібно постійно наживати F5 !!!

Плагін складається з двох невеликих додатків. Перше - інсталюється на комп'ютері і є по суті монітором подій, який «висить» в треї системи. Друга частина - це або інтегрований в FireBug плагін (якщо ви працюєте з Firefox), або тулбар для Internet Explorer.

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

Zen Coding

Zen Coding   - ахренітельная річ Zen Coding - ахренітельная річ! Це мега штука яка дозволяє значно зменшити час, який ми витрачаємо на написання коду.

Якщо з'єднати специфіку CSS селекторів з HTML розміткою, то вийде Zen Coding. Звичайно, я був не єдиним, чия щелепа відвисла коли він вперше побачив цю штуку.

Дивіться самі:

пишемо:

div # container> div # contents> ul # nav> li * 4

отримуємо:

<Div id = "container"> <div id = "contents"> <ul id = "nav"> <li> </ li> <li> </ li> <li> </ li> <li> </ li> </ ul> </ div> </ div>

<Div id = "container"> <div id = "contents"> <ul id = "nav"> <li> </ li> <li> </ li> <li> </ li> <li> </ li> </ ul> </ div> </ div>

І це тільки квіточки. Встановіть плагін до свого редактору і ви будете приємно здивовані. До речі, на сьогодні цю мега-штуку можна використовувати в багатьох редакторах.

Офіційно підтримувані редактори:

  1. Aptana / Eclipse (crossplatform)
  2. TextMate (Mac)
  3. Coda (Mac)
  4. Espresso (Mac)
  5. Komodo Edit / IDE (crossplatform)
  6. Notepad ++ (Windows)
  7. PSPad (Windows)
  8. <Textarea> (browser-based)
  9. editArea (browser-based)

Неофіційна підтримка редакторів:

  1. Dreamweaver (Windows, Mac)
  2. Sublime Text (Windows)
  3. UltraEdit (Windows)
  4. TopStyle (Windows)
  5. GEdit (crossplatform)
  6. BBEdit / TextWrangler (Mac)
  7. Visual Studio (Windows)
  8. EmEditor (Windows)
  9. Sakura Editor (Windows)
  10. NetBeans (crossplatform)
  11. IntelliJ IDEA / WebStorm / PHPStorm (crossplatform)
  12. Emacs (crossplatform)
  13. Vim (crossplatform)
  14. ReSharper plugin for Visual Studio

Загалом, пробуйте і не пошкодуєте.

І як же без нього?

З віком людина розуміє, що «побудувати будинок» - це не просто частина відомої народної мудрості. Побудувати будинок - це наука і мистецтво. Для того щоб досягти успіху в цьому вам потрібно мати кращі матеріали, наприклад, красива плитка під мозаїку зробить ваш будинок оригінальним і необичним.Недвіжімость Краснодара і краю. Книга про вартість нерухомості в Краснодарі .

І як же без нього?