FileZilla не умеет распаковывать архивы на сервере. На помощь приходит php скрип unzipper.php

Скачать копию скрипта с Я.диска: Unzipper version: 0.1.1

Скрипт работает в двух направлениях:

• распаковывает zip архив на сервере
• архивирует файлы сайта на сервере

Как распаковать архив на сервере:

1. Заливаем архив через FTP в нужную папку на сервере
2. В туже папку заливаем файл со скриптом
3. Открываем в браузере (Chrome, opera …) ссылку вида -путь_к_папке-/unzip.php (Например: a-lesh.com.ua/downloads/unzip.php)
4. Из выпадающего списка выбираем нужный архив
5. Нажимаем на клавишу «Unzip Archive»
6. Ждем некоторое время и готово!

Как заархивировать файлы на сервере:

1. Заливаем файл со скриптом
2. Во втором окошке «Archive Zipper» пишем путь к папке которую необходимо заархивировать. Если оставить поле пустым, то заархивируется все содержимое папки в которой лежит скрипт.
3. Скачиваем через FTP полученный архив.

Запись Как распаковать архив на сервере впервые появилась Разработка дизайна сайта, фирменного стиля, логотипов.

Посмотрим на пример ниже:

Как видно шрифт в макете выглядит жирнее из-за чего блоки текста смотрятся сгруппированными.

Сверстанный блок: заголовки новостей сливается с датами, из-за чего все слилось в стену текста.

Почему так получилось? Вероятнее всего при разработке макета вы использовали не оптимальное сглаживание шрифтов.

Какое сглаживание выбрать для макетов сайта в Photoshop

Пойдем самым простым путем и сравним все возможные методы сглаживания в Фотошоп со сверстанной страницей.

Как видно из сравнения, найболее похожий режим — Плавное сглаживание.

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

Запись Сглаживание шрифтов в Фотошоп впервые появилась Разработка дизайна сайта, фирменного стиля, логотипов.

Интерфейс программы следующий:

Кто не знает зачем нужны программы для разработки прототипа сайта, я расскажу ниже.

Часто бывает что заказчик не знает что хочет видеть на сайте. Или думает что знает, и в ТЗ указывает основные блоки, при этом забывая про детали.

Такого заказчика легко определить по  ТЗ на дизайн сайта. Обычно к  ТЗ не прикреплены «скетчи» страниц сайта сделанные хотя бы на обычном листе бумаги и сфотографированные на мобильный телефон. А просто перечислены текстом блоки, что-то похожее на:

• логотип
• номер телефона
• главное меню
• слайдер
• блок новостей
• еще что-то
• футер с кнопкой обратного звонка.

Знайте, даже если вам кажется понятным что хочет заказчик и вы готовы сразу рисовать дизайн, нужно сначала создать прототип сайта.

Я знаю три основных способа нарисовать прототип сайта:

1. Листок бумаги и карандаш. Такой способ подойдет для проектирования простого одностраничного сайта.
2. Использовать онлайн сервис для создания прототипа сайта. Например, gomockingbird.com или mockflow.com. Таких сервисов достаточно много, но недостаток у них один — нужно подключение к интернету.
3. Использовать оффлайн (работает без интернета) программу проектирования сайта. Например Axure или Balsamiq Mockups 3

Проанализировав каждый из способов, я выбрал  Balsamiq Mockups 3. К достоинствам которого отношу:

• быстрое обучеие (у меня ушло до 5 минут)
• простота использования (все кнопки на своих местах)
• низкие системные требования
• малый вес программы (быстро скачал, установил и создал прототип сайта)
• есть способ пользоваться бесплатно
• можно использовать без подключения к интернету

Важно! Программой бесплатно можно пользоваться первые 30 дней. Как бесплатно активировать программу, можно посмотреть здесь:

Скачать лекарство 

Остались вопросы? Оставляй их в комментариях и я обязательно отвечу)

Запись Программа для проектирование интерфейса web сайта впервые появилась Разработка дизайна сайта, фирменного стиля, логотипов.

Иллюстрация взята с сайта knockknock.ru

В этой статье я разберу не только то, что должен веб-дизайнер, но и также то, чего НЕ должен.

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

Перед тем вы познакомитесь со списком ваших будущих обязанностей, я хочу рассказать о самом важном навыке веб-дизайнера, который должен быть у вас, если вы планируете работать на фрилансе. От вас никто этого навыка не будет требовать, но от него сильно будет зависет ваш успех и заработок. Итак…

Каждый веб-дизайнер должен уметь «гуглить»

Это значит что если вы что-то ищите в поисковике, то вам нужно посмотреть не первые 5-10 сайтов, а если потребуется — то все 100-200, потому что рунет сейчас стал копипастной помойкой и найти стоящее очень тяжело. Либо если у вас нет времени — покупайте книги, курсы, обучение.

Что должен уметь и знать веб-дизайнер фрилансер:

1. Вам нужно в совершенстве владеть программой фотошоп.
2. Вы должны уметь:
   • Собирать и структурировать информацию
   • Уметь выделять главное и второстепенное
   • Создавать прототип сайта
   • Уметь не «изобретать велосипед», а моделировать уже успешное
   • Подбирать подходящую цветовую гамму под цели сайта и для целевой аудитории
   • Уметь работать со шрифтами
   • Уметь работать с сетками
   • Уметь пользоваться фотобанками и обрабатывать графику
   • Уметь сделать сайт удобным и привычным для целевой аудитории
3. Уметь рисовать разные типы сайтов (лендинги, сайты-визитки, интернет-магазины, промо-сайты, порталы)
4. Уметь рисовать в стилях flat, material, минимализм, техдизайн
5. Уметь делать адаптивный дизайн сайта

Этого вполне достаточно чтобы вы стали веб-дизайнером хорошим веб-дизайнером и зарабатывали 30-45 000 руб в месяц. через 6-12 месяцев после старта.

Идеальный веб-дизайнер в глазах работодателя

Если вы зайдете на сайты с работой, где публикуются вакансии для веб-дизайнеров и посмотрите что там требуют от вас — вы просто ужаснетесь. От вас будут требовать владеть сразу 2-6 профессиями, владеть 3-10 программами и иметь кучу обязанностей.

Не знаю кем нужно быть чтобы уметь столько и на что надеются работодатели когда вывешивают такие объявления. Вот типичное объявление:

На основе этого примера я бы хотел перейти наверное к более важной составляющий…

Что НЕ должен знать и уметь веб-дизайнер:

• Верстку (html, css и т.д) — тот кто этим занимается называется верстальщик, а не веб-дизайнер.
• Программирование (php, mysql, javascript и т.д.) — этим занимается веб-программист.
• Seo и раскрутка сайта — этим занимается SEO-специалист
• Наполнять сайт. Этим занимается контент-менеджер
• Продвигать сайт в соц.сетях и работать с пабликами. Этим занимаются SMM и SMO специалисты.
• Владеть всеми графическими программами на свете. Это нафиг не нужно веб-дизайнеру. 99% всего можно сделать в фотошопе. Веб-дизайнер, не иллюстратор, не работник полиграфии — ему не нужно знать coreldrow, illustrator или indesign и прочие программы
• программы 3D-моделирования. Этим занимаются 3d-проектировщики, архитекторы, но не веб-дизайнеры
• Маркетинг и конверсия. Этим должны заниматься маркетологи и тестеры.
• Брендинг. Често — не знаю кто этим должен заниматься
• Владение всеми CMS (Worppress, joompa, DLE и т.п) — этим обычно занимаются веб-мастера
  копирайтинг. Статьи писать должен копирайтер, а не веб-дизайнер.
• Рисовать от руки. Веб-дизайнер — это не художник.
• Рисовать на планшете. Этим занимается графический дизайнер.

Это не весь список того что от вас могут требовать в резюме. Если вы нашли что-то, что от вас требуют и этого нет в верхнем списке — то смело относите новое требование к тому что вы НЕ должны.

Если с вам и требуют все это, то пусть и платят за каждую профессию отдельно — в сумме хорошо наберется

Cтатья взята с сайта webdesign2.ru

Запись Что должен уметь веб-дизайнер впервые появилась Разработка дизайна сайта, фирменного стиля, логотипов.

1. *

Символ звездочка в CSS позволяет обратиться ко всем элементам страницы. Чаще всего данный селектор применяют для обнуления всех отступов (margin и padding)

2. #name

Символ решетка — ID селектора. Позволяет добавить правила для элемента с id по имени name.

3. .name

Точка в CSS — это селектор класса. Позволяет добавить правила для элемента с классом по имени name.

4. a b (пробел)

Селектор потомка. Для более точного отбора элементов указывают селектор родителя и через пробел селектор потомка.

5. a

Для выбора всех элементов нужного типа на странице документа используют данный css селектор (например: li, p, div и т.п.).

6. a:visited и a:link

Два данных псевдокласса чаще всего используются для ссылок.
Псевдокласс link — для выбора всех ссылок на которых еще не было клика.
Псевдокласс visited — для выбора всех ссылок на которых был клик.

7. a + b

Знак плюс в CSS используется для выбора первого элемента b которые следуют сразу после элемента a.

8. a > b

Позволяет выбрать прямых потомков элемента a.

9. a ~ b

Знак тильда в CSS используется для выбора всех элементов b которые следуют после элемента a.

10. a [title]

Квадратные скобки в CSS используются для обращения к атрибуту селектора. В данном случае свойства применяться для всех элементов с атрибутом title.

11. a [href=»text»]

Придает стиль всем ссылкам с атрибутом href равным text.

12. a [href*=»text»]

Звездочка используется в CSS для придания стиля всем ссылкам в атрибуте href которых есть text в любом месте.

13. a [href^=»http»]

Символ карат в CSS используют для отбора ссылок атрибут href которых начинается с http.

14. a [href$=».jpg»]

Символ доллара в CSS используют для отбора ссылок атрибут href которых заканчивается на .jpg.

15. a [data-*=»text»]

Выбор всех ссылок с атрибутом вида data-имя равным text.

16. a [atribut~=»name»]

Позволяет выбрать атрибуты со значениями разделенными пробелами в состав которых входит name.

17. b:checked

Этот псевдо-класс выберет все элементы b, которые были отмечены (radiobutton или checkbox).

18. b:after

Позволяет сгенерировать контент после элемента b.

19. b:hover

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

20. b:not(#name)

Позволяет выбрать все блоки кроме элементов с id равным name.

21. b:first-letter и b:first-line

Псевдоэлементы для придания стелей первой букве и первой строке.

22. b:nth-child(n)

Позволяет обратиться к конкретному порядковому элементу-потомку. Где n — номер элемента.

23. b:nth-last-child(n)

Позволяет обратиться к конкретному элементу-потомку с конца списка. Где n — номер элемента с конца списка.

24. b:nth-of-type(n)

Позволяет обратиться к конкретному типу элементов по порядковому номеру. Где n — порядковый номер.

25. b:nth-last-of-type(n)

Позволяет обратиться к конкретному типу элементов порядковому номеру с конца списка. Где n — порядок с конца списка.

26. b:first-child

Псевдо-класс который позволяет выбрать первого потомка родительского элемента.

27. b:last-child

Псевдо-класс который позволяет выбрать последнего потомка родительского элемента.

28. b:only-child

Псевдо-класс позволяет выбрать потомка который является единственным у родительского элемента.

29. b:only-of-type

Этот псевдо-класс выбирает элементы, которые не имеют сестринских элементов в содержащем их контейнере.

30. b:first-of-type

Этот псевдо-класс выбирает первого элемента заданного типа.

Запись Таблица CSS-селекторов впервые появилась Разработка дизайна сайта, фирменного стиля, логотипов.

Проект «Центр Сертификации Mail.Ru » расположенный по адресу www.certification.mail.ru. На данный момент доступны следующие наиболее распространенные и популярные среды разработки, языки программирования и технологии: Python, CSS, Java, Perl, PL/SQL, Tarantool, Javascript, PHP5.

Все тесты составлены профессиональными разработчиками и экспертами в своей области.

Проходить тесты очень увлекательно, ведь при высоком результате теста вы получите сертификат от компании Mail.Ru Group. Такое подтверждение ваших знаний и навыков можно использовать в резюме при приеме на работу, размещении на вашем сайте или поделиться с знакомыми в социальных сетях.

Для меня самым интересным показался тест по CSS. На прохождение теста выделяется 3 попытки в месяц по 90 минут каждая. Тест состоит из 45 вопросов. Для получения сертификата достаточно правильно ответить на 30 вопросов.

В результате теста мне удалось ответить на 82 балла из 100. Я получил Сертификат который доступен в личном кабинете, по QR коду и ссылке.

Вывод: проект оформлен в современном плоском дизайне, не перегружен лишней информацией. К сожалению выбор тестов небольшой. Хотелось бы видеть тесты по Adobe Photoshop, Corel Draw, ОС Windows …

Всем советую данный сервис. В комментариях напишите на какое количество баллов Вам удалось пройти тест.

Запись Сертификат Mail.Ru подтверждающий мои знания CSS впервые появилась Разработка дизайна сайта, фирменного стиля, логотипов.

• Минимальный размер сайта на весь экран (монитор, дисплей);
• Футер не залазит на область меню или основную область контента (применение распорки);
• Применение блока clear для предотвращения обтекания плавающих элементов (float).

На рисунке представлена схема получаемого блочного каркаса:

Каркас состоит из следующих блоков (div):

• wrapper — оболочка или обертка основной части контента. Включает в себя следующие блоки:
  • Header — блок шапки сайта;
  • Sidebar — блок левого меню и информеров;
  • Content — блок области основного контента;
  • Clear — блок заставляет видеть и учитывать плавающие элементы
  • Rasporka — блок необходим для предотвращения перекрытия контента блоком footer
• Footer — подвал сайта.

Более детальную информацию вы сможете получить из видео:

//www.youtube.com/watch?v=LFlAovIEeU8

Копия видео: http://youtu.be/54BnCTFwBlE

Запись Верстка каркаса для сайта впервые появилась Разработка дизайна сайта, фирменного стиля, логотипов.