Верстка і дизайн для Sports.ru, частина 1

Наша взаимовыгодная связь https://banwar.org/

Спочатку я планував зробити окремий запис персонально для Володимира Платонова (користувач sports.ru з ніком echo_1 ), Який виграв конкурс прогнозів на результати плей-офф в NFL - в якості призу Володимир попросив «урок версти і оформлення». Потім я подумав про те, що, можливо, знайдуться і інші користувачі, яким мої Таємні Знання можуть виявитися корисними. Тому я завів цей блог і написав невелику методичку з оформлення постів на Sports.ru - прості трюки, які можуть зробити текст більш акуратним і привабливим, плюс багато непрошених порад загального плану.

Сьогодні поговоримо про текстах.

текст

Для того, щоб зробити процес підготовки тесту максимально комфортним, нам знадобиться кілька інструментів. Інструмент, пропонований за замовчуванням - редактор записів sports.ru - має навмисне обмежений функціонал; користуватися ним - все одно що закручувати шурупи молотком. Профі воліють набір викруток.

Перше, що нам потрібно - текстовий редактор з підтримкою правопису. Кращий - Microsoft Word, безкоштовний аналог - Open Office. Немає нічого більш подразнюючої в чужому тексті і образливого в своєму, ніж помилки в простих словах і помилки в складних. Крім того, використання Word дозволяє писати / редагувати текст в декілька заходів (актуально, якщо пишемо більше ніж пару абзаців).

Друга «викрутка», яка нам знадобиться - редактор Notepad ++. На жаль, скопіювати текст з Word в редактор sports.ru не можна - разом з текстом копіюються невидимі символи форматування і замість наших розумних думок на виході виходить каша на зразок такої:

Або, якщо ви користуєтеся браузером, відмінним від Firefox (наприклад, Internet Explorer), після вставки тексту пропадуть абзаци. Це все добре відомі баги програми FCKEditor (відомої нам як «кривої редактор sports.ru»).

Можливо в улюбленому редакцією Google Chrome все працює добре, я не перевіряв.

Але якщо працює погано, доводиться робити проміжний крок - копіювати тест з Word в Notepad ++, а потім звідти - в редактор sports.ru. Чому для цієї мети не можна використовувати звичайний Notepad? Тому що він «проковтує» символ нового абзацу, і розбивку тексту доводиться робити вручну. Для довгих текстів це суща мука. З Notepad ++ у вас з'явиться нова проблема - символів нових абзаців буде у два рази більше, ніж потрібно. Але! Видаляти зайве - простіше, ніж додавати відсутню.

Отже, процес підготовки тестової частини записів виглядає так:

• написали в Word,
• перевірили синтаксис,
• скопіювали все в Word,
• вставили в Notepad ++,
• скопіювали все в Notepad ++,
• вставили в редактор Sports.ru,
• натиснули кнопку «Предпросмотр».

Врахуйте, що Notepad ++ «вбиває» курсив, напівжирний шрифт, списки і т.п. Але зберігає абзаци!

Якщо все виглядає добре, можна думати про оформлення.

PS Якщо хтось знає менш болісний спосіб переносити текст з Word в редактор sports.ru - діліться в коментарях. У мене іноді щось ламається, і навіть Notepad ++ проковтує абзаци ...

Гарна новина для тих, хто працює на комп'ютерах з MacOS: вбудований редактор TextEdit.app володіє всіма необхідними функціями: вміє перевіряти орфографію і не вставляє зайвого сміття.

Поради щодо оформлення тексту

1. Вдалий заголовок - 25% успіху записи.
2. Між стислістю і інформативністю заголовка намагайтеся вибирати останнє. Тема типу «Дванадцять днів» краще переробити в «Дванадцять днів до Фіналу - про що варто подумати».
3. Іноді можна використовувати короткі заголовки, зрозумілі тільки завсідником вашого блогу. Вони оцінять.
4. Завжди робіть анонси (передмови) для записів. Завжди.
5. В анонсі можна перелічити основні тези записи, або питання, на які ви даєте відповіді у тексті.
6. Іноді найкращий текст для анонса - перший абзац записи.
7. Короткі анонси типу «Що я думаю про вчорашній матч» - поганий тон. Записи з такими анонсами хочеться читати найменше.
8. Пам'ятайте про те, що якщо читач міг пропустити анонс (якщо він відкрив запис не з стрічки). Тому уникайте ситуації, коли у вас в анонсі питання ( «Чому Патріоти програли Супер-Боул?»), А текст починається відразу з відповіді. Повторіть питання в тексті.
9. Якщо анонс вийшов змістовним (на кілька рядків), немає нічого поганого в тому, щоб скопіювати його в початок запису (рада 3 навпаки). Можете виділити цю частину тексту курсивом або напівжирним шрифтом.
10. Розбивайте текст на абзаци. Ніхто не любить читати «простирадла».
11. Не робіть абзаци занадто великими. 20 рядків, не більше. Краще - 10-15.
12. Маленький абзац - це теза, яка-небудь думка, значимість якої ви хочете особливо підкреслити.
13. Не робіть багато маленьких абзаців поспіль. Якщо ви пересчісляете якісь тези або факти, які не виділяйте кожен з них в абзац, краще зробіть список.
14. У великій за обсягом записи (більше 2 сторінок в Word) має сенс використовувати додаткові кошти форматування. Наприклад, підзаголовки, виділені напівжирним шрифтом. Читати буде простіше.
15. Мій улюблений варіант підзаголовка - рядок з зірочок (* * * * * * * * * *). Вона не несе сенсу, але дозволяє логічно розбити текст на кілька частин.
16. Якщо у вас дуже вийшов дуже великий текст (більше 5 сторінок), перенасичений інформацією, є сенс перерахувати основні висновки в кінці. Такий собі блок TL; DR (too long, did not read - занадто багато, не читав).
17. Якщо є можливість, закінчуйте текст анонсом наступної записи. Або що запам'ятовується фразою.
18. У самому-самому кінці має сенс привести список з посиланнями на 3-5 інших записів у вашому блозі - «інші матеріали по темі». Це можуть бути посилання на попередні частини, або на минулорічні дослідження на ту ж тему, або на записи про тих же командах / гравцях. Не варто вставляти посилання на випадкові матеріали - це занадто схоже на тупу рекламу, яка всіх дратує.
19. На sports.ru доступні звичайний шрифт, напівжирний, курсив і підкреслений. Можна використовувати останні три для того, щоб зробити вашу запис менш однотонної. Наприклад: напівжирний для підзаголовків і висновків, курсив для підписів до картинок і графіків, підкреслений - для виділення важливих тез в тесті, або цитат.
20. Якщо ваш текст дуже великий, спробуйте розбити його на кілька частин.
21. Пожалійте своїх читачів, які не публікуйте наступну частину великої статті на наступний же день після попередньої! Краще почекати хоча б пару днів.
22. Цей список - занадто довгий. Приблизно 47% людей ненавидить довгі списки ще більше, ніж довгі тексти.

цитати

Ось ми добралися до першого лайфкаха - як виділити цитати.

Цитати - це відмінний спосіб зробити текст менше монотонним ...

Цитати - це відмінний спосіб а) зробити текст менше монотонним, б) підкреслити важливість якоїсь фрази в тексті. Але штатними засобами sports.ru прості користувачі не можуть виділяти цитати. Тут нам на допомогу приходить знання того, що «редактор sports.ru - це відомий модуль FСКeditor. Для нього є демо-сайт, де можна «пограти» з редактором, форматуванням та іншим. І заодно подивитися, який функціонал вирізаний на sports.ru (щоб ми, цитую, не змогли зробити текст рожевого кольору і цим погубити «Трибуну»):

Як бачите, там є багато чого - різні стилі тексту, шрифти, додаткові елементи. Але нас зараз цікавлять цитати.

Отже, ми хочемо виділити якусь частину тексту в цитату. Послідовність наших дій:

• Йдемо на демо-сайт http://drupal.fckeditor.net/demo
• Вводимо текст, який ми хочемо зробити цитатою, в редактор, і виділяємо його.
• Натискаємо на панелі інструментів кнопку з лапками (blockquote).
• Копіюємо відформатований текст з редактора на демо-сайті в редактор на sports.ru. Має вийти щось на кшталт такого:

Вуаля, цитата готова.

Користуйтеся на здоров'я, тільки пам'ятайте, що не варто вставляти занадто багато цитат, вони відволікають увагу. Однієї-двох зазвичай цілком достатньо.

Наступного разу поговоримо про правильну роботу з зображеннями - фотографіями, картинками, таблицями і т.п.