Post has attachment
Самые популярные браузеры в январе 2017 года


Самый популярный браузер на начало 2017 года - браузер Chrome 57,9%, другими словами, Google контролирует не только поиск в интернете, но и Ваш серфинг. А это помогает заработать им много-много денег. Как по мне это очень удобный браузер с точки зрения пользователя.

Браузер Firefox — 11,8%, не смотря на это, именно им я пользуюсь в работе и только для тестирования готовых версий сайтов использую Chrome. В рамках проекта развивается отдельная ветвь — браузер Firefox Developer, на момент написания статьи доступна v53 alfa 2 программы.
Интересные факты: к 2017 году готовится переход на поддержку дополнений, разработанных с использованием API WebExtensions. Это значит, что все дополнение к Google Chrome будут совместимы с Mazilla FireFox!!!! Скорее всего это один маленький шаг по использованию уже существующих дополнений, которые написаны и протестированы для Chrome, но отсутствующих для FireFox, чтобы удержать некоторую долю рынка.

Браузер Microsoft IE — 19,71% и Microsoft Edge — 5,5%. Скорее всего браузеры от Microsoft будут терять долю рынка, так как многие современные продукты от Google не поддерживают старые IE и Windows XP. К примеру, если Вы пытаетесь открыть почту Gmail и на вашей машине еще установлена Windows XP, сервис настоятельно просит обновить софт.

Safari — 3,47%. Браузер от Apple не популярен, и это не смотря на то, что техника от этой компании очень популярна в США, а за ее пределами ею пользуются люди, работающие на профессиональном уровне в дизайне, разработке и некоторых других сферах. Планшеты, смартфоны от Apple до сих пор бью рекорды продаж, но Safari крайне не популярный браузер???

Opera — 1,29%. Не впечатляет. Это при том, что в компании в наличии целый пакет продуктов: Opera mini, Opera, Opera Neon, Opera Coast, OperaTV.

Источник: cdrinfo и Net Applications
Photo

Post has attachment
One-touch

Шаблон One-touch сверстан на основе одноименного PSD-макета шаблона Landing Pages, который выполнен в стиле минимализм. Он подойдет для предоставления нескольких сходных услуг.

Для меня он интересен потому, что в-первых, первый раз использовал в работе плагины Owl Carousel v2.1.6 – для создания слайдера отзывов и Magnific popup.js v.1.1.0 для создания галереи изображений с прелоудером и всплывающей формы обратной связи с применением индивидуальных опций настроек.

В третьих, используя этот шаблон я приступил к наработке новых навыков для себя, а это:

оптимизация скорости загрузки сайта,
100% валидность кода
посадка на CMS.

Натяжка шаблона на движок или посадка на движок (СMS) – очень для меня интересная тема. Ищу полную по:

Wordpress – так как он очень востребован у заказчиков,
ModX – интересен мне, так как можно делать более гибкие сайты, которые будут меньше грузить сервер, чем это делает самый популярный скрипт для создания всего в интернете,

Jekill – приглядываюсь к нему уже с полгода, но как то все боязно, не могу переступить свой неосознанный страх перед программированием и 100% погружением в командную строку. Но результат очень многообещающий — после освоения инструмента можно делать сайты, которые на обычном хостинге будут держать бешеную нагрузку + имеется нормальная админка — тяжело поддерживать так как это не наши привычные CMS-ки.

Шаблон One-touch состоит из:

фиксированного адаптированного меню + лого
херера с фоном, УТП + кнопки вызова всплывающей формы заказа(анимация)
блока об авторе продукта
перечня услуг, которые предлагает вебмастер через сайт
простого блока потфолио — галереи
слайдера с тестовыми отзывами + фотографиями
формы оправки заявки на почту

Адрес шаблона - https://github.com/frontend-coder/one-touch
Photo

Post has attachment
HTML5 шаблон Yoga studio

К верстке этого HTML шаблона я готовился на протяжении месяца, некоторые блоки для меня оказались новыми и необычными, 2 блока сверстаны впервые: это анимированные числа и галерея работ.

Галерея — довольно интересное решение, его я нашел на codepen, его пришлось адаптировать к своим нуждам и подготовить изображения для галереи. Это заняло время и пришлось приложить усилия. В результате получил очень хорошую адаптивную галерею.

С анимированными числами получилось еще легче: нашел видео урок, снипет на Githab. Все что необходимо сделать было: вставить код и протестировать его работу.

Landing Pages состоит из 14 блоков:

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

После публикации шаблона Yoga studio на GitHab попытаюсь выполнить поисковую оптимизацию шаблона, сервисы для этой работы мне знакомы, осталось увидеть насколько сильно они помогают увеличить скорость загрузки страницы.

Страница загрузки - https://github.com/frontend-coder/Yoga-studio
Photo

Post has attachment

Стартовый шаблон для верстальщика

Эти 3 шаблона собраны для того, чтобы на его быстро приступить к разработке HTML адаптивных шаблонов.

Для облегчения работы уже создана 3 вариантов разметки header:

1 вариант - состоит из фиксированного горизонтального блока, в нем размещены лого-картинка и горизонтальное меню для больших экранов и мобильных устройств. Для активации мобильного меню предусмотрена кнопка-гамбургер.

2 вариант - состоит из фиксированного горизонтального блока, в нем размещены лого-картинка и горизонтальное меню для больших экранов и мобильных устройств. Для активации мобильного меню предусмотрена кнопка-гамбургер. кнопка заказа звонка.

3 вариант — в котором нет лого и меню, все пространство header занимает большое фоновое изображение.

В качестве фона header используется изобращение width = 1920рх

Верстка с помощью препроцессора scss, сборщик - prepros.

В каталоге scss размещены следующие файлы:

var.scss - размещены переменные и миксины
main.scss - файл в который интегрированы все файлы scss, в него вставлять пользовательские стили оформления разметки не рекомендовано, можно инклудить стили с остальных файлов *.scss
madia.scss - для придания полной адаптивности шаблона
header.scss - стили оформления header шаблона, в нем уже размещены стили по умолчания, их рекомендовано отредактировать под верстаемый макет psd
fonts.scss - выполняется привязка индивидуальных шрифтов
allstyle.scss - прописываются все стили блоков оформления шаблона, которые идут по разметке ниже header

Если выполняется верстка сложного макета, разделите файл allstyle на несколько дополнительных, не забудьте их привязать в файле main.scss

Как собрать production- версию шаблонов:

в файле libs.css - вставлены все стили подключенных модулей:

bootstrap сетка 3.3.7
font awesome 4.6.3
magnific popup v1.1.0
owl carousel v2.1.6

Весь код минимизирован и оптимизирован.

Пользовательские стили собраны в файл main.css. Их необходимо минимизировать и вставить в файл libs.css. Удалите строку из файла index.html, которая привязывает файл main.css

Блок подключения скриптов

К стартовому шаблону привязаны такие script-плагины

jquery-2.1.3.js
owl carousel.js
equalHeights.js
nicescroll.js
magnific popup.js
PageScroll2id.js
common.js

При необходимости подключите другие плагины к стартовым шаблонам, разместите их код в соответствующие файлы: libs.css и jquery-2.1.3.js.

Во время сборки были подключены к стартовым шаблоном только самые популярные и необходимые компоненты, которые могут потребоваться для верстки простых и средних по сложности Landing Pages

https://github.com/frontend-coder/start-template-3-blocks-scss

https://github.com/frontend-coder/start-template-2-blocks-scss

https://github.com/frontend-coder/start-template-nomenu-scss

К вниманию пользователей!!! Эти стартовые шаблоны созданы для верстки адаптивных шаблонов.

https://github.com/frontend-coder

Спасибо за внимание к моей работе.
Photo

Post has attachment
Почему и каким образом я перешел на Windows 10

Когда я нашел информацию о новой программе Adobe XD решил перейти на Windows 10, так как она на младшие версии Windows не устанавливается. О десятке слышал давно и много плохого: следит за всеми, не возможно отключить многие функции и все такое, у меня очень слабый по современным меркам компьютер(не хочу запускать windows 10 только ради нее). Ведь мой рабочий компьютер был приобретен потому, что на предыдущей машине XP ужасно тормозила, а необходимые программы отказывались работать.

Заполучил образ Windows 10 64bit.
Записал образ на USB-флешку Kingston DTSE9 8Gb с помощью программы rufus. Она флешку форматировала, тестировала на плохие блоки и записывала образ в течение 2 часов.

Сам процесс установки операционной системы ничем не озадачил, еще меньше участия человека по сравнении с Windows 7. Чтобы как-то настроить работу 10-ку потратил минимум 10 часов: поиск информации на You Tube, отключение ненужных служб, изменение параметров на реестре, поиск драйверов для компьютера поставила в тупик. Компьютер собран на базе Intel core 2 Duo E7300, Asus P5K Pro, nVideo 9600, оперативная память 4 Gb DDR2 800MHz.

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

Auslogics Driver Updater
Driver Easy Professional
IObit Driver Booster

IObit Driver Booster — работала долго, не все драйвера нашел, но установил самые большие: для звуковой и видео карт, некоторые драйвера для материнской платы. После перезагрузки компьютер стал работать заметно медленнее, чем он это делал на штатных драйверах от Майкрософт. Пришлось многое удалять.

Ситуацию исправила программа Driver Easy Professional: она определила большее количество устройств, под которые искала драйвера. Это порадовало. Компьютер заметно ожил.

Auslogics Driver Updater — ничего нового не нашел и не предложил никаких вариантов.

Мои впечатления от работы с Windows 10:

скорость работы приличная, не медленнее, чем работала только что установленная Windows 7. Интересно, что будет через 2-3 месяца?

все программы, которыми я пользовался, установились без проблем. От некоторых отказался в пользу веб-приложений: ToDoist, Toggl, Skype.

пересмотрел свой взгляд на организацию закладок в браузерах: для Google Chrome настроил плагин bookmarks. Тяжелый speed dial удалил.


Advanced SystemCare очень спасает ситуацию, эту программу необходимо протестировать только ради одной опции автоматической очистки оперативной памяти. Она меня выручает уже более года.

Программа Adobe XD

Все эти танцы вокруг Window 10 не помогли мне установить Adobe XD, ради которой все это и затевалось. Зарегистрировался в облаке Adobe, начал установку и она завершилась неудачей. Несколько попыток и перезагрузок системы не дало положительных результатов. Жду обновлений или финальной версии.

Чем же меня заинтересована программа Adobe XD

это инструментарий для создания интерфейсов web-приложений. Из обзоров я понял, что она не только помогает разместить все элементы дизайна на прототипе, но и показать каким образом будет выполняться взаимодействие посетителей сайта. Это ведь здорово: иметь перед собой наглядный пример сайта, на сборку которого потратить несколько часов. А что самое интересное, помогает избежать грубых ошибок в построении интерфейса, не тянуть с собой в проект кучу ненужных кнопочек, менюшек, слайдеров и прочей чепухи.
Photo

Post has attachment

Помогите с выбором монитора для веб — программиста!!!



Все глубже и глубже погружаюсь в дебри программирования и работы с PSD – макетами. В одно не очень прекрасное утро понял, что 22-х дюймового монитора с TN матрицей не хватает. Недостаточно рабочего пространства, критически цветопередачи, из-за чего часто возникают непонимания с заказчиками. Люди видят в макетах ту цветовую гамму и цветовые переходы, которые не вижу я.

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

Вопросы практикующим верстальщикам и Front-end developer:

Ориентируюсь на новые мониторы от Dell. На глаза попались два монитора с новым стандартом сообщения сторон 21 к 9: dell u2913wm и dell u2917wm. Судя по заявленным характеристикам, мониторы относятся к профессиональным девайсам.

Но так ли удобно будет монитор использовать для программирования и работы с макетами? Необходимо использовать дополнительный монитор или все же хватит одного?
Какая видео-карта справится с выводом изображения на экран: несколько текстовых редакторов, браузеры, You Tube, видео-проигрыватели + хорошее качество картинки и её обновление?

У меня мышь Logitech G500s – будет ли корректно она работать с мониторами такого рода?

Играть я перестал с 2012 года и вообще не ориентируюсь в этой индустрии.

Существуют ли аналоги заявленных мониторов от других производителей? Нужны модели только профессиональных мониторов. Я ориентируюсь на долговременное использование приобретенных приборов.
Photo

Post has attachment
GoIT | GoIT Frontend. HTML/CSS + JavaScript (2016)

Недавно я наткнулся на 3 комплексных курсов в режиме вебинаров, которые были выпущены компанией GoIT: GoIT Frontend. HTML/CSS + JavaScript (2016) и Онлайн курсы HTML/CSS + JavaScript (2015). Первый курс был оплаченный спонсорами для внутренних переселенцев в пределах Украины. Меня очень сильно заинтересовало куда именно были потрачены деньги и какой уровень обучающих курсов вышел.

Кроме того, меня больше всего интересует само обучение front-endу: GoIT: GoIT Frontend. HTML/CSS + JavaScript. Курс довольно длинный, разбитый на 4 самостоятельных блоков и прослушать все и принять к сведению очень тяжело, решил по ходу прохождения программы писать отчеты и публиковать их в Facebook.

1 вебинар, длительность 1 час 34 минуты. Вводный:
Организационные вопросы

Что такое проактивность, реактивность, Soft skills – оказывается это не уровень владения программами, а модель поведения, которые ведут к исполнению работы. О рекруторах и какие требования предъявляются к претендентам на какую-то позицию, о формировании команд для разработки одного проекта.

Чат: мусор, через десять минут вообще не обращал на написанное в нем.

Капитан очевидность: 10% времени читать и смотреть обучающие материалы, 20% общаться с более опытными людьми (менторами), 70% - верстать, программировать на результат.

Итог по 1 вебинару: довольно интересно во второй половине вебинара, а вот первую можно вообще не просматривать. Просмотр видео в ускоренном режиме и один раз.

2 вебинар. Длительность 10 минут 30 сек. Как правильно зарегистрироваться и начать работать на GitHub:

Общедоступная информация: как зарегистрироваться в GitHub, что такое репозитории. Докладчик создает репозиторий, о ссылках и куда-то ее воткнуть, создает текстовый файл прямо в интерфейсе сервиса. Вот только зачем это делать?

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

1 блок — Tech Skills – модуль 1 HTML. Как работает интернет? Что такое ffront-end, back-end. Банально.

Photo

Post has attachment
Мое обучение верстке с нуля


Я начал самостоятельное обучение верстки в январе 2016 года, до этого редактировал темы WordPress, делал переводы. Решил выбрать узкую специализацию: верстка шаблонов для одностраничных сайтов.

HTML и CSS: помог сайт webref.ru Здесь нашел справочники по HTML и CSS. Аккуратно законспектировал, сгруппировал, распечатал все свойства, выполнил верстку нескольких десятков простых шаблонов. Целью работы стало освоение на практике базовых навыков верстки.

Где-то в марте начал в работе использовать редактор Sublime Text 3. Переход с Notepad++ был болезненным, ранее на моей страничке в Facebook я опубликовал актуальный перечень плагинов, он регулярно обновляется. Для начинающих верстальщиков, работающих на слабых машинах, он лучший. Brackets у меня очень сильно тормозил. Других вариантов не нашел.

Первые результаты. К концу мая я сверстал первый полноценный HTML5 шаблон Landing Page. Его разместил на моей страничке на Githab. Его верстал на основе бесплатного PSD макета. Он стал первым и последним полностью адаптивным. Чтобы его сделать пришлось потратить много времени и сил. Очень много!!!

Курсы по верстке:

Евгений Попов «Базовый курс по HTML и CSS» - очень многие смеются над курсами, которые выпускает этот инфо-бизнесмен, но для начинающих он один из лучших и понятных.

Master-CSS Вёрстка шаблона Л.Е.В — легкий в освоении курс по верстке, довольно много найдется полезного, если начинаете с нуля.

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

Курсы от Loftblog и loftschool содержат много информации. Базу по web-разработке можно получить после прослушивания вебинаров и отработав практику. А вот с комплексным обучением web разработке дела обстоят не так и просто. Либо придется много самостоятельно работать либо записаться к ним на обучение. Но не могу утверждать ничего и говорить о результатах, так как у них не проходил платный тренинг.

На протяжении полугода я отработал до двух десятков других курсов, но большинство либо шлак либо повторение одного и того же.

Сосредоточился на верстке. На Githab разместил 10 HTML шаблонов, они имеют в основе одну и туже структуру, верстка блоков выполняется по одинаковому принципу, отличается их оформление.

В приватных репозиториях https://bitbucket.org/ размещены 30 шаблонов: стартовые, под снипеты, с использованием новых наработок или очень сырые.

В ноябре начал в верстке использовать Prepros и SCSS. Где-то неделю потратил на освоение синтаксиса отступов SASS и настройку GULP. Но фатальные ошибки в синтаксисе намертво отключали сборщик. Решил пойти путем меньшего сопротивления: GULP заменил на Prepros. Еще через неделю его пришлось полностью переустанавливать постоянных фатальных ошибок Javascript.

Синтаксис отступов через полторы недели начал реально бесить. Сейчас использую связку Prepros + SCSS, она позволяют писать быстрее код, использовать собственные и чужие снипеты.

YouTube: подписан на 70 каналов, которые посвящены верстке и Front-end разработке. По большому счету в работе помог только канал WebDesign Master. Он не для начинающих, но реально полезен, у Алексея очень много полезного. Осенью автор начал размещать видео общего характера. Интересные каналы: loftblog, Master-CSS, Дмитрия Валака, Дмитрия Лаврика, кое-что нашел у Сергея Попова.

90% навыков по верстке получены благодаря каналу WebDesign Master. На первых порах использовал его стартовый шаблон, сейчас работаю над созданием своего стартового шаблона.

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

Сижу над изучением структуры Landing pages, чтобы перейти от копирования чужих страничек и переверстке бесплатных PSD макетов к созданию собственных макетов. Это оказалось довольно тяжело, так как здесь не все так однозначно. Сделал несколько прототипов, собрал перечень обязательных и дополнительных блоков LP. Ориентируюсь на информацию от Егора Щербины, lpgenerator.ru и так далее.

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

Ближайшие цели:

ускорить процесс верстки

отработать базовые навыки работы с самыми необходимыми плагинами Javascript

создать 4 стартовых шаблона под разные цели

приступить к освоению процесса посадки верстки на движок, в выборе мечусь между WordPress и Modx. Приму решение после Нового Года.
Photo

Post has attachment
HTML5 шаблон Dayoh
 
Мой первый HTML-шаблон Dayoh, на котором я тестировал работу создания слайдера комментариев. Это не Бог весть что, многие могут такой слайдер настроить за 10 минут, но именно он помог создать несколько ценных снипетов.

Итак, шаблон сверстан на основе бесплатного PSD-макета Dayoh.
Шаблон состоит из таких секций:

Шапка с местом под текст-призыв к действию, кнопку, которую Вы можете привязать к ссылке на карточку оформления заказа и оплаты
блока преимуществ
блока призыва к действию
блока описания услуги
блока с описанием пакетов
слайдера клиентов с фотографиями
блока с простой формой заказа звонка
подвала с социальным блоком

Страница шаблона —
https://github.com/frontend-coder/Dayoh
Photo

программа для защиты зрения


программу f.lux нашел случайно, о ней упомянул видео-блоггер, на канал которого я подписан. Об этой программке было сказано следующее: «Полезна для людей, которые на протяжении 8 — 10 часов смотрят на монитор и выискивают ошибки»

После установки f.lux необходимо открыть панель настройки и на карте выбрать свою геолокацию. Если Вы проживаете в маленьком городке, сможете найти свою улицу и дом.

После этого программа самостоятельно подстраивает яркость свечения Вашего монитора под временной пояс, в котором проживаете Вы. К примеру, когда я набираю этот текст на часах 17.50, за окном темно, на клавиатуру светит экономная лампочка на 6.5 Вт, монитор стал слегка желтоватым. f.lux показывает температуру 3400К(ночь).
f.lux я пользуюсь 2,5 месяца, не знаю по какому принципу она работает, но результат получен — глаза меньше устают, нет такой тяжести, как было раньше.

Страница программы: https://justgetflux.com/
Wait while more posts are being loaded