Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. CSS
Webdesign

Створення дизайну та написання коду для інтегрованого з платформою Facebook додатка: HTML + CSS

by
Length:LongLanguages:
This post is part of a series called Design and Code an Integrated Facebook App.
Design and Code an Integrated Facebook App: Theory
Design and Code an Integrated Facebook App: PHP + jQuery

Ukrainian (українська мова) translation by AlexBioJS (you can also view the original English article)

З поверненням! У цій частині серії посібників ми будемо створювати HTML-розмітку для нашого макета та додавати деякі властивості стильового оформлення Facebook, завдяки яким наш дизайн буде викликати те характерне для Facebook враження. Так що залишайтеся зі мною, приготуйте собі чашку чаю, і вдалого вам програмування!


Вступ

Вітаю вас у другій частині нашої серії посібників «Створення дизайну та написання коду для інтегрованого з платформою Facebook додатка». У попередньому посібнику ми обговорили за кулісами деякі міркування з приводу створення інтегрованого з платформою Facebook застосування, що викликає характерне для Facebook враження та має схожий зовнішній вигляд. Хоча ми не розбирали докладно, як створити власне його дизайн у Photoshop, ми дійсно розглянули, як принципи дизайну Facebook можуть допомогти вам при розробці дизайну для вашого додатка. В якості наводженого мною тут прикладу я вирішив відтворити блог webdesigntuts+ в якості інтегрованого з платформою Facebook застосування. Я припускаю, що ви всі маєте достатньо знань з роботи з Photoshop для того, щоб або повторити його макет, або адаптувати його для створення вашого власного дизайну, що викликає характерне для Facebook враження та має схожий зовнішній вигляд.

Що ми будемо створювати

Design and Code an Integrated Facebook App

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


Крок 1: Провалюючи підготовку, ви готуєтеся до провалу

Завжди краще починати щось робити зі складання деякого попереднього плану. Деякі з вас захочуть створити свій макет у Photoshop, а інші, хто достатньо впевнені у власних силах, вирішать обійтися без нього та одразу взятися за написання коду HTML/CSS. Особисто я завжди віддаю перевагу створенню спочатку у Photoshop макету того, для чого я збираюся писати код, оскільки завдяки цьому я отримую чітке візуальне представлення моєї ідеї. Макет також може стати у пригоді у майбутньому на випадок, коли вам буде потрібно оновити ваш додаток. Вам може може бути набагато простіше впорядкувати та осмислити все у Photoshop, ніж у вашому текстовому редакторі.

Іноді мені також подобається роздруковувати мій макет та відмічати розміри на ньому за допомогою ручки. Це також полегшує мох життя при верстанні. Я впевнений, що по ходу того як ви розвиваєтесь, у вас з'являться ваші власні методи та способи роботи з макетом, і один з етапів розвитку полягає у знаходженні способу, що вам найбільше підходить.


Крок 2: Структура додатка

Facebook app folder structure

Те, як я задав структуру папок, показано вище (і я її задаю звичайно майже так само для кожного проекту). Ви можете зекономити собі купу часу, якщо просто створите шаблон структури пустих папок на вашому жорсткому диску та будете його копіювати кожного разу при створенні нового проекту.

  • css
  • js
  • images
  • index.html

Крок 3: HTML-розмітка

Підготування додаваних файлів

У цьому проекті я скористався інструкцією HTML5 для вказання типу документа, яку, я думаю, більшість з вас вже повинні були використовувати. Щодо таблиці стилів для скидання значень стилів, застосовуваних браузерами за налаштуванням, то я підключив її х бібліотеки YUI Yahoo. Якщо ви не знайомі з такою таблицею, то найбільш узагальнено її можна визначити наступним чином:

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

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

Після файлу для скидання значень стилів я підключив файл із моїми власними CSS-стилями під назвою 'style.css'. Потім я додав останню версію jQuery та мій власний JavaScript-файл, який назвав 'myjava.js' (хоча ми будемо писати код для цього файлу в наступній частині цієї серії). Цей файл дозволить нам користуватися нашим пошуковим фільтром та змінювати контент наших вкладок.

Підготування нашої сторінки

Поки створюємо HTML-версію нашого додатка для Facebook, давайте розмістимо весь код в обгортці шириною 760px. Ми це робимо для того, щоб бути впевненими, що не виходимо за межі області шириною 760px (ширина полотна, на якому Facebook надає вашому додатку можливість розташовуватися). Далі я видалю цю обгортку та CSS-код для неї, перед тим як розмістити додаток на Facebook.

Тепер, коли ми підготували наші додаткові файли та обгортку, настав час перейти до створення головних будівельних блоків нашого застосування. У нашому прикладі це відносно легко зробити, оскільки у нас є тільки елементи div 'maincontent' та 'sidebar' (* для розміщення головного контенту та бокової панелі). До них ми застосуємо класи з тими самими назвами. Ви би могли за бажанням скористатися 'id' замість 'класів', оскільки ці екземпляри div не будуть повторюватися. Проте я завжди віддаю перевагу (хоча я впевнений, що деякі могли би посперечатися з цього приводу) використанню класів для більшості елементів. Я рідко користуюсь id. Я зрозумів, що завдяки цьому мені просто легше працювати. Мені ніколи не потрібно гадати, чи застосував я до якогось елемента 'id' або 'клас'. Це може вам дуже стати у пригоді, особливо, коли ви починаєте додавати jQuery-код для вашого додатка. Тим не менше, обов'язково впевніться, перед тим як взятися за написання коду, чи підходить вам те, що ви точно не будете ніде використовувати id.

Також рекомендується додавати у кінці ваших блоків розмітки кінцевий коментар, що вказує, яку частину розмітки завершено. Завдяки цьому ви знаєте, де закінчується кожний розділ. Мушу признатися, що доволі пізно почав використовувати цей прийом, і в минулому я би міг зекономити собі купу годин, витрачених на те, щоб розібратися у купі коду, намагаючись зрозуміти, де починаються та закінчуються певні блоки.


Крок 4: Головний контент

Facebook app main content

Я не вважав, що нам потрібно у розглядуваному тут додатку використовувати елемент header просто для того, щоб розмістити в ньому логотип, так що я помістив його вгорі div з класом 'maincontent' у його власному div з класом 'logo'. Після цього йде невпорядкований список для реалізації вкладок. Я додав для нього клас під назвою (так, вірно) 'tabs'. Він буде виступати у ролі смужки меню, за допомогою якої будуть відображатися різні сторінки нашого додатка для ведення блога.

Сторінки нашого додатка поміщено у контейнер div, якому я додав клас 'tab_container'. Далі в ньому йдуть чотири елементи div (по одному для кожної вкладки/сторінки). Для всіх них я додав клас під назвою 'tab_content', причому кожний з них має свій власний клас в залежності від положення на сторінці. У першої вкладки є додатковий клас 'tab1', у другої – 'tab2', у третьої – 'tab3' тощо. Ці окремі імена класів будуть використовуватися для того, щоб допомоги нам ідентифікувати кожну вкладку у наступній частині цієї серії при написанні коду jQuery.


Крок 5: Окремі пости блога

webdesigntuts Facebook app blog posts

В окремого поста є клас "post", і він розташовується в div с класом 'tab1', оскільки ця вкладка буде цільовою сторінкою за налаштуванням нашого додатка. Він у свою чергу містить декілька рядкових та якірних елементів, завдяки яким ми будемо мати можливість забарвити елементи блога на зразок дати та автора блога в характерний для Facebook синій колір. Після того як ми написали код елемента div для цього поста, ми можемо просто скопіювати та вставити його для реалізації решти постів. Не захоплюйтеся особливо та не забивайте ваш код, достатньо буде трьох або чотирьох постів, оскільки завдяки цьому ми отримаємо загальне уявлення про те, як буде виглядати наша сторінка та яке враження вона буде викликати. Також я створив елемент span з класом 'line', за допомогою якого реалізується просто горизонтальна лінія, яку будемо використовувати в різних частинах нашого додатка.


Крок 6: Решта вкладок

webdesigntuts Facebook app tabbed pages

Код решти наших вкладок головним чином складається з елементів h3, якірних елементів та елементів для додання абзаців.


Крок 7: Пошуковий фільтр

webdesigntuts Facebook app filter search

Угорі бокової панелі у нас розташовується пошуковий фільтр нашого сайту, реалізований за допомогою простої форми. Ми приведемо його до робочого стану в наступній частині нашої серії за допомогою jQuery. Після форми потім йдуть ще одна горизонтальна лінія, рядковий елемент та текст абзацу для відображення кількості «лайків».


Крок 8: Кнопка для додання лайків Facebook та кнопки

На щастя для нас, за допомогою Facebook вбудувати кнопку для додання лайків (* кнопку Like) дуже просто. Ви можете згенерувати код для вашої власної кнопки для додання лайків або будь-якого іншого їх плаґіна для поширення інформації в соціальній мережі на Facebook Developer Plugins. Після того як згенерували цей код, додайте його до вашого HTML-коду. Вам, можливо, потрібно буде додати якийсь CSS-код, щоб задати позиціонування для цієї кнопки, проте у нашому випадку це не обов'язково.


Крок 9: Заголовки для вкладок

Якщо ви ознайомилися з першою частиною цієї серії (і якщо ви дочитали до цього місця, то я гадаю, що так і є), то ви пам'ятаєте, як я говорив про можливість повторного використання (* концепція розроблення ПЗ, коли виділяють компоненти, придатні для використання в інших проектах). Це справедливіше у випадку з цими заголовками для вкладок, ніж для будь-якої іншої частини нашого коду. Як і у випадку з елементами Facebook, ми можемо повторно скористатися цими заголовками для вкладок та дуже легко їх реалізувати. Вони дуже стають у пригоді, якщо вам потрібно додати додатковий розділ, який легко реалізувати, на ваш сайт.


Крок 10: CSS-код

Тепер настав час взятися за додавання стильового оформлення для нашої HTML-розмітки. Через просте стильове оформлення Facebook у нас не особливо багато CSS-коду. Я поділив його на частини, щоб вам було зручніше. Я поділив його на частини, щоб вам було зручніше.Також важливо відмітити на цьому етапі, що з Facebook може бути важко працювати при тестуванні та підгонці вашого CSS-коду, оскільки він гешує його, тобто коли ви завантажуєте нову версію ваших таблиць стилів, він як і раніше використовує стару. Хоча це й не ідеальний варіант, але я вирішував проблему завдяки доданню '?version=1' в кінці підключеної таблиці стилів у файлі index.html. Кожного разу, коли ви оновлюєте ваш CSS-код та завантажуєте його, ви повинні також оновити номер версії у файлі index.html.


Крок 11: Підготування

Ми починаємо CSS-код зі створення класу для обгортки та пари класів, які я завжди додаю, щоб мати можливість вирівняти елементи по лівому або правому краю.


Крок 11: Складові елементи

Складові елементи для нашого головного контенту наведено нижче:


Крок 13: Типографська розмітка тексту

Напевно, це одна з найважливіших частин CSS-коду нашого додатка для Facebook. Прогадайте з нею, і характерний для Facebook вигляд та враження, яке цей сайт викликає, буде зіпсовано. Придивіться до Facebook та виберіть розмір шрифту, який найбільше відповідає вашим вимогам.


Крок 14: Вкладки


Крок 15: Кнопки

webdesigntuts Facebook app buttons

Ще одною невід'ємною частиною CSS-коду додатка для Facebook є стильове оформлення для кнопки. Я впевнений, ви захочете додати пару з них у ваших додатках. Ми створили їх не за допомогою елемента button, а завдяки якірному елементу, що містить елемент span для додання зображення.


Крок 16: Додаткові компоненти


Завершення...

От і все. Тепер ми маємо код HTML/CSS нашого додатка для Facebook. Сподіваюсь, що вам сподобалась ця частина серії посібників та що ви тепер добре розумієте, як стильове оформлення Facebook може бути передано у вигляді CSS-коду. Завдяки ознайомленню з деякими CSS-властивостями стильового оформлення Facebook та їх використанню ми дійсно можемо зрозуміти, як за допомогою декількох рядків коду в потрібних місцях наш додаток може набути той характерний для Facebook зовнішній вигляд та викликати те характерне для нього враження.

У наступній частині серії ми будемо розбиратися з тим, як підключити наш додаток до платформи Facebook для отримання характерного для Facebook додатка для ведення блога. Ми будемо здійснювати це за допомогою YQL (* Yahoo Query Language – мова запитів Yahoo; SQL-подібна мова, за допомогою якої ви можете запитувати, фільтрувати та об'єднувати дані з веб-сервісів) та API Facebook Graph (* головний спосіб для додатків отримання та додавання даних до соціального графа (спосіб представлення інформації на Facebook)). Також я буду давати вам деякі поради та підказки, щоб зробити ваш додаток більш вражаючим завдяки деяким можливостям jQuery. Так що побачимося у наступній частині, вдалого вам програмування, чуваки!


Посилання на ресурси для подальшого вивчення теми:

  • Design and Code An Integrated Facebook App - Theory
  • Eric Meyer's CSS reset
  • Facebook social plugins
  • Our Webdesigntuts+ app on Facebook
  • Advertisement
    Advertisement
    Looking for something to help kick start your next project?
    Envato Market has a range of items for sale to help get you started.