Категории: HTML

Personal maps: создаём директиву для подключения Google Maps. Часть 7.

Владимир | | AngularJS, HTML, JavaScript, Web разработка.

personal maps 7 directive

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

Директивы в AngularJS предназначены для работы с DOM (Document Object Model – объектная модель документа) и позволяют создавать новые компоненты или добавлять существующим новые свойства.

В Angular есть множество встроенных директив, часть из них мы уже использовали при создании представлений. Например, ngHide позволяет скрыть элемент в зависимости от значения модели, т.е. изменяет CSS стили элемента.

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

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

Personal Maps: главная страница и структура клиентской части приложения. Часть 3.

Владимир | | Ajax, AngularJS, HTML, JavaScript, PHP, Web разработка, Yii.

В этой части мы начнём разрабатывать клиентскую часть приложения.

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

Кроме того, наше приложение показывает объекты на карте Google, и если его разрабатывать в «классическом» стиле, то переход от одного объекта к другому будет вызывать перезагрузку карты. А это, не смотря на кэширование компонентов карты браузером, негативно скажется на скорости работы интерфейса.

Читать дальше

Google maps & AngularJS: позиционирование карты

Владимир | | Ajax, AngularJS, HTML, JavaScript, Web разработка.

google maps angularjs

Последнее время мне довольно часто приходится работать с различными фреймворками, предназначенными для разработки JavaScript приложений. В основном с Backbone.js и AngularJS. И впечатления в целом очень приятные. Они действительно позволяют ускорить разработку и упростить поддержку кода.

Естественно, всё имеет свою цену. В данном случае это «порог вхождения» и время на изучение особенностей фреймворков. Кроме того, сейчас ведётся много споров на тему того какой фреймворк лучше. Участвовать в них у меня желания нет, хотя читать такие обсуждения иногда бывает интересно 🙂 К сожалению (или к счастью), победителей в этих спорах нет и, скорее всего, не будет. В большинстве случаев, чем больше работы за вас выполняет фреймворк, тем медленнее он работает. Но, с другой стороны, при этом уменьшается время разработки.

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

В этой статье мы рассмотрим пример использования AngularJS.
Читать дальше

Google maps & jQuery: позиционирование карты

Владимир | | Ajax, HTML, JavaScript, Web разработка.

google maps positioning

Приветствую всех!

В этой статье речь пойдет о создании небольшого приложения, работающего с картами google.

Идея следующая. У вас в базе данных есть какая-то информация об объектах, которые нужно показать на карте (например, информация о городах). Нужно:

      1) вывести список этих объектов;
      2) при клике на любом из объектов переместить карту так чтобы выбранный объект оказался в её центре;
      3) показать на карте развернутую информацию о выбранном объекте.

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

PHP: как убрать комментарии из html разметки

Владимир | | HTML, PHP, Web разработка, WordPress, Yii.

remove html comments

Прежде всего, несколько пояснений. Допустим, у вас есть html страница с комментариями, которые вы не хотите показывать посетителям сайта. Как их убрать? Естественно, это можно сделать с помощью любого текстового редактора 🙂 Но это не самый лучший вариант 😉

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

С другой стороны, наличие таких комментариев в разметке хоть и немного, но увеличивает размер страницы, да показывать их посетителям как-то неправильно.
Читать дальше

jQuery: обработка параметров URL

Владимир | | Ajax, HTML, JavaScript, Web разработка.

jquery parsequery

Приветствую всех!

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

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

HTML разметка такой ссылки может выглядеть следующим образом.

<a class="delete" href="https://www.simplecoding.org/script.php?action=delete_object&object_id=1">Удалить</a>

Как видите, ссылка содержит два параметра (action и object_id), значения которых PHP скрипт сможет получить из массива $_GET.

Теперь, мы хотим выполнить удаление объекта с помощью AJAX запроса. Изменять ради него ссылку нет никакой необходимости. Просто назначаем обработчик для события click.
Читать дальше

HTML5: загрузка файлов с помощью Drag & Drop

Владимир | | Ajax, HTML, JavaScript, PHP, Web разработка.

html5 drag&drop upload

Приветствую всех!

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

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

Загрузку файлов с локального компьютера трогать пока не будем, я планирую опубликовать отдельный пост на эту тему, разберем загрузку с удалённого сервера.

Проблемы начинаются с первого же шага. Даже если вы четко понимаете, где искать URL и хорошо умеете пользоваться инструментами вроде firebug, то всё равно потребуется несколько кликов мышкой чтобы получить нужный адрес. Было бы гораздо удобнее просто перетянуть нужную картинку из одного окна браузера в другое.
Читать дальше

Как показать на Google Maps объекты, находящиеся в заданной области

Владимир | | HTML, JavaScript, Web разработка.

google maps

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

Начнём с постановки задачи

Предположим, у нас есть данные о группе объектов (их названия и координаты). Необходимо отметить их на карте с помощью маркеров. При этом, показать нужно не все объекты, а только те, которые находятся внутри заданной области.

Будем считать, что заданная область представляет собой окружность, т.е. мы знаем координаты её центра и радиус. А координаты объектов находятся в KML файле (это XML формат, разработанный для описания объектов на Google maps).
Читать дальше

JavaScript XSS: получение данных от facebook и вконтакте

Владимир | | HTML, JavaScript, Web разработка.

facebook vkontakte

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

Но что мы получаем в результате? Стандартную кнопку, позволяющую посетителю быстро опубликовать ссылку на текущую страницу в социальной сети и обычно счетчик таких публикаций.

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

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

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

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

Именно о таком решении я хочу рассказать в этой статье. В качестве примера возьмем facebook и вконтакте. Выбор этот сделан не случайно, разница между API этих сервисов довольно ощутимая. Чуть ниже вы поймете почему.
Читать дальше

JavaScript виджет: бесконечная загрузка твитов

Владимир | | CSS, HTML, JavaScript, Web разработка.

load on scroll

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

Рассмотрим небольшой практический пример.

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

На первый взгляд всё предельно просто, twitter предоставляет API, с помощью которого можно получить твиты любого пользователя (если они открыты). Вставить их сайдбар тоже не проблема.

Но на практике возникает несколько интересных моментов.
Читать дальше