Технологии которые изменят Веб

Мир сайтостроениея огромными шагами идет движется вперед и стремительно меняется. Возникает ощущение, что новые фреймворки и дизайнерские решения выходят каждый день. Сотрудники Adlogic Systems внимательно следят за новыми трендами в области веб-разработки. Давайте рассмотрим 6 технологий, которые обещают изменить процесс разработки сайтов и их обличие.

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

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

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

Приложения Meteor написаны на старым «дедовским» способом: на HTML, CSS и JavaScript. Ключевым моментом является — JavaScript, который может выполняться на сервере. Серверный Meteor запаковывает скрипты и другие немаловажные ресурсы и отправляет в браузер в сжатом виде.

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

Возможности фреймворка:

  • поддержка нескольких шаблонизаторов
  • кэширование БД в браузере для быстрого доступа
  • легкое развертывание приложений на сервере

2. Tumult Hype 2.0: прощай, флеш

Данное приложение было разработано для Mac и вышло несколько лет назад, но его последняя версия 2.0 быстрым темпом занимает свое место на рынке. Tumult Hype дает возможность конструировать интерактивный анимированный веб-контент по ключевым кадрам при помощи временной шкалы и инструментов рисования. После этого идет экспорт результата за пару кликов мышки в стандартные HTML5, CSS и JS с изображениями, которые работают во всех мобильных браузерах. Hype можно соотнести с Flash Professional от Adobe, но для HTML5. Приложению, конечно, не хватает многих продвинутых функций Flash, но оно довольно-таки неплохо показало себя в создании профессионального интерактивного web-контента. В версию 2.0 было добавлено бесплатное приложение Hyper Reflect для моментального пред просмотра на Яблочных гаджетах.

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

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

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

Возможности Sketch

  • Векторная графика для неразрушающего редактирования и независимости от разрешения
  • Встроенная поддержка типографской сетки
  • Поддержка нескольких страниц и рабочих областей в одном документе
  • Удобная нарезка и обрезка изображений
  • Стили слоев для простого добавления эффектов (заливки, границ, теней)

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

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

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

5. Bootstrap 3: Современный фреймворк

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

Плюсы Bootstrap:

  • Построение «от мобильного» — фреймворк позволяет верстать сайт сначала для мобильных устройств, а затем простыми действиями масштабировать под широкие окна настольных экранов. В итоге, вы получаете полностью адаптивный сайт, который автоматически подстраивается под разные разрешения экранов.
  • Одна из лучших типографских сеток — в данной сетке имеются контрольные точки для телефонов, планшетов, широких и узких разрешений.
  • Красивая базовая тема — изначально Бутстрап выполнен в минималистическом стиле, но теперь можно подключить привлекательную тему с подборкой цветовой гаммы.
  • Программа настройки — с ее помощью можно настроить почти любой аспект фреймворка и придумать версию на свой вкус.

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

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

Плюсы и особенности Macaw:

  • Глобальные классы: можно создавать часто используемые стили и сохранять их в виде глобальных классов.
  • Соединение селекторов: умный движок организует CSS-селекторы наиболее быстрым и эффективным способом, создавая удобный для чтения код.
  • Преобразование абсолютного расположения в статическое
  • Резиновые типографские сетки и адаптивные макеты