Advertisement
  1. Web Design
  2. CSS

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

by
Read Time:14 minsLanguages:
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

Russian (Pусский) 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 AppDesign and Code an Integrated Facebook AppDesign and Code an Integrated Facebook App

В этой части серии руководств мы будем создавать HTML-разметку для вышеуказанного макета и добавлять некоторые свойства стилевого оформления Facebook, за счет которых наш дизайн будет вызывать то характерное для Facebook впечатление. Так что оставайтесь со мной, приготовьте себе чашку чаю, и удачного вам программирования!


Шаг 1: Проваливая подготовку, вы готовитесь к провалу

Всегда лучше начинать что-либо делать с составления некоторого предварительного плана. Некоторые из вас захотят создать свой макет в Photoshop, а другие, кто достаточно уверены в собственных силах, решат обойтись без него и сразу приступить к написанию кода HTML/CSS. Лично я всегда предпочитаю для начала создать в Photoshop макет того, для чего я собираюсь писать код, поскольку благодаря этому я получаю четкое визуальное представление моей идеи. Макет также может пригодиться в будущем на случай, когда вам будет необходимо обновить ваше приложение. Вам может быть намного проще упорядочить и осмыслить все в Photoshop, чем в вашем текстовом редакторе.

Иногда мне также нравится распечатывать мой макет и отмечать размеры на нем при помощи ручки. Это также облегчает мне жизнь при верстке. Я уверен, что по мере того как вы развиваетесь, у вас появятся ваши собственные методы и способы работы с макетом, и одним из этапов развития заключается в нахождении наиболее подходящего вам способа.


Шаг 2: Структура приложения

Facebook app folder structureFacebook app folder structureFacebook 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 contentFacebook app main contentFacebook app main content

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

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


Шаг 5: Отдельные посты блога

webdesigntuts Facebook app blog postswebdesigntuts Facebook app blog postswebdesigntuts Facebook app blog posts

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


Шаг 6: Остальные вкладки

webdesigntuts Facebook app tabbed pageswebdesigntuts Facebook app tabbed pageswebdesigntuts Facebook app tabbed pages

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


Шаг 7: Поисковый фильтр

webdesigntuts Facebook app filter searchwebdesigntuts Facebook app filter searchwebdesigntuts 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-код с создания класса для обертки и пары классов, которые я всегда добавляю, чтобы иметь возможность выравнивать элементы по левому или правому краю.


Шаг 12: Составные элементы

Составные элементы для нашего основного контента представлены ниже:


Шаг 13: Типографская разметка текста

Вероятно, это одна из наиболее важных частей CSS-кода нашего приложения для Facebook. Прогадайте с ней, и характерный для Facebook вид и вызываемое им впечатление вашего приложения будут испорчены. Приглядитесь к Facebook и выберите наиболее подходящий под ваши требования размер шрифта.


Шаг 14: Вкладки


Шаг 15: Кнопки

webdesigntuts Facebook app buttonswebdesigntuts Facebook app buttonswebdesigntuts 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.