html текст
All interests
  • All interests
  • Design
  • Food
  • Gadgets
  • Humor
  • News
  • Photo
  • Travel
  • Video
Click to see the next recommended page
Like it
Don't like
Add to Favorites

7 технологий, которые изменят веб

03.03.2014 | Автор: Мэтт Дойл (Matt Doyle), перевод: Adlogic Systems  

От переводчика: Сотрудники Adlogic Systems внимательно следят за новыми тенденциями в области веб-разработки. Представляем вниманию читателей обзор 7 удивительных технологий, обещающих изменить как процесс разработки сайтов, так и их обличие. Английский оригинал статьи доступен на сайте elated.com.

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

1. Meteor: все для клиента

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

Исторически сложилось, что веб-сайты в основном строятся по принципу «сделать все на сервере и отправить HTML в бессловесный браузер». Разработчики Meteor утверждают, что этот метод устарел. Современные браузеры поумнели и способны самостоятельно выполнять основной код приложения, забирать данные с сервера и множества сторонних веб-сервисов. В этой связи не имеет смысла строить веб по-старому, гораздо удобнее браузеру забирать только необходимые данные, если нужно из нескольких источников, и самостоятельно формировать разметку.

Приложения Meteor пишутся на старых добрых HTML, CSS и JavaScript. Ключевой момент — JavaScript может выполняться на сервере (поверх Meteor + Node.js) и/или в браузере. Серверный Meteor пакует скрипты и другие нужные ресурсы и отправляет их в браузер в сжатом виде.

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

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

Похоже, Meteor  превосходный способ разработки современных веб-приложений; автору не терпится самому его попробовать. В настоящее время проект находится в стадии «предпросмотра», а версия 1.0 появится через несколько месяцев. Между тем, Саша Грейф (Sacha Greif) написал отличную статью (EN) о том, как создать приложение на Meteor всего за 45 минут.

2. Tumult Hype 2.0: до свидания, флеш

Mac-приложение Hype от Tumult вышло пару лет назад, но его последняя версия 2.0 наконец-то заняла свою нишу. Hype позволяет конструировать интерактивный анимированный веб-контент по ключевым кадрам с помощью инструментов рисования и временной шкалы. А затем экспортировать результат парой щелчков мыши в стандартные HTML5, CSS и JavaScript с картинками, работающие во всех настольных и — что немаловажно — мобильных браузерах. Это как аналог Flash Professional (приложение от Adobe), но для HTML5 и гораздо дешевле.

Автор изучал Hype 2.0 несколько недель и уверен, что хотя приложению не хватает многих продвинутых функций Flash Professional, оно вполне пригодно для создания профессионального интерактивного веб-контента. Оцените игры и инфографику, сделанные на Hype.

Главное в новой версии 2.0: бесплатное приложение Hype Reflect для моментального предпросмотра на iPhone и iPad, значительно улучшенная поддержка мобильного контента, улучшенная поддержка аудио, а также движения по кривой траектории. В Macworld есть неплохой обзор (EN) новых возможностей приложения.

3. Sketch: мечта веб-дизайнера

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

Sketch от Bohemian Coding предназначен именно для этой роли. Как и Hype, приложение Sketch работает под Mac и прошло путь от относительно простого дизайнерского инструмента до красивой, полнофункциональной программы, чрезвычайно удобной для интерфейсных дизайнеров. Sketch может похвастаться:

— Векторной графикой для неразрушающего редактирования и независимости от разрешения

— Встроенной поддержкой типографской сетки

— Поддержкой нескольких страниц и рабочих областей в одном документе

— Удобной нарезкой и обрезкой изображений

— Стилями слоев для простого добавления эффектов, например заливки, границ и теней

Саймон (Simon) в команде Elated Communications использует эту программу почти для всей своей веб-дизайнерской работы. Его статья (EN) о Sketch — отличный обзор ее возможностей.

4. LiveStyle: моментальное редактирование CSS в обе стороны

LiveStyle от Emmet — волшебное дополнение Chrome и Safari для моментального редактирования CSS.

Может быть вы слышали о дополнениях вроде LiveReload, отслеживающих изменения в локальных CSS-файлах и автоматически обновляющих стили в браузере без перезагрузки страницы?

LiveStyle еще круче. С ним вам даже не нужно ничего сохранять! При изменении CSS в редакторе дополнение мгновенно обновляет стили в браузере, а при изменении в браузере (встроенными средствами) меняется код в редакторе.

С этим дополнением можно редактировать любые стили даже без локальной копии файла, а также сжатый CSS! Например, видео на главной странице сайта дополнения показывает прямое редактирование страниц Facebook и Google.

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

5. Bootstrap 3: современный клиентский фреймворк с подходом «от мобильного»

Bootstrap — это фреймворк клиентской части веб-приложений, быстро набирающий популярность в последнее время. Изначально разработанный под Твиттер, он превратился в стремительно растущий проект с открытым исходным кодом.

Вышедшая в августе 3 версия может похвастаться в том числе такими инновациями:

— Построение «от мобильного»: фреймворк позволяет верстать сайт сначала для мобильных устройств, а затем легко масштабировать под широкие окна настольных браузеров. Результат полностью адаптивен и автоматически подстраивается к различным размерам экранов.

— Одна из лучших типографских сеток: сетка очень приятна в использовании, в ней есть контрольные точки для телефонов, планшетов, узких и широких настольных экранов.

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

— Отличная программа настройки: с ее помощью можно настроить почти любой аспект фреймворка и создать версию на свой вкус. Результат мгновенно компилируется в браузере, загружается и готов для быстрого развертывания.

Автору очень нравится Bootstrap; пока что это его главный фреймворк для новых веб-сайтов. Оцените возможности Bootstrap на примерах.

6. Macaw: умная программа-верстальщик

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

Многие графические редакторы, Fireworks к примеру, поддерживают экспорт в веб-страницу но результат обычно плачевен: уродливый многострочный HTML и бессмысленные CSS-классы.

Пришло время Macaw. По словам разработчиков приложения, оно распознает элементы дизайна на семантическом уровне, выдавая четкие, сжатые и понятные HTML и CSS, близкие к результату работы верстальщика.

Основные особенности программы:

— Глобальные классы: возможность создавать общие, часто используемые стили и сохранять их в виде глобальных классов. Чтобы впоследствии изменить все использующие этот класс элементы, достаточно просто отредактировать класс.

— Соединение селекторов: умный движок Alchemy организует CSS-селекторы наиболее быстрым и эффективным способом, создавая красивый, удобный для чтения код.

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

— Резиновые типографские сетки и адаптивные макеты: в Macaw к документу произвольного размера применяется резиновая типографская сетка. Дизайнер может задавать контрольные точки для адаптивных переходов, а затем настраивать стили для разных размеров страницы.

— Экспорт руководств по оформлению: Macaw может даже сам создать страницу, показывающую использованные в дизайне цвета, шрифтовое оформление, сетки и классы. Невероятно!

Пока что Macaw еще не доступен в продаже, но есть видео, демонстрирующее фантастические возможности приложения.

7. Famo.us: плавный веб и 3D

И последняя, но не менее удивительная технология в обзоре — JavaScript-движок Famo.us, обещающий полностью перевернуть веб-интерфейсы. По сути, Famo.us обходит традиционные способы отрисовки 3D-анимаций в браузерах и общается с графическим процессором напрямую, давая сверхплавную графику с аппаратным ускорением.

На самом деле замечательно то, что все это делается с помощью JavaScript, позволяя интегрировать эту мощь с более традиционными CSS и DOM. Движок также бесплатен для разработчиков (авторы собираются заработать на сделках с производителями аппаратуры). Он быстро и без проблем работает в широком диапазоне браузеров, от современных настольных до iPhone 3GS, что действительно впечатляет.

Автор должен предупредить не судить книгу по 3D-обложке и ознакомиться с ее возможностями для двумерных интерфейсов. Вероятно, именно для них Famo.us и будет использоваться в ближайшее время. Представьте «игровые», тактильные мультимедиа-интерфейсы наподобие некоторых в iOS 7. Из видео ниже (на примере iPad) можно понять, что реализуемо на этом движке:

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

А какие новые веб-технологии вдохновляют вас?

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

Читать дальше
Twitter
Одноклассники
Мой Мир

материал с cmsmagazine.ru

1172
    +1154 surfers

      Add

      You can create thematic collections and keep, for instance, all recipes in one place so you will never lose them.

      No images found
      Previous Next 0 / 0
      500
      • Advertisement
      • Animals
      • Architecture
      • Art
      • Auto
      • Aviation
      • Books
      • Cartoons
      • Celebrities
      • Children
      • Culture
      • Design
      • Economics
      • Education
      • Entertainment
      • Fashion
      • Fitness
      • Food
      • Gadgets
      • Games
      • Health
      • History
      • Hobby
      • Humor
      • Interior
      • Moto
      • Movies
      • Music
      • Nature
      • News
      • Photo
      • Pictures
      • Politics
      • Psychology
      • Science
      • Society
      • Sport
      • Technology
      • Travel
      • Video
      • Weapons
      • Web
      • Work
        Submit
        Valid formats are JPG, PNG, GIF.
        Not more than 5 Мb, please.
        30
        surfingbird.ru/site/
        RSS format guidelines
        500
        • Advertisement
        • Animals
        • Architecture
        • Art
        • Auto
        • Aviation
        • Books
        • Cartoons
        • Celebrities
        • Children
        • Culture
        • Design
        • Economics
        • Education
        • Entertainment
        • Fashion
        • Fitness
        • Food
        • Gadgets
        • Games
        • Health
        • History
        • Hobby
        • Humor
        • Interior
        • Moto
        • Movies
        • Music
        • Nature
        • News
        • Photo
        • Pictures
        • Politics
        • Psychology
        • Science
        • Society
        • Sport
        • Technology
        • Travel
        • Video
        • Weapons
        • Web
        • Work

          Submit

          Thank you! Wait for moderation.

          Тебе это не нравится?

          You can block the domain, tag, user or channel, and we'll stop recommend it to you. You can always unblock them in your settings.

          • anatoly.denisov
          • adobe
          • css
          • дизайнеры
          • html
          • javascript
          • фотошоп
          • графика
          • домен cmsmagazine.ru

          Get a link

          Спасибо, твоя жалоба принята.

          Log on to Surfingbird

          Recover
          Sign up

          or

          Welcome to Surfingbird.com!

          You'll find thousands of interesting pages, photos, and videos inside.
          Join!

          • Personal
            recommendations

          • Stash
            interesting and useful stuff

          • Anywhere,
            anytime

          Do we already know you? Login or restore the password.

          Close

          Add to collection

             

            Facebook

            Ваш профиль на рассмотрении, обновите страницу через несколько секунд

            Facebook

            К сожалению, вы не попадаете под условия акции