Как сделать карту изображения html
Карты-изображения
Карты-изображения позволяют привязывать ссылки к разным областям одного изображения. Реализуется в двух различных вариантах — серверном и клиентском. В случае применения серверного варианта браузер посылает запрос на сервер для получения адреса выбранной ссылки и ждет ответа с требуемой информацией. Такой подход требует дополнительного времени на ожидание результата и отдельные файлы для каждой карты-изображения.
В клиентском варианте карта располагается в том же HTML-документе, что и ссылка на изображение.
Клиентский вариант карты-изображения
Рис. 1. Закладки являются ссылками, созданными с помощью карты
Чтобы сделать ссылки на закладки, показанные на рис. 1, следует использовать следующий код (пример 1).
Пример 1. Использование карты-изображения
Атрибуты тега AREA
shape
Определяет форму активной области. Форма может быть в виде окружности ( circle ), прямоугольника ( rect ), полигона ( poly ).
Добавляет альтернативный текст для каждой области. Служит лишь комментарием для ссылки, поскольку на экран не выводится.
coords
Задает координаты активной области. Координаты отсчитываются в пикселах от левого верхнего угла изображения, которому соответствует значение 0,0. Первое число является координатой по горизонтали, второе — по вертикали. Список координат зависит от формы области.
Для окружности задаются три числа — координаты центра круга и радиус.
Для прямоугольника — координаты левого верхнего и правого нижнего угла.
Для полигона задаются координаты его вершин (рис. 2).
Рис. 2. Координатные точки для полигона
Карты-изображения позволяют создавать ссылки на разные области одного изображения. Использование этого подхода наглядней, чем обычные текстовые ссылки и позволяет применять всего один графический файл для организации ссылок. Однако не нужно считать, что карты-изображения следует включать везде, где требуются графические ссылки. Прежде всего, следует оценить все доводы за и против, а также просмотреть альтернативные варианты.
Преимущества карт-изображений
1. Карты позволяют задать любую форму области ссылки. Учитывая, что изображения по своей природе прямоугольны, сделать графическую ссылку сложной формы, например для указания географического района, без карт-изображений не представляется возможным. Как правило, в географической тематике карты-изображения и применяются наиболее часто.
2. С одним файлом удобней работать — не приходится заботиться о состыковке отдельных фрагментов и рисунок легко можно поместить в нужное место.
Недостатки
1. Нельзя установить всплывающую подсказку и альтернативный текст для отдельных областей. Альтернативный текст позволяет получить текстовую информацию о рисунке при отключенной в браузере загрузке изображений. Поскольку загрузка изображений происходит после получения браузером информации о нем, то замещающий рисунок текст появляется раньше. А уже по мере загрузки текст будет сменяться изображением. Для карт-изображений эта особенность является актуальной, ведь если отключить просмотр изображений, что делают многие пользователи, то в итоге увидим лишь один пустой прямоугольник.
2. При сложной форме области ссылки увеличивается объем кода HTML. Контур аппроксимируется набором прямых отрезков, для каждой точки такого отрезка следует задать две координаты, а общее количество таких точек может быть достаточно велико. Справедливости ради, следует отметить, что сложные формы являются частным случаем и применяются достаточно редко.
3. С картами-изображениями нельзя сделать разные эффекты, которые доступны при разрезании одного рисунка на фрагменты: эффект перекатывания, частичная анимация, индивидуальная оптимизация картинок для их быстрой загрузки.
Юзабилити
С позиции удобства пользователей, карты-изображения имеют только одно преимущество — ссылки разнообразной формы. Это добавляет наглядность в представлении информации — мы не ограничены прямоугольной формой ссылки и можем использовать ссылки сложной конфигурации для своих целей. Во всех остальных отношениях от них проку нет — обычные текстовые ссылки более информативны и им не страшно отключение показа картинок в браузере. Тот факт, что одно изображение загружается быстрее, чем та же картинка, но порезанная на фрагменты и сохраненная в виде набора графических файлов, легко обходится. Каждый из таких конечных файлов можно уменьшить, используя индивидуальные настройки оптимизации. В итоге, общий объем всех фрагментов будет занимать меньше места, чем одно изображение. Не стоит сбрасывать со счетов и психологический фактор — человеку кажется, что набор маленьких картинок загружается быстрее, чем одна большая.
Основной недочет карт — нет четко выделенных границ ссылок. Поэтому эти границы приходится выделять разными средствами уже на изображении. Если рисунок не загрузился по каким-либо причинам, то разобраться в наборе ссылок становится весьма проблематичным.
Альтернативные варианты
Не всегда есть острая необходимость использовать карты-изображения, поэтому следует обратить внимание на то, что существуют и другие возможные варианты выполнения поставленной задачи.
Использование FLash
Во flash-роликах можно создавать разные области ссылок, используя возможности векторной графики. Благодаря широким возможностям, на Flash можно создавать потрясающие меню и средства навигации. Но тут тоже требуется осторожность, чтобы не потерять за деревьями леса.
Разрезание изображений
Это одно из популярных средств в дизайне. Одно изображение в этом случае разрезается с помощью специальных программ на фрагменты, которые окончательно сводятся вместе, создавая иллюзию цельной картинки. Хотя области разрезания могут быть только прямоугольные, в большинстве случаев этого вполне достаточно для создания ссылок. Для каждого фрагмента можно выбрать наиболее подходящий графический формат, в котором он будет сохранен, параметры оптимизации, добавить альтернативный текст. Тогда даже при отключенном показе картинок, будут хорошо видны границы областей и замещающий изображение текст.
Резюме
Как выяснилось, причина использовать карты-изображения только одна — сложная форма ссылок, продиктованная задачами дизайна. Типичное применение — регионы географической карты, которые служат ссылками. Во всех остальных случаях можно обойтись и текстовыми ссылками, а при необходимости создания графической навигации, одно изображение для удобства можно разрезать на фрагменты. Такой подход создаст больше удобства пользователям, особенно тем, которые в силу разных причин отключают показ изображений в браузере. О них тоже нужно помнить.
HTML и SVG: создаём интерактивную карту
Давайте создадим интерактивную карту. Чего-нибудь. Что значит интерактивную? Ну, она должна взаимодействовать с пользователем и с данными на веб-странице, на которой она расположена. Думаю, этого достаточно, чтобы считать её интерактивной.
Что же, и возьмём мы SVG. Почему? Да потому что с ним легко работать человеку, знакомому с HTML. SVG — это векторный формат, основанный на XML. То есть у SVG-рисунка есть своя DOM, к различным элементам можно применять CSS-правила и управлять старым добрым JavaScript’ом.
Что же, начнём?
Самые нетерпеливые, могут сразу посмотреть демо, но я предлагаю читать обо всём по порядку.
Готовим карту
Для начала нам нужна суть. То бишь сама карта. В случае, если гугл не помогает, то её можно нарисовать и самому, даром что в Inkscape это сделать не трудно.
Я же, к примеру, возьму карту одной круглой страны (исходник на Wikimedia Commons)
Поскольку, по моему замыслу, у областей карты не должно быть различного окраса, то вначале я вырезаю из интересующих меня тегов
стили fill и stroke, зато взамен даю этим элементам нужные мне class и id. Например, для регионов и для городов.
Далее, в секции изображения помещаем до боли знакомое:
Вот и обещанный мною CSS в действии. В принципе, этого уже достаточно. Diff.
Результат: 
Вставляем SVG в HTML
Достаточно подробно этот процесс был освещён в хабратопике К вопросу о кроссбраузерном использовании SVG.
Мы же будем использовать HTML5 и воспользуемся самым простым, гуманным и стандартным способом:
Все браузеры, поддерживающие SVG, его корректно «скушают» и покажут. И даже дадут нам с ним поработать. При одном условии: если веб-сервер отдаст его с MIME-типом image/svg+xml. Другой MIME-тип может очень смутить Google Chrome (но не Оперу, которая из тега твёрдо знает, что идёт за SVG и на провокации не поддаётся).
Второй правильный метод — вставка SVG-кода прямо в HTML. Великолепно с точки зрения скриптинга, но поддержка браузерами пока похуже. Кстати, заметьте, что SVG, вставленный в «либеральный» HTML, всё-таки остаётся «суровым» XML’ем. Так что кавычки и закрывающие теги обязательны.
Подводные грабли
Но не всё так просто. Сразу можно заметить, что браузеры упорно не хотят масштабировать нашу карту, а если она не влезает, то показывают полосы прокрутки, вот так: 
Чтобы заставить браузеры работать с SVG так, как мы ожидаем, следует убрать в SVG-файле из тега атрибуты width и height (или задать им значения в 100%), а вставить специально предназначенный для браузеров атрибут viewBox со значениями координат левого верхнего и правого нижнего углов изображения:
Diff.
Результат: 
Взаимодействуем с SVG
Чтобы нам взаимодействовать с SVG, вписаннным прямо в HTML, ничего не нужно — он уже часть DOM веб-страницы.
Получить доступ к SVG, вставленным через чуть сложнее:
Да, jQuery работает с SVG, но только частично. Например, я заметил, что не работают функции addClass и removeClass, а так же поиск по классам ( jQuery(«.class») ). Приходится извращаться.
Пишем редактор карт изображений (html image map) на javascript / html5 / inline SVG
Карты изображений применяются в том случае, когда требуется создать ссылку формы, отличной от прямоугольной. Например, для презентационных сайтов, отображения планов/схем и т.п.
Раньше создавать такие карты было удобно в Adobe ImageReady, но начиная с версии CS3 эта программа больше не поставляется с Фотошопом. На сегодняшний день подобный функционал есть в Adobe Fireworks, но устанавливать эту программу только из-за редактора карт (для работы мне нужен только Фотошоп) — не очень хорошая идея. Существуют и онлайн-редакторы, которые написаны, в основном, с использованием canvas. В них отсутствует возможность редактировать созданные области на карте. Если ошиблись — придется все переделывать. Да и создавать эти области не слишком удобно. Еще одно неудобство заключается в том, что картинку приходится загружать на сервер. В общем, надо писать что-то свое.
Итак, задача:
— написать на javascript редактор, который позволит создавать карты изображений — загружаем картинку, рисуем области, получаем html-код. Если ошиблись — должна быть возможность отредактировать карту. Редактор должен работать в оффлайн-режиме. Обеспечить поддержку только современных браузеров, в том числе Internet Explorer 9.
Здесь отлично подойдет SVG
Для визуального отображения нарисованных областей карты вместо canvas отлично подойдет svg. Изменение размеров и координат создаваемой или редактируемой области можно будет отслеживать, меняя атрибуты у соответствующих svg-элементов. Чтобы использовать возможности DOM, необходимо встроить сам элемент svg на страницу (не через img, object см. UPD, embed).
UPD Для svg, внедренного на страницу через object, тоже можно работать с DOM, но это чуть менее удобно.
Типы областей
Для карт изображений существует 3 возможных типа областей — прямоугольник, круг и многоугольник. Аналогами этих форм в svg являются элементы rect, circle, polygon (на стадии рисования polyline):
Прямоугольник
Многоугольник
Для каждой области необходимы также вспомогательные точки — хелперы (маленькие прямоугольники 5×5) — для указания ключевых узлов области и возможности по точкам эту область редактировать.
Для прямоугольника это будет 9 точек — 4 в вершинах, 4 в середине каждой стороны и одна в центре. Для круга — 5 (одна в центре и 4 на окружности). Для многоугольника — по числу вершин.
Чтобы потом было проще удалять область вместе с хелперами, объединим их в группы — в svg-элементе
Для хелперов также укажем свойство cursor в зависимости от класса (в режиме редактирования это будет являться подсказкой, какой тип редактирования будет применяться при нажатии на данный хелпер).
Интерфейс
Многие идеи я позаимствовала у векторного редактора Inkscape, в котором часто рисую. Кстати, Inkscape использует формат SVG для сохранения изображений, да и Adobe Illustrator тоже умеет сохранять рисунок в SVG.
Что получилось в итоге
Хоткеи:
F1 — отобразить справку
Загрузка изображения:
F5 — перезагрузить страницу и вновь отобразить форму для загрузки изображения
Режим рисования (прямоугольник, круг, многоугольник)
ENTER — завершить рисование многоугольника (или клик по первому хелперу)
ESC — отменить создание новой области
SHIFT — рисовать квадрат в случае прямоугольника или линию под прямым углом в случае многоугольника
Создаем интерактивную карту
Сначала создаем структуру каталогов и файлов как на рисунке ниже:
Raphael (raphael.js)
Raphael использует SVG W3C и VML как основу для создания графики. Каждый графический объект создается как объект DOM и, таким образом, к нему можно присоединить обработчик события или модифицировать в процессе обработки страницы.
paths.js
В данном файле хранятся траектории SVG paths и названия каждой страны.
index.html
Сделаем разметку HTML.
Создаем траекторию из SVG файла (paths.js)
Таким образом, SVG является XML файлом, а, следовательно, мы можем редактировать его в текстовом редакторе.
Для карты используется SVG файл с изображением Европы. Вы может использовать свое векторное изображение (если взять что-то другое, кроме карты, то может получиться очень интересная интерактивная графика). Конвертировать векторное изображение в формат SVG можно с помощью Adobe Illustrator или Inkspace.
Открываем paths.js и создаем новый объект с именем paths.
Затем открываем карту SVG и видим XML код. К счастью, нам нужно только одно значение, которое называется d. Посмотрите на следующее изображение.
Скопируем контур первой страны. В нашем SVG файле это будет Исландия, копируем значение d и создаем новый параметр iceland в объект paths.
И далее действуем аналогичным образом для создания контуров других стран.
Создаем карту (init.js)
Теперь напишем скрипт, который будет выводить карту на экран.
Создадим обработчик события hover.
Теперь добавим обработку события click.
..и обработку события click для кнопки закрытия:
В итоге файл init.js будет выглядеть следующим образом:
default.css
Готово!
Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: playground.mobily.pl/tutorials/building-an-interactive-map-with-raphael.html
Перевел: Сергей Фастунов
Урок создан: 28 Февраля 2011
Просмотров: 148333
Правила перепечатки
5 последних уроков рубрики «jQuery»
Анимация набора текста на jQuery
Сегодня мы бы хотели вам рассказать о библиотеке TypeIt — бесплатном jQuery плагине. С её помощью можно имитировать набор текста. Если всё настроить правильно, то можно добиться очень реалистичного эффекта.
Временная шкала на jQuery
jQuery плагин для создания временной шкалы.
Заметка: Перезагрузка и редирект на JavaScript
Быстрая заметка, где вы сможете найти парочку JS сниппетов для перезагрузки и перенаправления пользователей через JavaScript.
Рисуем диаграмму Ганта
jQuery плагин для создания диаграммы Ганта.
AJAX и PHP: загрузка файла
Пример того как осуществить загрузку файла через PHP и jQuery ajax.
Как сделать интерактивную карту на сайт, без сторонних библиотек. SVG + HTML + CSS + jQuery
В этом видео я показываю, как быстро и просто сделать интерактивную SVG-карту, которая часто используется на сайтах торговых комплексов, на сайтах по продаже квартир и т. д.
На Ютубе зашло, судя по комментам и лайкам (ничего не накручено). Может и тут кому полезно будет.
Дубликаты не найдены
Лига фрилансеров
1.2K постов 15.1K подписчиков
Правила сообщества
Не забывайте поддерживать авторов плюсами!
— Добавлять нетематические посты, последнее решение за модератором
— Рекламировать какую-либо продукцию в виде постов
— Делится любыми интересными историями, связанными с фрилансом 🙂
Делал недавно интерактивную карту в той же связке, но без использования встраиваемых изображений. В векторном редакторе делается svg c необходимым контуром разделенным на слои (к примеру как в видео контур коровы), затем в html вставляется через тег object и через js обрабатываем как угодно. Хоть hover-ы вешай, хоть стили меняй. Если интересно могу подробней рассказать.
Мне интересно, расскажи пжлст. Подписываюсь на тебя.
не в плане пост сделать, а просто на почту написать)
может и Вы видос запилите, что бы мы могли созерцать? Мне лично, было бы интересно
Не, я из лл, так что пока не выйдет.
Можно и так, просто изображение дает больше визуала. Оно может быть красочным и привлекательным. Как например и делают в недвижимости. На фото дома накладывают области подъездов или этажей с возможностью выбора. И пользователь делает выбор основываясь на фотографии или рендере района/дома.
@Insp1, Автор, напишите мне пожалуйста на email: mit5x@yandex.ru У меня есть платная задача по SVG плану микрорайона. Нужно сделать ещё пару домов на плане интерактивными
Делал подобное только для ЖК, пиши расскажу что да как shushpka38@yandex.ru
Ну, сама карта действительно сделана без сторонних библиотек.
Коммент из разряда докопаться.
jQuery там лишь для вывода попап-окна. Обрабатывайте событие как хотите, при наведении на элемент, хоть на чистом JS, хоть на CSS.
Сама карта реализуется без библиотек вроде Raphaël, Snap.svg и т. д.
На Ютубе зашло, судя по комментам и лайкам (ничего не накручено). Может и тут кому полезно будет.
98 лайков за месяц это зашло? Да и комменты сомнительные. Плюс реклама университета, не попадает ли она под запрет сообщества?
leaflet.js чем не угодил? Тоже самое только в пару кликов.
Про преподавание
Мне всегда везло с педагогами. Достаточно сказать, что физиологию мне преподавал человек с именем Адольф, про адскую жестокость которого ходили байки на весь СГМУ. Ну из, типа, «На 5 знает бог, на 4 я, а ты на пересдачу»
В этот раз мне достался человек с именем Игорь, но мне почти год казалось, что Адольф. Хотя вопреки расхожему мнению html и css языками программирования не являются, я был не в силах постичь азы устройства верстки в том ключе, который от меня требовался.
В каждом его кодревью/проверке домашки, я видел мета-сообщения типа «Иисусе, еще один быдлокодер. Щас выучит пару трюков и начнет пилить ролики на ютуб».
И это оказалось проблемой не только моей. Весь наш братский чат крыл такое обучение отборными запрещенными нынче в интернетах словами. Вся аргументация великомученных свидетелей кодревью Игоря в 17й строке была достаточно логична. Мы заплатили практически стоимость ершика на винзаводе, а нас заставляют гуглить!
Но я добрался до финала и защитил диплом. Ну как, тоже, защитил, во-первых я не знаю никого, кто бы этого не сдюжил, а во-вторых диалог был примерно такой:
— А кто у вас куратор?
— Работа сделана практически идеально.
Когда я взял свое первое задание на фрилансе, я был спокоен, от части потому что его стоимость была 200р, но в основном потому что я знал, что и где нужно смотреть и как мыслить. У меня был метод, с боями вложенный мне в голову Игорем.
Я знаю, что написал ужасный код, внутренний Игорь мне сказал об этом, но домашку приняли отписываясь восторгами. В итоге, я написал в учебный отдел, с просьбой вернуть мне Игоря незамедлительно! Потому что я хочу страдать! Выстрадывать каждую строку и функцию хочу! А не кататься на розовом пони, засирая информационные просторы веба. Миру точно не нужен еще один быдлокодер. Я хочу быть нормальным джуном, адекватным и понимающим.
Но Игорь перестал заниматься студентами.
Ответ на пост «Вакансия»
Напомнило мне историю, произошедшую несколько лет назад, когда я искала работу JS джуном. В резюме я указала, что владею vanilla JS, имела тогда в виду, что никаких фреймворков не знаю. Внезапно позвонила HR из какой-то гос. организации, уже не помню откуда. Общаемся, задаём друг другу вопросы.
Тут она внезапно говорит: «О! Вы владеете vanilla JS? Очень хорошо, это очень мощный фреймворк.» Я тогда на несколько секунд зависла, испугавшись, что реально есть такой фреймворк (а кто ж их знает, они каждый день выходят новые), а не то что я имела в виду.
Потом, когда пришла домой, я решила всё таки загуглить, чтобы в случае чего убрать из резюме эту строчку. Но гугл выдал первым результатом статью на Хабре (на тот момент, по крайней мере, это был топ результат):
Сама статья на хабре является юмором (отсылка к тому, что сам по себе javascript неплох). Фух, всё в резюме нормально! Но на тот момент меня очень повеселило то, что HR прямо во время нашего разговора гуглила по порядку незнакомые ей слова, пытаясь быть «в теме» того, что у кандидата написано в резюме 🙂
Вакансия
“JavaScript, так же, для краткости, называемый Java. ”
Нам тут страничку с формой отправки на почту надо.
Пролистывая посты в горячем, наткнулся на пост про мы сначала посмотрим работу, а потом поговорим про оплату. Вспоминая в комментариях некоторые смешные моменты и неадекватных клиентов, в голове всплыла другая не менее интересная история.
На дворе был конец две тысячи четырнадцатого года. Декабрь выдался на редкость снежным и болезненным из-за простуд, а также налетевшей апатии ко всему существующему. Мне в мессенджер пишет человек, с которым мы когда-то вместе работали.
— У нас тут есть простая задачка на тысячу рублей. Надо создать страничку с формой записи и отправки на почту. Сделаешь?
Мне скидывают некое подобие ТЗ, я вспоминаю HTML, создаю шаблон для этого, обработчик на PHP делаю. Всё замечательно работает. Скидываю, чтобы посмотрели. И тут начинается замечательный квест!
Заказчики оказались довольными результатами, но надо сделать, чтобы человек не просто отправлял форму, а мог выбрать время для записи. Через час прилетает ещё требование о том, что надо сделать так, что два человека не могли выбрать одно и то же время и это надо отслеживать.
На следующий день просят сделать, чтобы помимо отправки формы со временем и отслеживанием, была возможность администрировать эти записи прямо внутри. Причём можно было добавлять новые данные для отправки формы. Календарь, с возможностью редактирования расписания. Одна страничка говорите?
Меня уже подхватил азарт: JQuery, JS обработчики, сторонние библиотеки. Рутина сменилась азартом вкупе со стрессом. Работу сделал так как надо. Успели к сроку. Залил к ним на хост. Честно сказал, что это совсем не тысяча рублей с них, а больше на порядок.
В назначенный день эта страница стала доступна для записи и. хост за 150 рублей, на котором крутился их сайт, упал под ДДОС из желающих записаться в первый час. Посмеялись над этим. Да и как-то забыл. У меня была основная работа, апатия ко всему, в том числе и к деньгам (работа-то кормила). Забил на это. Через неделю пишет: давай номер карты. Высылаю деньги.
Да, заплатили на порядок больше. Моя работа понравилась. Предлагали ещё переделать их сайт, добавив интерактивности, но с WordPress мне работать не сильно хотелось.
Мораль сей басни: если работаете со знакомыми или друзьями, то хотя бы на листе бумаги фиксируйте всё, что нужно сделать за те деньги, которые озвучили, чтобы полтора часа работы не превратились в неделю разработки и отладки за ту же сумму.
ЗЫ: желающих сделать свой фейсбук или амазон за 5 тысяч рублей меньше не становится, к сожалению.
Риск передачи коронавируса
Перевод, надеюсь, не требуется?
О работе на toptal
По просьбе из предыдущего поста напишу немного о том, как начать работать на зарубежных заказчиков. Буду рад, если кто-то поделится своим опытом в комментах.
Не буду описывать весь опыт, расскажу только непосредственно про Toptal. Топтал это не биржа в обычном понимании, типа фл.ru или upwork. Это бодишоп, что значит, что работать вы будет непосредственно на Toptal LLC, который будут перечислять вам деньги, получаемые от клиента. Это и плюс и минус. Плюс в том, что нет проблем с получением денег от клиентов, нет всех этих согласований, обоснований и так далее. Минус в том, что в среднем топтал выставляет клиенту x2 вашего рейта. То есть вы получили 5к, клиент заплатил 10к. Вот на эти «2%» топтал и живет.
Теперь про то, как туда попасть.
Чтобы начать работать, вам необходимо пройти отбор, состоящий из четырех шагов:
1. Простое собеседование на тест вашего английского
2. Решение алгоритмических задач по типу тех, что на codewars
3. Тоже самое, что и второй шаг, но уже в живую со скринером, который будет наблюдать за процессом решения
Подробнее про шаги
Тестовое собеседование предназначено для того, чтобы проверить насколько свободно вы говорите по-английски, насколько вы способны поддерживать диалог и для того, чтобы порекламировать, как классно у них работать.
Если вы прошли первый шаг (а завалить его можно, если у вас плохой английский), то вам на почту приходит ссылка на 3 задачи, минимум 2 их которых вам нужно решить за 90 минут. Это не просто, но возможно. Потренируйтесь перед этим шагом, порешайте задачи на codewars. Мне трудно оценить их сложность, но три задачи я не успел решить, решил только две.
Мои рекомендации перед этим шагом:
— решайте задачи на codewars
— узнавайте больше про алгоритмы, стандартные приёмы и типовые задачи (могу посоветовать курс на юдеми: JavaScript Algorithms and Data Structures Masterclass)
— подготовьте ручку и бумажку, чтобы можно было просто и быстро порисовать алгоритм и решения или какие-то иные вещи
Если вы успешно прошли второй шаг, вас повторение этого же шага, но уже со скринером —человеком, который будет наблюдать за процессом и иногда спрашивать вас о том, что вы делаете) Такое парное программирование, но второй человек просто оценивает то, что вы делаете. Вам нужно будет решить две задачи. В дополнение к предыдущим рекомендациям я бы посоветовал обязательно проговаривать свои мысли вслух — во-первых, это всегда положительно влияет на скринера — это веселее чем просто смотреть за молчаливо пыхтящем человеком, который то пишет, то стирает какие-то непонятные строки кода. А во-вторых, следя за вашей логикой скринер может подсказать что-то или как-то вас скорректировать. Плюс, понимая, что вы делаете всё правильно, но просто не успеваете по времени, скринер может просто зачесть вам задачу, ведь смысл в проверки способности найти работающее решение, а не в только решении за определённое количество времени.
Ну и обязательно приготовьте бутылку воды — говорить полтора часа да еще и в стрессе очень утомительно.
Если вы пройдете и этот этап, то вас ждёт тестовый проект, заточенный под ваши скиллы. У меня это был бэк+фронт мини-травел системы. Ничего необычного, все инструменты можешь выбирать самостоятельно. Оценивается код, паттерны и завершенность. Здесь наверное странно давать советы, просто следуйте best practice:
1. Грамотно структурируйте файлы проекта (обе его части)
2. Покрывайте код тестами
3. Обрабатывайте ошибки
На этап даётся две недели, у меня ушло порядка 20 часов на бэк и фронт. Тесты я не написал, так-как поленился, что не очень хорошо.
Если вы прошли и этот этап, то вам нужно будет заполнить профиль, определиться с рейтом (ревьюер подскажет вам), сделать профессиональную фотку и всё, вы среди топталеров!
Рейт для разных стран различен, рейты вроде как обсуждать запрещено, но знаю людей с рейтами от 25 до 60$/час.
Дальше вам нужно откликаться на проекты, соглашаться на митинги с клиентами и работать!
Пост получился объемный и я начал понимать, а я уже устал писать, поэтому быстро пройдусь по пунктам, которые хотел упомянуть:
— поиск проекта у меня занимал (я работал на двух разных проектах) менее недели. Обычно 3 дня.
— рейт можно сменить, написав в саппорт в слаке
— деньги приходят дважды в месяц с задержкой в две недели
— вывожу на ИП на патенте (не Москва, поэтому патент стоит 14тр год)
— есть возможность работать фуллтайм (8 часов в рабочие американские дни), парт-тайм(4 часа), по часам
— на фулл-тайме никакой проверки типа мониторинга экрана или чего-то подобного нет
— я устраивался как full-stack, но можно и бэком и фронтом и, говорят, devops
— можно взять отпуск или просто нерабочие дни, но за свой счет
Наверное я еще что-то забыл, но если будет интересно, спрашивайте, постараюсь рассказать.
Прошу прощения, что без картинок и должного оформления, но я думаю, что тем, кому может быть полезен пост, он будет полезен и без них.
Люди изучающие JavaScript
Использую array.sort() чтобы отсортировать этот список
Одно и то же
Типичный клиент
— Не могли бы вы сделать бесконечную прокрутку, а так же добавить к ней постраничный вывод информации?
— Постойте, я не понимаю. Вы хотите бесконечную прокрутку или постраничный вывод?
— Да. Не могли бы вы так же.
(Разработчик бьётся головой о ноутбук)
P.S. А ещё бесконечный скролл неплохо дополняется футером с важными ссылками, которые больше нигде не дублируются.
Веб-разработчики достигнут Нирваны
6. Повторить
Javascript теперь официально rocket science
Интерфейс панели управления сделан на JS и работает в Chromium, а для бекенда используется C/C++ поверх Linux для x86
Типичный день на бирже
Наглядно про веб-технологии
Перевод, думаю, не нужен 🙂
Во все тяжкие: Веб-разработчик с нуля. 1 год
Цель — Senior Frontend Developer.
Работа (настоящее время): Trainee Frontend Developer в компании «Корус Консалтинг СНГ».
Локация: г. Санкт-Петербург.
Привет! Пролетел год, с того самого дня, как я твердо решил освоить профессию инженера-программиста (веб-разработчика). И в этом посте мне не хочется рассказывать в привычной мне манере о том, что я сделал за последний месяц и о трудностях с которыми столкнулся. Вкратце, расскажу об этом в конце поста, а сейчас позволю себе кое-что поведать.
Этот год был интересен для меня не столько программированием, сколько открытием для себя новой плоскости, знакомство с людьми, чье мышление и навыки довольно интересны сами по себе.
Каждый человек рожден для того, чтобы развить в себе способность разбираться за короткий промежуток времени и решить задачу в любой сфере, неважно в какой. В истории, примеров людей, реализовавших эту способность, десятки. Современная жизнь требует от человека решение задач в разных плоскостях, но общество заставляет становиться узкоспециализированным специалистом в одной сфере, абсолютно неспособного ни на что, стоит только его вытянуть за пределы его плоскости влияния. И, как вы понимаете, жизнь со всеми ее ситуациями делает и будет продолжать делать это с каждым. Неважно, программист ты или врач, сантехник или менеджер, тебе обязательно придется столкнуться с реалиями жизни и со сферами, которые тебе не знакомы. Поэтому очень важно научиться быстро разбираться в любой сфере и принимать правильные решения.
В связи с этим, я решил помочь таким же как и я и создал базу тестовых заданий для frontend разработчиков. На данный момент она пополняется исключительно теми заданиями, которые присылали мне. По мере возможности, я буду ее пополнять. Я думаю, еще порядка 15-20 заданий, я в ближайшие дни туда выложу. Так же, приветствую пулреквесты. На гитхабе есть подобный репозиторий, но там очень мало тестовых, и в основном задания от крупных компаний. Но ведь больше как раз маленьких компаний, и было бы хорошо +- понимать, какие тестовые могут быть в этой компании и вообще, какие навыки и знания будут требоваться при работе там, с учетом особенности сферы и т.д. С другой стороны это позволит работодателям не расслабляться и постоянно менять тестовые. Дабы действительно брать на работу только тех, кто решил задачу, а не тех, кто скопировал решение из чужого репозитория или канала на ютубе, а потом будет сидеть и тупить на работе.
Что же касается моего развития, то я публично выкладываю материалы, которые я закончил изучать. Можете смело глядеть и подбирать для себя то, что хотите. У меня вкус хороший, надеюсь.
На этом я хочу сегодня закончить. Развиваемся дальше. Впереди у меня еще месяц стажировки, TypeScript и React. Но об этом в следующем отчете.
Всем профессионального роста и силы. Не забывайте, что мир сам по себе тайна, которую стоит раскрыть для себя. Не капсулируйте весь мир в одной плоскости!