Я обещал рассказать, как интегрировать блог от Google на свой сайт, в продолжение этому посту добавлю, что в свойстве category объекта feed переменной data содержатся ярлыки, таким образом можно улучшить навигацию по блогу, разбив его на соответствующие категории . Прошу заметить, что URL источника данных у нас не касается блога, а по сути Feed'а (RSS). Итак, в результате запроса у нас имеются следующие данные (в качестве примера приведу свой блог): { "version": "1.0", "encoding": "UTF-8", "feed": { ... "category": [{ "term": "Веб-разработка" }, { "term": "Инструментарий" }], ... } Как видно, в "category" хранятся все наши ярлыки. Теперь достаточно создать контейнер для наших ярлыков (не забыв назначить для него ID для удобства использования), и «залить» туда наши ярлыки, притом сделав их сс

Сегодня я бы хотел поговорить об инструментарии веб-дизайнера, что туда входит, какие инструменты присутствуют в Сети, как их использовать, и по возможности при этом сэкономить. Итак, во вкусностях представлен редактор кода Atom . В свое время я перепробывал множество редакторов, как стандарта WYSIWYG (What you see is what you get) наподобии Adobe® Dreamweaver™, так и "чистых" редакторов наподобии Sublime Text®. Чем меня привлек Atom – во-первых, он бесплатен, поддерживает множество синтаксисов, а кроме того расширяем из собственного репозитория. Чуть больше об этой чудесной программе. Как видно из скриншота, Atom представляет из себя полноценный IDE (Interactive Development Environment – интерактивная среда разработки). Сразу же оговорюсь, что на скриншоте Atom уже со множеством дополнений и сктном в стиле Material Design (уж простите мне такую мою слабость :)). Итак, слева – дерево каталогов удаленного сервера(!). Да, благодаря дополнению Remote-FTP Atom может соединя

До этого я описал как встроить посты из сервиса Google® Blogger™ на свой сайт. Однако столкнулся при этом с одной дилемой, а именно – мне потребовалось разграничить посты по рубиркам, отделить посты по веб-диайну, скажем от постов по 3D графике (которых пока нет, но это детали :) ) . Так вот, нашлось решение и для этой задачи, итак, приступим. Впрочем, забегая вперед, могу сказать, что для этого варианта размещения постов Blogger™ нам даже не потребуется Blogger API Key. Более того, возможно в дальнейшем я расскажу как интегрировать комментарии. Итак, приступим. Мы помним, что для отображения данных на странице нам нужны 3 компонента: источник данных, собственно сами данные, а также обработчик, который будет форматировать эти данные и встраивать их на страницу. Между тем, функцию разделов может выполнить такой инструмент, как ярлыки (labels) . URL источника в этом случае будет выглядеть так: http:// /feeds /posts /default /-/ /?max-results= &alt=json. Введя в адресную строку

Не могу пройти мимо такого замечательного и наверняка известного многим профессионалам символьного шрифта, как Font Awesome. Суть в том, что у этого шрифта нет букв в принципе, однако в нем содержатся иконки, необходимые для формирования UI , начиная иконками навигации, заканчивая иконками социальных сетей, в том числе российских (таких как ВКонтакте, Одноклассники и иже с ними), кроме того есть иконки таких профильных соц-сетей, как Behance и LinkedIn. Также содержатся иконки различных технологий – jQuery, HTML, CSS… Доступен шрифт как для локального использования, так и для использования в рамках сайта. Более того, он содержит анимированные(!) иконки (так называемые спиннеры), которые прекрасно подойдут для иллюстрации загрузки страницы, обработки данных или выполнения длительных действий (математические расчеты, рендер, поиск по огромным базам данных и т.д.)

В процессе создания сайта столкнулся с тем, что необходимо было создать иконку для сайта. Казалось бы, чего проще, создал иконку в PNG, конвертнул в ICO и радуйся… Но когда я наткнулся на этот сервис  я увидел, что процесс много интереснее). Мало того, что сервис поддерживает SVG (то есть потери качества практически минимальные), так он еще создает отдельные иконки для Android, iOS и Windows, иными словами полный комплект иконок для сайта. Впрочем, не только для сайта, если посмотреть возможности сервиса, то думаю, что он также подойдет для создания иконок мобильных приложений, как нативных, так и гибридных. Кроме того, в процессе генерации иконка настраивается, ее цвет, размеры, и так далее. Интересная особенность в том, можно выбрать отдельные иконки для разных операционных систем, и все это сопровождается предпросмотром в режиме реального времени. Так что рекомендую)). С момента нахождения этот сервис в моем инструментарии

Так получилось, что я не стал использовать CMS на своем сайте ввиду отсутствия явной необходимости, а кроме того, поскольку предпочитаю не использовать WYSIWYG редакторы, мне проще и понятней использовать Atom (представлен во вкусностях ). Однако, мой сайт имеет собственный дизайн, кроме того, для того, чтобы фоновая музыка не прерывалась во время перехода из страницы на страницу я переходы реализовал с помощью технологии AJAX. Как именно я это сделал, я расскажу в отдельном посте. Итак, идеальным решением в данной ситуации является комбинация AJAX+JSON. К счастью, платформа Google Blogger  располагает API для получения нужной информации в формате JSON. Опять же, учитывая то, что создавать записи я буду непосредственно в Bogger, у меня нет необходимости использовать весь спектр функциональных возможностей Blogger API через OAuth2. Итак, приступим. Прежде всего нам необходим ключ API. Для этого создаем его из консоли API Google  (необходима учетная запись Google). Там находим ссылку

Итак, свершилось! Мой сайт сегодня увидит свет. Это был долгий путь от эскизов до нарезанного шаблона, от идеи до воплощения, от мечты к осуществлению оной. Четыре раздела, четыре стихии, четыре направления моей деятельности. Кодовое имя сайта – на4ало). Я постарался вложить в этот сайт все свои навыки, постарался украсить Сеть интересным, красивым сайтом. Насколько это у меня получилось – судить Вам, мои дорогие читатели! И у меня небольшой подарок для Вас) – щелкните по сундучку в нижней части сайта). Спасибо за Ваш интерес!