5 легких альтернатив jQuery на поле разработок для мобильных устройств


Содержание

5 легких альтернатив jQuery на поле разработок для мобильных устройств

Группа: Главные администраторы
Сообщений: 14349
Регистрация: 12.10.2007
Из: Twilight Zone
Пользователь №: 1

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

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

jQuery и мобильные устройства.

Первая проблема jQuery – это тачи. Обработка тачей по средством эвента ‘click’ не является лучшей идеей. Благодаря тому, что мобильным браузерам приходиться поддерживать эвент click у нас это получится, но дорогой ценой. На мобильных устройствах click эвент не вызывается пока не пройдет 300мс после того как пользователь коснулся экрана, для определения скроллинг ли это или двойной тап или что-то другое и сработает обработка эвента click, и это может показаться незначительным, но реакция на другое действие через другие 300мс вызовет ощутимую задержку.

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

Мобильная версия WebKit (iOS, Android) поддерживает следующие эвенты:

  • touchstart – инициируется при косании. Аналог — mouseDown
  • touchmove – Инициируется при движении косания. Аналог — mouseMove
  • touchend – Инициируется при окончании косания. Аналог — mouseUp
  • touchcancel – Инициируется при прерывании касания (Пользователь заблокировал экран, нажал кнопку домой, изменил ориентацию экрана)

Итак, чтобы затрекать свайп нам понадобиться следующий код:

var touchstartX = 0;
var touchstartY = 0;
var touchendX = 0;
var touchendY = 0;

var gesuredZone = document.getElementById(‘gesuredZone’);

gesuredZone.addEventListener(‘touchstart’, function(event) <
touchstartX = event.screenX;
touchstartY = event.screenY;
>, false);

gesuredZone.addEventListener(‘touchend’, function(event) <
touchendX = event.screenX;
touchendY = event.screenY;
handleGesure();
>, false);

function handleGesure() <
var swiped = ‘swiped: ‘;
if (touchendX touchstartX) <
alert(swiped + ‘right!’);
>
if (touchendY touchstartY) <
alert(swiped + ‘left!’);
>
if (touchendY == touchstartY) <
alert(‘tap!’);
>
>

Из-за сложности обработки жестов можно обратиться к альтернативам jQuery, которые поддерживают жесты

В поисках альтернатив можно выдвинуть следующие требования:

  1. Манипуляции с DOM
  2. Обработка жестов
  3. Асинхронные запросы
  4. Маленький размер
  • Ссылка на Фреймворк:http://quojs.tapquo.com/
  • Поддерживаемые события: Tap, Single Tap, Double Tab, Hold, 2xFingers Tap, 2xFingers Double Tap, Swipe Up, Swipe Right, Swipe Down, Swipe Down, Swipe Left, Swipe, Drag, Rotate Left, Rotate Right, Rotate, Pinch Out, Pinch, Fingers
  • Размер Фреймворка: 18KB минимизированный.
  • Плюсы:
  1. Поддерживает помимо событий, CSS селекторы, работу с атрибутами, работу с DOM и AJAX запросы очень похожие на аналоги в jQuery
  2. Не требует ничего дополнительного для работы
  3. Маленький размер Фреймворка
  4. Миграция с jQuery довольно простая, за исключением использования $$ вместо $, чтобы избежать конфликтов, но это легко лечится
  5. Минусы:
  1. Отсутствует какая-либо документация
  • Ссылка на Фреймворк:http://zeptojs.com
  • Поддерживаемые события: Tap, Single Tap, Double Tap, Long Tap, Swipe, SwipeLeft, SwipeRight, SwipeUp, SwipeDown
  • Размер Фреймворка: 11KB минимизированный.
  • Плюсы:
  1. Фреймворк нацеленный на мобильную разработку. Также имеет JQuery-like стиль и код почти совместим с jQuery
  2. Поддерживает только современные браузеры
  3. Минусы:
  1. Не поддерживает Drag и Multitouch*
  • Ссылка на библиотеку:http://eightmedia.github.io/hammer.js
  • Поддерживаемые события: Hold, Tap, Doubletap, Drag, Dragstart, Dragend, Dragup, Dragdown, Dragleft, Dragright, Swipe, Swipeup, Swipedown, Swipeleft, Swiperight, Transform, Transformstart, Transformend, Rotate, Pinch, Pinchin, Pinchout, Touch, Release
  • Размер библиотеки: 13KB минимизированная.
  • Плюсы:
  1. Большое количество поддерживаемых жестов включая Touch и Release для трекинга сложных жестов
  2. Есть плагин под jQuery
  3. Плагин полностью совместим с Zepto.JS
  4. Минусы:
  1. Размер. 13 KB – многовато только для жестов
  • Ссылка на библиотеку:https://github.com/plainview/Jester
  • Поддерживаемые события: Tap, Double tap, Swipe, Flick, Pinch, Pinch arrow, Pinch widen, Pinch end
  • Размер библиотеки: 17KB минимизированная.
  • Плюсы:
  • Ссылка на библиотеку:http://mwbrooks.github.io/thumbs.js/
  • Поддерживаемые события: touchstart, touchend, touchmove
  • Размер библиотеки: 612B минимизированная.
  • Плюсы:
  1. Просто добавляет поддержку стандартных эвентов touchstart, touchend, touchmove. Жесты нужно обрабатывать самим.

Стандартный браузер Android не поддерживает Multitouch до версии 3.2. Это значит, что Multitouch не будет работать на любом приложении запущенном в PhoneGap на версии Android до 3.2.

При выборке элементов по классу дела обстоят так:

50 самых полезных jQuery библиотек

Библиотеки JQuery знакомы дизайнерам и разработчикам не понаслышке. Это одна из самых популярных библиотек JavaScript, которые вы найдете в Сети.

Каждый уважающий себя дизайнер и разработчик знаком с функциями и возможностями этой библиотеки:

  • jQuery предназначен для решения практически любой задачи на веб-сайте;
  • jQuery может избавить вас от проблем, которые мешают вам в создании красивого и функционального сайта;
  • если вам нужно решить проблемы кроссбраузерности — добавляйте библиотеки JavaScript в коллекцию применяемых вами инструментов.


Библиотеки JQuery — отличный инструмент для веб-разработчиков. В Сети есть огромное количество бесплатных плагинов.

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

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

1. Treed:

Плагин Treed предоставляет вам возможность создания древовидной структуры вашего сайта. Он расширяемый, настраиваемый, мощный и очень легкий в использовании.

2. jQuery Vibrate:

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

3. Flight Indicators:

Очень простой в использовании плагин. Вы сможете отобразить высококачественные индикаторы полета с помощью HTML , CSS3 , JQuery и SVG -изображений.

4. jQuery LightSlider:

jQuery LightSlider — гибко настраиваемый тач-слайдер для отображения содержимого вашего сайта. В наличии эффекты slide и fade . Он совместим со всеми основными браузерами.

5. jQuery GoUp!

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

6. Image Cropper:

Этот JQuery плагин позволяет обрезать изображения на сайте. Есть варианты настроек и предварительный просмотр. Вы также сможете установить высоту и ширину.

7. Devrama Slider:

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

8. jQFader:

jQFader простой плагин для применения эффекта fade out к элементам вашего сайта. Прост в использовании. Легко подойдет к использованию на любом сайте.

9. Forkit:

Forkit.js это jQuery анимированный плагин, представляющий собой подобие занавеса, за которым вы можете спрятать дополнительный контент. Обычно располагается в правом верхнем углу.

10. Vertical News Slider:

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

11. Looking For:

Этот jQuery плагин позволяет выполнять поиск текста в списках, доступных на странице. Скрывает элементы, не совпадающие с поисковым запросом.

12. Browser Swipe:

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

13. Chicken Dinner:

ChickenDinner — уникальный jQuery плагин. Позволяет загружать изображения из массива картинок, созданного на стороне клиента, через img-теги или фоновые картинки.

14. Flicker Plate:

Полностью адаптивный и очень простой в использовании плагин. Позволяет создать подобие постраничного пролистывания контента на сайте.

15. SVGMagic:

Как конвертировать SVG -картинки в PNG -формат? Воспользоваться этой простой jQuery библиотекой. Она выполняет поиск изображений в SVG -формате на сайте, и, если браузер не поддерживает SVG , конвертирует их в PNG .

16. lazyYT:

Этим плагином можно воспользоваться для быстрого добавления видео из YouTube . При первой загрузке слой будет содержать превью-изображение видео, а по клику ролик будет воспроизведен.

17. ScrollMagic:

С помощью этого плагина вы сможете закрепить элемент страницы в определенном месте, включить анимацию, причем в тот момент, когда пользователь прокрутит страницу до определенного места.

18. RowGrid:

RowGrid — jQuery плагин, созданный для представления элементов страницы в виде таблицы. Небольшой и легкий в использовании инструмент.

19. Remodal:

Этот jQuery плагин используется для создания модальных окон с hash -трекингом. Полностью адаптивный, дизайн в стиле flat и очень легок в настройке.

20. Panorama Viewer:

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

21. Floatlabels:

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

22. Fluidbox:

Очень полезный jQuery плагин. Расширяет и улучшает возможности модуля fluid light box . Работает в виде ссылки на увеличенное изображение.


23. Headroom:

Headroom.js поможет вам скрывать навигацию (либо другой контент из хедера) по сайту. Когда посетитель прокручивает страницу вниз — навигация исчезает, и появляется, когда пользователь возвращается к верхней части страницы.

24. A-Slider:

A-Slider адаптивный и простой слайдер, который, к тому же, поддерживает аудио-контент. Очень прост в использовании и довольно гибко настраивается с помощью HTML .

25. CoverflowJS:

Это проект coverflow , который позволит воссоздать эффект ‘CoverFlow’ с помощью компонентов jQuery UI и трансформаций CSS3 .

26. jQuery URLive:

Возможности этого jQuery плагина очень схожи с функционалом аттача в окне создания поста в Facebook . Позволяет создавать быстрые превью любого URL -адреса, основанные на свойствах Open Graph .

27. BttrLazyLoading:

Плагин позволяет веб-приложениям загружать изображения под разные разрешения экранов.

28. jQuery Collapser:

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

29. Parallax ImageScroll:

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

30. Block Scroll:

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

31. Full Page Image Slideshow:

Полностраничный jQuery плагин, делающий слайд-шоу, которое автоматически заполняет изображением все пространство экрана. Размеры изображений автоматически подгоняются под размеры области просмотра.

32. EasyTree

jQuery плагин EasyTree предназначен для конвертации UL или JSON списков в древовидное меню вашего сайта. Легок в использовании и абсолютно бесплатен.

33. Mapsed:

Mapsed упрощает процесс отметки мест на карте. Вы также можете добавлять и редактировать места, если их нет в Google Places API .

34. Radiant Scroller:

Этот jQuery плагин позволяет создавать респонсивные скроллеры (карусели) с сеточной и простой горизонтальной разметками. Radiant Scroller поддерживает ряд опций для настройки, а также предоставляет API для управления.

35. Image Lightbox:

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

36. Mr.JsonTable:

Этот плагин очень прост в использовании. С его помощью вы сможете оформить JSON данные в виде HTML таблицы, с возможностью пагинации и сортировки. Так же можно скрывать столбцы.

37. ImageFit:

ImageFit может оказаться очень полезным для разработчиков. Выполнен просто. Имеет малый размер. Поможет уместить любое изображение в любом месте вашего сайта.

38. Bootstrap Validator:

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

39. Resize End Plugin:

Этот плагин используется для вывода сообщений после изменения размера окна браузера.

40. Adaptive Backgrounds:

Плагин использует превалирующий в картинке фона цвет и добавляет этот цвет к фону родительского элемента.

41. FormChimp:

jQuery плагин, представляющий собой полностью настраиваемую Mailchimp Ajax -форму, позволяет пользователю легко залогиниться в Mailchimp .

42. Password Peekaboo:

Плагин позволит временно показать вводимый пароль пользователю, если он того захочет.

43. Selectonic:

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

44. Sudoku:

С помощью плагина Sudoku вы сможете сделать разметку поля для игры в судоку и настроить его для игры либо презентации. Плагин респонсивный и располагает несколькими приятными цветовыми схемами.

45. Elevate Zoom:

Elevate Zoom поможет вам создать интерфейс для зума изображений. Полностью настраиваемый плагин и очень прост в использовании на сайте. Для достижения лучшего результата стоит использовать два изображения.

46. Wanker.js:


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

47. Form Autofill:

FormAutofill окажется полезным для разработчиков. Этот плагин автоматически заполняет пустую форму данными.

48. Image Map Resize:

Этот плагин поможет вам масштабировать HTML -карты изображений к размерам окна. Он обновляет координаты карты изображений, когда окно меняет размеры.

49. jQuery Full Screen Nav:

Этот плагин JQuery делает меню полноэкранным. При загрузке и изменении размеров окна он пересчитывает размеры и позиции ссылок в меню.

50. SuzhouKada:

Плагин позволит увидеть ссылки вашего сайта в один клик. Показывает картинки предпросмотра при наведении указателя мыши на ссылку.

Заключение

В этой статье мы поделились c вами полезными jQuery библиотеками, которые можно использовать на сайте, дабы решить некоторые проблемные ситуации.

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

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

Всего доброго и удачи в разработке!

Данная публикация представляет собой перевод статьи « 50 Most Useful jQuery Libraries » , подготовленной дружной командой проекта Интернет-технологии.ру

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

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

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

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

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

Это плагин Zepto для создания мобильных приложений. Он зависит от нескольких внешних библиотек, таких как Backbone.js и Flickable.JS для некоторых из своих функций работы, но в целом имеет собственный внешний вид. В качестве фреймворка он создает мобильные приложения на HTML 5 с использованием компонентов пользовательского интерфейса Ratchet CSS.

Это хороший выбор фреймворка, поскольку он основан на HTML5 и JavaScript. Он очень гибкий и может помочь разработчику создать различные мобильные приложения, простые или сложные. Фреймворк имеет одни из самых высокопроизводительных виджетов пользовательского интерфейса, которые окажутся очень полезными в вашем развитии. Некоторые виджеты, которые вы получите используя Ext JS – это формы, списки, панели инструментов и меню в частности. Все эти ресурсы доступны, чтобы помочь разработчику создавать великолепные приложения для Android, iOS, iPhone и Windows.

Это так же плагин Zepto для мобильных фреймворков, который был разработан в первую очередь для браузеров на базе WebKit. Он настраиваемый и расширяемый. Фреймворк поставляется с темой, которая может быть изменена, используя Compass или Sass, и с очень крутыми 3D-переходами, которые могут быть скорректированы путем использования CSS3. Вы также можете расширить его своими собственными функциями, чтобы получить нужную поддержку, необходимую для создания своего приложения.

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

Легкий мобильный фреймворк, который основан на HTML5 и CSS3. Он пользуется популярностью из-за своих хороших стилей по умолчанию, которые вы можете использовать в качестве отправной точки для разработки мобильного приложения. Фреймворк также поставляется с несколькими JavaScript API для управления вашим приложением. Lungo создает приложения, которые могут работать на различных платформах, таких как BlackBerry, iOS, Android и Firefox OS.

Отличный фреймворк от весьма авторитетной компании Adobe. Он является идеальным выбором при создании гибридных мобильных приложений с помощью JavaScript, CSS и HTML. Фреймворк предлагает множество программных решений для дизайнеров, такие как InDesign, Photoshop, Illustrator и другие. Одной из его сильных сторон является возможность создавать высокопроизводительные приложения, которые могут хорошо работать на различных устройствах. Adobe PhoneGap имеет множество плагинов, которые обеспечат более легкое создание простых, а также сложных мобильных приложений.

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

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

Еще один великолепный фреймворк, который работает на HTML5 и CSS3. Он обеспечивает анимацию, API и компоненты, которые являются совместимыми с текущими браузерами и мобильными платформами. Фреймворк предлагает поддержку для Cordova и PhoneGap. Благодаря этой поддержке, вы можете создавать свои приложения, а затем поставлять его в магазин приложений соответствующей платформы. Он также предлагает набор тем для iOS, Windows Phone, Blackberry, Android, Tizen и других платформ, поэтому приложения будут всегда чувствовать себя в своей родной среде.

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

Фреймворк JavaScript для мобильной разработки — ТОП 5

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

Итак, давайте рассмотрим ТОП 5 лучших фреймворков для JavaScript-разработки мобильных приложений, которые помогут значительно упростить весь процесс разработки. Поехали!

Фреймворк JavaScript для мобильной разработки — ТОП 5 в 2020 году

Angular

В настоящий момент Angular все чаще воспринимается как фреймворк. Инструмент, предоставляемый командой Angular, это полноценное решение. В отличие от React, который представляет собой всего лишь библиотеку для рендеринга компонентов, с Angular можно легко создавать полноценные приложения без использования каких-либо сторонних решений. На ресурсе Stack Overflow недавно был проведен опрос среди веб-разработчиков о том, какой фреймворк они считают лучшим. Так вот, Angular занял второе место после Node.js. Этот фреймворк JavaScript пользуется доверием!

React Native

React Native – это специальный мобильный фреймворк, созданный на базе React JS. Собственно, это JavaScript-библиотека, которая используется для создания динамических пользовательских интерфейсов. С ней любые пользователи смогут легко создавать нативные приложения под iOS и Android, используя всего лишь один язык – JavaScript. С таким решением нет смысла отдельно изучать языки Java, Objective-C или Swift. Это полноценное кроссплатформенное решение, достойное вашего внимания.

jQuery Mobile

jQuery Mobile – отличный HTML5-фреймворк. Он позволяет вам избавиться от лишней работы по разработке приложений для каждой из платформ. Вместо этого вы сможете создать один крутой отзывчивый сайт или приложение, которое будет отлично работать на любом смартфоне, планшете, ноутбуке и ПК. Благодаря jQuery Mobile разработка под iOS, Android, Windows Phone, Symbian и т.д. стала полностью универсальной. Что примечательно, этот фреймворк JavaScript также совместим с другими мобильными фреймворками, такими как PhoneGap. Доступен в самой последней версии на сайте.

Фреймворк JavaScript для мобильной разработки — ТОП 5 в 2020 году

PhoneGap

PhoneGap – фреймворк для Android-разработки, поддерживаемый компаниями Adobe и Apache. Этот комплект разработчика отличается от других тем, что позволяет видеть внесенные изменения в режиме реального времени. Это кроссплатформенное приложение, которое поддерживает разработку на HTML5, CSS и JavaScript. Используя это решение, вы получаете полноценный доступ к обширной и надежной библиотеке плагинов, которые смогут расширить ваши возможности разработки гибридных мобильных приложений.

Meteor

Meteor это не просто библиотека JavaScript, как, к примеру, jQuery или AngularJS. Это полноценное full-stack решение, в которое входят front-end библиотеки, сервер на базе Node.js и, конечно, командная строка. Все это вместе позволяет пользователям создавать крупномасштабные веб-приложения на базе JavaScript, как на стороне сервера, так и на стороне клиента. И все в одном удобном API. С Meteor разработка веб-приложений становится гораздо проще. Этот классный фреймворк JavaScript позаботится за вас о таких скучных, но необходимых задачах, как связывание файлов и минификация.

С Meteor вам не придется связывать файлы с помощью

Разработка адаптивного дизайна с помощью jQuery Mobile и CSS3

Создание макетов Web-страниц, учитывающих разрешение экрана мобильных устройств


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

Мобильные и планшетные устройства распространяются с неимоверной скоростью, а библиотека jQuery Mobile позволяет разработчикам идти в ногу с постоянно растущими требованиями к разработке Web-решений. Внедрение новых возможностей в Web-разработки требует наличия новых знаний и опыта у разработчиков и дизайнеров. По прогнозам Web-сайта Nielsen, предполагалось, что в 2011 году каждый второй американец будет являться обладателем смартфона (ссылка на этот блог приведена в разделе Ресурсы); эта цифра существенно отличается от показателей 2008 года, где доля обладателей смартфонов составляла всего 10% от общего числа пользователей мобильных телефонов; согласно прогнозам AMI-Partners, «количество планшетных устройств, используемых в фирмах с численностью от 1 до 1000 сотрудников, вырастет к 2015 году на 1000%» (ссылка на полный прогноз приведена в разделе Ресурсы). С учетом таких темпов роста возникает острая потребность в Web-разработчиках и дизайнерах, которые могут создавать современные мобильные Web-решения. Библиотека jQuery Mobile является отличным средством для разработки мобильных Web-приложений, поскольку позволяет сократить время разработки и поддерживает самые различные мобильные платформы.

Некоторые трудности и способы их решения

Библиотека jQuery Mobile является отличным инструментом для создания мобильных и планшетных версий Web-страниц, но она всецело полагается на содержимое Web-сайта, которое должно добавляться в определенных data-role атрибутах. В редких случаях может оказаться невозможным добавить эти атрибуты в HTML-разметку, из-за чего потребуется создать для мобильного устройства отдельный Web-сайт. Несмотря на это, в данной статье будет показано, как путем несложных усилий можно разработать адаптивный дизайн и определить поведение макета Web-страницы при просмотре на различных мобильных устройствах, используя jQuery Mobile и технологию Cascading Style Sheets version 3 (CSS3) Media Queries. В этой статье мы создадим простой Web-сайт, который будет динамически выбирать для отображения соответствующий макет страницы с учетом разрешения экрана мобильного устройства.

Адаптивным называют дизайн, который может учитывать разрешение экрана устройства, используемого для просмотра Web-страницы. Это означает, что вне зависимости от того, просматривается ли Web-страница на мобильном телефоне, планшетном компьютере или обычной рабочей станции, пользователь будет видеть тот макет страницы, который соответствует разрешению экрана устройства. Хотя библиотека jQuery Mobile позволяет быстро и легко создавать мобильные версии Web-сайтов, на текущий момент она не содержит внутренних методов динамического определения разрешения экрана устройства (и скорее всего эта функция не будет реализована никогда). Фактически на Web-сайте проекта jQuery Mobile сказано, что существующая ранее функциональность Media Query Helper Classes не была рекомендована к использованию в бета-версии, а в финальной версии была полностью удалена. Вместо этой функциональности разработчики jQuery Mobile рекомендуют использовать CSS3 Media Queries. Использование jQuery Mobile совместно с CSS3 Media Queries позволяет разработать адаптивный дизайн, который подходит для мобильных, планшетных и настольных устройств. Именно комбинация jQuery Mobile и CSS3 Media Queries используется для разработки адаптивного дизайна документации к самому продукту. Документация jQuery Mobile по своим средствам адаптации к разрешению экрана очень похожа на пример, рассматриваемый в этой статье.

Начиная с версии 2.1 в CSS реализованы методы кодирования, основанные на использовании медиа типов устройств (Media Types). Наиболее распространенный способ использования Media Types заключается в создании отдельной таблицы стилей для Web-страницы, отображаемой на экране настольного компьютера, и отдельной таблицы стилей для версии Web-страницы, выводимой на печать. В CSS3 эта концепция была усовершенствована, результатом чего стала технология Media Queries. Media Queries позволяет разработчикам определять тип и физические параметры устройства, на котором просматривается Web-страница. Излишне говорить о том, что технология Media Queries быстро набрала популярность и стала широко использоваться для выбора определенной таблицы стилей на основе разрешения экрана устройства. В листинге 1 приведен пример использования Media Queries, в котором выбирается таблица стилей, назначенная мобильным и планшетным устройствам.

Листинг 1. Использование Media Queries для выбора таблицы стилей, назначенной определенным устройствам

В этом примере атрибут media содержит медиа-тип, равный screen , и запрос Media Query (заключен в скобки), который проверяет, не превышает ли ширина экрана устройства 799 пикселов. Если это условие выполняется, то используется таблица стилей для мобильных/планшетных устройств, в противном случае таблица стилей не используется. Чтобы обеспечить отображение страницы на экранах с различным разрешением, можно использовать на одной Web-странице несколько ссылок на таблицы стилей, указав в каждой из них собственный запрос Media Query. Как я упоминал, обычно создается три таблицы стилей: одна для мобильных и планшетных устройств, одна для мониторов персональных компьютеров с низким разрешением и одна – для мониторов с высоким разрешением. Если бы вы использовали код из листинга 1, то эту таблицу стилей использовали бы все устройства с разрешением экрана меньше 799 пикселов, так что это превосходный пример того, как можно определить отдельную таблицу стилей для мобильных и планшетных устройств и отдельную таблицу стилей для персональных компьютеров.

Можно также использовать несколько запросов Media Query непосредственно внутри CSS одной страницы стилей. В листинге 2 приведен пример класса CSS, используемого для настройки панелей навигации, которые мы создадим чуть позже. Если ширина экрана устройства не меньше 800 пикселов, ширина панели навигации устанавливается равной 300 пикселам; если ширина экрана устройства не превышает 799 пикселов, ширина панели навигации устанавливается в 100%.

Листинг 2. Использование Media Queries для выбора CSS, назначенного устройству

Другое замечательное свойство Media Queries заключается в том, что если вы будете просматривать в современном Web-браузере страницу, которая содержит код CSS из листинга 2, связанный с HTML-элементом, то эта страница также будет реагировать на размер окна браузера. Таким образом, если ширина окна браузера не будет превышать 799 пикселов, то ширина панелей навигации будет равна 100%; если же ширина окна браузера будет равна 800 пикселам или больше, то ширина панелей навигации будет равна 300 пикселам.

Добавляем адаптивность

Media Queries – это разновидность условного оператора, определяющая, какая CSS будет применяться к Web-странице. Используя Media Queries в связке с библиотекой jQuery Mobile, можно создавать мощные мобильные Web-сайты, одновременно поддерживающие отдельные макеты Web-страниц для настольных систем. Сама по себе библиотека jQuery Mobile позволяет легко и быстро создавать дружелюбные Web-сайты с поддержкой сенсорных экранов. Эта библиотека содержит множество компонентов, упрощающих добавление кнопок, панелей инструментов, диалоговых окон, списков и т. д. Однако, когда дело доходит до работы с макетом страницы, вам не обойтись без CSS. К счастью, как уже упоминалось в этой статье, в CSS3 была представлена технология Media Queries, позволяющая разработчикам динамически изменять макет Web-страницы в зависимости от разрешения экрана устройства, на котором она просматривается.

В связке с библиотекой jQuery Mobile технология Media Queries позволяет создавать адаптивные макеты страниц. В этой статье мы рассмотрим простой пример, включающий в себя набор панелей навигации и таблицу. Эти элементы будут располагаться на странице по-разному в зависимости от разрешения экрана. Для того, чтобы библиотека jQuery Mobile заработала на вашей Web-странице, сначала необходимо вставить ссылки на связанные с ней файлы JavaScript и CSS, как показано в листинге 3.

Листинг 3. Вставка ссылок на файлы библиотеки jQuery Mobile

В состав jQuery Mobile входит компонент listview , который используется для отображения панелей навигации. Для создания представления в виде списка просто добавьте в элемент ul списка навигации атрибут data-role со значением listview . jQuery Mobile также содержит различные инструменты для создания таблиц из нескольких столбцов. В листинге 4 я создал таблицу, состоящую из двух строк и трех столбцов, используя для этого комбинацию классов ui-grid-b , ui-block-a и ui-bar . За дополнительной информацией о доступных компонентах библиотеки jQuery Mobile обратитесь к разделу Ресурсы.

Листинг 4. Добавление представления в виде списка и таблицы в область содержимого

В конце имен некоторых классов добавлены буквы, которые связаны со стилями – на их основании jQuery Mobile определяет, какой стиль будет использоваться при отображении компонента. За дополнительной информацией по работе со стилями jQuery Mobile обратитесь к разделу Ресурсы.

Теперь, когда у нас есть готовая Web-страница, можно приступать к созданию адаптивного макета с помощью CSS3, который будет динамически изменяться при использовании экранов с различными разрешениями. Сделать это просто: используйте уже известную вам технологию Media Queries для определения разрешения экрана, а затем создайте CSS для всех различных вариантов. В листинге 5 используются два запроса Media Queries: первый проверяет условие, при котором разрешение экрана больше или равно 800 пикселам, а второй – условие, при котором разрешение экрана не превышает 799 пикселов. В первом случае панели навигации и таблица выравниваются по левому краю, располагаясь друг рядом с другом и заполняя все пространство, доступное на экране с более высоким разрешением. Во втором случае выравнивания не происходит, ширина элементов устанавливается равной 100%, а таблица располагается под панелями навигации – такой макет лучше подходит для экранов с небольшим разрешением, например, для смартфонов и планшетных компьютеров.

Листинг 5. Использование Media Queries для создания адаптивного макета страницы

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

Рисунок 1. Отображение Web-страницы на экране с более высоким разрешением

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

Рисунок 2. Отображение Web-страницы на экране с более низким разрешением

Конечно, мы рассмотрели очень простой пример, но тем не менее он показывает, насколько просто создать адаптивный макет страницы с помощью jQuery Mobile и CSS3. Эти технологии обладают невероятными возможностями и являются лишь отправной точкой в ваших начинаниях. Добавляя простые data-role атрибуты в HTML-код, можно создавать мобильные версии Web-страниц, а с помощью CSS3 Media Queries можно разрабатывать дизайн страниц, который адаптируется под устройства с различными разрешениями экранов. Если Web-страницы просматриваются на обычном стационарном компьютере, можно даже изменить стиль jQuery Mobile, чтобы они выглядели не так, как на мобильном устройстве. Все, что для этого требуется – это проверить разрешение экрана с помощью Media Query и изменить CSS для соответствующих компонентов jQuery Mobile, чтобы полностью переопределить стили темы по умолчанию.

Заключение

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

Ресурсы для скачивания

  • этот контент в PDF
  • Пример для этой статьи (jquery-mobile-responsive-design.zip | 3 КБ)

Похожие темы

  • Оригинал статьи: Implement responsive design with jQuery Mobile and CSS3 (EN).
  • Ознакомьтесь с полными материалами прогнозов Web-сайта Nielsen: Smartphones to Overtake Feature Phones in U.S. by 2011 (EN).
  • Ознакомьтесь с полными материалами прогнозов AMI-Partners: REPORT: SMB Adoption of Tablet Computers to Increase by 1,000 Percent by 2015 (EN).
  • Ознакомьтесь с текущей документацией библиотеки jQuery Mobile (EN).
  • Ознакомьтесь с полным списком пиктограмм кнопок (EN) библиотеки jQuery Mobile.
  • Узнайте больше о работе со стилями jQuery Mobile из статьи Криса «Create custom jQuery mobile themes» (EN) (developerWorks, ноябрь 2011 г.).
  • Прочитайте еще одну статью Криса «Use the jQuery Mobile API for fine-grained custom control» (EN) (developerWorks, январь 2012 г.), которая расскажет вам о дополнительных возможностях использования jQuery Mobile, включая установку глобальных параметров, анализ событий взаимодействий и работу с публичными методами.
  • Загрузите и используйте файлы jQuery Mobile JavaScript и CSS (EN).

Комментарии

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

Поддержка JavaScript, jQuery и AJAX в мобильных браузерах?

1. Найдите статистику распространенности версий андроида, типа такой, но желательно по вашему региону или ЦА.


2. Решите для себя, готовы ли вы потерять 13% аудитории (или больше, смотря какая ЦА) поставив нижнюю планку на 4.4 или можете доплатить.

3. Уточните у разработчиков насколько сложно им реализовать поддержку 2.х, сравните это с ожидаемым профитом от лишних 13%.

Учтите также, что эти потерянные проценты это не только «не наш клиент» но и источник негативных отзывов о вашем сайте.

Сергей Ягелюк: На самом деле, лучше ориентироваться на статистику по браузерам.

Эти источники довольно легко гуглятся
alexvaleev.ru/browserstat

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

Мобильных платформ:
— Android v.4.0+
— iOS v.7+

Мобильных браузеров:
— Chrome
— Android Browser
— Safari
— Firefox
— Opera
— Opera Mini
— Internet Explorer (v.10, v.11, Edge)

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

Как определить мобильное устройство с jQuery?

Все мы знаем как определись мобильное устройство с помощью CSS, используя @media атрибут, но как быть, если нужно сделать тоже самое в jQuery? В этой записи я покажу две функции, которые помогут сделать это.

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

Первый способ

Я завернул первый пример в функцию, чтобы было удобнее пользоваться. Теперь, вам нужно вызывать isMobile() и она вернет вам булевое значение (true или false) — другими словами мобильное устройство у пользователя или нет.

Второй способ

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

Вывод

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

5 легких альтернатив jQuery на поле разработок для мобильных устройств

AlternativeTo is a free service that helps you find better alternatives to the products you love and hate.

The site is made by Ola and Markus in Sweden, with a lot of help from our friends and colleagues in Italy, Finland, USA, Colombia, Philippines, France and contributors from all over the world. That’s right, all the lists of alternatives are crowd-sourced, and that’s what makes the data powerful and relevant.

Feel free to send us your questions and feedback on hello@alternativeto.net, in our discussion forums, in our Discord channel or tweet us at @AlternativeTo

Made in Sweden, Fueled by great apps, coffee & good music, version: Release-88

5 альтернатив jQuery UI

Данная статья будет полезна тем, кто интересуется jQuery UI и всем, что с ним связано. Я нашла много полезных и интересных материалов о альтернативах для jQuery UI. Что это за альтернативы? Выделим пять продуктов, которые используют много разработчиков.

Коротко о jQuery UI. Это открытый программный продукт, который используют для разработки интерфейсов. Разработан на основе jQuery и является по сути набором виджетов, визуальных эффектов и тем. Этот продукт можно использовать полностью, или лишь некоторые его компоненты. Разработчики не жалуются на jQuery UI, так как он отлично справляется с поставленными задачами и не имеет каких-то особенных проблем с безопасностью. Правда, все равно существуют альтернативы, которые могут заменить этот фреймворк, и выполнять его задачи на должном уровне. Что это за решения? Читайте далее.

Первый в нашем списке Kendo UI , который включает в себя 70 компонентов. Данный фреймворк значительно ускоряет процесс разработки и становится очень полезным для многих веб-специалистов. Kendo UI отличается своим быстродействием и подходит для адаптивной верстки.

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

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

Дополнительная особенность фреймворка – интеграция с AngularJS. Имеется ввиду, что все компоненты готовы к работе с AngularJS. Поэтому, если Вы используете в основе разработки Angular, то решение Kendo UI будет отлично справляться с поставленными задачами.

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

Второй альтернативный продукт, который также пользуется популярностью у разработчиков – Webix . Фреймворк платный, но также предлагается бесплатная версия. Он использует некоторые компоненты jQuery UI, при этом расширяя его возможности и предоставляя больше функций по разработки интерфейсов. Универсальный Webix позволяет обеспечить визуализацию и редактирование данных, создание макетов, организация навигации. Особое внимание следует обратить на качественную и обширную документацию по фреймворку. Это во многих ситуациях является очень полезным для разработчиков.

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

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

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

JQWidgets также отличается хорошей документацией с примерами и демонстрациями того, как все работает. Фреймворк отлично работает с React, Angular и ASP.NET. Поэтому если Вы используете эти продукты, то сэкономите кучу времени.

Если Вы не планируете писать коммерческий сайт, то подойдет бесплатная версия. А если нет, то нужно будет потратиться.

EasyUI – это своеобразный набор расширенных виджетов для jQuery UI. EasyUI дает возможность разрабатывать элементы интерфейса и на основе HTML-разметки, и программно, используя JavaScript.

Некоторые разработчики отмечают довольно странную стилизацию фреймворка. EasyUI предоставляет качественный интерактивный редактор тем, который дает возможность управлять размерами шрифтов, цветом текста, фоном, расположением элементов и др. Он также дает прямой доступ к CSS, а это позволяет подстраиваться под каждый отдельный проект.

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

И на завершение в моем списке платный фреймворк Wijmo . Его компоненты написаны на TypeScript и предназначены для разработки для создания быстрых элементов управления. Имеет поддержку React, Angular и Vue, что является очень удобным для интеграции и разработки.

Фреймворк может работать с достаточным количеством элементов, которые связаны с управлением. Например, диаграммы, средства ввода, датчики, сетки. Разработчики поддерживают и старые и свежие версии Wijmo.

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

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

В общем, если не учитывать недостатки документации, Wijmo считается интересным и полезным продуктов для разработки. Компанией предоставляется тестовый период на продукты, но в случае коммерческого использования нужно покупать лицензию. Цена напрямую зависит от дополнительных компонентов, которые Вы собираетесь приобрести. Обратите внимание, что элементы управления для .NET / Xamarin, предоставляются лишь при приобретении дорогой корпоративной лицензии.

В продолжение темы также полезной будет Обзор актуальных шаблонизаторов JS .

Это лишь основные альтернативы jQuery UI и таки достаточно популярные. Но на них список не заканчивается. Возможно Вы использовали другие подобные продукты? Поделитесь ими в комментариях:)

Разработка мобильных приложений на HTML/CSS/JS с использованием Cordova

Дубликаты не найдены

ну WinJS тоже имеет недосатки, основной — он только для венды,

Пиздец недостаток. Зато в отличии от кордовы работает корректно со всеми комплектующими устройства и позволяет писать кросплатформенные приложения под мобильник и десктоп используя WinAPI. Не говря уже о том, что в VS уже впилили поддержку js с дебагером.

приложения искаробки компилирются для iOS, Android, WP8, BB10 и вроде даже какую-то экзотику типа Tizen и FFOs

Да похуй. Нормальное ПО пишется на нативке.

Глухой дед чего недослышал, то сам додумал? Ну-ну.

Поддержка JS`а в VS похожа на говно и ненужна, ибо майкрософт любит свой TypeScript

О да, и при этом они продолжают его развивать в своих проекта. Наверное же не просто так.

ну WinJS тоже имеет недосатки, основной — он только для венды,

Т.е. если компания делает нативную поддержку js в своем продукте, гарантируюя качество и работоспособность технологии актитвно ее врендряя и развивая — недостаток?

ородова приложения искаробки компилирются для iOS, Android, WP8, BB10 и вроде даже какую-то экзотику типа Tizen и FFOs

Да, и при этом имеет ряд ограничений. Но не все это знают. А вообще я согласна с @barsik2005 в плане того, что мобильное ПО лучше разрабатывать на «родных» ЯП.

Цукерберг рекомендует:  Sql server - Подскажите пару книг по MS SQL + T-SQL
Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих