вторник, 28 июня 2016 г.

Наследование

Достаточно задать параметры форматирования тега <table> и к ячейкам таблицы <td> они будут применены автоматически. Точно так же можно определить свойства тега <body>, который порождает стиль всех остальных элементов веб-страницы, например цвет шрифта, размер шрифта.

Приоритет стилей выполняется сверху вниз, от подключаемых через тег link, далее стили после тега <style>, далее стили в свойстве тега style="стили", которые имеют самые высокий приоритет. Но если в файле внешних стилей или в теге <style> указать !important, то он перебьет стили в свойстве style="".

Пример: класс button перебивается content span, чтобы было не так, надо поставить !important

.button {color: red;}
.content span {color: blue;}

<div class="content">
  <p>Сколько <span>стоит</span> от того <span class="button">чтобы</span> офигеть</p>
</div>

Перебивается он по причине специфичности, которая определяется по таблице:

tag style=""#ID.classTag

У класса button специфичность 0001, то есть 1. У id селектора специфичность 0100 + специфичность тега 0001 = 101, он перебивает класс. У <style> расположенного в head, такой же приоритет как у подключаемых стилей, чем ниже тем он выше.

понедельник, 27 июня 2016 г.

Sublime text настройка основных функций

На данный момент у меня установлена версия Sublime Text 3 build 3103
Основные моменты которые требуют решения
1. Кодировка
При открытии ANSII (блокнот) и Windiws 1251 выдает кракозябры.
Фикс: Из меню зайти в Preferences -> Settings User и дописать строчку:
"fallback_encoding": "Cyrillic (Windows 1251)",
Преобразование в другие кодировки

Основные движки веб-брайзеров

Google Chrome - веб-браузер разрабатываемый на основе браузера с открытым исходным кодом Chromium на движке Blink. До апреля 2013 года в Chromium использовался WebKit. Первая бета версия браузера Chrome была опубликована для Windows 2 сентября 2008 года и приобрела 1% рынка.
На движке Webkit работают браузеры:
- Chromium, Chrome (до апреля 2013)
- Safary (Основной), iCab (MAC OS)
- iOS, Android
- Amazon Kindle
- Firefox for iOS


На движке Blink (анонсирован весно 2013) работают:
- Google Chrome
- Chromium
- Яндекс.браузер
- Opera 15+

На движке Edge-HTML:
- Microsoft Edge
- Internet Explorer 11

На движке Java platform:
- Opera mini

На движке Trident:
- Internet Exprorer от 4 до 11 версии. 11 версия может быть поставлена в одной из версий Trident или Edge-HTML

На движке Gecko:
- Mozilla Firefox

What is the meaning of Webkit? Что означает Webkit? Что есть смысл Webkit?

Полезные ссылки 1

понедельник, 13 июня 2016 г.

Для быстрого клепания макетов нужно

Чтобы фигачить psd макеты очень быстро - порядка 30 минут, нужно иметь:
1. Готовые тексты к каждой тематике сайта, вариации готовых заголовков
2. Иконки к данной тематике сайта
3. Иконки соц сетей
Все иконки должны быть разрешения 72 пикселей на дюйм, чтобы вставлялись в 100% разрешении без искажений. Если это не так можно изначально всех их прогнать через экшен.
Так же можно использовать дополнение в фотошопе с иконками, перетаскиваешь и дело в шляпе.
4. Готовые картинки соотвествующие тематике
5. Английские шрифты частоиспользуемые и калиграфические.
6. Цветовые схемы
7. Аваторы людей и имена людей
8. Номера телефонов и адреса
9. Картинки карт проезда и маркеры карты

Вот такой набор необходим для быстрого доступа, чтобы делать макеты за 30 минут.
За сутки можно зафигачить 30-40 макетов. Кидаем ссылку на страницу скачивания на различные free агрегаторы и народ заходит на сайт качать макеты. В среднем один макет скачивают 20 тыс раз. Сколько это дает денег от рекламы - вопрос. Можно поставить адсенс и скрипт который просит пожертвовать 1 бакс.

суббота, 11 июня 2016 г.

Частые действия в Photoshop для вебдизайнера

1. 100% Масштаб изображения - Ctrl+1
2. Одна шапка на несколько psd макетов - File - Place liked
Выбираем psd файл для вставки. Все последующие изменения этого вставленного psd файла будут внесены в тех файлах где он использован.
3. Паттерн именований страниц с использованием числа
    
4. Включить прилипание границ вектора к границам пикселей - Edit - Preferences - Tool - Snap vector Tools и т.д.
5. Выход из режима редактирования текста с сохранением изменений по нажатию клавиши ESC - Preferences - Type - Ставим галочку Use ESC key to commit text
6. Как перетащить png в psd? - Нужно чтобы png файл был такого же разрешения как и документ (стандартно 72 px/inch) в который перетаскивается png. Три варианта решения проблемы:
    1) Указать размер клацая мышью на букву W, вводим значение без 'px'. Нажимаем Tab - вводим второе значение height. Разрешение подсматриваем в окне файлового менеджера.
   


    2) Создать экшен с изменением размеров в Image size.
        - Edit - Image size
        - Ставим галку Resample
        - Запоминаем размер документа в пикселях
        - Вводим разрешение например вместо 150 делаем 72 точек на дюйм
        - Размер изображения в пикселях изменился, вводим на его место изначальный размер который мы запомнили. Только в такой последовательности. Картинка может быть размером 128 пикселей но иметь разрешение 2000 пикселей на дюйм. В фотошопе разрешение актуально когда требуется вывести документ на печать и в картинке есть вектор.
    3) Как обработать экшеном сразу все картинки в папке? File - Automate - Batch. Выбираем папку и action, который мы создали (два действия - изменить разрешение, сохранить, закрыть).
7. Как отцентровать текст на кнопке?
Выделяем мышкой два слоя (шейп и текст) с кнопкой shift или ctrl и клацаем по иконкам выравнивания:

8.Другие фишки