Как сделать шаблон своего региона на HTML5

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

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

Редактор, а точнее среда разработки, который я использую многие знают — Netbeans. Программа кросс платформенная, поэтому я работаю в ней и под Вантус и под Ubuntu. Полноценная среда разработки. Плагины позволяют расширить ее и подстроить под ваши нужды. Подсветка кода и подсказки позволяют с легкостью создавать самые сложные приложения. В отличии от Eclipce, Netbeans имеет Русский перевод и простую установку под любую операционную систему, поддержка SVN или GIT, на ваше усмотрение, а для тестов вы можете использовать UNITEST. Netbeans — это изящество и красота программирования. Netbeans можно сравнить с хорошим автомобилем, сделано людьми и для людей.

Возможности программирования безграничны, как безграничны возможности человека! HTML5 доказывает это снова! 3d графика никого не удивляет и не стоит удивляться ей. Есть намного больше возможностей, необходимо приложить всего капельку усилий и знания, а так же фантазию. Мы сделали несколько шаблонов для OSClass региональной тематики. В тот момент, когда мы начали создавать карты регионов, нам стали поступать просьбы о создании ваших регионов. На все нужно время, а особенно нужно иметь время с запасом! Нельзя сделать все регионы, даже маленькой страны. Карты отрисовывались вручную при помощи обыкновенного текстового редактора и простой программы написанной на BASH для определения координат. Создание карты Москвы занимало не менее 5 часов, понимаете о чем я говорю! Но это все присказка, а теперь к сущности!

Мы имеем отличную среду разработки, хотя бы небольшие знания HTML5, достаточно! Пришло время рассказать об инструменте для отрисовки карт. Инструмент называется Summer html Image map creator. Программа работает очень просто, загружаете картинку и отрисовываете полигоны, а затем конвертируете в html код, вставляете в шаблон.

 

На рисунке выше загрузка изображения на сервер.

Ниже инструментарий для работы с картами.

 

Рисуйте полигон и выводите его в формат html

Все, у нас готов один округ Москвы! Теперь остается только вставить его в нужный нам файл, создать стили отображения, сохранить и протестировать!

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

Надеюсь статья будет полезной для вас! Если возникнут вопросы, пишите, мы с радостью ответим вам!

administrator написал 34 статья

Оставить комментарий