develNotes - айтишные заметки

29.10.2014

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

Одним из критериев успешности мобильного приложения является доступность вашей разработки для целевой аудитории, вне зависимости от того, какую платформу используют пользователи - Android, IOS, Windows Phone или что-то еще. Как известно, существуют различные средства, которые служат для создания мобильных приложений, используя HTML5. Одним из представителей таких средств является PhoneGap. PhoneGap - бесплатный open-source фреймворк для создания мобильных приложений, созданный Nitobi Software. Позволяет создать приложения для мобильных устройств используя JavaScript, HTML5 и CSS3, без необходимости знания «родных» языков программирования (например, Objective-C), под все мобильные операционные системы (iOS, Android, Bada и т. д.). Готовое приложение компилируется в виде установочных пакетов для каждой мобильной операционной системы [Википедия]. Какие есть преимущества и недостатки у подобного подхода к разработке мобильных приложений и в каком случае нужно использовать такие инструменты?

Теги: html5 mobile Далее

27.12.2014

С новым годом! И немного анимации с помощью HTML5 Canvas.

Хочу привести простой пример использования возможностей рисования и анимации с помощью HTML5. Собственно, то, что получится в итоге, вы можете наблюдать чуть выше (разумеется, если вы не отключили JavaScript). Для того, что бы получить такой результат - будем использовать элемент canvas, который включен в спецификацию HTML5, и предназначен для рисования.

Первым делом нужно создать страницу и поместить на нее элемент canvas:

<!DOCTYPE html>
<html>
<body>
  <canvas id="myCanvas" width="200" height="200"></canvas>
  <script>
  </script>
 </body>
</html>

По умолчанию, размер области для рисования элемента canvas - 300px x 150px. Поскольку нам хватит и меньше - задаем размер 200px x 200px. Теперь нужно написать скрипт, который будет рисовать нашу новогоднюю елку. Соответственно, весь дальнейший код добавим в тег <script> на только что созданной странице. Начнем с рисования самой елки:

Теги: html5 web javascript Далее