Использование фреймворка для создания сайта презентация

Обновлено: 07.07.2024

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

Что такое фреймворк

Если обратиться к истории самого слова «фреймворк», то этот неологизм появился в языке относительно недавно, примерно в начале XXI века. С английского слово “framework” можно перевести как «конструкция», «структура», «каркас», «корпус» или «остов». Понимание перевода слова ведет к понимаю сути фреймворка: это специальная программная среда выполнения, программный каркас, который облегчает разработку программ и объединение компонентов, так как уже содержит в себе некую основу, не меняющуюся от конфигурации к конфигурации часть, которую следует лишь наполнить сменными моделями или точками расширения.
В отличие от динамической библиотеки (DLL), которая предоставляет собой лишь набор ограниченных функций, фреймворк является каркасом, согласно которому будет строиться архитектура приложения, то есть он определяет взаимосвязь между компонентами. Более того, фреймворк может содержать много разных по тематике библиотек.

При этом фреймворки можно поделить на следующие виды:

фреймворк программной системы;
фреймворк приложения;
фреймворк концептуальной модели.

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

Сравнение чистого кода, фреймворка и CMS

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

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

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

Третий вариант – установка готовой CMS. Этот путь популярен у людей, далеких от веб-разработки, так как он позволяет легко и быстро создать свой собственный сайт, при этом все необходимые действия можно выполнять из административной панели. Но в то же время этот подход является самым несвободным по сравнению с предыдущими двумя и обладает массой ограничений.

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

HTML/CSS-фреймворки

Bootstrap (или Twitter Bootstrap) – один из самых известных и современных фреймворков, впервые анонсированный в 2011 году. Одно из главных свойств этого фреймворка – адаптивность. Используя Bootstrap, вы можете создать сайт с отзывчивым дизайном: ваш проект будет самостоятельно подстраиваться под размер экрана пользователя. Другие плюсы этого фреймворка: простота в использовании, наличие множества шаблонов и стилей, что значительно экономит время при разработке, согласующийся постраничный дизайн, открытое программное обеспечение. Bootstrap нельзя назвать только HTML/CSS-фреймворком, так как он включает в себя также готовые стили и плагины под jQuery (библиотека на JS).

Foundation – один из ведущих front-end-фреймворков на данный момент. В последних версиях авторы сделали упор на функционал для мобильных устройств. Семантический подход позволяет писать более чистый код на HTML и использовать SCSS. Этот фреймворк хорошо подходит для быстрого прототипирования.

Semantic UI – этот фреймворк, как и Bootstrap, поможет вам создать переносимые интерфейсы. Это достаточно молодой фреймворк, который постоянно развивается; он имеет множество различных кнопок, иконок, изображений, надписей и других элементов.

Uikit – фреймворк, обладающий легкой и модульной структурой. Выделяется на фоне остальных фреймворков двумя особенностями: во-первых, markdown (предварительный просмотр в реальном времени), во-вторых, синтаксическая подсветка для HTML.

Pure by Yahoo! – фреймворк, который содержит небольшие адаптивные CSS-модули, пригодные для использования в любом проекте. Как можно понять из названия, к этому фреймворку стоит обращаться тогда, когда вам нужно использовать некоторые возможности фреймворка, но в то же время вы не хотите использовать слишком тяжелый программный каркас.

PHP-фреймворки

Yii – фреймворк, название которого расшифровывается как “Yes, it is!”, существует уже более 8 лет и постоянно обновляется. У него широкие возможности: одна из самых высоких производительностей (по сравнению с другими фреймворками), кэширование, обработка ошибок, миграция баз данных, возможность использовать и объединяться с jQuery и многое другое. В отличие от других PHP-фреймворков, Yii можно изучить достаточно быстро, работа с ним стабильна и безопасна. Именно по этим причинам данный фреймворк часто советуют тем, кто только начинает свой путь в PHP-программировании.

Laravel – этот фреймворк часто лидирует в разнообразных опросах, касающихся PHP-фреймворков. Например, в 2013 году Laravel был назван самым многообещающим проектом 2014 года, а в 2015 году занял первые места в категориях «Фреймворк корпоративного уровня» и «Фреймворк для личных проектов». Laravel прост в освоении и отлично подходит для небольших и средних проектов, когда необходимо быстро и удобно написать код.

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

CodeIgniter – один из старейших фреймворков, первый публичный релиз которого состоялся в 2006 году. Этот фреймворк имеет массу преимуществ: быстрая установка, хорошая документация, малый вес; с ним вы можете легко реализовать задуманный проект. Именно поэтому некоторые начинают освоение фреймворков именно с CodeIgniter. Немаловажным фактом также являются регулярные релизы новых версий, в которых исправлены баги и добавлены новые возможности.

Phalcon PHP – написанный на языках программирования C, С++ и PHP фреймворк имеет открытый исходный код, а также предлагает разные версии для самых популярных операционных систем: Windows, Linux и Mac. Если взять во внимание тесты, то данный фреймворк является одним из самых производительных. Также Phalcon PHP можно использовать на собственных серверах.

Python-фреймворки

Django – это один из самых известных фреймворков в целом и, безусловно, самый популярный фреймворк на языке Python. Удивительно, но для того, чтобы начать использовать Django, вам даже не нужны глубокое знание языка Python. Отличительной особенностью Django является его принцип DRY, который расшифровывается как “Don’t repeat yourself”. Мысль, выраженная в этой фразе, ведет к тому, что разработчикам не следует повторять те строки кода, которые они уже использовали, и благодаря этому исходный код выглядит более лаконично и понятно. К преимуществам фреймворка можно также отнести стандартную структуру (благодаря которой даже сторонний программист сможет разобраться в коде) и наследование шаблонов. Многие знакомы с Django в качестве системы администрирования, однако эта CMS подойдет только опытным пользователям, знакомым с программированием.

Flask – данный фреймворк также называют расширяемым микрофрейморком. Это связано с тем, что изначально в Flask заложен лишь самый необходимый функционал, который затем можно расширять до уровня, который необходим проекту. Обилие расширений решит практически любую задачу, которую вы перед собой поставите. Поэтому свое ознакомление с Python-фреймворками многие советуют начать именно с Flask.

TurboGears – известный Python-фреймворк с более чем 10-летней историей. Он предназначен для разработки веб-проектов и состоит из различных WSGI-компонентов, в том числе Pylons и CherryPy. Благодаря этому можно говорить о TurboGears как о мощном фреймворке с богатым функционалом. Он поддерживает множество баз данных и форматов обмена данными, также поддерживает различные JavaScript-библиотеки и горизонтальное масштабирование данных.

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

Web2spy – этот фреймворк, как и некоторые другие, основывается на концепции RAD (rapid application development). Иными словами, при его разработке особое внимание было уделено оптимизации процесса создания проекта, чтобы программист мог как можно быстрее создать хороший продукт. Фреймворк имеет открытый исходный код и помогает создавать динамические сайты при помощи языка Python. Это полнофункциональный фреймворк, который содержит компоненты для всех основных функций.

Во второй части будут рассмотрены фреймворки следующих языков программирования: Ruby, Java, JavaScript.

Презентация на тему: " Какой фреймворк нам нужен для web. Постановка вопроса Зачем нужен web framework? В начале были Servlets & JSP JSF появляется позже он хорош, но не совершенен." — Транскрипт:

1 Какой фреймворк нам нужен для web

2 Постановка вопроса Зачем нужен web framework? В начале были Servlets & JSP JSF появляется позже он хорош, но не совершенен Мир многообразен и одного фреймворка для всех и навсегда видимо быть не может. Для разных сегментов разные требования (enterprise, public web, mobile web, …). Всего существует более 50 фреймворков.

3 Возможные точки зрения Какой фреймворк будет самым-самым для для проекта (быстрым, простым, масштабируемым и т.п.) Какой фреймворк лучше всего выбрать на длительную перспективу (кто автор, community, supportability, перспективы развития, …) Какую технологию изчуть, чтобы быть востребованным на рынке труда

4 О каких фреймворках поговорим «Нельзя объять необъятное» Struts 1/2 Wicket JSF Spring MVC Хочется больше но время поджимает

5 Что такое web фреймворк с прагматической точки зрения

6 Запрос пользователя stripped

8 Сервлеты это круто, зачем еще что-то? Сервлеты и JSP в руках упорного но не изобретательного разработчика это страшно

9 Зачем фреймворк Фактически любой фреймворк в обмен на (один или несколько из пунктов) Падение производительности Сложности с масштабированием (иногда вплоть до полной невозможности) Время на изучение, иногда необходима существенная ломка сознания Ограничения функционала и/или совместимости Еще что-то плохое ;-)

11 … дает нам взамен Что-то из нижеследующего Декларативная валидация и/или мапинг параметров/путей Различного рода удобства и/или гибкость в рендеринге ответа (вплоть до своего декларативного языка описания страниц (ZK)) Структурирование кода (Model 1, MVC, IoC и т.п.), что уменьшает стоимость владения кодом ибо последущим поколениями программистов проше понять что/где. Локализация/интернационализация

12 … или даже такое Продвинутое управлние контекстом (session beans, conversation/page scope, и т.п.) Declarative pageflow (декларативное управление последовательностью переходов между страниц?) Ускоренная разработка UI за счет возможности использования RAD (тут мы скорее говорим о некоторых породах JSF). По моему опыту разработка типовых форм на JSF может ускоряеться до 5 раз Автоматизация каких-то традиционно сложных аспектов например AJAX Прозрачная, 2-way интеграция с html дизайном (Tapestry, Wicket) Подмена (частичная) элементов web стека Java стеком (GWT, WebOnSwing, …) /очень популярная тема, не хотели в свое время Java программисты учить web стек/ Упрощенное, декларативное создание web сервисов Защита от double POST И многое, много другое …

14 Struts 1/2 Model 2 фреймворк Помощь в обработки и валидации форм Относительно простая архитектура Легко изучать / расширять / интегрировать Популярен, Struts знает куча людей Быстрый, не ограничивает сервлет контейнер. Документация не супер Морально несколько устарел, not hot Большая путаница между версиями 1 и 2 при поиске Скорее процедурная чем объектная модель

15 Struts: Выводы Эта технология совершенно точно работает Но скорее всего делать сайт на Struts будет не так быстро и не так весело. При этом все равно скорее всего Вам не помешает как минимум Spring IoC

16 JSF светлая сторона Первый и единственный феймворк от офицального производителя, часть JavaEE Очень гибкий Очень быстро делается UI из «стандартных кубиков» Большое сообщество, много книг, много курсов, реально прост в изучении Гибкая декларативная валидация форм, гибкий рендеринг ответа (как пример - можно заставить рендерить в Swing для десктопа) Большое количество стандартных UI компонентов Много других мелких позитивных фишек (типа прозрачный декоаративный AJAX в IceFaces/RichFaces, Enterprise надстройка JBoss SEAM и т.п. Создан с учетом ошибок существовавших в тот момент фреймворков, в т.ч. Struts. Несколько top industry quality реализаций стандарта

17 Казалось бы собаководы рекомендуют?

18 JSF темная сторона В версии 1.х - вообще не пригоден для public web ибо: – Потребляет неоправданно много памяти – Простые вещи могут неожиданно сильно нагружать CPU – Очень большой размер сесии делает фактически невозможной репликацию сессий (если у Вас не bloody enterprise ).

19 … Проблемы с совместимостью версий и интеграцией с JavaEE спецификацией Фактически миграция с JSF 1.1 на JSF 1.2 требует миграции версии контейнера, что возможно далеко не всегда, запуск двух приложений на разных версиях JSF требует модификации контейнера. Отрисовка произвольного web UI из стандартных компонент может быть очень трудоемка Интеграция с JavaScript на странице возможна, но не тривиальна.

20 … Смешивание JSF & JSP превращает web страницы в ад. Реализация REST сервисов непроста Настройка security также может быть не тривиальна Bookmarkable страницы возможно делать с помощью специального разрешения Генерирует много лишенего, очень сложно контролировать точное содержание HTML страницы. В том числе может подключать к странице множество не нужных ресурсов

21 JSF: Выводы JSF исключительно хорош для быстрого создания интранет приложений с упором на бизнес логику и компонентный подход Использовать для public web или чего-то сильно нестандартного можно только если Вы действительно очень хорошо понимаете что Вы делаете (и на всякий случай у Вас есть план Б). В общем лучше не надо

22 Wicket Быстрый, ориентированный на 2- way интеграцию с web дизайнером фремворк Хорош для Java (но не для web) разработчиков Java код и html плотно связаны Активное community, hot topic Быстрый, позволяет хорошо контролировать потребление памяти сессией. Совершенно точно пригоден для public web

23 Что же в нем плохо Изучать реально сложно, Ваш опыт web разработки на «классическом» фреймворке Вам не поможет и даже немного помешает, многие вещи делаются очень странным образом. По умолчанию чудовищные URL страниц, к счастью в последнее время проблема исправляется с помощью специальных аннотаций Управление ресурсами не тривиально. Куда правильнее класть HTML, JavaScript и картинки до сих пор предмет обсуждения. Есть несколько вариантов, но все они не без недостатков

24 Wicket: Выводы Если Вы хорошо знаете Wicket и перед Вам не стоит задача быстро расширять команду, то с Wicket Вы будете счастливы Но для изучения фреймворк крайне не прост. Если у Вас нет опыта работы с ним, новый проект на Wicket лучше не начинать В целом есть варианты и попроще

25 Spring MVC Классический MVC фреймворк Начиная с версии 3 избавился от многих своих традиционных недостатков Быстрый, можно очень хорошо контролировать работу с памятью, URL, наполнение страниц, рендеринг (позволяет для разных случаев использовать разны способы рендеринга страниц) Наверное идеален для REST сервисов Spring IoC фактически индустриальный стандарт Очень и очень популярен, отличная документация, очень прост в обучении Простые вещи делатся просто, сложные сложнее, все логично

26 И на солнце есть пятна Фреймворк достаточно стар, успел набрать плохую карму в ранних реинкарнациях В некоторых случаях конфигурация может быть не столь проста Проект активно ударился в коммерциализацию, что немного раздражает (хотя в сравнении с JSF – Spring просто ангелы) Вообще наверное, есть еще недостатки, но мне сейчас сложно ругать Spring MVC, потому что он мне субъективно нравится. Недостатки Spring MVC взятые из Интернет относятся к ранным версиям.

27 Тут я еще много что хотел рассказать, но время поджимает, если Вас интересует тема, расспросите меня например про GWT в перерыве

28 Тенденции HTML 5 шагает по планете Всё больше людей знает JavaScript JQuery стал крайне популярен Google научился при поиске частично выполнять JavaScript на страницах Все хотят запускать сайты в облаке на куче дешевых серверов по $20 за пучок

29 Мой персональный выбор Enterprise – JSF 2 AND ((Spring IoC + Spring …) OR (EJB SEAM)) Public Spring MVC + Spring * без ORM cо Spring JDBC. Rich Internet Application много JQuery, JQuery плагины и много AJAX.

34 Вдруг хватит времени.

35 Tapestry Быстрый, ориентированный на 2- way интеграцию с web дизайнером фремворк Комонентно ориентирован, причем компоненты могут наследоваться друг от друга Код пишется быстро Ориентирован на решение практических задач, быстрый, экономно расходует память. Есть примеры очень удачных сайтов на tapestry с большим кол-вом посетителей Позволяет контролировать html страницу с точностью до байта. Что бывает крайне необходимо для mobile web сайтов. Содержит много полезных фичей, расширяем.

36 Что не хорошо Не прост для изучения, есть ряд нетривиальных моментов требующих перестройки сознания, документация отвратительная, литературы мало Фактически Tapestry это один человек который лидирует развитие фреймворка с самого начала Не очень популярен Community не развито Получить четкие URL для всех страниц приложения все еще не тривиально, раньше было еще хуже Некоторые очевидные вещи могут делаться достаточно неочевидным образом

37 Tapestry: Выводы Если Вы хорошо знаете Tapestry и перед Вам не стоит задача быстро расширять команду, то с Tapestry Вы будете счастливы Но для изучения фреймворк крайне не прост. Если у Вас нет опыта работы с ним, новый проект на Tapestry лучше не начинать

impress.js — популярный фреймворк предназначенный для создания неординарных, искрящихся профессиональным блеском презентаций, которые демонстрируются просто в браузере * .

В опубликованной несколько дней назад статистике GitHub impress.js занимает 2-е место по количеству звездочек среди проектов, созданных одним автором. Совсем небольшой фреймворк, главный прикол которого заключается в том, что он служит не для создания слайдов, а для отображения переходов между слайдами и, очень часто, для отображения сразу нескольких слайдов в трехмерном пространстве.

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

Я познакомился с этим фреймворком, когда понадобилось сделать презентацию быстрого старта работы с веб-сервисом TheOnlyPage. Поэтому в качестве примера работы с фреймворком impress.js будем использовать несколько первых слайдов этой длинной ~~и скучной~~ презентации.

Общие подходы

Для начала обсудим основы основ, чтобы понять логику применения impress.js.

Фреймворк работает с последовательностью слайдов, каждый слайд в терминологии фреймворка именуется шаг (step).

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

Все слайды размещаются в неком трехмерном пространстве.

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

координаты (x, y, z) точки соответствующей центруслайда;
наклон (поворот) слайда вокруг осей X, Y, и Z.

Кроме положения в пространстве для каждого слайда (шага) может быть указан масштаб слайда.

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

Масштаб слайда не влияет на размеры очередного активного слайда, если это обычный слайд.

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

Установка

Чтобы задействовать impress.js достаточно в html-разметке
подключить соответствующий модуль:

Вот и всё. Никакие вспомогательные таблицы стилей (CSS) в состав фреймворка не входят, только один javscript-модуль.

Далее необходимо проинициировать фреймворк, например, так:

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

Размещение в бесконечном трехмерном пространстве

Вся презентация должна находиться в контейнере, у которого id="impress"

Каждый следующий слайд (шаг) презентации помещается в последовательно расположенном контейнере, класс которого: class="step"

Каждому слайду (шагу) назначаются data- атрибуты, которые определяют его место в пространстве: data-x , data-y , data-z и поворот (вокруг соответствующей оси: X, Y, Z): data-rotate-x , data-rotate-y , data-rotate-z .

Поворот вокруг оси z вместо data-rotate-z может сокращенно определяться атрибутом data-rotate .

Масштаб отображения текущего слайда (по умолчанию 1 ) задается data- атрибутом data-scale .

Пример презентации

А теперь, чтобы увидеть результаты применения data- атрибутов рассмотрим простенький пример, состоящий из нескольких первых слайдов презентации веб-сервиса TheOnlyPage

Чтобы не усложнять, все слайды расположены в одной плоскости.

Первый слайд обзорный – то есть внутри контейнера нет никаких элементов. Чтобы на экране при отображении этого слайда, поместились все 6 слайдов презентации масштаб установлен data-scale="2"

Второй слайд обычный. Его можно видеть в левом верхнем квадрате обзорного слайда, координаты data-x="-700" data-y="-400" . Масштаб установлен data-scale="0.25" чтобы продемонстрировать, что в результате слайд выглядит уменьшенным в общем обзорном слайде, на размеры обычного слайда в активном состоянии масштабирование не влияет, но анимационный эффект масштабирования отрабатывается от второго слайда к третьему, у которого масштаб по умолчанию, равный 1 . Класс slide используется для определения в таблицах стилей (CSS) внешнего вида этого слайда.

Третий слайд обычный. Его можно видеть в центре верхней строки обзорного слайда, координаты data-x="-200" data-y="-300" . Масштаб явно не установлен, значит равен 1 . Слайд повернут на 90 o вокруг оси Z, так как data-rotate="90" . Класс slide2 используется для определения в таблицах стилей (CSS) внешнего вида этого слайда.

Четвертый слайд обычный. Его можно видеть в правом верхней квадрате обзорного слайда, координаты data-x="700" data-y="-500" . Слайд повернут на 180 o вокруг оси Z, так как data-rotate="180" . Класс slide2 используется для определения в таблицах стилей (CSS) внешнего вида этого слайда.

Пятый, шестой и седьмой слайды — обычные. Эти слайды расположены последовательно справа налево в нижней строке экрана. Угол поворота каждого следующего вокруг оси Z на 90 o больше предыдущего: data-rotate="270", data-rotate="0", data-rotate="90" , соответственно. Классы slide и slide1 используются для определения в таблицах стилей (CSS) внешнего вида этих слайдов.

При переходе от слайда к слайду меняется хэш (hash) адреса в адресной строке браузера, в нашем примере адреса слайдов будут следующие:

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

Как видите, хэш адреса каждого слайда содержит уникальный id соответствующего слайда.

Классы динамически переназначаемые в процессе презентации

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

В нашем примере, присутствует следующий html-код:

После инициации презентации, вызовом соответствующей функции:

для элемента body устанавливается: class="impress-enabled" .

Также для элемента body устанавливается класс, указывающий на первый слайд ( шаг ), в нашем примере это будет class="impress-on-overview" , а в общем случае имя этого класса задается конструкцией: "impress-on-" + id активного слайда (шага).

Для первого слайда устанавливаются классы: class="present active" .

Для остальных слайдов (шагов) устанавливаются класс: class="future"

При дальнейшем просмотре слайдов в элементе body класс, определяемый уникальным id активного слайда имеет вид: "impress-on-" + id активного слайда (шага).

Для просмотренных слайдов устанавливается класс class="past"

Для активного слайда: class="present active"

Оставшиеся непросмотренные слайды, все также содержат класс: class="future"

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

Используемые клавиши

impress.js позволяет перемещаться циклически по слайдам презентации то есть с последнего слайда презентации идет переход на первый слайд.

Переход к следующему слайду задается нажатием одной из клавиш:

таб, пробел, стрелка вправо, стрелка вниз, Page Down

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

Статья обновлена в 2021 году.

Фреймворк: что это?

Рассмотрим слово "фреймворк", которое является действительно новым неологизмом, не так давно появившимся в нашем языке. Слово начали использовать примерно в первой половине XXI века. Если рассматривать перевод слова с английского - это "конструкция" или "структура".

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

Классификация фреймворков:

Фреймворки приложений;
Фреймворки программных моделей;
Фреймворки концептуальных моделей.

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

Сравниваем CMS, чистый код и фреймворк

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

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

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

HTML/CSS-фреймворки и библиотеки: их главные особенности

Bootstrap - этот фреймворк (до 4й версии, в 5й версии - это уже библиотека) является невероятно популярным и востребованным, его представили еще в начале 2011 года. Адаптивность (адаптивная верстка) - его главное преимущество. Bootstrap позволяет создавать проекты с невероятно отзывчивым, стильным дизайном - проект будет автоматически подстраиваться, учитывая размер экрана компьютера или мобильного устройства пользователя, просматривающего сайт. К преимуществам относится: большое количество стилей, шаблонов, постраничный дизайн - это существенно облегчает создание сайта.

Обратите вниманию, что для изучения HTML-фреймворков вам потребуются базовые знания HTML и CSS. Изучить HTML/CSS можно на наших курсах: курс HTML/CSS, курс HTML/CSS Advanced.

Pure by Yahoo! - в данном фреймворке есть несколько небольших CSS-модулей, которые хорошо подойдут для любого современного проекта. Название фреймворка, характеризует его основную особенность - ничего лишнего, только необходимый, ничем не утяжеленный программный каркас, который прекрасно подойдет для создания сайта.
Официальная страница purecss.io

PHP-фреймворки: основные особенности

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

Python-фреймворки: главные особенности

Javascript фреймворки и библиотеки

Язык Javascript очень популярный в 2021 году и на нем создается большое количество веб-приложений. Javascript используют как в Frontend, так и в Backend. Что такое Frontend и Backend вы можете узнать в этой статье:

Прежде чем приступать к изучению React или VueJS вам необходимо освоить современный Javascript. Изучить современный Javascript вы можете с помощью различных онлайн-курсов, в том числе с помощью нашего интерактивного курса Modern Javascript. Начните обучение современному Javascript прямо сейчас.

Также вам потребуются знания NodeJs. О том, что такое NodeJS вы можете прочитать здесь.

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

Итак, мы рассмотрели наиболее популярные HTML/CSS, PHP и Python-фреймворки, Javascript фреймворки и библиотеки, которые помогут вам при создании сайтов. Какой из них выбрать — зависит от вашего проекта и необходимых для реализации условий и характеристик фреймворка - выбор за вами. И, конечно, каждый фреймворк требует изучения и практики применения, только в умелых руках, он творит настоящие чудеса!

Читайте также: