—»     —»   Скорая разработка каркасов для приложений любого устройства с помощью Foundation
  Раздел: Фреймворки и Платформы, CSS/Style Sheets   Комментариев: 1  

Скорая разработка каркасов для приложений любого устройства с помощью Foundation

Вы наверняка слышали о дизайнах веб-сайта, который подстраивается под возможности устройства, с помощью которого пользователь посещает ваш веб-сайт? На сегодняшний день это одна из актуальнейших тем и проблем. Это очевидно хотя бы потому, что численность «мобильных» пользователей уже в 4 раза превышает численность пользователей интернета посредством настольного ПК, и по прогнозам в ближайшие пару лет только на территории США практически не останется пользователей с настольными ПК.

Все это подталкивает к тому концепту, который Джереми Кит (Jeremy Keith) прозвал «единый Веб». Данный концепт предусматривает то, что неважно, с какого устройства вы сидите в интернете, вам все равно будет удобно проводить время на сайтах и взаимодействовать с ними.

Но для подобной единой системы миру потребуются очень сильные веб-сайты, которые умели бы подстраиваться под каждое устройство, а для этого нужны мощные инструменты, способные если не самостоятельно все создавать, то хотя бы сильно помогать нам в разработке. Именно поэтому команда из ZURB разработала специальную платформу для разработки кода каркасов для подобных веб-сайтов. Инструмент получил многообещающее название «Foundation».

Проблема с общим CSS

На протяжении лет, в ZURB использовался и обновлялся глобальный CSS-файл, который включал в себя сетку 960, типографику, кнопки и другие общие элементы. Проблема заключается в том, что этот глобальный CSS не разрабатывался для того, чтобы им пользовался кто-то еще, так что желающим нужно быть очень подкованными, так как к данному файлу не представлено даже документации.

Скорая разработка каркасов для приложений любого устройства с помощью Foundation

Наш CSS-стайл оснащен множеством отличных глобальных элементов, но все всё это не было подкреплено документацией и, конечно же, не было подготовлено к использованию на других устройствах.

Большая проблема заключалась в том, что он не был предусмотрен для работы с мобильными устройствами. Мы столкнулись с той же проблемой, что и многие дизайнеры: создание каркаса шириной в 1000 пикселей, наложение его на 960-пиксельную сетку. Наши инструменты были разработаны специально с поддержкой подобного процесса работы. Итак, мы переписали их под Foundation – платформу, позволяющую каждому очень быстро разрабатывать каркасы.

Скорая разработка каркасов для приложений любого устройства с помощью Foundation

Foundation распространяется по лицензионному соглашению MIT, и включает в себя сетку произвольной ширины с возможностью разветвления; стили для мобильных устройств, кнопки и шрифты; возможно делить каркас на вкладки и создавать пагинацию; формы, а также полезные плагины javascript. Всё это было проработано для достижения нескольких целей:

* Быстро обучить новых дизайнеров, как в рамках ZURB, так и за ее пределами, работать в единой платформе;
* Быстро разрабатывать веб-сайты как для настольных ПК, так и для мобильных устройств;
* Без труда редактировать и выполнять каркасы с возможностью преобразования в код для конкретных проектов или клиентов.

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

Как же работает Foundation?

Ядро Foundation можно объяснить несколькими пунктами:

12-колоночная сетка с процентным соотношением и произвольным значением максимальной ширины
Сетку можно разветвить и использовать даже для крайне сложных разметок, и работать сие чудо будет даже в IE7. Сетка автоматически подстраивается под девайсы с дисплеем меньшего размера.

Стили изображения, не зависящие от пикселей
В Foundation изображения масштабируются автоматически в соответствии с размерами сетки.

Элементы разметки и пользовательского интерфейса
Foundation включает основные элементы типа шрифтов и форм, а также вкладки, систему пагинации и так далее.

Классы для работы на мобильных устройствах
Скорая разработка каркасов заключается во встроенном функционале, к которому можно с легкостью приспособиться. Foundation позволяет вам без труда спрятать или отобразить элементы в зависимости от того, на каком устройстве будет открыт веб-сайт (настольный ПК, планшет или смартфон).

Мы умышленно разработали Foundation в качестве отправной точки, а не в качестве профессионального инструмента для разработки стилей. Мы внедрили некоторые стили, которые помогают значительно быстрее разработать нечто, что уже можно использовать, но оно не будет полностью завершено относительно стилей. Всё в Foundation должно быть отредактировано, включая даже стили кнопок, форм, шрифты и элементы разметки.

Сетка

В интернете можно отыскать множество различных сеток, но, к сожалению, у каждой из них есть свои недостатки. Foundation изначально разрабатывался так, чтобы охватить и исправить все эти недостатки.

Гибкость

Важным аспектом любого дизайна в настоящее время является его гибкость, способность подстраиваться под размеры и ориентацию того или иного дисплея. Сетка в Foundation полностью «резиновая», так как основывается на процентном соотношении, и в браузерах можно наблюдать безупречную работу (включая даже IE7). Почему не поддерживается IE6? Ответ прост, так как даже Microsoft уже официально заявили о прекращении эры IE6. HTML-разметка также очень проста. Вот пример применения сетки на практике, причем она значительно усложнена:

<div class="row">
<div class="eight columns">
<p>…</p>
<div class="row">
<div class="six columns">
<h5>Another Section (.six.columns)</h5>
<p>…</p>
</div>
<div class="six columns">
<h5>Another Section (.six.columns)</h5>
<p>…</p>
</div>
</div>
<p>Now the nested row has been closed, and we're back to the original eight-column section.</p>
</div>
</div>

Вы можете ознакомиться с кодом вышеприведенного примера.

Скорая разработка каркасов для приложений любого устройства с помощью Foundation

Давайте мы расскажем вам о некоторых составляющих сетки, которые также подстраиваются под окно браузера.

Способность к реагированию

Второй важный аспект заключается в способности сетки без труда адаптироваться к небольшим девайсам и их уникальным свойствам. Мы постарались уместить данную способность в три функции:

* На небольших гаджетах (типа мобильного телефона) сетка просто трансформируется в одну высокую колонку и все отображается сверху вниз.

* Мы также включили блочные классы, которые являются определяющими для UL-ов.

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

<div class="hide-on-phones">
<p>This is a paragraph that we don't want to see on small devices.</p>
</div>
<div class="show-on-phones">
<p>This paragraph will be shown only on phones, not on tablets or desktops.</p>
</div>

Еще одно интересное применение классов заключается в разработке общего восприятия мобильных устройств: расположение навигации снизу. Как раз зеркально тому, как сейчас распространено. Можно сделать следующим образом:

<nav class="hide-on-phones">
<ul>
<li><a href=#>…<a></li>
<li><a href=#>…<a></li>
<li><a href=#>…<a></li>
</ul>
</nav>

<nav class="show-on-phones">
<dl class="mobile tabs">
<dd><a href="#">…</a></dd>
<dd><a href="#">…</a></dd>
<dd><a href="#">…</a></dd>
</dl>
</nav>

Скорая разработка каркасов для приложений любого устройства с помощью Foundation

Foundation позволяет вам единожды написать код, и отображать его на разных устройствах.

Семантика

Здесь все немного сложнее. Важно сразу отметить, что сеточные системы по своей природе уже не семантические. Здесь есть доля правды. Системы описывают свои функции, но они разделяют данные и отображение.

Нам не хотелось основывать платформу Foundation на каком-то другом расширении типа LESS. LESS – это отличный инструмент, позволяющий вам использовать переменные, ярлыки и многое другое из CSS, но мы не хотели полагаться на него и сознательно создавать еще одну преграду в использовании Foundation. Недавняя статья, о которой мы говорили выше, на самом деле помогает избежать проблемы с данными и отображением в сетах с помощью LESS. Это несомненно отлично, но Foundation не позволяет этого сделать. И вот почему…

Все эти методы – временны. Данному методу в следующем месяце или следующем году придет на смену другая такая же, а сами инструменты значительно поменяются. Инструменты типа LESS помогают нам немного ближе подобраться к истинному решению. Нам хотелось, чтобы Foundation стал быстрейшим способом разработки каркасов веб-сайтов, ориентированных под любое устройства. Поэтому мы решили заплатить немного дешевле, и на по-настоящему разделили разметку.

Примеры скорой разработки каркасов

Давайте познакомимся с одним из последних примеров, который был разработан с помощью Foundation. Каждый год мы проводим 24-часовой дизайн-марафон среди некоммерческих организаций, и предоставляем одной из них новый веб-сайт. В этом году, мы выбрали Rebekah Children’s Services, отличную организацию, оказывающую помощь в усыновлении и помощью детям с врожденными недостатками в развитии.

В этом году мы хотели сделать действительно качественный веб-сайт, но времени у нас было в обрез. Используя лишь Foundation, мы начали разработку каркаса веб-сайта на основе некоторых набросков, которые уже были подготовлены. За два часа мы завершили разработку каркаса.

Скорая разработка каркасов для приложений любого устройства с помощью Foundation

Используя Foundation, мы создали каркас, который можно наблюдать с левой стороны, за два часа (включая каждый экран), а затем начали редактировать его до того момента, пока он не стал полноценным завешенным веб-сайтом (который можно наблюдать с правой стороны).

Это не очень привлекательно, но это дает нам все нужные возможности. В каркасе мы использовали лишь малость собственных стилей, чтобы придать более аккуратный вид визуальным эффектам.

Как только мы завершили каркас, у нас появилась возможность оформить и визуальный дизайн, а также применить основу кода Foundation, чтобы получить полноценную версию веб-сайта. Финальный веб-сайт полностью основан на платформе Foundation, с добавленными поверх стилями.

Как дальше развивать

Недавно мы запустили приложение, которое позволяет получать отзывы о дизайнах и веб-сайтах. Оно называется Spur, и приложение само по себе достаточно задорное. Было интересно над ним работать.

Spur предлагает некоторые инструменты и действия, а также простенькие формы и достаточно сложную анимацию на javascript и HTML. Процесс адаптации этого всего к мобильному устройству может быть настоящей головной болью, но так как мы изначально использовали Foundation, нам не пришлось мучиться, и мы достаточно скоро выдали готовое приложение.

Скорая разработка каркасов для приложений любого устройства с помощью Foundation

Spur на настольном ПК отличается от Spur на экране мобильного устройств (типа iPhone).

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

Востребованность скорой разработки каркасов

Закончилось то время, когда надо было 960-пиксельную сетку накладывать на каркас, сделанный в Photoshop. Хотя, некоторые все еще работают в таких условиях. Мобильные устройства (или давайте лучше скажем «устройства, помимо ноутбуков и настольных ПК») уже давно заполонили мир.

Не стоит делать пиксельный дизайн веб-сайта для настольных ПК до тех пока, пока вы не подумаете и о других устройствах. Привыкайте разрабатывать шаблоны сразу под несколько разрешений, а затем наполняйте веб-сайт функционалом и элементами взаимодействия.

Мы разработали Foundation специально для того, чтобы иметь возможность быстро разрабатывать лучшие веб-сайты и приложения для себя и для клиентов. Нам было настолько важно разработать подобное приложение, что теперь Foundation распространяется абсолютно бесплатно по лицензионному соглашению MIT, и так будет всегда! Если вы опробуете его, и вам понравится, пожалуйста, дайте нам знать. Нам нравится получать лестные отзывы, а также нравится слышать об ошибках и недочетах, которые следует исправить.

Наша индустрия менялась с годами, и будет продолжать менять без остановки, возможно даже еще быстрее и критичнее. А мы лишь обязаны поспевать за технологиями. Надеемся, что хоть как-то помогли вам в нашем с вами нелегком деле.

Постовой: Помогайте своим сокурсникам, загружая учебные материалы - СтудСетка: удобный студенческий файлообменник.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Опубликовал Design FactoRy   Прочитано (раз): 10623   |   Оставлено комментариев: 1
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 23 ноября 2011 @ 14:24
Написал: krapan88 — группа: Читатели  
На сайте с: 31.01.2010   |   Публикаций: 0   |   Комментариев: 59
ICQ: --- не указано ---
а интересная штучка. как раз недавно для wordoress себе приличный framework нашел, но и этот полезен будет
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица США
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Спонсоры проекта
Баннер в сайдбаре 1 (сквозной)
Баннер в сайдбаре 2 (сквозной)
Спонсоры проекта
Баннер в сайдбаре 3 (сквозной)
Баннер в сайдбаре 4 (сквозной)
Популярные публикации







Свежие шаблоны сайтов каждый день
С миру по нитке
«    Март 2024    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
25262728293031