Задать вопрос
Mihailenko_SG

Сергей Михайленко

Наверное, самый спрашивающий пользователь
Лайки

  • В каком разрешении рисовать макет на Retina?

    Aleksei_Segodin
    @Aleksei_Segodin
    арт директор / дизайнер
    Короткий ответ:
    не рисуйте в Фотошопе — рисуйте в Adobe XD. И все вопросы про dpi отпадут сами по себе.

    Более развёрнутый ответ:
    как правильно заметил GreatRash, dpi не имеет значения. Главное — кол-во пикселей. Да и то, с такими динамичными интерфейсами и адаптивными сайтами которые востребованы сегодня даже пиксели "сдают позиции" и делят место с %.

    Если отвечать на вопрос, то верстать нужно в том разрешении (в пикселях), которое показывает браузер. Например, если с обычными компьютерами все ясно: ширина экрана 1280px, значит и рисовать нужно в 1280. То с телефонами уже все не так очевидно. Например, физический размер экрана iPhone 6: 750x1334px. Но браузер на телефоне показывает сайт так как будто бы там вдвое меньше пикселей: 375x667px. То есть, если вы в макете нарисуете блок шириной 187px, то он займёт половину экрана на iPhone 6.
    Есть отличный сайт, который показывает размеры экранов самых популярных мобильных устройств:
    • их фактические размеры (первые две колонки)
    • и размеры, которые "понимает" браузер (3 и 4 колонки — это то, что вам надо).


    Почему Adobe XD? Потому что, зуб даю, через пару лет Adobe скажет:
    — Ребята, мы убираем из Фотошопа все фишки, которые раньше помогали вам делать дизайн сайтов. Верстайте их теперь в XD. А мы оставим фотошоп для фотографов и иллюстраторов.

    Дело в том, что Adobe XD — это их новая разработка для прототипирования (дизайна) сайтов. И разработка этой программы идёт полным ходом. Пока-что доступна только под Мак (к концу года будет Windows версия). В программе есть очень "вкусные" фишки, которые ускоряют работу в десятки раз. Посмотрите хотя бы эту GIF-ку ниже. А ещё сама программа очень быстро работает.

    xd-grid-animation-375x500.gif

    Есть еще Sketch. Он тоже создан специально для дизайна сайтов и только под Мак.
    Сначала может быть трудновато привыкнуть к дизайну без Фотошопа, но оно того стоит, поверьте.

    Философия:
    Что такое дизайн сайта? И зачем думать про разрешение? И зачем вообще мы их рисуем?
    После того как сайт сделан и проект закрыт, все PSD макеты дизайнера отправляются в архив и лежат там мертвым грузом десятки лет пока вы их не удалите. Рисунки никому не нужны — нужен сам сайт. А рисуем мы их для того, чтобы легче представить себе и показать верстальщику как сайт должен смотреться. То есть, если бы мы могли телепатически обьяснить верстальщику что и как должно выглядеть, то никто бы не занимался этой "ерундой" в Фотошопе. И это основная задача дизайнера: придумать как сайт должен выглядеть, анимироваться и взаимодействовать с юзером и передать это дальше в производство.

    И тут ваша идеальная работа, как дизайнера, должна выглядеть так:
    1. Вы рисуете страницу так как она должна выглядеть и выносите в отдельный документ (или слой) все размеры всех блоков, отступов, хедеров, футеров и пр. У вас должно получиться что-то вроде "чертежа" сайта с вашими комментариями;
    2. Затем, в отдельное место выносите дизайны всех кнопок, полей для ввода текста, стили заголовков, аккордеонов, вкладок и всего остального что есть на вашем сайте;
    3. Отдельно подготавливаете контент: текст и картинки. При этом желательно, чтобы картинки были сразу продублированы в нескольких размерах (в случае с адаптивными сайтами).
    4. Все иконки — тоже отдельно. Векторные, в формате SVG, плюс PNG — для подстраховки при вёрстке.

    Затем собираете это все в один портфель и несёте верстальщику. Он скажет вам большое спасибо и назовёт лучшим дизайнером в мире.

    Для примера, касательно пункта 1, посмотрите как я обычно оформляю ТЗ для верстальщика. Это только две страницы из 20-ти.

    01b4d706294b4363a976980638344a8c.png9a0bf90210c4469682e82cc1413c9843.png

    А эта работа, которую вы проделали — это не "дополнительный" труд. Это то как обычно выглядит хороший дизайн-процесс. Особенно, в больших студиях. Таким образом вы избавитесь от кучи мелких ошибок со стороны разработчиков и от необходимости разжёвывать все мелочи отвечая на их "глупые" вопросы.
    Ответ написан
    9 комментариев
    9 комментариев

  • Верстать веб по макетам в Ai — это нормально?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Присоединюсь к мнению, что фотошоп и psd для верстальщика лучше

    тут пишут
    верстальщику забирать стили из ai файла удобнее, не придется прибегать к конвертированию онлайн

    существует adobe extract, который есть в фотошопе, и в brackets (и там, по личным наблюдениям, ускоряет работу в разы)

    весь мир, включая Индию, давно верстают с вектора

    ну тут тонкий вопрос: логотип или иконки в векторе - это обычно хорошо, фотографии - плохо, кнопки - зачем? В 99% случаев достаточно возможностей css для их стилизации. Получается, что вектор - только для иконок, которые дизайнер (хороший) все равно дает отдельно в виде спрайта.

    верстак должен адаптироваться под условия

    верстальщик должен адаптироваться под тенденции в мире разработки, должен понимать что и как должно работать в разных браузерах (привет ie), на телефоне, на планшете, на телевизоре, должен разбираться в оптимизации происходящего для поисковых систем и людей с ограниченными возможностями (на которых многие забивают, к сожалению), зачастую должен еще писать какие-то скрипты, как для внешнего вида, так и для логики работы сайта, не менее часто должен придумывать за дизайнера как должны работать анимации, и вы хотите, чтобы он еще и хорошо знал несколько графических редакторов? В таком случае он должен запросить зарплату в несколько раз больше, чем у дизайнера
    Ответ написан
    Комментировать
    Комментировать

  • Как научится верстать из PSD макетов в html+css?

    cjbars
    @cjbars
    @djay Если вы неплохо знаете HTML5, CSS3 и JavaScript, то наверняка понимаете, что у сайтов есть:
    - каркас или сетка
    - повторяющиеся части ( хедер, футер, сайд бар.... и т.п.)
    - элементы которые могут быть сделаны без медиафайлов(картинок, видео, flash)
    - медиа элементы
    - формы.

    Так вот сперва разделите макет на эти части.
    Сверстайте каркас.
    Затем разделите части на элементы, и начинайте верстать каждый элемент.

    Со временем вы будете видеть вместо белого квадрата черной обводкой нечто вроде этого:

    <div class="black-square">Текст в черном квадрате</div>


    .black-square
{
width: 100px;
height: 100 px;
background-color: white;
border: 1px solid black;
}

    Волшебной кнопки - "Сохранить как сверстанный макет" увы в Photoshop нет.
    Ответ написан
    3 комментария
    3 комментария

  • Гугл не забанит если я скопирую их сайт?

    webinar
    @webinar Куратор тега Веб-разработка
    Учим yii: https://youtu.be/-WRMlGHLgRg
    А за что? Перевод - это самый лучший контент, после самописного. Но лучше копировать без верстки. Сделайте на подобие, с переводными текстами. Очень хорошая идея. Если и не получит супер посещаемости, то спасибо скажут многие точно. У меня нет проблем с чтением на английском, но у многих есть.
    Однако довести до ума будет не просто. Я бы выкинул это в opensource.
    Ответ написан
    Комментировать
    Комментировать

  • Концепция прав пользователя сайта, как сделать?

    dimonchik2013
    @dimonchik2013
    non progredi est regredi
    это называется RBAC
    Ответ написан
    Комментировать
    Комментировать

  • Каких тех. специалистов необходимо нанять в стартап для разработки мобильного приложения?

    DmitriyEntelis
    @DmitriyEntelis
    Думаю за деньги
    Вообще стартапы нанимают cto ну или хотя бы грамотного и опытного менеджера в первую очередь.
    Это не обязательно отдельный человек, дефакто это вполне может один из программистов - но в команде обязательно должен быть технически и организационно сильный человек, имеющий полномочия по выбору стека технологий, сроков и прочего. Иначе все скатывается в лютую кашу.

    В общем же случае (если речь идет про нативные приложения), роли в команде такие:

    1. тот кто будет писать тз (product manager)
    2.1 тот кто будет делать дизайн (ux дизайнер)
    2.2 тот кто будет делать графику/иконки (дизайнер-иллюстратор)
    3. разработчик серверной части (язык по вкусу, мейнстрим php/ruby/java )
    4. разработчик мобильной java для приложения под android
    5. разработчик objective c / swift для приложения под ios
    6. тот кто будет тестировать приложения/сервер

    Как это все ложится на живых людей - зависит от их квалификации, сроков и объема задач.
    Ответ написан
    4 комментария
    4 комментария

  • Какая технология (продукт) использована для этого графика?

  • Какая технология (продукт) использована для этого графика?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    D3js

    (вынес в ответ из комментариев) Именно этот график построен на D3 – смотрите исходник фрейма виджета этого графика.

    D3 это библиотека, начиная с 4-й версии – набор отдельных модулей. В самих D3 нет «готовых» графиков, но есть всё для построения любого графика: красиво, с интерактивом и анимациями, загрузкой данных из внешних источников и т.п. Можно, конечно, брать чьи-то примеры графиков на D3 и модифицировать их под свои задачи.

    Стоимость разработки кастомного графика как в примере я бы очень приблизительно оценил в диапазоне от $100 до $1000.
    Ответ написан
    4 комментария
    4 комментария

  • За какое время можно изучить javascript?

    @Itvanya
    Скажу вам так : я уже долгое время занимаюсь фронт-эндом, мы пишем веб-приложения, 2d-3d игры, сайты и так далее. JS был моим следующим языком после Java. И, говоря честно, JS - абсолютно всеобъемлющий язык, который хорошо выучить очень непросто(гораздо сложнее, чем тот же Java). По-началу, смотря на этот код, половина из которого занимается только фиксами кросс-браузерности становится тошно, потом попроще, но ввиду "особой особенности" js и его прототипно-ориентированности, многие просто хотят вырвать себе глаза, что и делают любые программисты, переходящий с c/c++/c#/Java(любой другой более классический язык). Чтобы писать хорошие модули на JS, могут понадобится годы разработки. Объективно, если сидеть по 2-3 часа в день, результативно заниматься, то можно освоить js и самые начальные паттерны за 4-6 месяцев. Изучение Angular - вообще отдельная тема, которую так быстро ты не освоишь. Angular - это вам не убогий jQuery, от которого реально тошнит, Angular - это по сути отдельное изучение JS заново. Вот как-то так.
    Ответ написан
    7 комментариев
    7 комментариев

  • HTML/CSS из превью в Axure. Насколько все плохо?

    nickolyashka
    @nickolyashka
    Axure это интерактивные прототипы в первую очередь, верстка на основе подобных программ будет практически не читабельна. Лучше отдать свой проект на верстку профессионалу, а потом на основе верстки разбираться с кодом, что-то дописывать что-то менять. Поставить себе цель сделать точь в точь, иногда подсматривая, по моему мнению пользы будет больше. Как вариант, найти скелет похожий на твой макет и учится блок за блоком.
    Ответ написан
    4 комментария
    4 комментария

  • Добавить/показать комментарий к посту в блоге на PHP/MySql?

    slo_nik
    @slo_nik Куратор тега PHP
    Добрый вечер.
    Если Вы хотите из таблицы с комментариями получить только те комментарии, которые относятся к данной новости(заметке, посту и т.д.), то и подставляйте в запрос id новости, а не комментария, как Вы делаете.
    Ответ написан
    7 комментариев
    7 комментариев

  • Где брать вдохновение для UX элементов/дизайна?

  • Динамический сайт на nodejs, как сделать?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Грубо говоря, вы используете php в том числе и в качестве шаблонизатора, так? Значит и на node смотрите в эту же сторну, например if условие в jade.
    Ответ написан
    1 комментарий
    1 комментарий

  • Как тестировать верстку?

    alone_lion1987
    @alone_lion1987
    Веб-разработчик
    Статья habrahabr.ru/post/114256

    1. Проверка соответствия макету.
      Допускается расхождение до 5px для текста. Разрешены и даже приветствуются правки размеров и расположения криво нарисованных блоков (разница размерах в 1-2px на разных страницах).
      В качестве инструмента можно использовать Pixel Perfect (см. статью).

    2. Кроссбраузерность. Корректное отображение в браузерах, указанных в задаче на тестирование.
    3. Проверка на всех необходимых разрешениях
      Всегда следует проверять, как страница реагирует на уменьшение масштаба, таким образом, эмулируя просмотр на устройстве с большим экраном.
      Особенно это актуально, если на странице есть фоновая картинка, которая должна быть на всю область экрана. Это позволяет проверить, что она не вставлена с обрубками.

    4. Проверка на всех необходимых устройствах.
      Даже сайты, не адаптированные под мобильное устройство, должны на нем более-менее корректно смотреться. На мобильных устройствах следует проверять хотя бы в двух браузерах.
      Интересный сервис: webmark.com.ua/mobile
      Можно средствами браузера.
      Адаптивная верстка - рекомендую бутстрап, getbootstrap.com

    5. Отсутствие js-ошибок. В консоли браузера не должно выдаваться ошибок.
    6. Валидация html - validator.w3.org/. Наличие предупреждений (Warning) при проверки возможно. Ошибок не должно быть.
    7. Валидация css.
    8. Корректная работа при вбивании реального текста, надёжность вёрстки.
    9. Оптимизация скорости загрузки.
      https://gtmetrix.com/
      https://developers.google.com/speed/pagespeed/insights/

    10. Наличие Win/Mac/Linux-аналогов шрифтов. При использовании нестандартных шрифтов (определить подгрузку таких шрифтов - также в консоли на закладке Network), проверить, что в случае их незагрузки сайт нормально смотрится.
      Как эмулировать их незагрузку? Например, если шрифт грузится с google fonts, закрыть к нему доступ через файл hosts. Сайт будет смотреться иначе, но ничего не должно слишком сильно разваливаться.

    11. Label и input/select должны быть слинкованы
    12. Проверка корректности заполнения форм на JS. В верстке формы должны валидироваться: обязательные поля подсвечиваться, поле email проверяться на корректность и т.п. Поля для ввода телефона должны иметь маску (если телефон, скорее всего, российский), возможно маски на другие поля (дата, время).

    13. Переключение между элементами форм по кнопке tab
    14. Лого на внутренних страницах должно вести на главную страницу (должно быть ссылкой)
    15. Интерактивность соответствующих элементов - реакция на наведение и нажатие
    16. Skype-плагин не должен ломать вёрстку
    17. Ресайз textarea не должен ломать вёрстку
    18. Ссылки на сторонние сайты должны быть с target=”_blank” (открываться в новой вкладке)
    19. Проверка орфографии, в том числе автоматизированными средствами (Word'ом)
    Ответ написан
    1 комментарий
    1 комментарий

  • Как тестировать верстку?

    @soledar10
    html css3 js jquery
    1. Pixel perfect
    2. Валидность кода
    3. PageSpeed Insights
    4. GTmetrix
    5. Pingdom Website Speed Test
    6. Проверка адаптивности
    7. Проверка для Retina (srcset, svg, иконочные шрифты)
    Ответ написан
    3 комментария
    3 комментария

  • Как сделать GPS трекер своими руками?

    NeiroNx
    @NeiroNx
    Программист
    Нужно принимать сигнал GPS и передавать его куда либо, можно предварительно записывать и передавать пачками.

    проще всего в приложении сделать ServiceActivity в котором будет LocationReciver, естественно нужны права на GPS и он должен требовать его включить. Треки лучше всего хранить по датам на sd карте - в популярном формате. Перед сохранением точки - нужно вычислять расстояние между соседними точками и если оно меньше NNметров - то не сохранять. Длину можно пощитать как сумму расстояний между каждыми двумя точками - в цикле.
    Ответ написан
    Комментировать
    Комментировать

  • Как организовать GPS трек?

    Mr_Floppy
    @Mr_Floppy
    2.3.7. ОГРАНИЧЕНИЯ. Используя Сервис, Пользователь не имеет права:
    2.3.7.3. Создавать на основе Сервиса системы мониторинга транспортных средств, отображающих информацию в реальном времени, и любые другие услуги, связанные с управлением и диспетчеризацией транспортных средств.

    https://yandex.ru/legal/maps_api/
    https://tech.yandex.ru/maps/commercial/
    Ответ написан
    2 комментария
    2 комментария

  • Как правильно делать дизайн и верстать под retina дисплей?

    rsvetlitskiy
    @rsvetlitskiy
    UX/UI designer, researcher and almost a developer.
    • Забыть о фиксированных величинах, то есть про px и использовать % по максимуму.
    • Использовать svg вместо png, или увеличивать размер png
    • Применяя media queries определять экраны с высокой плотностью пикселей и заменять изображения на увеличенные в 2 раза. Можно для этих целей применить javaScript, можно заюзать retina.js
    Ответ написан
    3 комментария
    3 комментария

  • Как сделать подгрузку контента Ajax?

    @I_I 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
<script>
$(function(){
$('#button').click(function(){
$.ajax({
	type: "POST",
	url: 'pages/page1.php',
	success: function(data) {
             $('#result').html(data);
	}
});
});
});
</script>


    <div id = "button"> Нажми меня </div> // кнопка
<div id = "result"> Результат </div>
    Ответ написан
    Комментировать
    Комментировать

  • Как писать API?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    Статей хватает, можете конечно написать, но врят-ли что-то-новое выйдет.

    Структуру методов, что и как должно возвращать лучше обсудите с iOS разработчиком, который будет потом имплеменить это дело. Если такого нету — максимально разбейте все на атомарные операции, упростите взаимодействие, прикиньте сами какие методы могут понадобиться (представьте что вы пишете API не для кого-то, а, например, для странички, которая через AJAX все выдерает).

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

    Для авторизации обычно применяют токен-авторизацию. Мол при авторизации пользователю выдается уникальный токен (рандомная строка), который он потом шлет в заголовках каждый раз при обращении к методам API. Это можно сделать как отдельную прослойку.

    Я не видел ни одного RESTfull API для серьезных приложений, тобиш да, оно то REST но не полностью, так что заморачиваться тут не стоит. Достаточно просто обрабатывать какие-то базовые заголовки и GET/POST запросы. GET для выборок — тобиш данные в базе при запросе не меняются, разве что какие счетчики, а POST для создания записей в базе (по феншую результат работы функции должен возвращаться только HTTP заголовки, среди которых есть GET запрос с URI нового объекта, но на практике никто не париться и возвращает весь объект или его часть).

    Можно конечно воспользоваться SOAP апишками, но по опыту скажу что оно годно только при разработке оочень простых API, и толку от него мало. Если клиентом, конечно, будет приложение написанное на C# .NET — тогда смело SOAP и только SOAP, вам по сути разницы в реализации (имеется в виде по времени) минимум, а разработчику клиента будет намного проще. А вот на iOS с SOAP все достаточно печально.
    Ответ написан
    Комментировать
    Комментировать