Архив метки: html5

Yii2: Простое приложение c AngularJS фронтендом. Клиентская часть 2

На данный момент мы имеем готовое RESTful api приложение в серверной части и простое AngularJS приложение в клиентской части. Дело за малым, обеспечить связь второго с данными из первого.

Доработаем главный модуль app.js

Добавим описание модуля, обеспечивающего работу с данными о фильмах, yii2AngApp.film:

Читать далее Yii2: Простое приложение c AngularJS фронтендом. Клиентская часть 2

Yii2: Простое приложение c AngularJS фронтендом. Клиентская часть 1

Ну что же, серверная часть готова, самое время взяться за клиентскую.

Пользовательский интерфейс мы создадим используя js фреймворк angelarjs (функционал) и css фреймворк twitter bootstrap (интерфейс).

Одностраничное приложение

Вся работа с клиентской частью приложения будет осуществляться через уже созданный нами файл client/index.html, который нам и отдает веб-сервер при открытии http://client.local.

Описание приложения AngularJS

Добавим атрибут  ng-app тегу  html. Назовем наше приложение yii2AngApp.

Читать далее Yii2: Простое приложение c AngularJS фронтендом. Клиентская часть 1

Yii2: Простое приложение c AngularJS фронтендом. Серверная часть

Теперь, когда все подготовительные работы закончены, можно всерьез заняться нашим приложением. PHP фреймворк Yii 2.0 позволяет быстро и просто создать необходимый нам функционал, включая RESTful api.

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

Структура базы данных

Создадим базу данных yii2-ang и добавим в нее таблицу film со следующей структурой:

  • id — int(11)
  • title — varchar(255)
  • storyline — text
  • director — varchar(100)
  • year — int(4)

Читать далее Yii2: Простое приложение c AngularJS фронтендом. Серверная часть

Yii2: Простое приложение c AngularJS фронтендом. Подготовка

Для начала, подготовим рабочее окружение, скачаем все необходимые библиотеки и создадим шаблоны будущих приложений. Будем считать, что у нас есть 2 домена: client.local и server.local. Создадим для них корневые соответствующие корневые каталоги: client и server. И настроим наш веб-сервер. Примерная конфигурации для apache:

В дальнейшем будем работать с этими каталогами по отдельности. Читать далее Yii2: Простое приложение c AngularJS фронтендом. Подготовка

Yii2: Простое приложение c AngularJS фронтендом. Введение

angularjs yii2В далекие времена веб 1.0 одностраничные веб-приложения (Single Page Application) были как мамонты: редкие и, зачастую, построенные на костылях с большим количеством разной степени структурированности js кода.

В наше время 2.0 существуют и успешно развиваются не только серверные, но и клиентские фреймворки и библиотеки: JQuery, Backbone.jsEmber.jsCanJSAngularJSKnockoutJS.

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

В нескольких статьях, постараемся разобраться, как за несколько минут создать простое одностраничное приложение, используя AngularJs и Yii Framework 2.0. Читать далее Yii2: Простое приложение c AngularJS фронтендом. Введение

10 самых популярных вопросов по html на собеседованиях

html51. Валидация html разметки

Рассмотрим следующий код:

Можно ли считать его валидным? Если нет — объясните почему? Читать далее 10 самых популярных вопросов по html на собеседованиях

Лучшие 5 frontend-фреймворков 2014 года

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

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

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

1. Bootstrap

Bootstrap — неоспоримый лидер среди огромного количества фреймворков. Получивший большую популярность, он постоянно развивается. Это надежный и простой инструмент, который не подведет мастера своего дела. Читать далее Лучшие 5 frontend-фреймворков 2014 года

12 трюков html5 для мобильных устройств

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

1. HTML5 на полный экран

В браузерах android — встроенном до версии 4.3 и других, например Chrome, существует только одно решение данной проблемы. Ширина и высота документа должна соответствовать экрану устройства, тогда нужного эффекта мы можем добиться следующим js кодом:

Google maps использует этот способ для полноэкранного отображения своего контента. Так же, можно легко избежать появления адресной строки при скроле пальцами:

Читать далее 12 трюков html5 для мобильных устройств